/* Mundo: Julia Cenne. Da madrugada ao dia; uma única cor, o magenta elétrico. */
.world--jc {
  --w-bg: #0A0A0A;
  --w-ink: #FFFFFF;
  --w-accent: #FF2BD6;
  --w-display: "Jost", "Futura", "Avenir Next", sans-serif;
  --w-body: "Jost", "Futura", "Avenir Next", sans-serif;
  --thread: #FF2BD6;
  --marker-bg: #0A0A0A;
}
.jc-night { background: #0A0A0A; color: #FFFFFF; --w-ink: #FFFFFF; }
.jc-day { background: #F7F4EF; color: #1E1E1E; --w-ink: #1E1E1E; }
.world--jc .site-header { color: #FFFFFF; background: linear-gradient(to bottom, rgba(10,10,10,.75), transparent); }
.world--jc .site-header[data-tone="day"] { color: #1E1E1E; background: linear-gradient(to bottom, rgba(247,244,239,.92), transparent); }
.jc-h2 { font-family: var(--w-display); font-weight: 600; font-size: clamp(2.2rem, 5.4vw, 4.8rem); line-height: 1.02; letter-spacing: -.015em; margin: 0 0 24px; max-width: 18ch; text-wrap: balance; }
.jc-h2--small { font-size: clamp(1.6rem, 3.2vw, 2.6rem); margin-top: clamp(64px, 8vw, 110px); }
.jc-lead { font-size: var(--s-1); max-width: 52ch; margin: 0 0 20px; }
.jc-day .w-note, .jc-night .w-note { max-width: 70ch; }

/* Abertura: 03:07, mensagens sem resposta e o pulso */
.jc-opening { position: relative; min-height: 100svh; overflow: hidden; display: grid; align-items: end; padding: 120px var(--gutter) 10vh calc(var(--gutter) + var(--rail)); background: #0A0A0A; color: #fff; isolation: isolate; cursor: crosshair; }
.jc-opening__photo { position: absolute; inset: 0; z-index: -2; }
.jc-opening__photo img { position: absolute; right: 0; top: 0; width: 78%; height: 100%; object-fit: cover; object-position: 30% 40%; opacity: .78;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 38%), linear-gradient(to top, transparent 0, #000 45%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 38%), linear-gradient(to top, transparent 0, #000 45%); mask-composite: intersect; }
@media (max-width: 760px) { .jc-opening__photo img { width: 100%; height: 62%; object-position: 32% 50%; } }
.jc-pulse { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.jc-messages { list-style: none; margin: 0; padding: 0; position: absolute; right: var(--gutter); top: 18vh; display: grid; gap: 10px; justify-items: end; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86rem; }
.jc-messages li { display: flex; gap: 12px; align-items: baseline; background: #1E1E1E; border: 1px solid #2c2c2c; border-radius: 14px; padding: 9px 14px; opacity: 0; transform: translateY(8px); animation: jc-message .6s var(--ease) forwards; }
.jc-messages li:nth-child(2) { animation-delay: 1.1s; }
.jc-messages li:nth-child(3) { animation-delay: 2.2s; color: #8A8A8A; background: transparent; }
.jc-messages time { color: #8A8A8A; font-size: .78rem; }
@keyframes jc-message { to { opacity: 1; transform: none; } }
html.reduced-motion .jc-messages li { animation: none; opacity: 1; transform: none; }
.jc-opening__text { position: relative; }
.jc-logo { width: clamp(260px, 44vw, 640px); height: auto; display: block; margin: 0 0 0 -4%; filter: drop-shadow(0 0 22px rgba(255,43,214,.45)); }
.jc-subtitle { font-size: var(--s-1); font-weight: 600; margin: 4px 0 6px; }
.jc-credits { color: #D3D3D3; margin: 0; }
.jc-hint { position: absolute; right: var(--gutter); bottom: 5vh; font-size: .85rem; color: #8A8A8A; margin: 0; }
html.reduced-motion .jc-opening { cursor: auto; }

/* Logline */
.world--jc .w-logline p { font-family: var(--w-display); font-weight: 500; }

/* Da noite para o dia: o sol nasce na parede e revela a sombra de Julia (vídeo guiado pela rolagem) */
.jc-dawn { position: relative; height: 340vh; background: #05070f; }
html.reduced-motion .jc-dawn { height: auto; }
.jc-dawn__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; align-items: center; }
html.reduced-motion .jc-dawn__stage { position: relative; min-height: 100svh; }
.jc-dawn__wall, .jc-dawn__wall img, .jc-dawn__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jc-dawn__video { opacity: 0; transition: opacity .8s var(--ease); }
.jc-dawn.is-film .jc-dawn__video { opacity: 1; }
/* antes de o vídeo chegar, a noite é um véu azul que se desfaz com a rolagem */
.jc-dawn__night { position: absolute; inset: 0; background: linear-gradient(to bottom, #04060e, #0b1230); mix-blend-mode: multiply; opacity: calc(.92 - var(--dawn, 0) * .92); }
.jc-dawn.is-film .jc-dawn__night { opacity: 0; }
.jc-dawn__stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,7,15,.78), rgba(5,7,15,.35) 42%, rgba(5,7,15,0) 62%); }
.jc-dawn__text { position: relative; z-index: 1; padding: 0 var(--gutter) 0 calc(var(--gutter) + var(--rail)); max-width: 760px; }
.jc-dawn .w-subtitles p { font-size: var(--s-1); max-width: 44ch; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
@media (max-aspect-ratio: 4/5) {
  .jc-dawn__stage { align-items: end; padding-bottom: 12vh; }
  .jc-dawn__stage::after { background: linear-gradient(to top, rgba(5,7,15,.85), rgba(5,7,15,.2) 55%, rgba(5,7,15,0)); }
}

/* Carioca em São Paulo */
.jc-cities__grid { display: grid; gap: 14px; margin-top: 40px; grid-template-columns: 1fr; }
.jc-cities__item { position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 10; background: #111; }
.jc-cities__item img, .jc-cities__item .w-ambient { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jc-cities__item img { transition: transform 1.4s var(--ease); }
.jc-cities__item:hover img { transform: scale(1.03); }
.jc-cities__item figcaption { position: absolute; left: 14px; bottom: 12px; z-index: 1; font-family: "Jost", "Futura", sans-serif; font-weight: 500; font-size: .95rem; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.jc-cities__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%); pointer-events: none; }
@media (min-width: 760px) {
  .jc-cities__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: clamp(190px, 21vw, 330px); }
  .jc-cities__item { aspect-ratio: auto; }
  .jc-cities__item--wide { grid-column: span 2; }
}

/* Sem rosto */
.jc-noface__grid { display: grid; gap: 48px; align-items: start; }
@media (min-width: 980px) { .jc-noface__grid { grid-template-columns: 1.3fr 1fr; } }
.jc-objects { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(30,30,30,.25); }
.jc-objects li { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(30,30,30,.25); font-size: var(--s-1); }
.jc-objects__mark { width: 28px; height: 10px; flex: none; background: linear-gradient(transparent 20%, rgba(255,43,214,.75) 20% 85%, transparent 85%); transform: skewX(-12deg); }

/* 31 pulsos */
.jc-tracklist { list-style: none; margin: 40px 0 18px; padding: 0; display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: clamp(3px, .6vw, 9px); height: clamp(180px, 26vw, 300px); align-items: end; }
.jc-tracklist li { position: relative; height: var(--h); border-radius: 3px 3px 0 0; outline-offset: 4px; transition: transform .25s var(--ease), filter .25s; transform-origin: 50% 100%; }
.jc-tracklist li.is-recorded { background: #FF2BD6; box-shadow: 0 0 18px rgba(255,43,214,.55); }
.jc-tracklist li.is-new { background: #D3D3D3; }
.jc-tracklist li.is-album { background: #8A8A8A; }
.jc-tracklist li span { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); white-space: nowrap; font-size: .82rem; background: #FFFFFF; color: #0A0A0A; padding: 6px 10px; border-radius: 6px; display: none; pointer-events: none; z-index: 2; }
.jc-tracklist li:first-child span { left: 0; transform: none; }
.jc-tracklist li:nth-last-child(-n+6) span { left: auto; right: 0; transform: none; }
.jc-tracklist li:hover, .jc-tracklist li:focus-visible, .jc-tracklist li.is-beat { transform: scaleY(1.12); filter: brightness(1.25); }
.jc-tracklist li:hover span, .jc-tracklist li:focus-visible span { display: block; }
@media (max-width: 760px) { .jc-tracklist li span { white-space: normal; width: 60vw; } }
.jc-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: .85rem; color: #D3D3D3; margin: 0; }
.jc-legend span { display: inline-flex; align-items: center; gap: 8px; }
.jc-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 2px; }
.jc-legend__rec { background: #FF2BD6; } .jc-legend__new { background: #D3D3D3; } .jc-legend__alb { background: #8A8A8A; }

/* Circuito de personagens */
.jc-people { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 28px 40px; }
@media (min-width: 900px) { .jc-people { grid-template-columns: repeat(3, 1fr); } }
.jc-people li { border-top: 1px solid #2c2c2c; padding-top: 16px; }
.jc-people svg { width: 120px; height: 24px; display: block; margin-bottom: 12px; overflow: visible; }
.jc-people path { fill: none; stroke: var(--wire); stroke-width: 2.5; stroke-linejoin: round; filter: drop-shadow(0 0 4px var(--wire)); }
.jc-people--thick path { stroke-width: 6; filter: none; }
.jc-people h3 { font-family: var(--w-display); font-weight: 600; font-size: 1.5rem; margin: 0 0 6px; }
.jc-people p { margin: 0; color: #D3D3D3; max-width: 36ch; }

/* Antes da série */
.jc-before p { max-width: 58ch; }

/* A assinatura: a corrente escreve JCN */
.jc-sign { position: relative; height: 220vh; background: #0A0A0A; color: #fff; }
html.reduced-motion .jc-sign { height: auto; }
.jc-sign__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
html.reduced-motion .jc-sign__stage { position: relative; min-height: 100svh; }
.jc-sign__mark { position: relative; width: min(78vw, 900px); margin-top: -22vh; }
.jc-sign__mark img { width: 100%; height: auto; display: block; clip-path: inset(0 calc(100% - var(--sign, 0) * 100%) 0 0); filter: drop-shadow(0 0 calc(3px + var(--sign, 0) * 9px) #FF2BD6) drop-shadow(0 0 1px #FF2BD6); }
.jc-sign__spark { position: absolute; top: 50%; left: calc(var(--sign, 0) * 100%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 16px 6px #FF2BD6, 0 0 60px 18px rgba(255,43,214,.5); opacity: calc(1 - var(--sign, 0) * var(--sign, 0)); }
html.reduced-motion .jc-sign__mark img { clip-path: none; }
html.reduced-motion .jc-sign__spark { display: none; }
.jc-sign__text { position: absolute; left: calc(var(--gutter) + var(--rail)); bottom: 10vh; max-width: 40ch; opacity: var(--phrase-opacity, 0); transition: opacity .4s; }
html.reduced-motion .jc-sign__text { opacity: 1; position: relative; left: auto; bottom: auto; }
.jc-sign__text .jc-h2 { color: #FF2BD6; }
.jc-sign__text p { font-size: var(--s-1); margin: 0; }

/* Próxima obra */
.jc-next__name { display: block; font-family: "Anton", Impact, sans-serif; text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 6rem); line-height: 1; color: #fff; }
.jc-back { margin-top: 24px; }
.jc-day .w-team dt, .jc-day .w-sheet dt { opacity: .7; }