/* ============================================================
   HERO → CUBE (CP2, 2026-11-03; Rubik hero 2026-11-04)
   The Rubik cube beside the headline solves into the KAIROS walkthrough.
   Scrolling opens that face into the front wall of a four-walled room:
   KAIROS → ARC/01 → AURASH → Lumière. hero-cube.js adds .hc-on to <html>. Without it
   (no JS, reduced motion) this file shows a normal first screen with the four
   walkthroughs as a plain grid underneath.
   ============================================================ */

/* ---------- base / fallback ---------- */
#hero-section.hc{display:block;height:auto;min-height:0;max-height:none;overflow:visible;}
.hc-sheet{position:relative;height:100svh;overflow:hidden;background:var(--white);}
.hc-sheet .hero-inner{height:100%;min-height:0;}
.hc-anchor{display:block;position:relative;top:100svh;height:0;}
.hc-stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding:80px 40px 24px;}
.hc-fallback-title{grid-column:1/-1;margin-bottom:0;}
.hc-hud,.hc-cue,.hc-rubik,.hc-rubik-slot{display:none;}
.hc-face .folio-body{display:flex;flex-direction:column;}
.hc-kind{display:inline-flex;align-items:center;gap:8px;margin-top:10px;
  font:700 10px/1.2 'Satoshi',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--black);}
