/* Experience polish: calmer type scale, frame HUD, line reveals and film grain.
   Loaded after experience.css and experience-build.css; remove the link to revert. */

/* ---------- Type scale: smaller, lighter headings with relaxed tracking ---------- */
body.full-journey em{letter-spacing:-.012em}
body.full-journey .eyebrow{font-size:clamp(11px,.58vw,13px);letter-spacing:.17em}
body.px{--hud:clamp(11px,.6vw,14px)}
@media(min-width:701px){
  body.hero-review .intro .scene-copy{top:36%;display:flex;flex-direction:column;align-items:center}
  body.hero-review .intro .scene-copy .eyebrow{order:2;margin:30px 0 0;color:#e4ead6;text-shadow:0 0 14px #010805,0 0 4px #010805}
  body.hero-review .intro h1{font-size:clamp(64px,9vw,168px);line-height:1;letter-spacing:-.03em}
  body.full-journey .timeline-opening h2{font-weight:500;font-size:clamp(44px,4.4vw,68px);line-height:1.02;letter-spacing:-.032em}
  body.full-journey .timeline-opening h2 em{font-size:1.08em}
  body.full-journey .timeline-subline,body.full-journey .story-description{font-size:17px;line-height:1.62}
  body.full-journey .story-card h2{font-weight:500;font-size:clamp(36px,3.45vw,56px);line-height:1.06;letter-spacing:-.03em;margin-bottom:24px}
  body.full-journey .story-card h2 em{font-size:1.1em}
  body.full-journey .story-5 h2{font-size:clamp(34px,3.3vw,52px)}
  body.full-journey .story-5 .story-description{font-size:clamp(28px,2.6vw,42px)}
  body.full-journey .threshold-beat h2{font-size:clamp(32px,3.4vw,52px);letter-spacing:-.025em}
  body.full-journey .threshold-beat em{letter-spacing:-.01em}
  body.full-journey .encounter-beat h2{font-size:clamp(28px,2.75vw,44px);line-height:1.17;letter-spacing:-.024em;max-width:720px}
  body.full-journey .encounter-finale h2,body.full-journey .with-art .encounter-finale h2{font-size:clamp(28px,2.6vw,42px);max-width:640px}
  body.full-journey .story-nav{font-size:11px;letter-spacing:.06em}
  body.full-journey .encounter-caption{font-size:12px;letter-spacing:.04em}
}
@media(max-width:700px){
  body.full-journey .story-card h2,body.full-journey .timeline-opening h2{font-weight:500;letter-spacing:-.03em}
  body.full-journey .threshold-beat h2,body.full-journey .encounter-beat h2{letter-spacing:-.025em}
}

/* ---------- Line reveals ---------- */
.px-line{display:block}
.px .px-reveal .px-ln{opacity:0;transform:translate3d(0,.6em,0);filter:blur(8px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform 1.05s cubic-bezier(.16,.84,.24,1),filter .9s ease;transition-delay:calc(var(--i,0) * 80ms)}
.px .px-reveal.px-in .px-ln{opacity:1;transform:none;filter:none}
.fallback .px-reveal .px-ln{opacity:1!important;transform:none!important;filter:none!important}

/* ---------- Five versions panel (replaces the small outcome line on desktop) ---------- */
.px-versions{position:fixed;left:8%;bottom:calc(var(--exp-vh,1svh) * 11);z-index:11;width:calc(var(--hud) * 27);pointer-events:none;opacity:0;visibility:hidden;font-family:NYC,sans-serif;color:#cfd8c2}
.px-label{display:flex;align-items:center;gap:10px;margin:0 0 15px;font-size:var(--hud);letter-spacing:.17em;text-transform:uppercase;color:#93a68a}
.px-label::before{content:"";width:18px;height:1px;background:currentColor;opacity:.7}
.px-versions ol{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.px-versions li{display:grid;grid-template-columns:9px 24px 1fr;align-items:center;gap:9px;font-size:calc(var(--hud) * 1.18);line-height:1.3;transition:color .6s}
.px-versions i{box-sizing:border-box;width:7px;height:7px;border-radius:50%;background:#a9e565;box-shadow:0 0 10px #a9e56588;transition:background .6s,box-shadow .6s,transform .6s,border-color .6s;border:1px solid transparent}
.px-n{font-size:var(--hud);letter-spacing:.06em;color:#7f9277;font-variant-numeric:tabular-nums}
.px-versions li[data-state=stopping]{color:#f0c591}
.px-versions li[data-state=stopping] i{background:#e59a4c;box-shadow:0 0 14px #e59a4cbb;animation:px-pulse 1.2s ease-in-out infinite}
.px-versions li[data-state=stopped]{color:#7b8875}
.px-versions li[data-state=stopped] i{background:transparent;box-shadow:none;border-color:#6e7d68}
.px-versions li[data-state=going]{color:#eaf7cf}
.px-versions li[data-state=going] i{background:#c4f57e;box-shadow:0 0 16px #c4f57e;transform:scale(1.3)}
.px-note{margin:16px 0 0;font-size:var(--hud);color:#6f8069;letter-spacing:.02em}
@keyframes px-pulse{50%{transform:scale(1.55);box-shadow:0 0 22px #e59a4c}}
@media(min-width:701px){.px .story-metaphor{display:none}}

/* ---------- One line per scroll ---------- */
.px .beat-stack{display:grid}
.px .beat-stack>.beat{grid-area:1/1;margin:0}
.px .beat .px-line{opacity:0;will-change:opacity,transform}
.fallback .beat-stack>.beat{margin:0 0 .5em}.fallback .beat .px-line{opacity:1!important;transform:none!important;filter:none!important}
.px .encounter-finale .encounter-brand{opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .7s ease .25s,transform .9s cubic-bezier(.16,.84,.24,1) .25s}
.px .encounter-finale.px-last .encounter-brand{opacity:1;transform:none;pointer-events:auto}
.fallback .encounter-finale .encounter-brand{opacity:1!important;transform:none!important;pointer-events:auto!important}
/* The beats now carry what these lines used to repeat. */
.px .story-outcome,body.full-journey .encounter-caption,body.full-journey .hero-caption{display:none}

/* ---------- Hand-drawn mark on the fading strand ---------- */
.px-mark{position:fixed;left:0;top:0;z-index:2;pointer-events:none;opacity:0;will-change:transform,opacity}
.px-mark canvas{position:absolute;left:-150px;top:-110px;width:300px;height:220px}
.px-mark-label{position:absolute;left:96px;top:-104px;white-space:nowrap;font-family:NYC,sans-serif;text-shadow:0 1px 14px #010805}
.px-mark-label b{display:block;margin-bottom:4px;font-size:11px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:#f3c08e}
.px-mark-label em{display:block;font-family:Instrument,serif;font-style:italic;font-weight:400;font-size:24px;letter-spacing:-.01em;color:#f6dcc0}
.px-mark-low .px-mark-label{top:62px}
.px-mark-left .px-mark-label{left:auto;right:96px;text-align:right}
@media(max-width:700px){.px-mark canvas{left:-120px;top:-88px;width:240px;height:176px}.px-mark-label{left:72px;top:-86px}.px-mark-label em{font-size:20px}.px-mark-low .px-mark-label{top:48px}.px-mark-left .px-mark-label{right:72px}}

/* The joining line sits just above the cables as they meet. */
body.full-journey .build-world .encounter-join{padding-bottom:calc(var(--exp-vh,1svh) * 36)}
body.full-journey .build-world .encounter-join{flex-direction:column}
body.full-journey .build-world .encounter-join .eyebrow{margin:0 0 22px;color:#b8d98f}

/* ---------- Chamber lines: same size and voice as the story lines ---------- */
.chamber-caption{position:fixed;left:8%;top:calc(var(--exp-vh,1svh) * 22 + 28px);z-index:4;max-width:43vw;pointer-events:none;opacity:0;visibility:hidden;font-family:NYC,sans-serif}
.chamber-caption h2{margin:0;font-weight:500;font-size:clamp(36px,3.45vw,56px);line-height:1.06;letter-spacing:-.03em;color:var(--paper);text-shadow:0 2px 30px #000c}
.chamber-caption h2 em{font-family:Instrument,serif;font-style:italic;font-weight:400;font-size:1.1em;letter-spacing:-.012em;color:#dddab9}
.fallback .chamber-caption{position:relative;left:auto;top:auto;opacity:1!important;visibility:visible!important;margin:0 auto 40px}
@media(max-width:700px){.chamber-caption{left:25px;right:25px;top:159px;max-width:82%}.chamber-caption h2{font-size:clamp(29px,8vw,40px)}}

/* ---------- Chapter scale on the right edge ---------- */
.px-scale{position:fixed;right:30px;top:50%;z-index:11;display:flex;flex-direction:column;align-items:flex-end;gap:14px;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-50%);font-family:NYC,sans-serif;color:#cfd8c2}
.px-scale-head{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.px-scale-num{font-family:NYCNow,sans-serif;font-size:calc(var(--hud) * 2.3);font-weight:300;letter-spacing:-.02em;color:#e8f0dc}
.px-scale-total{font-size:var(--hud);letter-spacing:.1em;color:#7f9277}
.px-scale ol{display:flex;flex-direction:column;align-items:flex-end;gap:7px;margin:0;padding:0;list-style:none}
.px-scale li{width:10px;height:1px;background:#cfe0bd5c;transition:width .55s cubic-bezier(.2,.7,.2,1),background .55s,box-shadow .55s}
.px-scale li.past{background:#cfe0bdaa}
.px-scale li.on{width:28px;background:#b9ef72;box-shadow:0 0 8px #b9ef7288}
.px-scale li.px-gap{margin-top:9px}
.px-scale-name{max-width:calc(var(--hud) * 14);margin:0;font-size:var(--hud);line-height:1.5;letter-spacing:.14em;text-align:right;text-transform:uppercase;color:#a9b99e}

/* ---------- Film grain ---------- */
.px-grain{position:fixed;inset:-8%;z-index:30;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:px-grain .8s steps(4) infinite}
@keyframes px-grain{25%{transform:translate(-2%,1.5%)}50%{transform:translate(1.5%,-2%)}75%{transform:translate(-1%,-1%)}}

@media(max-width:700px){
  .px-versions,.px-scale{display:none}
  /* Soft halo sized in em, so it grows with the text instead of boxing each line. */
  body.full-journey .story-copy,body.full-journey .fading-copy,body.full-journey .timeline-opening .timeline-copy,body.full-journey .encounter-beat:not(.with-art *){text-shadow:0 0 .5em #0108058c,0 .06em 1.3em #01080566}
  body.full-journey .story-card h2,body.full-journey .timeline-opening h2{font-size:clamp(29px,8vw,40px)}
  body.full-journey .encounter-beat h2{font-size:clamp(27px,7.6vw,38px)}
  /* Strand screens of the training: copy sits just above the cables instead of at the top edge. */
  body.full-journey .build-world .encounter-beat:not(.people-copy):not(.mentor-copy):not(.interview-copy):not(.encounter-finale):not(.encounter-join){padding-top:calc(var(--exp-vh,1svh) * 23)}
}
@media(prefers-reduced-motion:reduce){
  .px .px-reveal .px-ln{transform:none;filter:none;transition:opacity .3s}
  .px-grain,.px-versions li[data-state=stopping] i{animation:none}
}