/* ==========================================================================
   Motion system
   One vocabulary across four behaviours: things open from a line (the
   channel change), a lime needle rides the tick rules, letters are physical
   and respond to whatever is near them, and the ring/axis frame the cicada.
   1. Entrance  2. Living composition  3. Project transitions  4. The flight
   ========================================================================== */

@font-face {
  font-family: "Trickster";
  src: url("fonts/Trickster-Reg.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* The name is set in Trickster (one weight only, so no faux bold) */
.hero__name { font-family: "Trickster", var(--f-display); font-weight: 400; font-size: clamp(64px, 10vw, 172px); line-height: .86; }
@media (max-width: 699px) { .hero__name { font-size: clamp(48px, 16.5vw, 84px); } }
/* Both lines flush left (home.css indents the second line at every size) */
.hero__name > span:not(.sr-only) { margin-left: 0; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.word { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }
/* home.css styles every span in the name as a line; keep that for the two word lines only */
.hero__name .word, .hero__name .ch { display: inline-block; margin-left: 0; }
.hero__name > .sr-only + span { margin-left: 0; }

/* ---------- 1. Entrance: held hidden until motion.js takes over (with a failsafe) ---------- */
html.entrance .hero__cicada,
html.entrance .hero__top,
html.entrance .hero__name,
html.entrance .hero__role,
html.entrance .deck,
html.entrance .hero__strip,
html.entrance nav[aria-label="Primary"],
html.entrance #mobileBar { opacity: 0; animation: entrance-failsafe .4s ease 2.8s forwards; }
@keyframes entrance-failsafe { to { opacity: 1; } }
.hero__name.is-entering > span { clip-path: inset(-40% -100vw 0 -100vw); } /* letters rise out of their baseline */

/* Hero build: the name, panel and buttons are put together as in a design tool —
   a cursor drags out frames (with handles and a live size tag) and text is typed in. */
.bt-hide { visibility: hidden !important; }
.bt-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 210; pointer-events: none; }
.bt-frame { position: absolute; border: 1px solid var(--accent); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); transition: opacity .25s ease; }
.bt-frame.is-out { opacity: 0; }
.bt-frame i { position: absolute; width: 7px; height: 7px; background: var(--bg); border: 1px solid var(--accent); }
.bt-frame i:nth-child(1) { left: -4px; top: -4px; }
.bt-frame i:nth-child(2) { right: -4px; top: -4px; }
.bt-frame i:nth-child(3) { left: -4px; bottom: -4px; }
.bt-frame i:nth-child(4) { right: -4px; bottom: -4px; }
.bt-size {
  position: absolute; left: 50%; top: 100%; margin-top: 7px; transform: translateX(-50%);
  padding: 3px 6px; border-radius: 2px; white-space: nowrap;
  background: var(--accent); color: var(--on-accent); font: 700 10px/1 'Space Mono', monospace; letter-spacing: .04em;
}
.bt-cursor { position: absolute; left: 0; top: 0; transition: opacity .3s ease; }
.bt-cursor.is-out { opacity: 0; }
.bt-cursor svg { display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.bt-cursor path { fill: var(--accent); stroke: #0B0B0B; stroke-width: 1.2; stroke-linejoin: round; }
.bt-tag {
  position: absolute; left: 14px; top: 19px; padding: 3px 7px; white-space: nowrap;
  border-radius: 2px 8px 8px 8px; background: var(--accent); color: var(--on-accent);
  font: 700 10px/1 'Space Mono', monospace; letter-spacing: .04em;
}
.bt-caret { position: absolute; width: 2px; background: var(--accent); animation: bt-blink .8s steps(1) infinite; }

/* The cicada arrives as a dragged file: a thumbnail under the cursor, a drop zone, then it lands. */
.bt-cursor.is-dragging::after {
  content: "+"; position: absolute; left: -9px; top: 14px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font: 700 12px/14px 'Space Mono', monospace; text-align: center;
  box-shadow: 0 0 0 1px #0B0B0B;
}
.bt-file { position: absolute; left: 6px; top: 40px; display: grid; gap: 6px; justify-items: start; transform: rotate(-4deg); }
.bt-thumb {
  position: relative; overflow: hidden; background: #000;
  border: 1px solid var(--accent); box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .8);
}
.bt-thumb img { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%); filter: var(--cicada-filter); }
.bt-thumb.is-portrait img { width: var(--th); height: var(--tw); transform: translate(-50%, -50%) rotate(90deg); }
.bt-file__name {
  padding: 3px 6px; border: 1px solid var(--line); background: rgba(11, 11, 11, .85); color: #F2F0E9;
  font: 400 10px/1 'Space Mono', monospace; letter-spacing: .04em; white-space: nowrap;
}
.bt-zone {
  position: absolute; border: 1.5px dashed var(--accent); border-radius: 6px;
  background: rgba(var(--accent-rgb), .04); opacity: 0; transition: opacity .25s ease;
}
.bt-zone.is-on { opacity: 1; }
.bt-dims { position: absolute; transition: opacity .3s ease; }
.bt-dims.is-out { opacity: 0; }
@keyframes bt-blink { 50% { opacity: 0; } }

/* ---------- 2. Living composition ---------- */
@media (min-width: 700px) {
  .hero__cicada {
    transform: translate3d(var(--fx, 0px), calc(var(--py, 0px) + var(--fy, 0px)), 0) rotate(calc(-7deg + var(--fr, 0deg)));
  }
}
.hero__name { transform: translate3d(var(--nx, 0px), var(--ny, 0px), 0); }
.hero__name .ch { transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0) rotate(var(--cr, 0deg)); transition: color .25s ease, -webkit-text-stroke-color .25s ease; }
.hero__name .ch.is-hollow { color: transparent; -webkit-text-stroke: 1.5px var(--ink); text-shadow: none; }
.deck { transform: perspective(1400px) translate3d(var(--dsx, 0px), var(--dsy, 0px), 0) rotateY(var(--dry, 0deg)) rotateX(var(--drx, 0deg)); transition: opacity .35s ease; }

