/* The 3D opening on the home page: a pinned full-screen stage (lace veil, mahogany table,
   board) that scrolls away into the rest of the site. Everything is scoped to .stage. */
.stage { --s-ink: #0a0708; --s-bone: #f8efe9; --s-mute: #c7b6b0; --s-blush: #f4b6c8; position: relative; height: 270vh; background: #0a0708; }
.stage-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.stage #scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }

.stage .ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; font-family: 'Jost', system-ui, sans-serif; color: var(--s-bone); }
.stage .ui > * { pointer-events: auto; }
.stage .ui.off > *, .stage .ui .frame { pointer-events: none; }
.stage .top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) 18px 0; }
.stage .brand3d { display: flex; align-items: center; gap: 10px; color: var(--s-bone); text-decoration: none; }
.stage .brand3d img { height: 36px; width: auto; mix-blend-mode: lighten; }
.stage .brand3d span { font-family: 'Cinzel', serif; font-weight: 700; font-size: 13px; letter-spacing: .22em; }
.stage .pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--s-blush); color: var(--s-ink); text-decoration: none; font-size: 15px; font-weight: 600; }
.stage .pill:hover { background: var(--s-bone); color: var(--s-ink); }
.stage .pill.big { min-height: 50px; }
.stage .title { position: absolute; left: 22px; top: calc(max(14px, env(safe-area-inset-top)) + 62px); margin: 0; font-family: 'Cinzel', serif; font-weight: 700; font-size: 40px; letter-spacing: .02em; line-height: .98; text-transform: none; color: var(--s-bone); text-shadow: 0 2px 18px rgba(0, 0, 0, .7); pointer-events: none; }
.stage .title span { color: var(--s-blush); }

/* Figma-style selection frame */
.stage .frame { position: absolute; border: 1.5px solid var(--s-blush); }
.stage .frame .h { position: absolute; width: 8px; height: 8px; background: #fff; border: 1.5px solid var(--s-blush); }
.stage .frame .tl { left: -5px; top: -5px; } .stage .frame .tr { right: -5px; top: -5px; }
.stage .frame .bl { left: -5px; bottom: -5px; } .stage .frame .br { right: -5px; bottom: -5px; }
.stage .frame .tag { position: absolute; left: -1.5px; top: -27px; height: 21px; line-height: 21px; padding: 0 8px; border-radius: 4px; background: var(--s-blush); color: var(--s-ink); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }

.stage .panel { position: absolute; left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); max-width: 520px; margin: 0 auto; border-radius: 22px; background: rgba(24, 15, 17, .82); border: 1px solid rgba(248, 239, 233, .1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 14px 14px 10px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.stage .insp { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stage .insp-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.stage .kicker { font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--s-blush); }
.stage .name { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage .sub { font-size: 13px; color: var(--s-mute); }
.stage .sizes { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--s-ink); overflow-x: auto; scrollbar-width: none; }
.stage .sizes::-webkit-scrollbar { display: none; }
.stage .sizes button { flex: 1 0 auto; min-height: 40px; padding: 0 12px; border-radius: 999px; border: 0; background: transparent; color: #d8c9c3; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.stage .sizes button[aria-checked="true"] { background: var(--s-bone); color: var(--s-ink); font-weight: 600; }
.stage .panel-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--s-mute); }
.stage .panel-foot > a { color: var(--s-blush); text-decoration: none; letter-spacing: .08em; padding: 2px 0; white-space: nowrap; }
.stage .credits { flex: 1; text-align: right; }
.stage .credits summary { cursor: pointer; list-style: none; letter-spacing: .12em; text-transform: uppercase; padding: 2px 0; }
.stage .credits summary::-webkit-details-marker { display: none; }
.stage .credits summary::marker { content: ''; }
.stage .credits p { margin: 6px 0 0; text-align: left; line-height: 1.45; max-height: 96px; overflow-y: auto; }
.stage .credits a { color: var(--s-blush); }

/* the veil: black top, real black Chantilly lace hanging to a point */
.stage .veil { position: absolute; inset: 0; z-index: 5; transform-origin: 50% 0; will-change: transform; pointer-events: none; }
.stage .veil-top { position: absolute; left: 0; right: 0; top: 0; height: 62%; background: linear-gradient(180deg, #060405 0%, #0a0708 80%, rgba(10, 7, 8, 0) 100%); }
.stage .veil-lace { position: absolute; left: 50%; top: 50%; width: max(215vw, 900px); max-width: none; height: auto; transform: translateX(-50%); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.stage .veil-logo { position: absolute; left: 0; right: 0; top: 0; height: 52%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 30px 28px 0; text-align: center; }
.stage .veil-logo img { width: min(270px, 70vw); max-height: 34vh; height: auto; width: auto; mix-blend-mode: lighten; }
.stage .veil-logo p { margin: 0; font-family: 'Jost', sans-serif; font-size: 17px; letter-spacing: .04em; color: #dccbc5; }
.stage .veil-cue { position: absolute; left: 0; right: 0; top: 53%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.stage .veil-cue span { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--s-blush); }
.stage .veil-cue i { display: block; width: 1px; height: 34px; background: linear-gradient(var(--s-blush), rgba(244, 182, 200, 0)); transform-origin: top; animation: s-cue 2.2s ease-in-out infinite; }
@keyframes s-cue { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { opacity: 0; } }

.stage .loading { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 6; text-align: center; font-family: 'Jost', sans-serif; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--s-mute); transition: opacity .4s; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .stage .veil-cue i { animation: none; } }
@media (min-width: 900px) { .stage .title { left: max(22px, calc(50% - 560px)); font-size: 48px; } .stage .top { padding-inline: max(18px, calc(50% - 580px)); } }
@media (min-width: 900px) and (min-aspect-ratio: 6/5) { .stage .panel { left: auto; right: max(24px, calc(50% - 580px)); bottom: 32px; width: 400px; } }