/* ════════════════════════════════════════════════════════════
   CYRON HERO v3  ·  cyron-hero.css   (loaded last)
   Concave 3D image carousel (wraps around the viewer) + centred
   cut-out portrait + left-aligned copy block.

   Geometry mirrors the reference implementation exactly:
     container : perspective 650px, flex-centred, preserve-3d
     panel     : 640x580, left/top 50%,
                 translate(-50%,-50%) rotateY(Ndeg) translateZ(-1440.3px)
     image     : 100%/100%, object-fit cover, radius 23px, draggable=false
   Those values are multiplied by a viewport scale k so it holds up at any
   width; panel size / radius / perspective are set inline by buildHeroArc().

   Typography uses the site's own display font (no extra webfont).
════════════════════════════════════════════════════════════ */

.hero-v2{
  position:relative;
  /* symmetric breathing room: the carousel starts at --hero-pad from the top
     and the CTA ends --hero-pad from the bottom */
  --hero-pad:clamp(56px,7vh,104px);
  min-height:74vh;
  min-height:74dvh;
  padding-top:var(--hero-pad);
  padding-bottom:var(--hero-pad);
  overflow:hidden;
  /* The carousel carries a mask, which promotes it to its own compositing
     layer; on mobile that layer was painting OVER the portrait even though
     the portrait had the higher z-index. Isolating the hero and putting the
     content group in an explicit layer above the arc settles the order for
     good, on every engine. */
  isolation:isolate;
}
.hero-v2 > .hero-arc{z-index:0;}
.hero-v2 > .mv-hero-inner{position:relative;z-index:1;}
.hero-v2 > .mv-hero-foot{position:absolute;z-index:2;}

/* ─────────── concave carousel (sits BEHIND the portrait) ─────────── */
.hero-arc{
  position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;
  width:min(var(--mv-maxw), calc(100% - 2 * var(--mv-pad)));  /* match the content column */
  top:3vh;height:47vh;              /* bottom edge lands on the shoulder line */
  z-index:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  /* perspective is set inline by JS (650px * scale) */
  cursor:grab;touch-action:pan-y;
  -webkit-user-select:none;user-select:none;   /* dragging must not select text */

  -webkit-mask-image:var(--arc-fade-x),var(--arc-fade-y);
  mask-image:var(--arc-fade-x),var(--arc-fade-y);
  -webkit-mask-composite:source-in;mask-composite:intersect;}