/* The needle rides the hero's tick rule under the cursor */
.hero__top { position: relative; }
.hero__marker {
  position: absolute; bottom: -3px; left: 0; width: 2px; height: 15px; pointer-events: none;
  background: var(--accent); box-shadow: 0 0 10px 1px rgba(var(--accent-rgb), .6);
  transform: translate3d(var(--mkx, 0px), 0, 0); opacity: var(--mko, 0); transition: opacity .4s ease;
}

/* The cicada sits on layer 0 (not -1, which is painted under <body> and can't be clicked);
   the hero's text layers sit on layer 1 above it. Clicks pass through the empty parts of
   those text boxes to the cicada; everything inside them stays clickable. */
.hero__cicada { z-index: 0; }
.hero > :not(.hero__cicada):not(.cicada-echo) { position: relative; z-index: 1; }
.hero__top, .hero__content, .hero__title { pointer-events: none; }
.hero__top > *, .hero__content > *, .hero__title > * { pointer-events: auto; }

/* ---------- 4. The cicada: a hit target on its body, a cue on hover ---------- */
.cicada-hit {
  position: absolute; left: 29%; top: 50%; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 0; border-radius: 50%; background: transparent; padding: 0; cursor: pointer; pointer-events: auto; z-index: 2;
}
.cicada-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.hero__ring { transition: transform .6s cubic-bezier(.2, .7, .2, 1), scale .45s cubic-bezier(.2, 1.4, .4, 1), border-color .3s ease, opacity .3s ease; }
.cicada-hit:hover ~ .hero__ring, .cicada-hit:focus-visible ~ .hero__ring { scale: .8; border-color: var(--accent); opacity: .95; }

.hero__cicada.is-flying { z-index: 4; -webkit-mask-image: none; mask-image: none; }
.hero__cicada.is-flying img { -webkit-mask-image: none; mask-image: none; }
.hero__cicada.is-flying .hero__veins,
.hero__cicada.is-flying .hero__axis,
.hero__cicada.is-flying .hero__ring,
.hero__cicada.is-flying .hero__credit,
.hero__cicada.is-flying .cicada-hit { opacity: 0 !important; pointer-events: none; transition: opacity .15s ease; }
.cicada-echo { pointer-events: none; z-index: 3 !important; }
html.is-cicada-flying .deck { opacity: .5; }
html.is-cicada-flying .hero__role, html.is-cicada-flying .hero__top { opacity: .35; transition: opacity .3s ease; }

