/* ============================================================
   Chapter 4 — motion layer
   kinetic type · marquee · camera cursor · webgl grain
   ============================================================ */

/* ---------- kinetic headline line-masks ---------- */
.hl{display:block;overflow:hidden;padding-bottom:.07em;margin-bottom:-.07em;}
.hl-in{display:inline-block;transform:translateY(118%);transition:transform 1.15s var(--ease);transition-delay:calc(.1s * var(--i,0));will-change:transform;}
.reveal.is-in .hl-in{transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  .hl-in{transform:none !important;transition:none !important;}
}

/* ---------- velocity marquee band ---------- */
.marquee-band{position:relative;background:var(--ink);color:#fff;padding:clamp(44px,8vh,92px) 0;overflow:hidden;border-top:1px solid var(--lined);border-bottom:1px solid var(--lined);}
.mq-track{display:flex;white-space:nowrap;width:max-content;will-change:transform;}
.mq-seg{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:1;font-size:clamp(54px,9vw,150px);color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.38);flex:none;padding-right:.55em;}
.mq-seg b{font-weight:800;color:#fff;-webkit-text-stroke:0;}

/* ---------- camera cursor ---------- */
html.c4cur-on, html.c4cur-on *{cursor:none;}
html.c4cur-on input, html.c4cur-on textarea, html.c4cur-on select, html.c4cur-on iframe{cursor:auto;}
.c4cur{position:fixed;left:0;top:0;z-index:9600;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity .35s;}
.c4cur.on{opacity:1;}
.c4cur-ring{position:absolute;left:-17px;top:-17px;width:34px;height:34px;border:1.4px solid #fff;border-radius:50%;transition:transform .5s var(--ease),border-radius .5s var(--ease),background .35s,border-color .35s;}
.c4cur[data-mode="link"] .c4cur-ring{transform:scale(.55);background:#fff;}
.c4cur[data-mode="play"] .c4cur-ring{transform:scale(2);border-radius:9px;border-color:rgba(255,255,255,.95);}
.c4cur[data-mode="hide"]{opacity:0 !important;}
.c4cur-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.5);font-family:var(--display);font-size:8px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .3s,transform .5s var(--ease);white-space:nowrap;}
.c4cur[data-mode="play"] .c4cur-label{opacity:1;transform:translate(-50%,-50%) scale(1);}
/* crop marks in play mode */
.c4cur-marks{position:absolute;left:-30px;top:-30px;width:60px;height:60px;opacity:0;transition:opacity .35s,transform .5s var(--ease);transform:scale(.7);
  --mkc:rgba(255,255,255,.9);
  background:
   linear-gradient(var(--mkc),var(--mkc)) left top/1.4px 11px no-repeat,
   linear-gradient(var(--mkc),var(--mkc)) left top/11px 1.4px no-repeat,
   linear-gradient(var(--mkc),var(--mkc)) right top/1.4px 11px no-repeat,
   linear-gradient(var(--mkc),var(--mkc)) right top/11px 1.4px no-repeat,
   linear-gradient(var(--mkc),var(--mkc)) left bottom/1.4px 11px no-repeat,
   linear-gradient(var(--mkc),var(--mkc)) left bottom/11px 1.4px no-repeat,
   linear-gradient(var(--mkc),var(--mkc)) right bottom/1.4px 11px no-repeat,
   linear-gradient(var(--mkc),var(--mkc)) right bottom/11px 1.4px no-repeat;}
.c4cur[data-mode="play"] .c4cur-marks{opacity:1;transform:scale(1);}
.c4cur[data-mode="play"] .c4cur-ring{opacity:0;}

/* ---------- webgl film grain ---------- */
#c4grain{position:fixed;inset:0;width:100vw;height:100vh;z-index:9000;pointer-events:none;mix-blend-mode:overlay;}
html.c4gl .grain{display:none;}

/* ---------- velocity-reactive wordmarks ---------- */
.hf-word,.hero__brand{transform-origin:50% 100%;will-change:transform;}