/* Websites · the screening (showcase.js) and the SEO chapter (seo.js). Builds on ../_template/discipline.css.
   The stage is fixed over the world while the showcase runs: one site at a time (each a layer the next wipes over), its
   caption on columns 1-3, the desktop recording on columns 4-11 (16:10), the phone recording in a phone frame over its
   lower right. Transform, opacity and clip-path only. */

/* ---------------------------------------------------------------- the stage */
.ws { position: fixed; inset: 0; z-index: 2; visibility: hidden; pointer-events: none; --ws-ground: 0; }
.ws::before { content: ''; position: absolute; inset: 0; background: var(--void, #07060a); opacity: var(--ws-ground); }
.ws__sites { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.ws-site { position: absolute; inset: 0; visibility: hidden; background: transparent; }
/* the sites after the first wipe in over their own ground (the one they cover stays under them) */
.ws-site + .ws-site { background: var(--void, #07060a); }
.ws-site__cap { position: absolute; left: var(--g-m, 48px); top: calc(var(--nav-h, 72px) + 30vh); width: calc(3 * var(--g-col, 80px) + 2 * var(--g-gut, 24px)); pointer-events: auto; will-change: transform, opacity; }
.ws-site__n { margin: 0 0 14px; font-size: 11px; letter-spacing: 0.16em; color: rgba(236, 233, 241, 0.55); }
.ws-site__client { margin: 0; font: 600 clamp(28px, 2.6vw, 40px)/1.02 var(--font-title); font-stretch: 92%; letter-spacing: -0.02em; color: var(--bone, #ece9f1); text-wrap: balance; }
.ws-site__type { margin: 12px 0 0; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #c9b6ea; }
.ws-site__place { margin: 8px 0 0; font-size: 15px; color: rgba(236, 233, 241, 0.74); }
.ws-site__by { margin: 18px 0 0; font-size: 15px; color: rgba(236, 233, 241, 0.86); }
.ws-site__visit { display: inline-flex; margin-top: 14px; min-height: 44px; align-items: center; font-size: 15px; }

/* the frames: the desktop on columns 4-11, the phone over its lower right; both rise 4 % with their opacity */
.ws-site__media { --ws-rise: 1; position: absolute; inset: 0; }
.ws-frame { position: absolute; overflow: hidden; background: #0b0a0f; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(236, 233, 241, 0.1); }
.ws-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ws-frame--d { left: calc(var(--g-m, 48px) + 3 * (var(--g-col, 80px) + var(--g-gut, 24px))); width: calc(8 * var(--g-col, 80px) + 7 * var(--g-gut, 24px));
  aspect-ratio: 16 / 10; top: 50%; translate: 0 -54%; border-radius: 10px; }
.ws-frame--p { width: min(300px, 21vw); aspect-ratio: 9 / 19.5; border-radius: 34px; border: 7px solid #121016;
  left: calc(var(--g-m, 48px) + 11 * (var(--g-col, 80px) + var(--g-gut, 24px)) - min(300px, 21vw) * 0.56); top: 50%; translate: 0 -38%; }
.ws-site:not(:first-child) .ws-frame, .ws-site:first-child .ws-frame--p { opacity: var(--ws-rise); transform: translate3d(0, calc((1 - var(--ws-rise)) * 4%), 0); }

/* (P1, change 15) the mockups, lit at their edges so they read on the night: a laptop round the desktop recording (its
   lid, bezel and base stand behind the frame; the frame itself is the screen, so the hand-off still lands on the table
   laptop's screen) and a phone with a metal band. --ws-shell: the laptop's presence (it forms round the first site's
   screen once the hand-off has settled, and leaves as the last one's flies back); --ws-hold: the site's hold, 0 to 1,
   over which the phone drifts up past the laptop */
.ws-frame--d { border-radius: 3px; box-shadow: none; }
.ws-lap { position: absolute; left: calc(var(--g-m, 48px) + 3 * (var(--g-col, 80px) + var(--g-gut, 24px))); width: calc(8 * var(--g-col, 80px) + 7 * var(--g-gut, 24px));
  aspect-ratio: 16 / 10; top: 50%; translate: 0 -54%; --bz: clamp(10px, 1.05vw, 18px); opacity: var(--ws-shell, 1); pointer-events: none; }
.ws-site:not(:first-child) .ws-lap { transform: translate3d(0, calc((1 - var(--ws-rise)) * 4%), 0); }
.ws-lap__lid { position: absolute; inset: calc(-1 * var(--bz)); top: calc(-1.25 * var(--bz)); border: 1.5px solid transparent;
  border-radius: calc(var(--bz) + 6px) calc(var(--bz) + 6px) 5px 5px;
  background: linear-gradient(#0c0b10, #0c0b10) padding-box, linear-gradient(165deg, #e9e6f0 0%, #8f8b99 22%, #3d3a45 52%, #77737f 100%) border-box;
  box-shadow: 0 50px 110px -40px rgba(0, 0, 0, 0.95), 0 0 120px -20px rgba(102, 45, 145, 0.45); }
.ws-lap__lid::after { content: ''; position: absolute; left: 50%; top: calc(0.62 * var(--bz) - 2.5px); width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: #2a2731; box-shadow: inset 0 0 0 1px rgba(236, 233, 241, 0.12); }
.ws-lap__base { position: absolute; left: -7.5%; width: 115%; top: calc(100% + var(--bz) - 1px); height: calc(var(--bz) * 1.15);
  border-radius: 2px 2px 26px 26px / 2px 2px 100% 100%;
  background: linear-gradient(180deg, #f4f1f8 0%, #c2bfcb 14%, #8e8a98 48%, #55525e 82%, #34313b 100%);
  box-shadow: 0 30px 50px -18px rgba(0, 0, 0, 0.9); }
.ws-lap__base::before { content: ''; position: absolute; left: 50%; top: 0; width: 13%; height: 42%; translate: -50% 0;
  border-radius: 0 0 12px 12px / 0 0 100% 100%; background: linear-gradient(180deg, #4b4853, #8f8b99); }
.ws-frame--p { border: 6px solid #060508; box-shadow: 0 0 0 1.5px #6b6775, 0 0 0 3px #2a2731, 0 0 0 3.6px rgba(236, 233, 241, 0.28),
  0 40px 90px -30px rgba(0, 0, 0, 0.95), 0 0 90px -20px rgba(102, 45, 145, 0.4); }
.ws-site__media > .ws-frame.ws-frame--p { transform: translate3d(0, calc((1 - var(--ws-rise)) * 4% + (0.5 - var(--ws-hold, 0.5)) * 18px), 0); }

/* the index of the sites under the caption: the current one lit; each jumps to its site (the chapter dip) */
.ws__index { position: absolute; left: var(--g-m, 48px); bottom: max(6vh, 40px); width: calc(3 * var(--g-col, 80px) + 2 * var(--g-gut, 24px)); pointer-events: auto; opacity: var(--ws-ground); }
.ws__index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
/* (PORT-SITE, a11y) the unlit names at 0.54: 5.2:1 on the night (0.48 read 4.31:1) */
.ws__index a { display: block; padding: 4px 0; font: 500 11px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(236, 233, 241, 0.54); text-decoration: none; transition: color 240ms var(--ease-out); }
.ws__index a:hover, .ws__index a[aria-current="true"] { color: var(--bone, #ece9f1); }
.ws__index a[aria-current="true"]::before { content: ''; display: inline-block; width: 14px; height: 1px; margin-right: 8px; vertical-align: middle; background: #c9b6ea; }
.ws-at { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; }

/* the head over the stage's left column (a zone of the explainer layer) */
html[data-layout="land"] .xp[data-land="ws-head"] { left: var(--g-m, 48px); right: auto; top: calc(var(--nav-h, 72px) + 6vh); width: calc(3 * var(--g-col, 80px) + 2 * var(--g-gut, 24px)); z-index: 3; }
html[data-layout="port"] .xp[data-port="ws-head"] { left: 20px; right: 20px; top: calc(var(--nav-h, 60px) + 8px); bottom: auto; z-index: 3; }
.xp[data-story="ws-head"] .xp__h2 { font-size: clamp(22px, 2vw, 30px); max-width: 16ch; }
.xp[data-story="ws-head"] .xp__body { font-size: 15px; max-width: 30ch; }

/* ---------------------------------------------------------------- a phone: the phone recording large, the desktop's
   poster above it (one decoder), the caption beside the phone, the counter in place of the index */
html[data-layout="port"] .ws-frame--d { left: 20px; right: 20px; width: auto; top: calc(var(--nav-h, 60px) + 104px); translate: none; border-radius: 8px; }
html[data-layout="port"] .ws-frame--p { left: auto; right: 20px; width: min(46vw, 210px); top: calc(var(--nav-h, 60px) + 104px + (100vw - 40px) * 0.625 - 54px); translate: none; border-radius: 26px; border-width: 5px; }
/* (P1, change 15) the laptop round the desktop poster, its base inside the screen's margins; the caption under the base */
html[data-layout="port"] .ws-lap { left: 20px; right: 20px; width: auto; top: calc(var(--nav-h, 60px) + 104px); translate: none; --bz: 7px; }
html[data-layout="port"] .ws-lap__base { left: -3.5%; width: 107%; }
html[data-layout="port"] .ws-site__cap { left: 20px; right: auto; width: calc(100vw - 40px - min(46vw, 210px) - 16px); top: calc(var(--nav-h, 60px) + 104px + (100vw - 40px) * 0.625 + 34px); }
html[data-layout="port"] .ws-site__client { font-size: 24px; }
html[data-layout="port"] .ws-site__place, html[data-layout="port"] .ws-site__by { font-size: 14px; }
html[data-layout="port"] .ws__index { display: none; }

/* ---------------------------------------------------------------- the SEO chapter */
.ws-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: ws-plan; }
.ws-plan__s { display: grid; grid-template-columns: 2.6em 1fr; column-gap: 6px; padding: 8px 0 8px 2px; border-top: 1px solid rgba(236, 233, 241, 0.1); opacity: 0.8; transition: opacity 320ms var(--ease-out); }
.ws-plan__s.is-on { opacity: 1; }
/* (PORT-SITE, check_contrast) the steps not yet told at 0.8 (0.5 read 2.7:1), on a deeper glass: the plan stands over the
   lit table and its screens */
.xp:is([data-land="ws-plan"], [data-port="ws-plan"]) { --gl-fill: rgba(14, 10, 22, 0.74); --gl-tint: rgba(14, 10, 22, 0.82); }
/* (PORT-SITE, a11y) the still version has no step being told: every step stands lit (dimmed, its lines read 3.2:1) */
:is(.v3-reduced, .v3-nogl) .ws-plan__s { opacity: 1; }
.ws-plan__n { grid-row: 1 / 3; padding-top: 3px; font-size: 12px; letter-spacing: 0.1em; color: #ffe0a6; }
.ws-plan__h { margin: 0; font: 600 18px/1.2 var(--font-title); font-stretch: 92%; color: var(--bone, #ece9f1); }
.ws-plan__l { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: rgba(236, 233, 241, 0.78); }
html[data-layout="land"] .xp[data-land="ws-plan"] { left: auto; right: var(--g-m, 48px); top: max(16vh, calc(var(--nav-h, 72px) + 24px)); width: calc(4 * var(--g-col, 80px) + 3 * var(--g-gut, 24px)); max-width: 420px; }
/* (PORT-SITE, check_contrast) the plan stands above the chapters' pill (44 px + its edge, and a 10 px gap): its last
   step ran under the pill */
html[data-layout="port"] .xp[data-port="ws-plan"] { left: 20px; right: 20px; top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom, 0px)) + 56px); padding: 12px 14px; }
html[data-layout="port"] .ws-plan { gap: 2px; }
html[data-layout="port"] .ws-plan__s { padding: 5px 0; }
html[data-layout="port"] .ws-plan__l { font-size: 13px; }
/* (PORT-SITE, the approved design's own rules: titles <= 18 characters a line, captions <= 52; phone <= 34) */
.xp[data-story="seo-head"] .xp__h2 { max-width: 14ch; }
.xp[data-story="seo-head"] .xp__body { max-width: 41ch; }
.xp[data-story="seo-labs"] .cap-labline { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
html[data-layout="port"] .xp[data-story="seo-head"] .xp__body { max-width: 27ch; }
html[data-layout="port"] .xp:is([data-story="seo-labs"], [data-story="ws-head"]) .xp__body { max-width: 23ch; }

/* ---------------------------------------------------------------- reduced motion and no WebGL: the eight in the page's
   flow, the two posters side by side, a play button per site (played only when asked) */
:is(.v3-reduced, .v3-nogl) .ws { position: relative; inset: auto; visibility: visible; pointer-events: auto; padding: 0 var(--g-m, 20px); }
:is(.v3-reduced, .v3-nogl) .ws::before { display: none; }
:is(.v3-reduced, .v3-nogl) .ws__sites { position: relative; inset: auto; display: grid; gap: 56px; }
:is(.v3-reduced, .v3-nogl) .ws-site { position: relative; inset: auto; visibility: visible; background: none; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px; align-items: end; clip-path: none !important; }
:is(.v3-reduced, .v3-nogl) .ws-site__cap { position: relative; left: auto; top: auto; width: auto; opacity: 1 !important; transform: none !important; }
:is(.v3-reduced, .v3-nogl) .ws-site__media { position: relative; inset: auto; display: flex; gap: 16px; align-items: flex-end; }
:is(.v3-reduced, .v3-nogl) .ws-frame { position: relative; left: auto; top: auto; translate: none; opacity: 1 !important; transform: none !important; }
:is(.v3-reduced, .v3-nogl) .ws-frame--d { flex: 1 1 auto; width: auto; }
:is(.v3-reduced, .v3-nogl) .ws-frame--p { flex: 0 0 auto; width: min(22%, 200px); }
:is(.v3-reduced, .v3-nogl) .ws-lap { display: none; }
:is(.v3-reduced, .v3-nogl) .ws-frame--d { border-radius: 8px; box-shadow: 0 0 0 1.5px rgba(236, 233, 241, 0.22), 0 30px 80px -30px rgba(0, 0, 0, 0.9); }
:is(.v3-reduced, .v3-nogl) .ws__index { position: relative; left: auto; bottom: auto; width: auto; opacity: 1; display: block; margin: 40px 0 0; }
:is(.v3-reduced, .v3-nogl) .ws__index ol { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 760px) {
  :is(.v3-reduced, .v3-nogl) .ws-site { grid-template-columns: minmax(0, 1fr); }
}
/* (PORT-SITE, a11y) a ghost button: without a fill of its own, a dark-scheme browser painted its native grey (4.44:1) */
.ws-site__play { margin-top: 16px; background: transparent; color: var(--signal); border-color: var(--line-strong); }
.ws-site__play[aria-pressed="true"] { background: rgba(201, 182, 234, 0.16); border-color: #c9b6ea; }