/* Approved optical-glass stage. Gradients are the material's light response. */
.is-concave .glass-carrier { position:absolute; width:0; height:0; transform-style:preserve-3d; --glass-opacity:1; --light-x:50%; --light-y:28%; }
.glass-hit-corner { position:absolute; display:block; width:0; height:0; padding:0; border:0; pointer-events:none; }
.is-concave.is-wing-hover .launcher-track { cursor:pointer; }
.is-concave .ring-plane { --video-footer-height:76px; isolation:isolate; border-radius:6px; width:var(--face-width,var(--ring-hero-width)); left:calc(var(--face-width,var(--ring-hero-width)) / -2); }
.is-concave .glass-back {
  position:absolute; left:calc(var(--face-width,var(--ring-hero-width)) / -2); top:calc(var(--ring-hero-height) / -2);
  width:var(--face-width,var(--ring-hero-width)); height:var(--ring-hero-height); border:1px solid #d4bed82b;
  border-radius:6px; background:#1c1b2426; transform:translateZ(-6px); opacity:var(--glass-opacity); pointer-events:none;
}
.is-concave .glass-edge { position:absolute; display:block; pointer-events:none; backface-visibility:visible; opacity:var(--glass-opacity); background:linear-gradient(90deg,#f3ddffb8,#473754a6 23%,#ab91c355 60%,#e4cef2a8); } /* taste-skill-ignore: user-approved optical glass, edge reflection and contact shadow. */
.glass-edge-left,.glass-edge-right { top:calc(var(--ring-hero-height) / -2 + 9px); width:6px; height:calc(var(--ring-hero-height) - 18px); transform:rotateY(90deg); transform-origin:0 50%; }
.glass-edge-left { left:calc(var(--face-width,var(--ring-hero-width)) / -2); }.glass-edge-right { left:calc(var(--face-width,var(--ring-hero-width)) / 2); }
.glass-edge-top,.glass-edge-bottom { left:calc(var(--face-width,var(--ring-hero-width)) / -2 + 9px); width:calc(var(--face-width,var(--ring-hero-width)) - 18px); height:6px; transform:rotateX(-90deg); transform-origin:50% 0; }
.glass-edge-top { top:calc(var(--ring-hero-height) / -2); }.glass-edge-bottom { top:calc(var(--ring-hero-height) / 2); }
.is-concave .ring-content::before,.is-concave .ring-content::after { display:none; }
.glass-rim { position:absolute; inset:-1px; z-index:6; border:18px solid transparent; border-image:url('assets/theater/optical-glass-rim.svg?v=2') 24 fill / 18px / 0 stretch; pointer-events:none; }
.glass-rim::after { content:''; position:absolute; inset:-20px; pointer-events:none; filter:blur(2px); background:radial-gradient(ellipse 20% 1.4% at var(--light-x,50%) 99.4%,#d8a5ffc2,#b47be62e 58%,transparent 100%),radial-gradient(ellipse 15% 1.1% at var(--glass-wash-x,35%) .6%,#e6bfff9c,#c28cf72b 55%,transparent 100%); } /* taste-skill-ignore: small lavender edge blooms from the approved glass reference, not a full-frame neon outline. */
.glass-highlight {
  position:absolute; inset:0; padding:1px; border-radius:6px; z-index:7; pointer-events:none;
  background:radial-gradient(ellipse 24% 44% at var(--light-x) var(--light-y),#fff0ffbd,#d2b1f647 35%,transparent 75%); /* taste-skill-ignore: user-approved optical glass, edge reflection and contact shadow. */
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; /* taste-skill-ignore: user-approved optical glass, edge reflection and contact shadow. */
}
.glass-surface-light {
  position:absolute; inset:0; z-index:2; border-radius:6px; pointer-events:none;
  opacity:calc(var(--glass-wash-strength,.55) + var(--hover-light,0) * .12); mix-blend-mode:screen;
  background:radial-gradient(ellipse 60% 75% at var(--glass-wash-x,35%) -15%,#c797f04a,transparent 72%),linear-gradient(var(--glass-angle,110deg),transparent 5%,#b78bdd09 12%,#cda6ee26 21%,#af82d20b 29%,transparent 42%,transparent 73%,#bd84ec14 97%); /* taste-skill-ignore: approved broad reflected light across glass faces. */
}
.glass-surface-light::after {
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(ellipse 26% 2% at var(--light-x,50%) 99.7%,#e8c6ffb3,#b87ef230 55%,transparent 100%),radial-gradient(ellipse 20% 1.8% at 78% .2%,#ecd0ffaa,#c797f22e 55%,transparent 100%); /* taste-skill-ignore: localized top/bottom highlights from the same lavender studio light. */
}
#page-home:is(.active,.section-departing) .is-concave .theater-hero {
  border:0; border-radius:5px; overflow:hidden; transform:none;
  background:radial-gradient(ellipse at 74% 25%,#69537626,transparent 70%),#22232b; /* taste-skill-ignore: user-approved optical glass, edge reflection and contact shadow. */
  box-shadow:0 calc(12px + var(--wing-lift,0) * 3px) calc(24px + var(--wing-lift,0) * 5px) -19px #000b; /* taste-skill-ignore: optical contact shadow follows the wing's advance. */
}
.is-concave .theater-hero::after { display:none; }
.is-concave .theater-video {
  border:0; border-radius:5px; background:#211e29; overflow:hidden;
  box-shadow:0 calc(14px + var(--wing-lift,0) * 3px) calc(25px + var(--wing-lift,0) * 5px) -20px #000b; /* taste-skill-ignore: approved contact shadow gently spreads as the wing advances. */
}
/* The frame, picture window and footer keep their existing dimensions.
   Only the complete image scales inside its opaque, clipped window: cover on
   the wings, contain at center. The mirrored picture shares the same transform. */
.is-concave .theater-video::after { content:''; position:absolute; inset:auto 0 0; height:var(--video-footer-height); box-sizing:border-box; z-index:1; border-top:1px solid #dac9e52b; pointer-events:none; background:linear-gradient(115deg,#ddc7ef0a,transparent 48%,#b494d00b); } /* taste-skill-ignore: approved integrated glass footer, with a fine material boundary. */
.is-concave .video-window { position:absolute; inset:0 0 var(--video-footer-height); overflow:hidden; background:#211e29; pointer-events:none; }
.is-concave .video-window:has(>img[hidden]) { visibility:hidden; } /* Keep the existing loading/unavailable state visible behind an empty window. */
.is-concave .video-window>img { position:absolute; inset:auto; left:50%; top:50%; display:block; width:100%; height:auto; max-width:none; object-fit:contain; object-position:center; border-radius:0; background:transparent; transform:translate(-50%,-50%); transform-origin:50% 50%; transition:none; }
/* At the cover endpoint, use the original single image box all the way to the
   footer. A separately scaled image inside a clipped layer leaves a raster seam
   on the perspective wings even when their measured heights are equivalent. */
.is-concave .video-window.is-native-cover { display:contents; }
.is-concave .video-window.is-native-cover>img { inset:0 0 var(--video-footer-height); width:100%; height:calc(100% - var(--video-footer-height)); object-fit:cover; object-position:50% 50%; transform:none; background:#211e29; }
.is-concave .video-reflection .video-window.is-native-cover>img { background:transparent; }
.is-concave .video-shade { display:none; }
.is-concave .video-plaque { left:24px; top:auto; bottom:53px; z-index:2; padding:0; height:14px; min-height:14px; border:0; background:none; box-shadow:none; backdrop-filter:none; gap:8px; } /* taste-skill-ignore: disables the inherited backdrop blur; metadata is on the opaque footer. */
.is-concave .video-plaque .video-platform { min-height:14px; font-size:10.5px; top:0; }
.is-concave .video-caption { left:24px; right:88px; bottom:7px; z-index:2; }
.is-concave .theater-video .video-title { margin:0 0 2px; font:400 clamp(15px,1.2vw,20px)/1.3 var(--serif); -webkit-line-clamp:1; }
.is-concave .video-meta { font:400 11px/1.4 var(--sans); color:#c6b9d0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.is-concave .video-play { right:24px; bottom:16px; z-index:2; width:44px; height:44px; background:#d3b7eb0c; border-color:#ecdbf37d; }
.is-concave .video-play svg { width:17px; height:17px; }
.glass-platform { position:absolute; bottom:calc((var(--video-footer-height) - var(--platform-label-height,28px)) / 2); left:calc(7% + (1 - var(--left-wing,0)) * 24%); right:calc(7% + var(--left-wing,0) * 24%); z-index:5; text-align:center; white-space:nowrap; font:400 23px/1.4 var(--serif); color:#f0e4f8; pointer-events:none; opacity:var(--platform-visibility,0); transition:opacity 180ms ease; }
.is-concave .ring-card-return { border-radius:6px; left:calc((1 - var(--left-wing,0)) * 46%); right:auto; width:54%; }
.is-concave .ring-card-return:focus-visible { outline:2px solid #edcfff; outline-offset:6px; }
.is-concave .ring-plane>.theater-reflection {
  top:calc(100% + 3px); height:170px; opacity:calc(var(--reflection-strength,.27) + var(--hover-light,0) * .035);
  filter:blur(max(.6px,calc(var(--reflection-blur,2px) - var(--wing-lift,0) * .7px))) saturate(.8); mask-image:linear-gradient(#000e,#0007 30%,transparent 96%); /* taste-skill-ignore: a small sharpness change shares the same eased hover progress as the pane and shadow. */
}
.is-concave .reflection-source { border-radius:6px; background:#35303c4d; }
.is-concave .video-reflection .reflection-source { background:#211e29; }
.reflection-rim { position:absolute; inset:0; border:1px solid #dac9ee9c; border-radius:6px; pointer-events:none; }
.reflection-light { position:absolute; inset:0; background:radial-gradient(ellipse 40% 3% at var(--light-x,50%) 99.5%,#ebc6ffcc,#b485e861 38%,transparent 100%),linear-gradient(var(--glass-angle,110deg),#bd96dc12,transparent 40%,#b58bd824); } /* taste-skill-ignore: mirrored edge and face illumination from the approved shared purple light. */
.is-concave .launcher-step { width:44px; height:44px; top:calc(50% - 22px); border-color:#d1bdd239; background:#211c2945; opacity:.5; }
.is-concave .launcher-step:hover,.is-concave .launcher-step:focus-visible { opacity:1; border-color:#ead2ec91; }
.is-concave .inline-video { border-radius:9px; background:#08080b; }
.is-concave .inline-video-toolbar { background:#24202ae8; border-bottom-color:#d8c1e526; }
.is-concave .inline-video-close { font-size:24px; }
.is-concave .has-inline-player::after { display:none; }
@media(min-width:901px) and (min-height:600px) {
  body.theater:has(#page-home.active) {
    --home-stage-fit:min(calc(58vw / 1.7777778),calc(var(--home-height) - var(--home-top-space) - var(--home-ruler-gap) - var(--home-ruler-height) - var(--home-next-gap) - 48px - var(--home-bottom-space)));
    --home-stage-width:calc(var(--home-stage-height) * 3.065134);
  }
  #page-home:is(.active,.section-departing) .theater-stage.is-media-ring { max-width:100%; align-self:center; top:calc(-1 * clamp(12px,calc(6dvh - 24px),34px)); }
}
@media(max-width:900px) and (min-width:601px) {
  .is-concave .ring-plane { --video-footer-height:68px; }
  .is-concave .video-plaque { left:16px; bottom:46px; }
  .is-concave .video-caption { left:16px; right:76px; bottom:6px; }
  .is-concave .theater-video .video-title { font-size:17px; line-height:1.25; }
  .is-concave .video-meta { font-size:10.5px; }
  .is-concave .video-play { right:16px; bottom:12px; }
  .glass-platform { font-size:17px; }
}
@media(max-width:600px) {
  .is-concave .ring-plane { --video-footer-height:96px; }
  .is-concave .ring-card-return { left:0; width:100%; }
  .is-concave .video-plaque { left:14px; top:auto; bottom:68px; }.is-concave .video-plaque .video-platform { font-size:10px; }
  .is-concave .video-caption { left:14px; bottom:10px; right:68px; }.is-concave .theater-video .video-title { font-size:14px; line-height:1.35; -webkit-line-clamp:2; }.is-concave .video-meta { font-size:10px; }
  .is-concave .video-play { width:44px; height:44px; bottom:26px; right:12px; }
  .is-concave .launcher-step { width:40px; height:44px; }
  .glass-platform { font-size:16px; }
  .is-concave .ring-plane>.theater-reflection { display:block; height:68px; opacity:.23; }
  .glass-rim { border-image-width:16px; }
}
@media(min-width:901px) and (min-height:600px) and (max-height:660px) {
  .is-concave .ring-plane { --video-footer-height:68px; }
  .is-concave .video-plaque { bottom:46px; }
  .is-concave .video-caption { bottom:6px; }
  .is-concave .theater-video .video-title { font-size:17px; line-height:1.25; }
  .is-concave .video-meta { font-size:10.5px; }
  .is-concave .video-play { bottom:12px; }
}
@media(prefers-reduced-motion:reduce) { .glass-platform { transition:none; } }

/* Center the label between the unchanged thumbnail edge and card bottom.
   A shared height keeps short windows and phones aligned without pixel offsets. */
.glass-platform{display:flex;align-items:center;justify-content:center;height:var(--platform-label-height,28px);color:#e8ddf2}
.platform-wordmark{display:block;height:var(--platform-logo-height,22px);background:linear-gradient(175deg,#eee6f2 5%,#d8cde1 48%,#c9b9d4 100%);flex:none;mask-repeat:no-repeat;mask-position:center} /* taste-skill-ignore: flush ivory frosted engraving; no extrusion, shadow, blur or extra animation layer. */
.platform-wordmark.soop-wordmark{width:calc(var(--platform-logo-height,22px) * 72 / 22);mask-image:url('soop-instagram-mask.svg');mask-size:contain}
.platform-wordmark.youtube-wordmark{width:calc(var(--platform-logo-height,22px) * 93 / 20);mask-image:url('assets/theater/youtube-wordmark-engraved.svg');mask-size:contain;mask-position:center}
/* Calibrated to the user's approved Chrome viewport (1365 x 953): the
   carousel computes a 774.3px hero. Scale both logo axes with that same
   existing geometry, including height-limited windows. Keep the footer's
   original logo scale and 3D projection. Bounds protect compact and
   exceptionally large screens without adding another resize/motion loop. */
@media(min-width:901px){
  .glass-platform{--platform-logo-height:clamp(19px,calc(var(--ring-hero-width,774.3px) * 22 / 774.3),44px)}
}
@media(max-width:900px){.glass-platform{--platform-label-height:24px;--platform-logo-height:19px}.platform-wordmark{height:19px}.platform-wordmark.soop-wordmark{width:62px}.platform-wordmark.youtube-wordmark{width:calc(19px * 93 / 20)}}

/* Preserve the approved desktop anchors; only phones fit the full silhouettes
   inside their exposed viewport strip with the original containment rule. */
@media(max-width:600px){
  .glass-platform{--platform-logo-height:var(--mobile-platform-height,19px);left:var(--mobile-platform-left,50%);right:auto;width:max-content;transform:translateX(-50%)}
  .platform-wordmark{height:var(--mobile-platform-height,19px)}
  .platform-wordmark.soop-wordmark{width:calc(var(--mobile-platform-height,19px) * 3.2631578947)}
  .platform-wordmark.youtube-wordmark{width:calc(var(--mobile-platform-height,19px) * 93 / 20)}
}

/* SOOP ink spans 116 of its mask's 124 vertical units, centered at y=62.
   Match YouTube's visible silhouette, not the padded element box. Scope only
   to side labels: central plaque logos keep their approved dimensions. */
.glass-platform .youtube-wordmark{
  --side-youtube-height:calc(var(--platform-logo-height,22px) * 116 / 124);
  height:var(--side-youtube-height);
  width:calc(var(--side-youtube-height) * 93 / 20);
}

/* Center brands share the side engraving without changing metadata placement. */
.is-concave .video-plaque .platform-wordmark { --platform-logo-height:12px; height:12px; }
.is-concave .video-plaque .soop-wordmark { width:calc(12px * 72 / 22); }
.is-concave .video-plaque .youtube-wordmark { width:65.1px; height:14px; mask-image:url('assets/theater/youtube-wordmark-engraved.svg'); mask-size:contain; mask-position:center; }