/* Dr. Wagner Okai · fable2 · two scroll-story heroes (#hero-1 / #hero-2). Loaded after v3.css + heroes.css.
   1 · "Do dente ao corpo inteiro": the camera starts on one molar and pulls back, plate by plate, until the whole
       standing figure is on the page; a red thread follows the overload from the tooth to the knee.
   2 · "A carta celeste": the patient's symptoms are scattered stars; the camera flies until, from one single point of
       view, they line up into a face in profile and every symptom connects to the mouth.
   Both: one sticky stage inside a tall track, scroll = time, no libraries. Reduced motion / no JS = the finished frame. */

.f2h{position:relative;background:var(--paper);padding:0;overflow:visible}
.f2h::after{display:none}
.f2h-track{height:var(--track,250svh);position:relative}
.f2h-stage{position:sticky;top:var(--head);height:calc(100vh - var(--head));height:calc(100svh - var(--head));overflow:hidden;background:var(--paper)}
.f2h-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.f2h-still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:62% 50%;display:none}
/* copy layer: lead column on desktop (the plates leave ivory on the left), bottom band on phones */
.f2h-copy{position:absolute;z-index:3;left:max(20px,calc((100vw - var(--wrap))/2 + 20px));top:50%;transform:translateY(-50%);width:min(44%,560px);opacity:0;visibility:hidden}
.f2h-copy .eyebrow{letter-spacing:.22em;margin-bottom:0}
.f2h-h{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:clamp(2.4rem,4vw,4.2rem);line-height:1.05;letter-spacing:-.015em;margin:16px 0 20px;text-wrap:balance}
.f2h-h .l{display:block}
.f2h-h em{font-style:italic;font-weight:500;color:var(--red)}
.f2h-copy .lead{max-width:38ch;margin:0}
.f2h-copy .btns{margin-top:26px}
.f2h-beat .f2h-h{font-size:clamp(2.2rem,3.8vw,3.9rem)}
.f2h-beat .f2h-n{display:block;font:600 1.55rem/1 var(--script);color:var(--red);margin-bottom:12px;letter-spacing:0}
.f2h-beat .f2h-s{color:var(--ink-2);font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:28em;margin:0}
.f2h-beat .f2h-s + .f2h-s{margin-top:10px}
.f2h-fin .btns{margin-top:22px}
/* a column of paper under the copy so the type never fights the drawing (sibling, not a child of the copy) */
.f2h-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,var(--paper) 0,var(--paper) 26%,rgba(246,242,234,.9) 38%,rgba(246,242,234,0) 56%)}
/* the ruler (hero 1) and the leg counter (hero 2): small instruments, bottom left */
.f2h-ruler{position:absolute;z-index:3;left:max(20px,calc((100vw - var(--wrap))/2 + 20px));bottom:22px;display:flex;align-items:center;gap:14px;color:var(--ink-3);font:600 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:0;transition:opacity .6s}
.f2h-ruler .bar{position:relative;width:120px;height:8px;border-left:1.5px solid var(--ink-3);border-right:1.5px solid var(--ink-3)}
.f2h-ruler .bar::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid var(--ink-3)}
.f2h-ruler .bar i{position:absolute;top:-4px;height:16px;width:0;border-left:1.5px solid var(--red);left:0;transition:left .5s var(--ease)}
.f2h-ruler .stage{font:600 1.35rem/1 var(--script);letter-spacing:0;text-transform:none;color:var(--red);min-width:9ch}
.f2h-ruler .mag{font-variant-numeric:tabular-nums;min-width:5ch}
.f2h-dots{position:absolute;z-index:3;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px}
.f2h-dots span{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink-3);transition:background .4s,border-color .4s,transform .4s}
.f2h-dots span.on{background:var(--red);border-color:var(--red);transform:scale(1.3)}
.f2h-skip{position:absolute;z-index:4;right:22px;bottom:22px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--rule);background:rgba(255,253,248,.9);color:var(--ink);font:600 .95rem/1 var(--sans);text-decoration:none;transition:opacity .5s}
.f2h-skip svg{width:14px;height:14px}
.f2h-seal{position:absolute;z-index:3;width:84px;height:84px;opacity:0;transform:scale(1.9) rotate(-12deg);pointer-events:none;filter:drop-shadow(0 1px 0 rgba(184,58,38,.25))}
.f2h-seal.on{animation:f2stamp .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes f2stamp{0%{opacity:0;transform:scale(1.9) rotate(-12deg)}60%{opacity:1;transform:scale(.94) rotate(2deg)}100%{opacity:1;transform:rotate(-5deg)}}
/* the first-screen entrance (after the signature docks): a slow rise, no pops */
.f2h .rise{transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--d0,480ms) + var(--i,0) * 140ms)}
.js:not(.f2-go) .f2h .rise{opacity:0;transform:translateY(14px);animation:f2safe .8s ease 15s forwards}
@keyframes f2safe{to{opacity:1;transform:none}}
.js:not(.f2-go) .f2h-cv{opacity:0;filter:blur(10px);transform:scale(1.03)}
.f2-go .f2h-cv{transition:opacity 2s cubic-bezier(.16,1,.3,1),filter 2.2s cubic-bezier(.16,1,.3,1),transform 2.6s cubic-bezier(.16,1,.3,1)}

