/* ============================================================
   Aleida — cinematic hero. Scroll-driven, pinned "film".
   Layers on top of home-palett.css. The hero becomes a tall
   scroll-stage; the visible frame is pinned (sticky) while a
   scroll-scrubbed sequence plays, then releases into the page.
   ============================================================ */

/* The tall runway that gives the pinned scene its scroll length. */
.hero-scroll {
  position: relative;
  height: var(--hero-run, 320vh);
}

/* The pinned frame — reuses .hero styling, just makes it stick. */
.hero-scroll .hero {
  position: sticky;
  top: 0;
  height: 100svh;        /* fixed so it can't grow while pinned */
  min-height: 100svh;
}

/* JS drives these; give them a will-change hint + kill the
   CSS word stagger on the punchline (the scrub owns it). */
.hero-scroll .hero-inner,
.hero-scroll .hero-foot { will-change: transform, opacity; }
.hero-scroll .hero h1 .hl.reveal-word {
  animation: none;
  opacity: 0;            /* assembled by scroll; unhidden for no-JS below */
  transform: translateY(0.5em);
}
.hero-scroll .hero-sub,
.hero-scroll .hero-cta { opacity: 0; }

/* A soft draw-in underline that the scrub reveals beneath "riktig chans." */
.hero-scroll .hero h1 .hl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.04em;
  height: 3px;
  background: var(--straw);
  border-radius: 3px;
  transform: scaleX(var(--hl-line, 0));
  transform-origin: left;
}

/* Tiny finishing flourish: a faint vignette that deepens on exit,
   so the dissolve reads as a camera pulling away. */
.hero-scroll .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 46%, transparent 52%, rgba(26,24,20,0.10) 100%);
  opacity: var(--vignette, 0);
}

/* Keep nav above the pinned vignette/canvas. */
.nav { z-index: 200; }

/* ----- No-JS / reduced-motion safety: show the composed hero ----- */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { height: auto; }
  .hero-scroll .hero { position: relative; height: auto; min-height: 100svh; }
  .hero-scroll .hero h1 .hl.reveal-word,
  .hero-scroll .hero-sub,
  .hero-scroll .hero-cta { opacity: 1; transform: none; }
  .hero-scroll .hero h1 .hl::after { transform: scaleX(1); }
}

@media (max-width: 700px) {
  .hero-scroll { height: var(--hero-run-sm, 260vh); }
}

/* =========================================================
   INTRO — the ALEIDA glyphs assemble into a ring, the ring
   spins for ~1s, then we zoom through its centre into the site.
   ========================================================= */
.intro {
  position: fixed; inset: 0; z-index: 280;
  background: var(--straw);
  overflow: hidden;
  transition: opacity .8s ease;
}
.intro.gone { opacity: 0; pointer-events: none; }

.intro-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(250,247,242,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(250,247,242,.14) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 82%);
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 30%, transparent 82%);
}

/* zoom layer (parent) + spinning ring (child) */
.intro-spin, .intro-ring { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }

.intro-ring .ich,
.intro-ring .ilogo {
  position: absolute; left: 50%; top: 50%;
  font-family: var(--disp); font-weight: 800;
  font-size: clamp(40px, 7.5vw, 104px);
  line-height: 1; color: var(--cream); text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateY(calc(-1 * var(--R, 220px)));
}
.intro-ring .ich > b { display: block; opacity: 0; transform: scale(.3); will-change: transform, opacity; }
.intro-ring .ilogo { height: clamp(52px, 9.5vw, 132px); }
.intro-ring .ilogo svg { display: block; height: 100%; width: auto; fill: var(--cream); opacity: 0; transform: scale(.3); will-change: transform, opacity; }

/* glyph pop-in (delays set inline by JS) */
.intro.run .ich > b,
.intro.run .ilogo svg { animation: glyphPop .85s cubic-bezier(.22,.7,.25,1) both; }

/* ring spin — a single slow, graceful rotation */
.intro.run .intro-ring { animation: ringSpin 2.7s cubic-bezier(.42,.04,.34,1) both; }
@keyframes ringSpin { from { transform: rotate(-14deg); } to { transform: rotate(346deg); } }

/* zoom gently through the centre */
.intro.zoom .intro-spin { animation: ringZoom 1.25s cubic-bezier(.5,0,.32,1) forwards; }
@keyframes ringZoom { from { transform: scale(1); } to { transform: scale(9); } }

@keyframes glyphPop {
  from { opacity: 0; transform: scale(.3); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* =========================================================
   CUSTOM CURSOR — big gamified arrow, springy lag, our color.
   ========================================================= */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 300;
  pointer-events: none; opacity: 0;
  transition: opacity .35s ease;
  will-change: transform;
}
.cursor.on { opacity: 1; }
.cur-arrow {
  position: absolute; left: 0; top: 0;
  width: 30px; height: 33px;
  transform-origin: 14% 12%;        /* tip of the arrow */
  filter: drop-shadow(0 4px 10px rgba(26,24,20,0.30));
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.cur-arrow .fill { fill: var(--straw); transition: fill .2s ease; }
.cur-arrow .edge { fill: none; stroke: var(--cream); stroke-width: 1.6; stroke-linejoin: round; }
.cur-label {
  position: absolute; left: 26px; top: 20px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream); background: var(--ink);
  padding: 4px 9px 3px; border-radius: 999px; white-space: nowrap;
  opacity: 0; transform: translateY(4px) scale(.9); transform-origin: left center;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.8,.2,1);
}
/* hover over interactive elements: arrow grows + brightens, label pops */
.cursor.link .cur-arrow { transform: scale(1.18); }
.cursor.cta .cur-arrow { transform: scale(1.42) rotate(-8deg); }
.cursor.cta .cur-arrow .fill { fill: var(--straw-deep); }
.cursor.cta .cur-label { opacity: 1; transform: translateY(0) scale(1); }
.cursor.press .cur-arrow { transform: scale(.82); }

.film-cursor, .film-cursor * { cursor: none !important; }
@media (hover: none), (pointer: coarse) { .cursor { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .cursor { display: none !important; } }