/* Landing: the whole cicada lights up through the vein layer, then fades back */
.hero__cicada.is-landed .hero__veins { opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; transition: none; }
.hero__cicada.is-settling .hero__veins { transition: opacity 1.1s ease; }

/* ---------- 3. Project transitions: a stage shared by all four projects ---------- */
.cases { position: relative; }
.case { position: relative; z-index: 1; }
.stage { display: none; }

@media (min-width: 1100px) {
  .case__ghost { display: none; }          /* the stage numeral replaces the per-case ghosts */
  .stage {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    left: -3%; right: -3%; top: -9%; aspect-ratio: 16 / 8.4;
  }
  .stage__wing {
    position: absolute; inset: 4% 0 0 26%;
    background: url("images/cicada-hero.jpg") no-repeat;
    background-size: 150% auto; background-position: var(--wing-pos, 30% 50%);
    filter: var(--cicada-filter); mix-blend-mode: var(--cicada-blend); opacity: .2;
    -webkit-mask-image: radial-gradient(60% 70% at 60% 50%, #000 20%, transparent 75%);
    mask-image: radial-gradient(60% 70% at 60% 50%, #000 20%, transparent 75%);
    transition: background-position 1.1s cubic-bezier(.2, .8, .2, 1);
  }
  .stage__ring {
    position: absolute; right: 7%; top: 50%; width: 30%; aspect-ratio: 1; margin-top: -15%;
    border: 1px solid var(--axis); border-radius: 50%; opacity: .45;
    transform: rotate(var(--sr, 0deg)); transition: transform 1.1s cubic-bezier(.2, 1.35, .35, 1);
  }
  .stage__ring::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px dashed var(--axis); }
  .stage__ring::after { /* index tick that shows the rotation */
    content: ""; position: absolute; left: 50%; top: -9px; width: 2px; height: 18px; margin-left: -1px;
    background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), .6);
  }
  .stage__axis {
    position: absolute; left: 0; right: 0; top: 50%; height: 9px; margin-top: -4px; opacity: .5;
    background:
      linear-gradient(90deg, transparent, var(--axis) 10%, var(--axis) 90%, transparent) 0 50% / 100% 1px no-repeat,
      repeating-linear-gradient(90deg, var(--axis) 0 1px, transparent 1px 22px) 0 50% / 100% 9px no-repeat;
  }
  .stage__num {
    position: absolute; left: 0; top: 0; height: .8em; overflow: hidden;
    font: 700 clamp(170px, 19vw, 320px)/.8 var(--f-display);
    color: transparent; -webkit-text-stroke: 1px var(--ghost);
  }
  .stage__num span { display: block; }
  .stage__num span + span { position: absolute; left: 0; top: 0; }
  .stage__sweep {
    position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0;
    background: linear-gradient(90deg, transparent, var(--accent) 15%, var(--accent) 85%, transparent);
    box-shadow: 0 0 18px 2px rgba(var(--accent-rgb), .45);
  }
}

/* Outgoing project: the picture collapses to a line, the text lifts away */
.case.is-leaving { position: absolute; left: 0; top: 0; width: 100%; z-index: 2; pointer-events: none; }
.case.is-leaving .tv { animation: power-off .34s cubic-bezier(.6, 0, .8, .4) forwards; }
.case.is-leaving .case__info { animation: info-out .26s ease forwards; }
@keyframes power-off {
  0% { transform: none; filter: none; opacity: 1; }
  55% { transform: scaleY(.02) scaleX(1); filter: brightness(3); opacity: 1; }
  100% { transform: scaleY(.004) scaleX(0); filter: brightness(4); opacity: 0; }
}
@keyframes info-out { to { opacity: 0; transform: translate3d(0, -10px, 0); } }

/* ---------- Phone ---------- */
@media (max-width: 699px) {
  .cicada-hit { left: 50%; top: 26%; width: 36%; }
  .hero__cicada.is-flying { overflow: visible; }
}

/* ---------- Reduced motion: everything rests ---------- */
@media (prefers-reduced-motion: reduce) {
  html.entrance .hero__cicada, html.entrance .hero__top, html.entrance .hero__name, html.entrance .hero__role,
  html.entrance .deck, html.entrance .hero__strip, html.entrance nav[aria-label="Primary"], html.entrance #mobileBar { opacity: 1; }
  .stage__wing, .stage__ring { transition: none; }
}