/* ==========================================================================
   CIERRE scene. Every rule is scoped to .close-scene (tokens on the section,
   not :root). Same base tokens as process.css so the two read as one system.
   Tiles are built at their final on-screen size (920 x 575 plane px), so the
   zoomed-in state is scale ~1 and the overview scales DOWN. --u is the unit for
   the blank tile's inner UI: 2.3 keeps the look of the old 400 px tile at scale 2.2.
   ========================================================================== */
.close-scene{
  --s-text:#ecf0f7; --s-muted:#8995ab; --s-body:#c3cde0; --s-accent:#8fd3ff;
  --s-raised:#111b31; --s-panel:#0d1526; --s-hair:rgba(236,240,247,.1);
  --s-sans:'Archivo',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --s-mono:'JetBrains Mono',ui-monospace,Consolas,'Courier New',monospace;
  --g:clamp(16px,4vw,56px);
  --u:1px;
  position:relative;background:transparent;color:var(--s-text);font-family:var(--s-sans);
}
.close-scene .scene-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1400px;perspective-origin:50% 50%}
.close-scene.scene--static .scene-stage{position:relative;height:auto;overflow:visible;perspective:none}

/* ---- the tilted wall: 3 x 3 tiles of 920 x 575 plane px, pivot = center tile ---- */
.close-scene .cl-plane{position:absolute;left:0;top:0;width:2808px;height:1773px;display:grid;grid-template-columns:repeat(3,920px);grid-template-rows:repeat(3,575px);gap:24px;transform-origin:0 0}
.close-scene .cl-tile{position:relative;margin:0;border-radius:10px;overflow:hidden;border:1px solid var(--s-hair);background:var(--s-raised)}
.close-scene .cl-tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* the blank tile: dashed browser frame, no background of its own */
.close-scene .cl-blank{--u:2.3px;border:0;background:transparent;overflow:visible}
.close-scene .cl-frame{position:absolute;inset:0;display:flex;flex-direction:column;border-radius:calc(12 * var(--u));border:calc(2 * var(--u)) dashed rgba(143,211,255,.5);background:var(--s-panel);overflow:hidden}
.close-scene .cl-bar{display:flex;align-items:center;gap:calc(8 * var(--u));height:calc(44 * var(--u));flex:none;padding:0 calc(14 * var(--u));border-bottom:calc(1 * var(--u)) dashed rgba(143,211,255,.28)}
.close-scene .cl-bar>i{width:calc(10 * var(--u));height:calc(10 * var(--u));border-radius:50%;background:rgba(236,240,247,.22)}
.close-scene .cl-url{flex:1;min-width:0;margin-left:calc(10 * var(--u));height:calc(28 * var(--u));border-radius:999px;background:rgba(236,240,247,.06);display:flex;align-items:center;padding:0 calc(14 * var(--u));font-family:var(--s-mono);font-size:calc(14 * var(--u));color:var(--s-text);white-space:nowrap;overflow:hidden}
.close-scene .cl-caret{display:inline-block;width:calc(2 * var(--u));height:calc(15 * var(--u));margin-left:calc(2 * var(--u));background:var(--s-accent)}
.close-scene .cl-body{position:relative;flex:1;padding:calc(24 * var(--u)) calc(26 * var(--u))}
.close-scene .cl-sk{display:block;height:calc(12 * var(--u));border-radius:calc(6 * var(--u));background:rgba(236,240,247,.07);margin-bottom:calc(12 * var(--u))}
.close-scene .cl-msg{position:absolute;left:calc(26 * var(--u));right:calc(26 * var(--u));top:50%;transform:translateY(-50%);margin:0;font-size:calc(26 * var(--u));font-weight:600;letter-spacing:-.01em;color:var(--s-accent)}

/* ---- scrim + copy (desktop: left of the tile; phone: below it) ---- */
.close-scene .cl-scrim{position:absolute;left:0;top:0;bottom:0;width:60vw;z-index:2;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(7,11,20,.94) 0%,rgba(7,11,20,.82) 42%,rgba(7,11,20,0) 100%)}
.close-scene .cl-copy{position:absolute;z-index:4;left:var(--g);top:50%;transform:translateY(-50%);width:min(440px,36vw);pointer-events:none}
.close-scene .cl-label{margin:0;font-family:var(--s-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--s-muted);opacity:0}
.close-scene .cl-label b{color:var(--s-accent);font-weight:500}
.close-scene .cl-h{margin:16px 0 0;font-size:clamp(40px,4.4vw,66px);font-weight:700;font-stretch:112%;letter-spacing:-.035em;line-height:.96;text-wrap:balance;opacity:0}
.close-scene .cl-lead{margin:20px 0 0;font-size:clamp(17px,1.4vw,19px);line-height:1.5;color:var(--s-body);max-width:36ch;opacity:0}
/* flat pill: only used when motion is reduced (close.js moves the CTA into the copy column then) */
.close-scene .cl-cta{display:inline-flex;align-items:center;gap:14px;margin-top:34px;padding:19px 28px;border-radius:999px;background:var(--s-accent);color:#06101f;font-weight:600;font-size:17px;text-decoration:none;opacity:1;pointer-events:auto;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.close-scene .cl-cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(143,211,255,.6)}
.close-scene .cl-cta svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .35s}
.close-scene .cl-cta:hover svg{transform:translateX(4px)}
.close-scene .cl-cta:focus-visible{outline:2px solid var(--s-accent);outline-offset:4px}