.hero-arc.is-dragging{cursor:grabbing;}
.hero-arc-stage{position:relative;width:100%;height:100%;transform-style:preserve-3d;}
.hero-arc-ring{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.hero-arc-panel{
  position:absolute;left:50%;top:50%;
  transform-style:preserve-3d;backface-visibility:hidden;
  overflow:hidden;
  background:#141419;
  /* width / height / transform / border-radius set inline by JS */
}
.hero-arc-panel.is-broken{background:var(--ph-bg,#141419);}
.hero-arc-panel img,.hero-arc-panel video,.hero-arc-panel .arc-ph{
  width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;
}
/* stops the far side of the ring from fighting the foreground */
.hero-arc-panel::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);pointer-events:none;}

/* veil: strong fade on BOTH ends + bottom, melting the carousel into the page.
   Lives OUTSIDE .hero-arc so the 3D panels can never paint over it.
   --bg-t is the page background at zero alpha (avoids grey gradient banding). */
:root{
  --fig-fade:linear-gradient(180deg,#000 0%,#000 44%,rgba(0,0,0,.82) 62%,rgba(0,0,0,.5) 76%,rgba(0,0,0,.2) 88%,transparent 100%);
  --arc-fade-x:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 8%,#000 26%,#000 74%,rgba(0,0,0,.18) 92%,transparent 100%);
  --arc-fade-y:linear-gradient(to bottom,transparent 0%,#000 14%,#000 62%,transparent 100%);
  --bg-t:rgba(6,6,6,0);}
html[data-theme="light"]{--bg-t:rgba(244,244,247,0);}
html[data-theme="immersive"]{--bg-t:rgba(5,6,13,0);}
.hero-arc-veil{display:none;}

/* ─────────── portrait: centred, in FRONT of the carousel ─────────── */
.hero-v2 .mv-hero-inner{position:static;padding:0;margin:0;max-width:none;min-height:0;}

.hero-v2 .mv-figure{
  position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;
  top:1vh;bottom:auto;z-index:2;
  width:min(30vw,480px);height:90vh;aspect-ratio:auto;
}
.hero-v2 .mv-figure::after{content:none;}
.hero-v2 .mv-figure .hero-img{
  width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;background:none;
  /* soft fade so the copy can sit ON the lower half of the portrait */
  -webkit-mask-image:var(--fig-fade);
          mask-image:var(--fig-fade);
}
.hero-v2 .mv-figure .hero-img::after{
  content:"UPLOAD CUT-OUT PHOTO";color:rgba(236,231,222,.22);
  letter-spacing:.28em;font-family:var(--mv-grotesk);font-size:10px;
}
.hero-v2 .mv-figure .hero-img img,.hero-v2 .mv-figure .hero-img video{
  width:100%;height:100%;object-fit:contain;object-position:center top;display:block;
  -webkit-mask-image:var(--fig-fade);
          mask-image:var(--fig-fade);
}
.hero-v2 .gloss{display:none;}

/* ─────────── copy: block centred, text left-aligned (as in the reference) ─────────── */
.hero-copy{
  position:absolute;left:0;right:0;margin-left:auto;margin-right:auto;
  /* Anchored to the BOTTOM, not the top. Anchored at top:48vh the block grew
     downward, so a role that wrapped to two lines pushed the buttons past the
     hero's edge where overflow:hidden clipped them. Bottom-anchoring makes
     extra lines grow upward into the portrait instead, and the buttons keep a
     constant clearance no matter how long the role text is. */
  top:auto;bottom:clamp(52px,7.5vh,104px);z-index:3;
  width:min(700px,90vw);
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
}
.hero-eyebrow{
  font-family:var(--mv-grotesk);font-size:11.5px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:#C7B08B;
  margin-bottom:clamp(10px,1.6vh,18px);
}

/* role words = the big display title, in the SITE font */
.hero-v2 .mv-roles{
  position:relative;z-index:3;align-self:stretch;
  font-family:var(--mv-display);
  font-weight:600;font-size:clamp(30px,4.1vw,60px);line-height:1.04;
  letter-spacing:-.03em;text-transform:none;color:var(--mv-cream);
  max-width:100%;text-align:left;
  /* nudge the cap's optical side-bearing so the title lines up with the
     eyebrow and buttons above/below it */
  margin-left:-.02em;
}
.hero-v2 .mv-roles span{display:inline;opacity:1;}
.hero-v2 .mv-roles span + span::before{
  content:"·";display:inline-block;margin:0 .3em;color:#C7B08B;opacity:.8;
}

/* buttons sit last in the stack: eyebrow -> title -> blurb -> buttons */
.hero-cta-row{
  display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(16px,2vw,28px);margin-top:clamp(16px,2.4vh,26px);flex-wrap:wrap;width:100%;
}
.hero-v2 .mv-hero-actions{display:flex;gap:10px;flex-wrap:wrap;}
.hero-v2 .mv-btn{
  border-radius:999px;padding:9px 20px 9px 9px;
  display:inline-flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.12em;
}
.hero-v2 .mv-btn .cta-dot{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:#0b0b10;color:var(--mv-cream);font-size:13px;line-height:1;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.hero-v2 .mv-btn:hover .cta-dot{transform:translateX(3px);}
.hero-v2 .mv-btn.solid{background:var(--mv-cream);color:#0b0b10;border-color:var(--mv-cream);}
.hero-v2 .mv-btn.solid:hover{background:#fff;border-color:#fff;box-shadow:0 16px 40px -18px rgba(255,255,255,.45);}
.hero-v2 .mv-btn:not(.solid){padding:9px 20px;border-color:var(--mv-line-2);}

.hero-v2 .mv-hero-blurb{
  position:static;flex:0 0 auto;min-width:0;text-align:left;
  max-width:52ch;margin:clamp(12px,1.8vh,20px) 0 0;
  font-family:var(--mv-grotesk);
  font-size:clamp(13px,1.05vw,15.5px);line-height:1.6;color:var(--mv-cream-2);
}

/* scroll cue bottom-centre */
.hero-v2 .mv-hero-foot{
  position:absolute;left:0;right:0;bottom:clamp(16px,3vh,34px);
  z-index:3;display:flex;justify-content:center;margin:0;padding:0;
}

/* giant name is not part of this layout (kept in DOM for JS/theme hooks) */
.hero-v2 .mv-bigname{display:none !important;}

/* ─────────── theme tuning ─────────── */
html[data-theme="light"] .hero-eyebrow{color:#8A6D3B;}
html[data-theme="light"] .hero-v2 .mv-roles{color:var(--ink);}
html[data-theme="light"] .hero-arc-panel{background:#e9e9ef;}
html[data-theme="light"] .hero-arc-panel::after{background:rgba(255,255,255,.14);}
html[data-theme="light"] .hero-v2 .mv-btn.solid{background:#0E0E14;color:#fff;border-color:#0E0E14;}
html[data-theme="light"] .hero-v2 .mv-btn.solid .cta-dot{background:#fff;color:#0E0E14;}
html[data-theme="light"] .hero-v2 .mv-figure .hero-img::after{color:rgba(14,14,20,.3);}
html[data-theme="immersive"] .hero-arc{opacity:.62;}

/* ─────────── responsive ─────────── */
/* Mobile/tablet: leave absolute positioning behind and stack naturally so the
   copy always sits BELOW the portrait instead of floating over it. */
@media(max-width:900px){
  /* tighter gap under the nav (was 9vh) */
  .hero-v2{min-height:auto;padding:3.5vh 0 40px;}
  /* band = just below the top of the head → lower shoulder. `top` is
     relative to .hero-v2 (which starts under the nav), hence the small vh. */
  .hero-arc{top:7vh;height:20vh;}
  /* let swipes pass through the portrait so the carousel is draggable anywhere */
  .hero-v2 .mv-figure{pointer-events:none;}
  .hero-v2 .mv-hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;}
  .hero-v2 .mv-figure{
    position:relative;left:auto;right:auto;top:auto;bottom:auto;margin:0 auto;
    width:min(72vw,300px);height:auto;aspect-ratio:3/4.15;
  }
  .hero-copy{
    position:relative;left:auto;right:auto;top:auto;z-index:3;
    margin:-13vh auto 0;width:calc(100% - 2*var(--mv-pad));max-width:520px;   /* sits ON the photo's lower edge */
  }
  .hero-cta-row{flex-wrap:wrap;}
  .hero-v2 .mv-roles{font-size:clamp(26px,6.6vw,40px);max-width:14ch;}
  .hero-v2 .mv-hero-foot{position:relative;bottom:auto;margin-top:18px;}
}
@media(max-width:600px){
  .hero-arc{top:6vh;height:18vh;}
  .hero-v2 .mv-figure{width:min(74vw,270px);}
  .hero-copy{width:calc(100% - 2*var(--mv-pad));margin-top:-11vh;}
  .hero-v2 .mv-roles{font-size:clamp(25px,7.6vw,34px);max-width:13ch;}
  .hero-cta-row{flex-direction:column;align-items:flex-start;gap:14px;}
  .hero-v2 .mv-hero-blurb{max-width:100%;}
}

@media(prefers-reduced-motion:reduce){ .hero-arc{cursor:default;} }