.hc-kind::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--folio-accent);flex:none;}
.hc-fine{margin-top:6px;font:500 11px/1.4 'Satoshi',sans-serif;color:var(--muted);}
.hc-mobile-note{display:none;flex-shrink:0;font:700 10px/1.2 'Satoshi',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
/* KAIROS is a desktop experience: its Visit link only appears on desktop pointers. */
@media(hover:none),(max-width:900px){
  .hc-desktop-only{display:none !important;}
  .hc-mobile-note{display:inline-block;}
}
@media(max-width:959px){.hc-stage{grid-template-columns:minmax(0,1fr);gap:24px;padding:64px 20px 16px;}}
@media(max-width:900px){.hc-sheet{height:auto;min-height:100svh;}}

/* ---------- the cube (JS on) ---------- */
.hc-on #hero-section.hc{position:relative;}
.hc-on .hc-anchor{position:absolute;left:0;top:0;}
.hc-on .hc-pin{position:relative;width:var(--hc-vw,100%) !important;height:var(--hc-vh,100svh) !important;max-width:none !important;max-height:none !important;overflow:hidden;background:var(--surface);}
.hc-on .hc-sheet{position:absolute;top:calc(var(--hc-nav,72px) + 8px);left:12px;right:12px;bottom:12px;
  height:auto;min-height:0;border:2px solid var(--black);border-radius:18px;z-index:1;
  will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.hc-on .hc-sheet .hero-inner{height:100%;min-height:0;padding-top:24px;padding-bottom:28px;}
/* Desktop: the headline steps down a size so the cube gets the right side of the card. */
@media(min-width:901px){
  .hc-on .hc-sheet .hero-headline{font-size:clamp(46px,6.2vw,104px);}
  .hc-on .hc-sheet .hero-hl-wrap{max-width:min(64vw,1100px);}
}
/* The hero cube (hero-rubik.js). hero-cube.js sizes and places it; it fades in once drawn. */
.hc-on .hc-rubik{display:block;position:absolute;left:0;top:0;width:300px;height:300px;z-index:1;
  opacity:0;transition:opacity .6s ease;cursor:grab;touch-action:pan-y;}
.hc-on .hc-rubik.is-ready{opacity:1;}

/* Scroll cue: beside the bio, right-aligned on desktop; under it on phones. */
.hc-on .hero-bottom-row{grid-template-columns:minmax(280px,520px) 1fr;}
.hc-on .hc-cue{display:flex;align-items:center;gap:8px;white-space:nowrap;justify-self:end;align-self:end;
  font:700 10px/1 'Clash Display','Arial Black',sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(13,13,13,.62);}
.hc-cue::before{content:'';width:18px;height:1px;background:var(--red);display:block;}
.hc-cue i{font-style:normal;display:inline-block;animation:hcCue 1.8s ease-in-out infinite;}
@keyframes hcCue{0%,100%{transform:translateY(0);}50%{transform:translateY(3px);}}

.hc-on .hc-stage{position:absolute;inset:0;display:block;padding:0;z-index:2;pointer-events:none;
  perspective:var(--hc-persp,1600px);}
.hc-on .hc-fallback-title{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;}
.hc-on .hc-face{position:absolute;left:50%;top:50%;width:var(--hc-fw,880px);border:0;background:transparent;
  transform-origin:50% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  will-change:transform,opacity;pointer-events:none;}
.hc-on .hc-face.is-front{pointer-events:auto;}
/* Side walls you can click to turn the room to them. */
.hc-on .hc-face.is-side{pointer-events:auto;cursor:pointer;}
.hc-on .hc-face .folio-preview{border:2px solid var(--black);}
.hc-on .hc-face .folio-body{background:var(--white);border:2px solid var(--black);border-top:0;
  min-height:var(--hc-caph,0px);padding:16px 20px 18px;}
.hc-on .hc-face .folio-name{font-size:clamp(22px,2.3vw,36px);}
.hc-on .hc-hud{display:flex;position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;opacity:0;
  align-items:center;gap:12px;white-space:nowrap;pointer-events:none;
  font:700 10px/1 'Satoshi',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--black);}
.hc-arrow{pointer-events:auto;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  border:1.5px solid var(--black);border-radius:50%;background:var(--white);color:var(--black);
  font:700 15px/1 'Satoshi',sans-serif;cursor:pointer;transition:background .2s,color .2s;}
.hc-arrow:hover{background:var(--black);color:var(--yellow);}
.hc-arrow:focus-visible{outline:3px solid var(--red);outline-offset:3px;}
.hc-hud-count b{font-weight:800;color:var(--red);}
.hc-hud-bars{display:flex;gap:6px;}
.hc-hud-bars i{display:block;width:26px;height:3px;background:rgba(13,13,13,.16);transition:background .25s;}
.hc-hud-bars i.is-on{background:var(--black);}

@media(max-width:900px){
  .hc-on .hc-sheet{left:8px;right:8px;bottom:8px;border-radius:14px;}
  .hc-on .hc-sheet .hero-inner{display:flex;flex-direction:column;justify-content:flex-start;gap:16px;
    padding:22px 18px 18px;}
  /* Phones: walls run edge to edge, so they lose their side borders. */
  .hc-on .hc-face .folio-preview,.hc-on .hc-face .folio-body{border-left:0;border-right:0;}
  .hc-on .hc-hud-label{display:none;}
  /* Bio at the top of the remaining space, scroll cue at the bottom of the card. */
  /* Bio, then the cube in the remaining space, then the scroll cue at the bottom of the card. */
  .hc-on .hero-bottom-row{margin-top:4px;grid-template-columns:1fr;grid-template-rows:auto minmax(150px,1fr) auto;
    flex:1 1 auto;align-content:stretch;}
  .hc-on .hc-rubik-slot{display:block;min-height:150px;align-self:stretch;}   /* the row aligns items to start */
  .hc-on .hc-cue{justify-self:start;margin-top:6px;}
  .hc-on .hc-face .folio-body{padding:16px 16px 18px;}
  .hc-on .hc-face .folio-name{font-size:28px;}
  .hc-on .hc-hud{bottom:16px;}
}
/* Short phones: drop the tag row and tighten the bio. */
@media(max-width:900px) and (max-height:740px){
  .hc-on .hero-top-row{display:none;}
  .hc-on .hero-bio{font-size:13.5px;line-height:1.45;}
}

/* Short landscape phones: keep the headline, bio, cube and cue inside the card. */
@media(max-width:900px) and (max-height:500px) and (min-aspect-ratio:3/2){
  .hc-on .hc-sheet .hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.7fr);
    grid-template-rows:minmax(0,1fr) auto;gap:12px 20px;padding:12px 18px;}
  .hc-on .hero-top-row{display:none;}
  .hc-on .hero-hl-wrap{grid-column:1;grid-row:1;align-self:center;}
  .hc-on .hero-headline{font-size:clamp(26px,4.2vw,38px);}
  .hc-on .desktop-title-lines{display:block;}
  .hc-on .mobile-title-lines{display:none;}
  .hc-on .hero-bottom-row{display:contents;}
  .hc-on .hero-bio{grid-column:1;grid-row:2;font-size:12px;line-height:1.35;}
  .hc-on .hc-rubik-slot{grid-column:2;grid-row:1;min-height:0;height:100%;}
  .hc-on .hc-cue{grid-column:2;grid-row:2;align-self:end;font-size:8px;letter-spacing:.08em;white-space:normal;}
  .hc-on .hc-face .folio-body{padding:8px 12px;}
  .hc-on .hc-face .folio-name{font-size:20px;}
  .hc-on .hc-face .folio-tagline{font-size:11px;margin-top:4px;}
  .hc-on .hc-kind{font-size:9px;margin-top:5px;}
  .hc-on .hc-fine{font-size:9px;margin-top:4px;}
  .hc-on .hc-hud{bottom:8px;}
}

.hc-on .hc-rubik:focus-visible{outline:2px dashed var(--black);outline-offset:4px;border-radius:12px;}