/* ---- the 3D window: the blank tile's body is a column; its last bar is the CTA, and close.js grows it into the button ----
   Everything here is the t = 0 look (a grey bar with no label). close.js sets width, height, radius, colour, label and glow from t. */
.close-scene .cl-blank .cl-body{display:flex;flex-direction:column;justify-content:center;padding:calc(12 * var(--u)) calc(26 * var(--u))}
.close-scene .cl-blank .cl-msg{position:static;transform:none;margin:calc(18 * var(--u)) 0 calc(16 * var(--u));font-size:calc(26 * var(--u));line-height:1.15}
.close-scene .cl-blank .cl-cta{position:relative;display:flex;align-items:center;justify-content:center;box-sizing:border-box;flex:none;margin:0;padding:0 calc(26 * var(--u));border:0;border-radius:calc(6 * var(--u));width:68%;height:calc(12 * var(--u));background:rgba(236,240,247,.07);color:#06101f;font-family:var(--s-sans);font-weight:600;font-size:calc(12 * var(--u));line-height:1;letter-spacing:0;text-decoration:none;white-space:nowrap;opacity:1;pointer-events:none;transition:none;transform:none;box-shadow:none}
.close-scene .cl-blank .cl-cta:hover{transform:none;box-shadow:none}
.close-scene .cl-blank .cl-cta-in{display:inline-flex;align-items:center;gap:calc(12 * var(--u));opacity:0}
.close-scene .cl-blank .cl-cta-in svg{width:calc(16 * var(--u));height:calc(16 * var(--u));flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
/* the glow ring: --glow (0 to 1) is set by close.js; the pulse is a CSS loop on the ring only, off under reduced motion */
.close-scene .cl-blank .cl-cta::after{content:"";position:absolute;inset:calc(-9 * var(--u));border-radius:999px;border:calc(2 * var(--u)) solid rgba(143,211,255,.55);box-shadow:0 0 calc(44 * var(--u)) rgba(143,211,255,.35);opacity:var(--glow,0);pointer-events:none;animation:cl-ring 2.8s ease-in-out infinite}
@keyframes cl-ring{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media (prefers-reduced-motion: reduce){.close-scene .cl-blank .cl-cta::after{animation:none}}

/* phones: the wall is fit to width above, copy and CTA sit below it, with a bottom scrim */
@media (max-width:899px){
  .close-scene .cl-copy{left:16px;right:16px;top:auto;bottom:auto;transform:none;width:auto;padding-right:72px}   /* top is set by close.js: right under the window */
  .close-scene .cl-h{font-size:40px}
  .close-scene .cl-lead{font-size:16px;margin-top:14px}
  .close-scene .cl-cta{margin-top:24px;padding:16px 24px;font-size:16px}
  /* phones: a taller window (the blank tile grows symmetrically about the camera pivot, so PIV_Y does not change) */
  .close-scene .cl-blank{height:1054px;margin-top:-239.5px;z-index:2}
  .close-scene .cl-blank .cl-msg{font-size:calc(32 * var(--u))}
  .close-scene .cl-blank .cl-cta{font-size:calc(18 * var(--u))}
  .close-scene .cl-scrim{top:auto;bottom:0;left:0;right:0;width:auto;height:42%;background:linear-gradient(180deg,rgba(7,11,20,0) 0%,rgba(7,11,20,.94) 22%,rgba(7,11,20,.97) 100%)}
  .close-scene .cl-msg{font-size:calc(40 * var(--u))}
}

/* ---- reduced motion (engine adds scene--static): blank tile front-on, copy beside it (below on phones) ---- */
.close-scene .cl-still{display:none;position:relative;width:400px;height:250px}
.close-scene.scene--static .scene-stage{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(32px,5vw,80px);padding:clamp(88px,12vw,140px) var(--g)}
.close-scene.scene--static .cl-plane,
.close-scene.scene--static .cl-scrim{display:none}
.close-scene.scene--static .cl-still{display:block;zoom:1.4}
.close-scene.scene--static .cl-copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:min(440px,90vw);padding-right:0}
.close-scene.scene--static .cl-label,
.close-scene.scene--static .cl-h,
.close-scene.scene--static .cl-lead{opacity:1}
.close-scene.scene--static .cl-cta{pointer-events:auto}
@media (max-width:899px){
  .close-scene.scene--static .cl-still{zoom:.9}
  .close-scene.scene--static .cl-copy{width:min(440px,100%)}
}