/* ---------- hero 2 extras: symptom words and the cause word live in the DOM, placed by the camera ---------- */
.f2-star{position:absolute;left:0;top:0;z-index:3;margin:0;font:600 1.3rem/1 var(--script);color:var(--ink);text-decoration:none;white-space:nowrap;padding:8px 10px;margin:-8px -10px;border-radius:8px;transform:translate(-50%,-50%);will-change:transform;opacity:0}
.f2-star:hover,.f2-star:focus-visible{color:var(--red)}
.f2-star.far{font-size:1.05rem;color:var(--ink-3)}
.f2-cause{position:absolute;left:0;top:0;z-index:3;margin:0;transform:translate(-50%,-50%);font:italic 600 clamp(1.5rem,2.2vw,2.2rem)/1 var(--serif);color:var(--red);white-space:nowrap;opacity:0;pointer-events:none;letter-spacing:-.02em}
.f2-cause small{display:block;font:600 .72rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3);font-style:normal;margin-bottom:8px;text-align:center}
.f2h-2 .f2h-scrim{background:linear-gradient(90deg,var(--paper) 0,var(--paper) 22%,rgba(246,242,234,.86) 34%,rgba(246,242,234,0) 52%)}
/* Generated copperplate chart; the canvas above it remains the moving 3D world. */
.f2h-2 .f2h-atlas{position:absolute;left:70%;top:52%;width:min(55vw,86vh);height:auto;transform:translate(-50%,-39%);mix-blend-mode:multiply;opacity:.65;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse at 50% 37%,#000 35%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 37%,#000 35%,transparent 72%)}
.f2h-2 .f2h-cv{z-index:1}
.f2h-2 .f2-star{font-size:1.25rem;text-shadow:0 1px 5px var(--paper),0 0 12px var(--paper);background:rgba(246,242,234,.78);min-height:36px;display:flex;align-items:center}
.f2h-2 .f2-star.far{font-size:1.12rem;color:var(--ink-2)}
.f2h-2 .f2-cause{text-shadow:0 0 12px var(--paper),0 0 5px var(--paper)}
.f2h-2.static .f2h-atlas{left:26%;top:48%;width:52%;opacity:.4}
.f2h-2.static .f2h-still{mix-blend-mode:multiply;z-index:1}
@media(max-width:860px){
  .f2h-2 .f2h-atlas{left:50%;top:25%;width:104vw;transform:translate(-50%,-36%);opacity:.68}
  .f2h-2 .f2h-scrim{background:none}
  .f2h-2 .f2-star,.f2h-2 .f2-star.far{font-size:1rem;padding:5px 7px;margin:-5px -7px;min-height:32px}
  .f2h-2.static .f2h-atlas{left:50%;top:18%;width:100%}
  .f2h-2.static .f2h-still{height:min(56vh,460px);width:100%;object-fit:contain}
}

/* ---------- static frame (no JS, reduced motion, very short windows): the finished plate + the finale copy ---------- */
.f2h.static .f2h-track{height:auto}
.f2h.static .f2h-stage{position:relative;height:auto;min-height:calc(100svh - var(--head));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,4vw,64px);max-width:var(--wrap);margin:0 auto;padding:clamp(32px,5vh,64px) 20px;overflow:visible}
.f2h.static .f2h-cv,.f2h.static .f2h-scrim,.f2h.static .f2h-ruler,.f2h.static .f2h-dots,.f2h.static .f2h-skip,.f2h.static .f2-star,.f2h.static .f2-cause,.f2h.static .f2h-seal{display:none}
.f2h.static .f2h-still{display:block;position:relative;inset:auto;height:min(72vh,760px);width:100%;object-position:50% 50%}
.f2h.static .f2h-copy{position:relative;left:auto;right:auto;top:auto;transform:none;width:auto;opacity:1!important;visibility:visible!important;filter:none!important}
.f2h.static .f2h-copy.f2h-beat{display:none}
.f2h.static .f2h-fin{margin-top:28px}
.f2h.static .f2h-fin .f2h-h{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-top:0}
.f2h.static .f2h-fin .f2h-n{display:none}
.f2h.static .f2h-copy .rise{opacity:1;transform:none;transition:none;animation:none}
.f2h.static .f2h-still{opacity:1;filter:none;transform:none}

