/* ============================================
   HERO v2 — "WE MAKE IDEAS MOVE."
   Live on index.html (approved 2026-09-24). Loaded after hero.css; everything
   is scoped to .hero--v2, so hero.css still holds v1 intact for rollback
   (see backups/hero-v1-2026-09-24/).

   Changes vs v1: heavier/larger headline, italic lime IDEAS with a brush
   swoosh, lime full stop, pillar index in the top-right corner, and a bigger
   crystal pulled toward the copy with a slight clockwise lean.
============================================ */
.hero--v2{
  --crystal-x: 66%;
  --crystal-y: 58%;
  --crystal-w: 68%;
  --crystal-rot: 7deg;
}

.hero--v2 .hero-crystal{
  transform: translate(-51.4%, -52.2%) rotate(var(--crystal-rot));
}
/* backlight + ground light follow the crystal's new spot and size */
.hero--v2 .crystal-backlight{ width: 58%; height: 76%; }
.hero--v2 .ground-glow{ width: 52%; }

/* Deeper shade behind the copy; fades out before the crystal (~46%) */
.hero--v2 .hero-shade{
  background:
    linear-gradient(90deg, rgba(1,1,1,.94) 0%, rgba(1,1,1,.84) 20%, rgba(1,1,1,.58) 33%, rgba(1,1,1,.2) 43%, rgba(1,1,1,0) 50%),
    radial-gradient(120% 90% at 68% 50%, rgba(1,1,1,0) 55%, rgba(1,1,1,.5) 100%),
    linear-gradient(0deg, var(--bg) 0%, rgba(10,10,10,0) 13%);
}

/* Copy column gets a touch more room for the bigger headline */
.hero--v2 .hero-inner{ max-width: min(900px, 54vw); }

.hero--v2 .hero-title{
  font-weight: 900;
  font-size: clamp(3.2rem, 8.2vw, 8.4rem);
  line-height: .9;
  letter-spacing: -0.025em;
  margin-bottom: 38px;
}

/* reveal-line clips its child; give the italic overhang and the swoosh room
   inside the clip box, then cancel the extra space so line spacing holds */
.hero--v2 .reveal-line{ padding-right: .12em; margin-right: -.12em; }
.hero--v2 .line-ideas{ padding-bottom: .2em; margin-bottom: -.1em; }   /* net +.1em: air between swoosh and MOVE */

.hero--v2 .ideas-word{
  position: relative; display: inline-block;
  font-style: italic; font-weight: 900;
  padding-right: .06em;            /* keeps the S's slant off the clip edge */
}
.ideas-swoosh{
  position: absolute; left: -.04em; bottom: -.17em;
  width: calc(100% + .02em); height: .19em;   /* explicit: an <svg> ignores left+right and falls back to 300px */
  fill: var(--accent);
  overflow: visible;
  clip-path: inset(0 100% 0 0);
  animation: ideasSwoosh .9s cubic-bezier(.65,0,.25,1) 1.35s forwards;
}
@keyframes ideasSwoosh{ to{ clip-path: inset(0 0 0 0); } }

/* ---- Pillar index (top-right) ---- */
.hero-index{
  position: absolute; z-index: 20;
  top: 128px;
  right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  font-family: var(--font-display); font-size: .68rem; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase;
  opacity: 0; animation: heroIndexIn .8s ease-out 1.1s forwards;
}
.hero-index a{
  color: rgba(244,244,239,.72);
  margin-right: -.32em;            /* trailing letter-spacing would misalign the right edge */
  transition: color .3s ease;
}
.hero-index a:hover{ color: var(--accent); }
.hero-index-rule{ width: 26px; height: 2px; margin-top: 4px; background: var(--accent); }
@keyframes heroIndexIn{
  from{ opacity: 0; transform: translateY(-8px); }
  to  { opacity: 1; transform: none; }
}

/* ---- Scroll cue (bottom centre, in the dark fade under the crystal) ---- */
.hero-scroll{
  position: absolute; z-index: 20; left: 50%; bottom: 22px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 6px 10px;                 /* larger hit area */
  opacity: 0; animation: heroIndexIn .8s ease-out 1.8s forwards;
  transition: opacity .5s ease, visibility .5s;
}
.hero-scroll-label{
  font-family: var(--font-display); font-size: .6rem; font-weight: 500;
  letter-spacing: .34em; margin-right: -.34em; text-transform: uppercase;
  color: rgba(244,244,239,.62);
  transition: color .3s ease;
}
.hero-scroll:hover .hero-scroll-label{ color: var(--accent); }
.hero-scroll-track{
  position: relative; width: 1px; height: 38px; overflow: hidden;
  background: rgba(244,244,239,.24);
}
.hero-scroll-track::after{
  content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 12px;
  background: var(--accent); box-shadow: 0 0 6px rgba(198,255,62,.8);
  animation: heroScrollPip 2.2s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes heroScrollPip{
  0%  { transform: translateY(-12px); }
  70% { transform: translateY(38px); }
  100%{ transform: translateY(38px); }
}
/* gone once the visitor has started scrolling */
.is-scrolled .hero-scroll{ opacity: 0 !important; visibility: hidden; animation: none; }

/* ============================================
   Responsive
============================================ */
@media (max-width: 1080px){
  .hero--v2{
    --crystal-x: 68%;
    --crystal-w: 58%;
    --crystal-rot: 6deg;
  }
  .hero--v2 .hero-inner{ max-width: min(620px, 58vw); }
  .hero-index{ top: 112px; }
}

@media (max-width: 640px){
  .hero--v2{
    --crystal-x: 60%;
    --crystal-y: 58%;
    --crystal-w: 50%;
    --crystal-rot: 5deg;
  }
  .hero--v2 .hero-inner{ max-width: 100%; }
  .hero--v2 .hero-shade{ background: linear-gradient(0deg, var(--bg) 0%, rgba(10,10,10,0) 10%); }   /* stacked layout: copy sits in empty sky */
  .hero--v2 .hero-title{ font-size: clamp(3rem, 15vw, 4.2rem); margin-bottom: 24px; }
  .hero-index{ display: none; }   /* header menu covers these on phones */
  .hero-scroll{ display: none; }  /* the crystal band owns the bottom; touch users scroll anyway */
}

@media (prefers-reduced-motion: reduce){
  .ideas-swoosh{ animation: none; clip-path: none; }
  .hero-index, .hero-scroll{ animation: none; opacity: 1; }
  .hero-scroll-track::after{ animation: none; transform: translateY(13px); }
}