/* ═══════════════════════════════════════════════════════════════
   Category hero stage — press sheet (house) + 3D stage (finish-led)
   Client decision 2026-11-11, from the five framing prototypes.
   The DARK theme keeps the committed print-room scenography below.
   2026-11-12 (Frederick): light mode instead takes the home assembly
   hero's daylight treatment — same lavender wash, dark ink copy — see
   the light-mode block at the end of this file. Copy inherits the
   page's own styles; this sheet repaints the hero shell + stage layers.
   ═══════════════════════════════════════════════════════════════ */

.hero-staged { position: relative; overflow: hidden; background: #0C0912; }
.hero-staged .hero-orb { display: none; }
.hero-staged .cat-hero-grid { position: relative; z-index: 3; }

/* Copy must win the contrast fight on the dark stage, whatever the theme. */
.hero-staged .cat-hero-copy h1 { color: #F3EBEF; }
.hero-staged .cat-hero-copy .lede,
.hero-staged .cat-hero-copy .breadcrumb,
.hero-staged .cat-hero-copy .breadcrumb a,
.hero-staged .cat-hero-bc-mobile .breadcrumb a,
.hero-staged .hero-eyebrow,
.hero-staged .cat-hero-price-v2,
.hero-staged .hero-perks span,
.hero-staged .hs-label { color: rgba(243, 235, 239, 0.78) !important; }
.hero-staged .hs-val { color: #F3EBEF; }
.hero-staged .bc-current { color: #C58BEB; }
.hero-staged .btn-ghost { border-color: rgba(243, 235, 239, 0.35); color: #F3EBEF; }
.hero-staged .hero-stats { border-top-color: rgba(243, 235, 239, 0.15) !important; }

.hstage { position: absolute; inset: 0; z-index: 1; }
.hstage .hstage-pill {
  position: absolute; z-index: 4;
  background: rgba(10, 8, 16, 0.78); backdrop-filter: blur(8px);
  color: #F3EBEF; font-family: var(--font-label, monospace);
  font-size: 12px; letter-spacing: 0.1em; padding: 9px 20px; border-radius: 999px;
  white-space: nowrap; max-width: 86%; overflow: hidden; text-overflow: ellipsis;
}
.hstage .hstage-pill .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #C58BEB; margin-right: 9px; }

/* ── Press sheet ─────────────────────────────────────────────── */
.hstage-plane {
  position: absolute; inset: -28% -18%;
  transform: perspective(1400px) rotateX(16deg) rotateZ(-11deg);
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 3.2vw; padding: 4vw;
  animation: hstage-drift 50s linear infinite alternate;
}
/* Ultra-wide: the plane scales with the hero width, so 6 columns made each
   cell ~500px at 2560. 8 columns (24 cells = 3 even rows) keeps cells in the
   same size band as a 1440 desktop; gap/padding stop growing with vw. */
@media (min-width: 1800px) {
  .hstage-plane { grid-template-columns: repeat(8, 1fr); gap: 56px; padding: 56px; align-content: center; }
}
@keyframes hstage-drift { from { translate: 0 0; } to { translate: -5vw -4vh; } }
.hstage-cell { position: relative; aspect-ratio: 7 / 5; }
.hstage-cellart {
  position: absolute; inset: 0; border-radius: 6px;
  background-size: cover; background-position: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); opacity: 0.88;
}
.hstage-cell::before, .hstage-cell::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 1.5px solid rgba(243, 235, 239, 0.4);
}
.hstage-cell::before { top: -11px; left: -11px; border-right: 0; border-bottom: 0; }
.hstage-cell::after { bottom: -11px; right: -11px; border-left: 0; border-top: 0; }
.hstage-wash {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(12, 9, 18, 0.96) 26%, rgba(12, 9, 18, 0.72) 46%, rgba(12, 9, 18, 0.18) 70%);
}
.hstage-pop {
  position: absolute; z-index: 3; width: 30vw; max-width: 460px;
  right: 6vw; top: 50%; transform: translateY(-50%) rotate(6deg);
}
.hstage-popcard {
  aspect-ratio: 7 / 5; border-radius: 8px;
  background-size: cover; background-position: center;
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(197, 139, 235, 0.25);
}
.hstage-pop .hstage-pill { left: 50%; bottom: 7%; transform: translateX(-50%); }

/* ── Centered hero copy (2026-11-11, Frederick: category hero text centered
   like the home page). These rules began life on the retired 3D stage; they
   are now the treatment for EVERY staged hero. ── */
.hero-staged .cat-hero-grid {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero-staged .cat-hero-copy { max-width: 860px; }
.hero-staged .cat-hero-ctas { justify-content: center; }
.hero-staged .hero-stats { justify-content: center; }
.hero-staged .cat-hero-bc-desktop .breadcrumb,
.hero-staged .hero-perks { justify-content: center; }
/* The eyebrow/price rows and the headline's print-head bar follow the text. */
.hero-staged .hero-eyebrow { justify-content: center; margin-left: auto; margin-right: auto; }
.hstage-3d { perspective: 1800px; }
.hstage3d-spin {
  position: absolute; left: 50%; top: clamp(120px, 16vh, 180px);
  width: min(42vw, 620px); transform: translateX(-50%);
  transform-style: preserve-3d; animation: hstage-idle 16s ease-in-out infinite;
}
@keyframes hstage-idle {
  0%   { transform: translateX(-50%) rotateY(-24deg) rotateX(6deg); }
  50%  { transform: translateX(-50%) rotateY(24deg) rotateX(-4deg); }
  100% { transform: translateX(-50%) rotateY(-24deg) rotateX(6deg); }
}
.hstage3d-card {
  aspect-ratio: 7 / 5; border-radius: 8px; position: relative; overflow: hidden;
  background-size: cover; background-position: center;
  box-shadow: 0 70px 160px rgba(0, 0, 0, 0.8);
}
.hstage3d-sweep {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.14) 45%, transparent 60%);
  animation: hstage-sweep 6.5s ease-in-out infinite;
}
@keyframes hstage-sweep { 0%, 100% { transform: translateX(-60%); } 50% { transform: translateX(60%); } }
.hstage3d-floor {
  position: absolute; left: 50%; top: calc(clamp(120px, 16vh, 180px) + min(30vw, 450px));
  transform: translateX(-50%); width: 44vw; height: 9vh;
  background: radial-gradient(50% 100% at 50% 0%, rgba(142, 33, 202, 0.4), transparent 70%);
  filter: blur(12px);
}
.hstage-3d .hstage-pill { left: 50%; top: clamp(88px, 12vh, 130px); transform: translateX(-50%); }

/* ── Responsive + motion ─────────────────────────────────────── */
@media (max-width: 980px) {
  .hstage-pop { display: none; }
  .hstage-wash { background: rgba(12, 9, 18, 0.84); }
  .hstage-plane { grid-template-columns: repeat(4, 1fr); gap: 5vw; }
  .hstage3d-spin { width: 82vw; }
  .hero-staged-3d .cat-hero-grid { padding-top: clamp(230px, 52vw, 330px); }
}
@media (prefers-reduced-motion: reduce) {
  .hstage-plane, .hstage3d-spin, .hstage3d-sweep { animation: none; }
}

/* Composed finish card — real foil-tone swatches clipped into type, for
   finish types with no type-matched product shot. */
.hstage3d-composed {
  background:
    radial-gradient(120% 120% at 18% 12%, #241530 0%, transparent 55%),
    radial-gradient(130% 120% at 85% 92%, #140f22 0%, transparent 55%),
    linear-gradient(135deg, #1c1226, #120d1a);
}
.hstage3d-foil {
  position: absolute; inset: 0; padding: 9% 10%;
  display: flex; flex-direction: column; justify-content: space-between;
  background-size: 300px; background-repeat: repeat;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 18px rgba(245, 217, 118, 0.18));
}
.hstage3d-foil .hc-eyebrow { font-family: var(--font-label, monospace); font-size: clamp(9px, 1vw, 13px); letter-spacing: 0.34em; }
.hstage3d-foil .hc-title { font-family: var(--font-display, sans-serif); font-weight: 800; font-size: clamp(30px, 4.6vw, 72px); line-height: 1.02; letter-spacing: -0.01em; }
.hstage3d-foil .hc-foot { font-family: var(--font-label, monospace); font-size: clamp(8px, 0.85vw, 11px); letter-spacing: 0.2em; }

/* ═══ Assembly entrance (2026-11-11) — category landings get the home page's
   grand entrance. Classes driven by the inline script in hero-stage.blade.php:
   .hs-arming (pre-paint hide) → .hs-assembled (panels snap) → .hs-printed
   (headline wipes on, copy cascades). Static settled hero without JS or under
   reduced motion — pre-states exist ONLY under .hs-arming. */
/* Sheet panels fly in from off-screen (vectors set per cell by the script). */
.hero-staged.hs-arming .hstage-cellart{transform:translate(var(--fx,0),var(--fy,0)) rotate(var(--fr,0deg)) scale(.6);opacity:0}
.hero-staged.hs-assembled .hstage-cellart{transform:none;opacity:1;transition:transform .9s cubic-bezier(.2,.75,.25,1) var(--fd,0s),opacity .5s var(--fd,0s)}
.hero-staged.hs-arming .hstage-cell::before,.hero-staged.hs-arming .hstage-cell::after{opacity:0}
.hero-staged.hs-assembled .hstage-cell::before,.hero-staged.hs-assembled .hstage-cell::after{opacity:1;transition:opacity .5s .55s}
/* The 3D stage card settles instead of flying. */
.hero-staged.hs-arming .hstage3d-card{opacity:0;transform:translateY(44px) scale(.85)}
.hero-staged.hs-assembled .hstage3d-card{opacity:1;transform:none;transition:opacity .7s,transform .9s cubic-bezier(.2,.75,.25,1)}
/* Headline prints on with the wipe; the light bar is the h1's ::after. */
.hero-staged .cat-hero-copy h1{position:relative}
.hero-staged.hs-arming .cat-hero-copy h1{clip-path:inset(-4% 100% -8% 0)}
.hero-staged.hs-printed .cat-hero-copy h1{animation:hs-wipe 1s cubic-bezier(.6,0,.2,1) .15s forwards}
@keyframes hs-wipe{to{clip-path:inset(-4% 0% -8% 0)}}
.hero-staged .cat-hero-copy h1::after{content:"";position:absolute;top:-4%;bottom:-8%;width:5px;border-radius:3px;left:0;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,#fff 18%,#fff 82%,transparent);
  box-shadow:0 0 22px rgba(197,139,235,.95),0 0 60px rgba(142,33,202,.65)}
.hero-staged.hs-printed .cat-hero-copy h1::after{animation:hs-headrun 1s cubic-bezier(.6,0,.2,1) .15s forwards}
@keyframes hs-headrun{0%{opacity:1;left:0}92%{opacity:1}100%{left:100%;opacity:0}}
/* Copy cascade after the print. */
.hero-staged .cat-hero-copy>:not(h1){transition:opacity .7s,translate .7s}
.hero-staged.hs-arming .cat-hero-copy>:not(h1){opacity:0;translate:0 14px}
.hero-staged.hs-printed .cat-hero-copy>:not(h1){opacity:1;translate:0 0}
.hero-staged.hs-printed .cat-hero-copy>.hero-eyebrow{transition-delay:.05s}
.hero-staged.hs-printed .cat-hero-copy>.lede{transition-delay:1.05s}
.hero-staged.hs-printed .cat-hero-copy>.cat-hero-ctas{transition-delay:1.2s}
.hero-staged.hs-printed .cat-hero-copy>.cat-hero-price-v2{transition-delay:1.35s}
.hero-staged.hs-printed .cat-hero-copy>.hero-stats{transition-delay:1.5s}
@media (prefers-reduced-motion:reduce){
  .hero-staged.hs-arming .hstage-cellart,.hero-staged.hs-arming .hstage3d-card,
  .hero-staged.hs-arming .cat-hero-copy>:not(h1){opacity:1;transform:none;translate:0 0;transition:none}
  .hero-staged.hs-arming .hstage-cell::before,.hero-staged.hs-arming .hstage-cell::after{opacity:1}
  .hero-staged.hs-arming .cat-hero-copy h1,.hero-staged.hs-printed .cat-hero-copy h1{clip-path:none;animation:none}
  .hero-staged .cat-hero-copy h1::after{display:none}
}

/* ═══ Round-2 fixes (2026-11-11) ═══ */
/* The stage must never bleed past the hero: category.css carries
   .cat-hero-v2{overflow:visible!important} (hairline clearance era), which
   beat this file's overflow:hidden — the sheet plane (inset -26%) poured
   down behind the translucent gmf-path cards. Higher specificity wins. */
.cat-hero-v2.hero-staged{overflow:clip!important}

/* ═══ Foldables polish (Nov-11 specialist audit) ═══ */
/* Tall-narrow screens: widen the sheet's horizontal overdraw so the -11deg
   tilt never exposes bare corners, and let cells stretch with their rows. */
.hstage-plane{grid-auto-rows:1fr}
@supports (height: 100svh){
  .hstage-plane{inset:-28% calc(-18% - 12svh)}
}
@media (max-aspect-ratio: 3/4){
  .hstage-cell{aspect-ratio:auto}
}

/* Flow pages (templates / upload / kind picker / design service) stage their
   heroes on the sheet with the CATEGORY hero's full vocabulary — they load
   category.css, so cat-hero-v2 brings the padding and type scale. The
   upload / kind-picker / design-service heroes sit INSIDE the pages'
   max-width wrappers, so the band breaks out to the full viewport like a
   category hero (Frederick: 'not wide enough'); body overflow-x is clip, so
   the 100vw overhang never scrolls. */
.flow-staged-hero{margin-bottom:0}
.up-hero.flow-staged-hero,
.cd-hero.flow-staged-hero,
.cyd-hero.flow-staged-hero{width:100vw;max-width:none;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);margin-top:-96px}
@media (max-width:880px){
  .up-hero.flow-staged-hero{margin-top:-80px}
  .cyd-hero.flow-staged-hero{margin-top:-84px}
  .cd-hero.flow-staged-hero{margin-top:-72px}
}

/* ═══ Light mode (Frederick, 2026-11-12): "the wash should also be on the
   hero of the landing pages of the categories." Dark theme keeps the
   print-room scenography above; light mode takes the HOME assembly hero's
   daylight treatment verbatim — the same lavender radial wash over the
   sheet, dark ink copy, studio-light cell framing. Wash gradients are
   copied from home-new.css .hassembly-wash (do not restyle them here). ═══ */
:root:not([data-theme="dark"]) .hero-staged{background:#F3EBEF}
:root:not([data-theme="dark"]) .hstage-wash{background:
  radial-gradient(72% 62% at 50% 48%,rgba(243,235,239,.95) 0%,rgba(243,235,239,.82) 48%,rgba(243,235,239,.42) 76%,rgba(243,235,239,.16) 100%),
  radial-gradient(56% 34% at 50% 86%,rgba(243,235,239,.9) 0%,rgba(243,235,239,.55) 62%,transparent 100%)}
:root:not([data-theme="dark"]) .hstage-cellart{opacity:1;filter:brightness(.96) saturate(.92);box-shadow:0 22px 50px rgba(20,10,40,.4);border:1px solid rgba(255,255,255,.6);border-radius:8px}
:root:not([data-theme="dark"]) .hstage-cell::before,
:root:not([data-theme="dark"]) .hstage-cell::after{border-color:rgba(26,22,37,.35)}
:root:not([data-theme="dark"]) .hero-staged .cat-hero-copy h1{color:var(--text-heading,#1A1218)}
:root:not([data-theme="dark"]) .hero-staged .cat-hero-copy .lede,
:root:not([data-theme="dark"]) .hero-staged .cat-hero-copy .breadcrumb,
:root:not([data-theme="dark"]) .hero-staged .cat-hero-copy .breadcrumb a,
:root:not([data-theme="dark"]) .hero-staged .cat-hero-bc-mobile .breadcrumb a,
:root:not([data-theme="dark"]) .hero-staged .hero-eyebrow,
:root:not([data-theme="dark"]) .hero-staged .cat-hero-price-v2,
:root:not([data-theme="dark"]) .hero-staged .hero-perks span,
:root:not([data-theme="dark"]) .hero-staged .hs-label{color:rgba(32,26,20,.78)!important}
:root:not([data-theme="dark"]) .hero-staged .hs-val{color:#1A1218}
:root:not([data-theme="dark"]) .hero-staged .bc-current{color:#8E21CA}
:root:not([data-theme="dark"]) .hero-staged .btn-ghost{border-color:rgba(32,26,20,.35);color:#1A1218}
:root:not([data-theme="dark"]) .hero-staged .hero-stats{border-top-color:rgba(32,26,20,.15)!important}
/* Print-head bar: white is invisible on the lavender wash — run it in ink. */
:root:not([data-theme="dark"]) .hero-staged .cat-hero-copy h1::after{background:linear-gradient(180deg,transparent,#8E21CA 18%,#8E21CA 82%,transparent)}
@media (max-width:980px){
  :root:not([data-theme="dark"]) .hstage-wash{background:radial-gradient(130% 78% at 50% 50%,rgba(243,235,239,.95) 0%,rgba(243,235,239,.86) 55%,rgba(243,235,239,.55) 85%,rgba(243,235,239,.3) 100%)}
}