/* ---------- phones / short windows ---------- */
@media (max-width:860px){
  .f2h-copy{left:16px;right:16px;width:auto;top:auto;bottom:0;transform:none;padding:72px 0 22px;background:linear-gradient(180deg,rgba(246,242,234,0) 0,rgba(246,242,234,.94) 56px,var(--paper) 100%)}
  .f2h-scrim{background:linear-gradient(180deg,rgba(246,242,234,.3) 0,rgba(246,242,234,0) 18%)}
  .f2h-h{font-size:clamp(1.9rem,7.6vw,2.6rem);margin:10px 0 12px}
  .f2h-beat .f2h-h{font-size:clamp(1.8rem,7.2vw,2.5rem)}
  .f2h-copy .lead{font-size:1.02rem;max-width:none}
  .f2h-copy .btns{margin-top:16px;gap:10px;padding-right:0}
  .f2h-copy .btns .btn{flex:1 1 100%}
  .f2h .eyebrow{letter-spacing:.1em;font-size:.66rem;white-space:nowrap}
  .f2h-beat .f2h-s{font-size:1rem}
  .f2h-ruler{left:16px;bottom:auto;top:14px;gap:10px}
  .f2h-ruler .bar{width:64px}
  .f2h-ruler .stage{font-size:1.15rem;min-width:0}
  .f2h-skip{right:12px;top:14px;bottom:auto;min-height:40px;padding:0 14px;font-size:.88rem}
  .f2-star{font-size:1.1rem}
  .f2-star.far{font-size:.92rem}
  .f2h-seal{display:none}
  .f2h.static .f2h-stage{grid-template-columns:minmax(0,1fr)}
  .f2h.static .f2h-still{height:min(52vh,480px)}
}
@media (max-width:860px){.f2h-copy{padding-right:72px}}
.f2h-2.static .f2h-still{height:min(72vh,760px)}
@media(max-width:860px){.f2h-2.static .f2h-still{height:min(56vh,460px)}}
@media (max-width:860px){.f2h.static .f2h-copy{padding-top:0}.f2h-1.static .f2h-still{height:min(26vh,220px)}}
@media (prefers-reduced-motion:reduce){
  .f2h .rise,.f2h-cv{transition:none;animation:none}
  .js:not(.f2-go) .f2h .rise,.js:not(.f2-go) .f2h-cv{opacity:1;transform:none;filter:none}
  .f2h-seal.on{animation:none;opacity:1;transform:rotate(-5deg)}
}

/* Scroll cue: bottom-centre of the first screen; on phones the hero copy leaves room for it under the buttons. */
.f2h-stage .scroll-cue{bottom:18px}
@media (max-width:860px){.f2h-hero{padding-bottom:70px}.f2h-stage .scroll-cue{bottom:8px}}
.f2h.static .scroll-cue{position:fixed;bottom:14px}
@media (max-width:860px){.f2h.static .scroll-cue{display:none}}

/* ---------- site home (2026-10-29): dark theme for "A carta celeste" — the same chart in ivory ink on the night paper ---------- */
html[data-theme="dark"] .f2h-scrim{background:linear-gradient(90deg,var(--paper) 0,var(--paper) 26%,rgba(16,26,43,.9) 38%,rgba(16,26,43,0) 56%)}
html[data-theme="dark"] .f2h-2 .f2h-scrim{background:linear-gradient(90deg,var(--paper) 0,var(--paper) 22%,rgba(16,26,43,.86) 34%,rgba(16,26,43,0) 52%)}
html[data-theme="dark"] .f2h-2 .f2h-atlas{mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg) sepia(.12) brightness(.9)}
html[data-theme="dark"] .f2h-2.static .f2h-still{mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg) sepia(.1) brightness(.92) contrast(1.1)}
html[data-theme="dark"] .f2h-2 .f2-star{background:rgba(16,26,43,.78)}
html[data-theme="dark"] .f2h-skip{background:rgba(27,40,64,.9);color:var(--ink)}
html[data-theme="dark"] .f2h-seal{filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
@media (max-width:860px){
  html[data-theme="dark"] .f2h-copy{background:linear-gradient(180deg,rgba(16,26,43,0) 0,rgba(16,26,43,.94) 56px,var(--paper) 100%)}
  html[data-theme="dark"] .f2h-scrim{background:linear-gradient(180deg,rgba(16,26,43,.3) 0,rgba(16,26,43,0) 18%)}
  html[data-theme="dark"] .f2h-2 .f2h-scrim{background:none}
}
/* keep clear of the floating assistant: on phones the cue sits under the left edge of the buttons (the pill is bottom-right);
   at the end of the story the greeting bubble steps aside so it never covers "a mastigação" */
@media (max-width:860px){.f2h-2 .f2h-stage .scroll-cue{left:4px;transform:none}}
html.f2-finale .wo-greet.on{opacity:0;visibility:hidden;pointer-events:none}