/* X Studio — depth & motion layer for the public home page (loaded after site.css).
   Everything that hides or pins content is scoped to `html.motion`, a class motion.js adds
   only when it runs and the visitor has not asked for reduced motion. Without it the page
   is the plain, fully visible layout. Only transform/opacity are animated. */

:root { --ease-out:cubic-bezier(.2,.8,.2,1); --gold-rgb:232,184,75; }
[data-theme="light"] { --gold-rgb:184,134,11; }

/* ================= hero: wordmark, light beams, layered headline ================= */
.hero { overflow:clip; }
.hero-fx { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.hero-word { position:absolute; top:clamp(6px, 2.2vw, 30px); left:50%; white-space:nowrap; user-select:none;
  font:900 clamp(60px, 17.4vw, 270px)/.84 "Alexandria", sans-serif; letter-spacing:-.035em;
  color:transparent; -webkit-text-stroke:1px rgba(var(--gold-rgb), .30);
  background:linear-gradient(180deg, rgba(var(--gold-rgb), .17), rgba(var(--gold-rgb), 0) 80%);
  -webkit-background-clip:text; background-clip:text;
  transform:translate3d(-50%, 0, 0); will-change:transform; }
.beam { position:absolute; top:-12%; width:46vw; max-width:640px; height:125%; transform-origin:50% 0; opacity:.55;
  background:linear-gradient(180deg, rgba(var(--gold-rgb), .20), rgba(var(--gold-rgb), .05) 45%, transparent 76%);
  clip-path:polygon(46% 0, 54% 0, 100% 100%, 0 100%); }
.beam.b1 { left:-8%; transform:rotate(-17deg); }
.beam.b2 { right:-8%; transform:rotate(15deg); }
[data-theme="light"] .beam { opacity:.35; }
/* the hero melts into the page instead of ending on a hard video edge */
.hero::after { content:""; position:absolute; inset:auto 0 0 0; height:150px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--bg)); }

.hero-copy h1 { font-weight:900; font-size:clamp(38px, 5.3vw, 70px); line-height:1.16;
  text-shadow:0 .05em 0 rgba(var(--gold-rgb), .26), 0 .1em 0 rgba(var(--gold-rgb), .13), 0 .15em 0 rgba(var(--gold-rgb), .06); }
/* Latin lines run longer than the Arabic ones — keep each on one line. */
[dir="ltr"] .hero-copy h1 { font-size:clamp(30px, 3.5vw, 46px); }
.hero-copy h1 .hl { display:inline-block; overflow:hidden; vertical-align:top; padding:.2em .06em; margin:-.2em -.06em; }
.hero-copy h1 .hl > span { display:inline-block; }
.hero-copy h1 .hl.last > span { color:var(--gold-hi); }

@media (min-width:980px) {
  .hero { align-items:start; }
  .hero-copy { padding-top:clamp(56px, 13vh, 150px); padding-bottom:40px; }
  .hero .widget { background:color-mix(in srgb, var(--panel) 82%, transparent);
    -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); }
}

/* the copy rides along while the (taller) booking form scrolls past */
@media (min-width:980px) and (min-height:700px) { .hero-copy { position:sticky; top:96px; } }
/* motion.js writes the parallax transforms straight onto these few elements (no inherited
   custom properties, so moving the pointer never restyles the whole form). */
html.motion .hero-bg { transform:scale(1.08); }
html.hero-out .beam { animation-play-state:paused !important; }
html.motion .beam.b1 { animation:beam-a 11s ease-in-out infinite alternate; }
html.motion .beam.b2 { animation:beam-b 13s ease-in-out infinite alternate; }
@keyframes beam-a { from { transform:rotate(-21deg); } to { transform:rotate(-9deg); } }
@keyframes beam-b { from { transform:rotate(9deg); } to { transform:rotate(20deg); } }
html.motion .hero-word { animation:word-in 1.4s var(--ease-out) backwards; }
@keyframes word-in { from { opacity:0; } }
html.motion .hero-copy h1 .hl > span { animation:hl-up .95s var(--ease-out) backwards; animation-delay:calc(var(--i, 0) * .13s + .18s); }
@keyframes hl-up { from { transform:translateY(118%) rotate(3deg); } }
html.motion .hero-copy > .eyebrow { animation:rv-up .7s var(--ease-out) .05s backwards; }
html.motion .hero-copy > .sub { animation:rv-up .8s var(--ease-out) .5s backwards; }
html.motion .hero-copy > .cta-row { animation:rv-up .8s var(--ease-out) .62s backwards; }
html.motion .hero-copy > .trust { animation:rv-up .8s var(--ease-out) .74s backwards; }
/* styles.css keeps `transform:none` on the widget forever (fill-mode both) — release it so it can tilt. */
html.motion .hero .widget { animation-fill-mode:backwards; }
html.motion.fine .hero .widget { transition:border-color .22s ease, box-shadow .22s ease; }

/* ================= scroll progress ================= */
.sbar { position:fixed; top:0; left:0; right:0; height:3px; z-index:70; pointer-events:none;
  background:linear-gradient(90deg, #C8952A, #E8B84B, #FFE6A3); transform:scaleX(0); transform-origin:0 50%; }
[dir="rtl"] .sbar { transform-origin:100% 50%; }

/* ================= section headings: layered echo + gold rule ================= */
.band > h2, .story-title {
  text-shadow:0 .05em 0 rgba(var(--gold-rgb), .30), 0 .1em 0 rgba(var(--gold-rgb), .15), 0 .15em 0 rgba(var(--gold-rgb), .07); }
.band > h2::after, .story-title::after { content:""; display:block; width:56px; height:3px; margin:16px auto 0; border-radius:3px;
  background:var(--gold-hi); }

/* ================= scroll reveals ================= */
@keyframes rv-up { from { opacity:0; transform:translateY(26px); } }
@keyframes rv-card { from { opacity:0; transform:perspective(900px) rotateX(16deg) translateY(36px) scale(.97); } }
html.motion .rv:not(.rv-in), html.motion .rv-group:not(.rv-in) > * { opacity:0; }
html.motion .rv.rv-in { animation:rv-up .8s var(--ease-out) backwards; }
html.motion .rv-group.rv-in > * { animation:rv-card .8s var(--ease-out) backwards; animation-delay:calc(var(--rv-i, 0) * 80ms); }
.rv-group > :nth-child(2) { --rv-i:1; } .rv-group > :nth-child(3) { --rv-i:2; } .rv-group > :nth-child(4) { --rv-i:3; }
.rv-group > :nth-child(5) { --rv-i:4; } .rv-group > :nth-child(6) { --rv-i:5; } .rv-group > :nth-child(7) { --rv-i:6; }
.rv-group > :nth-child(n+8) { --rv-i:7; }

/* ================= cards: pointer tilt + glare ================= */
.offer, .pkg, .pkg-card { position:relative; }
.offer::before, .pkg::before, .pkg-card::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(380px circle at var(--gx, 50%) var(--gy, 0%), rgba(var(--gold-rgb), .18), transparent 62%);
  opacity:0; transition:opacity .3s ease; }
.tilt-on { transition:transform .1s linear, box-shadow .22s ease, border-color .22s ease !important; will-change:transform; }
.tilt-on::before { opacity:1; }

/* ================= halls: a studio set ================= */
/* One hall is "on set" at a time and its photos are shown whole: the frame takes each photo's own
   shape (--pw x --ph, set by motion.js inside a --fh tall area), so nothing is ever cropped. A
   studio hall stands between two softboxes; a lecture hall is a projection screen under a ceiling
   projector, seen over rows of seats. The hall's name, kind and book button sit in a bar under the
   photo, never on it. motion.js adds the rig and the lamp switches. */
.hpanel-kind { display:block; margin-bottom:6px; font:700 11px/1.3 "Alexandria", system-ui, sans-serif; letter-spacing:.03em;
  color:#FFE6A3; text-shadow:0 1px 6px rgba(0,0,0,.7); }
.set-scene { position:relative; margin-top:28px; }
.set-rig, .set-ui { display:none; }
html.motion .set-scene.on { --top:76px; --cap:80px; --floor:70px; --sb:150px; --fh:560px; --pw:420px; --ph:560px; --mv:.6s var(--ease-out);
  --py:calc(var(--top) + (var(--fh) - var(--ph)) / 2); --pb:calc(var(--sb) * .44 - 8px);
  height:calc(var(--top) + var(--fh) + var(--cap) + var(--floor)); margin-top:10px;
  margin-inline:min(0px, calc((1120px - 100vw) / 2 + 24px));
  transition:height var(--mv); touch-action:pan-y; -webkit-user-select:none; user-select:none; }
html.motion .set-scene.on.lec { --top:106px; --floor:98px; }
@media (max-width:899px) {
  html.motion .set-scene.on { --top:50px; --cap:76px; --floor:44px; --sb:104px; margin-inline:0; }
  html.motion .set-scene.on.lec { --top:82px; --floor:70px; }
}
/* on the light theme the set keeps its own dark studio, so the lights still read as lights */
html.motion[data-theme="light"] .set-scene.on::before { content:""; position:absolute; inset:-14px 0 0; border-radius:28px;
  background:radial-gradient(ellipse 80% 70% at 50% 40%, #1a1f2b, #0b0e14 78%); }
html.motion .set-scene.on .set-rig { display:block; position:absolute; inset:0; pointer-events:none; }

/* every hall is stacked here; only the one on set shows */
html.motion .set-scene.on > .hall-accordion { display:block; position:absolute; z-index:3; inset:0; width:auto; height:auto; margin:0;
  pointer-events:none; will-change:transform; }
html.motion .set-scene.on .hpanel,
html.motion .set-scene.on .hpanel:hover,
html.motion .set-scene.on .hpanel:active { position:absolute; inset:0; width:auto; height:auto; flex:none; transform:none; border:0; border-radius:0;
  overflow:visible; background:none; box-shadow:none; cursor:default; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s ease, visibility 0s linear .35s; }
html.motion .set-scene.on .hpanel.front { opacity:1; visibility:visible; transition:opacity .3s ease; }
html.motion .set-scene.on .hpanel::after, html.motion .set-scene.on .hpanel-tag { display:none; }
html.motion .set-scene.on .hpanel:focus-visible { outline:none; }
html.motion .set-scene.on .hpanel:focus-visible .hpanel-imgs { outline:2px solid var(--gold-hi); outline-offset:5px; }

/* the photo, whole: the box has the photo's own shape */
html.motion .set-scene.on .hpanel-imgs { inset:auto; left:50%; top:var(--py); width:var(--pw); height:var(--ph); margin-left:calc(var(--pw) / -2);
  border-radius:10px; overflow:hidden; background:#06070a; cursor:zoom-in; pointer-events:auto; filter:brightness(.32) saturate(.7);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10);
  transition:width var(--mv), height var(--mv), margin var(--mv), top var(--mv), filter 1.1s ease .1s; }
html.motion .set-scene.on.lit .hpanel-imgs { filter:none; }
html.motion .set-scene.on.lit .hpanel.front .hpanel-imgs { animation:set-in .7s var(--ease-out) backwards; }
@keyframes set-in { from { opacity:0; transform:translateY(14px) scale(.975); } }
html.motion .set-scene.on .hpanel-img { background-size:contain; background-repeat:no-repeat; transition:opacity .8s ease; }

/* name · kind · book — a bar under the photo */
html.motion .set-scene.on .hpanel-body { inset:auto; left:50%; top:calc(var(--top) + var(--fh) + 26px); width:min(470px, 100%); height:calc(var(--cap) - 26px);
  transform:translateX(-50%); box-sizing:border-box; padding:0 8px; padding-inline-start:22px; display:flex; align-items:center; gap:10px;
  opacity:1; pointer-events:auto; cursor:default; background:color-mix(in srgb, var(--panel) 92%, transparent);
  border:1px solid rgba(var(--gold-rgb), .45); border-radius:999px; box-shadow:0 14px 34px rgba(0,0,0,.35); transition:top var(--mv); }
html.motion .set-scene.on .hpanel-body h3 { order:1; margin:0; font-size:19px; color:var(--ink); text-shadow:none; white-space:nowrap; letter-spacing:-.01em; }
html.motion .set-scene.on .hpanel-kind { order:2; margin:0; padding-inline-start:10px; border-inline-start:1px solid var(--line); font-size:12px;
  color:var(--gold-hi); text-shadow:none; white-space:nowrap; }
html.motion .set-scene.on .hpanel-body .chip { order:3; margin-inline-start:auto; white-space:nowrap; }

/* ---- the rig ---- */
/* the wall behind picks up the photo's own light: a soft, enlarged copy of the photo */
.set-amb { position:absolute; z-index:1; left:50%; top:calc(var(--py) + var(--ph) / 2); width:calc(var(--pw) / 4); height:calc(var(--ph) / 4);
  margin:calc(var(--ph) / -8) 0 0 calc(var(--pw) / -8); transform:scale(4.8); filter:blur(11px) saturate(1.5); opacity:0;
  transition:opacity 1.2s ease .2s, width var(--mv), height var(--mv), margin var(--mv), top var(--mv); }
.set-scene.lit .set-amb { opacity:.5; }
.set-amb i { position:absolute; inset:0; background:center / cover no-repeat; opacity:0; transition:opacity 1s ease; }
.set-amb i.on { opacity:1; }
.set-floor { position:absolute; z-index:1; left:50%; bottom:0; width:min(1100px, 100%); height:calc(var(--floor) + 70px); transform:translateX(-50%);
  background:radial-gradient(ellipse 50% 60% at 50% 34%, rgba(255,236,200,.15), transparent 70%); opacity:0; transition:opacity 1s ease; }
.set-scene.lit .set-floor { opacity:1; }

/* softboxes: the head is drawn (motion.js), the stand stretches to the floor */
.set-light { position:absolute; z-index:2; bottom:8px; width:var(--sb); height:calc(var(--fh) * .78 + var(--cap) + var(--floor) - 8px); will-change:transform;
  transition:left var(--mv), height var(--mv), opacity .4s ease; }
.set-light.l { left:calc(50% - var(--pw) / 2 - var(--sb) - 26px); }
.set-light.r { left:calc(50% + var(--pw) / 2 + 26px); }
.sb { position:absolute; inset:0; }
.set-light.r .sb { transform:scaleX(-1); }
.sb-head { position:absolute; top:0; left:0; width:100%; height:auto; overflow:visible; }
.sb-pole { position:absolute; left:calc(var(--sb) * .262); top:calc(var(--sb) * .86); bottom:calc(var(--sb) * .17); width:5px; margin-left:-2.5px; border-radius:2px;
  background:linear-gradient(90deg, #040508, #3a3f4c 38%, #16181f 68%, #030406); }
.sb-pole::before, .sb-pole::after { content:""; position:absolute; left:-3px; width:11px; height:9px; border-radius:2px;
  background:linear-gradient(90deg, #08090c, #30343f 45%, #08090c); }
.sb-pole::before { top:30%; } .sb-pole::after { top:66%; }
.sb-feet { position:absolute; left:calc(var(--sb) * .262); bottom:0; width:calc(var(--sb) * .8); margin-left:calc(var(--sb) * -.4); height:auto; overflow:visible; }
.sb-haze { position:absolute; left:58%; top:calc(var(--sb) * .74); width:calc(var(--sb) * 4.8); height:calc(var(--sb) * 4.8);
  margin:calc(var(--sb) * -2.4) 0 0 calc(var(--sb) * -2.4); pointer-events:none; opacity:0; transition:opacity 1.1s ease .1s;
  background:radial-gradient(closest-side, rgba(255,234,196,.30), rgba(255,220,160,.10) 46%, transparent 72%); }
.set-light.r .sb-haze { left:42%; }
.set-scene.lit .sb-haze { opacity:1; }
.sb-on, .sb-glow { opacity:0; transition:opacity .9s ease; }
.set-scene.lit .sb-on, .set-scene.lit .sb-glow { opacity:1; }
.set-scene.flash .sb-haze { animation:sb-pop .55s ease-out; }
/* what a lit softbox does to the room: a thin lens streak across its front, and light on the floor */
.sb-flare { position:absolute; left:calc(var(--sb) * .74); top:calc(var(--sb) * .75); width:calc(var(--sb) * 2.4); height:2px; margin:-1px 0 0 calc(var(--sb) * -1.2);
  background:linear-gradient(90deg, transparent, rgba(255,238,205,.5) 35%, rgba(255,255,255,.8) 50%, rgba(255,238,205,.5) 65%, transparent);
  filter:blur(.6px); opacity:0; transition:opacity 1s ease .2s; pointer-events:none; }
.set-scene.lit .sb-flare { opacity:.42; }
.sb-pool { position:absolute; left:50%; bottom:-8px; width:calc(var(--sb) * 3); height:calc(var(--sb) * .56); margin-left:calc(var(--sb) * -1.5);
  background:radial-gradient(closest-side, rgba(255,232,190,.22), rgba(255,232,190,.07) 55%, transparent); opacity:0; transition:opacity 1.1s ease .2s; pointer-events:none; }
.set-scene.lit .sb-pool { opacity:1; }
/* the sides of the photo catch the light of the softbox next to them */
html.motion .set-scene.on.lit .hpanel[data-kind="studio"] .hpanel-imgs { box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10),
  -22px 0 46px -26px rgba(255,226,170,.6), 22px 0 46px -26px rgba(255,226,170,.6); }
@keyframes sb-pop { 10% { opacity:1; transform:scale(1.5); filter:brightness(2.2); } }

/* viewfinder marks around the photo, REC line above it, flash on it, photo counter under it */
.set-marks { position:absolute; z-index:4; left:calc(50% - var(--pw) / 2 - 9px); top:calc(var(--py) - 9px); width:calc(var(--pw) + 18px); height:calc(var(--ph) + 18px);
  transition:left var(--mv), top var(--mv), width var(--mv), height var(--mv), opacity .3s ease; }
.set-marks .c { position:absolute; width:18px; height:18px; border:2px solid rgba(255,255,255,.78); }
.set-marks .tl { top:0; left:0; border-right:0; border-bottom:0; } .set-marks .tr { top:0; right:0; border-left:0; border-bottom:0; }
.set-marks .bl { bottom:0; left:0; border-right:0; border-top:0; } .set-marks .br { bottom:0; right:0; border-left:0; border-top:0; }
.set-hud { position:absolute; z-index:4; left:calc(50% - var(--pw) / 2); top:calc(var(--py) - 31px); width:var(--pw); box-sizing:border-box; padding:0 16px;
  display:flex; justify-content:space-between; align-items:center; direction:ltr; white-space:nowrap;
  font:700 11px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing:.14em; color:rgba(255,255,255,.82);
  transition:left var(--mv), top var(--mv), width var(--mv), opacity .3s ease; }
.set-hud .rec { display:flex; align-items:center; gap:7px; }
.set-hud .rec::before { content:""; width:8px; height:8px; border-radius:50%; background:#ff3b30; box-shadow:0 0 10px #ff3b30; animation:set-rec 1.4s steps(2, jump-none) infinite; }
@keyframes set-rec { 50% { opacity:.25; } }
.set-flash { position:absolute; z-index:5; left:calc(50% - var(--pw) / 2); top:var(--py); width:var(--pw); height:var(--ph); border-radius:10px; background:#fff; opacity:0; }
.set-scene.flash .set-flash { animation:set-flash .5s ease-out; }
@keyframes set-flash { 0% { opacity:0; } 12% { opacity:.8; } 100% { opacity:0; } }
.set-dots { position:absolute; z-index:4; left:0; right:0; top:calc(var(--py) + var(--ph) + 11px); display:flex; justify-content:center; gap:6px; direction:ltr; transition:top var(--mv); }
.set-dots i { width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,.28); transition:width .3s ease, background-color .3s ease; }
.set-dots i.on { width:18px; background:#E8B84B; }

/* ---- a lecture hall on set: projection screen, ceiling projector and its beam, rows of seats ---- */
.set-proj { position:absolute; z-index:4; left:50%; top:-8px; width:calc(var(--sb) * .86); margin-left:calc(var(--sb) * -.43); opacity:0; transform:translateY(-12px);
  transition:opacity .4s ease, transform .5s var(--ease-out); }
.set-proj svg { display:block; width:100%; height:auto; overflow:visible; }
.pj-on { opacity:0; transition:opacity .9s ease; }
.set-scene.lec.lit .pj-on { opacity:1; }
.set-beam { position:absolute; z-index:3; left:calc(50% - var(--pw) / 2); top:var(--pb); width:var(--pw); height:calc(var(--py) - var(--pb)); opacity:0;
  clip-path:polygon(calc(50% - 15px) 0, calc(50% + 15px) 0, 100% 100%, 0 100%);
  background:linear-gradient(180deg, rgba(222,236,255,.62), rgba(222,236,255,.16)); transition:opacity .9s ease .2s, left var(--mv), width var(--mv), height var(--mv); }
.set-scene.lec.lit .set-beam { opacity:1; animation:set-beam 3.4s ease-in-out infinite alternate; }
@keyframes set-beam { from { filter:brightness(.86); } to { filter:brightness(1.1); } }
/* dust drifting through the beam (the beam's own shape hides whatever leaves it) */
.set-beam i { position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:0; }
.set-scene.lec.lit .set-beam i { animation:set-mote 6.5s linear infinite; }
.set-beam i:nth-child(1) { left:44%; top:28%; animation-delay:-.5s; }
.set-beam i:nth-child(2) { left:55%; top:46%; animation-delay:-2.1s; animation-duration:8s; }
.set-beam i:nth-child(3) { left:36%; top:62%; animation-delay:-3.4s; }
.set-beam i:nth-child(4) { left:63%; top:70%; animation-delay:-1.2s; animation-duration:7.4s; }
.set-beam i:nth-child(5) { left:49%; top:80%; animation-delay:-4.6s; animation-duration:9s; }
.set-beam i:nth-child(6) { left:27%; top:84%; animation-delay:-2.8s; }
.set-beam i:nth-child(7) { left:72%; top:88%; animation-delay:-5.2s; animation-duration:8.2s; }
@keyframes set-mote { 0% { opacity:0; transform:translate(0, 0); } 20% { opacity:.9; } 80% { opacity:.6; } 100% { opacity:0; transform:translate(18px, 9px); } }
.set-case { position:absolute; z-index:4; left:calc(50% - var(--pw) / 2 - 15px); top:calc(var(--py) - 19px); width:calc(var(--pw) + 30px); height:14px; border-radius:3px 3px 1px 1px;
  background:linear-gradient(180deg, #f3f5f8, #a3a9b5); box-shadow:0 5px 12px rgba(0,0,0,.45); opacity:0;
  transition:opacity .35s ease, left var(--mv), top var(--mv), width var(--mv); }
.set-seats { position:absolute; z-index:6; left:50%; bottom:0; width:min(100%, 1100px); height:var(--floor); transform:translateX(-50%); overflow:hidden; opacity:0;
  transition:opacity .4s ease;
  -webkit-mask:linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); mask:linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent); }
.set-seats span { position:absolute; left:0; right:0; display:flex; justify-content:center; align-items:flex-end; }
.set-seats i { flex:none; border-radius:38% 38% 6px 6px / 46% 46% 6px 6px; transform:translateY(125%); transition:transform .65s var(--ease-out);
  background:linear-gradient(180deg, #3d4456 0, #1e222d 22%, #0c0e13 100%);
  box-shadow:inset 0 2px 0 rgba(205,224,255,.55), inset 0 13px 16px -10px rgba(205,224,255,.34), inset 0 -12px 18px rgba(0,0,0,.45); }
/* three rows: the far one small and sharp in the screen's light, the near one large, dark and out of focus */
.set-seats span:nth-child(1) { bottom:50%; gap:9px; transform:translateX(calc(var(--px, 0px) * .5)); }
.set-seats span:nth-child(1) i { width:40px; height:36px; filter:brightness(1.12); }
.set-seats span:nth-child(2) { bottom:16%; gap:11px; transform:translateX(var(--px, 0px)); }
.set-seats span:nth-child(2) i { width:56px; height:50px; }
.set-seats span:nth-child(3) { bottom:-26%; gap:15px; transform:translateX(calc(var(--px, 0px) * 1.7)); filter:blur(1.6px) brightness(.72); }
.set-seats span:nth-child(3) i { width:78px; height:70px; }
.set-seats i:nth-child(odd) { transition-delay:.07s; } .set-seats i:nth-child(3n) { transition-delay:.14s; }
.set-scene.lec .set-proj { opacity:1; transform:none; }
.set-scene.lec .set-case { opacity:1; }
.set-scene.lec .set-seats { opacity:1; }
.set-scene.lec .set-seats i { transform:none; }
.set-scene.lec .set-light, .set-scene.lec .set-marks, .set-scene.lec .set-hud { opacity:0; }
.set-scene.lec .set-floor { background:radial-gradient(ellipse 50% 60% at 50% 34%, rgba(200,222,255,.16), transparent 70%); }
.set-scene.lec .set-dots { top:calc(var(--py) + var(--ph) + 13px); }
.set-scene.lec.flash .set-flash { animation:set-flick .7s linear; }
@keyframes set-flick { 0% { opacity:0; } 8% { opacity:.5; } 16% { opacity:.08; } 30% { opacity:.36; } 100% { opacity:0; } }
/* the screen: square corners and a black masking border */
html.motion .set-scene.on .hpanel[data-kind="lecture"] .hpanel-imgs { border-radius:1px;
  box-shadow:0 0 0 6px #08090c, 0 0 0 7px rgba(255,255,255,.16), 0 30px 70px rgba(0,0,0,.55), 0 0 70px rgba(190,215,255,.18); }

@media (max-width:899px) {
  /* phones: the lights stand just off the edges of the screen */
  .set-light.l { left:calc(50% - var(--pw) / 2 - var(--sb) - 6px); }
  .set-light.r { left:calc(50% + var(--pw) / 2 + 6px); }
  html.motion .set-scene.on .hpanel-body { padding-inline-start:16px; gap:8px; }
  html.motion .set-scene.on .hpanel-body h3 { font-size:17px; }
  html.motion .set-scene.on .hpanel-kind { font-size:11px; padding-inline-start:8px; }
  html.motion .set-scene.on .hpanel-body .chip { font-size:12px; padding:8px 12px; min-height:36px; }
  .set-hud { font-size:9px; top:calc(var(--py) - 25px); padding:0 12px; }
  .set-marks .c { width:14px; height:14px; }
  .set-seats span:nth-child(1) { gap:6px; } .set-seats span:nth-child(1) i { width:28px; height:25px; }
  .set-seats span:nth-child(2) { gap:8px; } .set-seats span:nth-child(2) i { width:40px; height:36px; }
  .set-seats span:nth-child(3) { gap:10px; } .set-seats span:nth-child(3) i { width:56px; height:50px; }
}

/* the lamp switches above the set */
html.motion #halls.set-on .set-ui { display:flex; }
.set-ui { align-items:center; justify-content:center; gap:14px; margin-top:22px; flex-wrap:wrap; position:relative; z-index:7; }
.set-lamps { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center; }
.set-lamp { width:48px; height:48px; border-radius:50%; cursor:pointer; font:800 17px/1 "Alexandria", system-ui, sans-serif;
  border:1px solid var(--line); background:color-mix(in srgb, var(--panel) 86%, transparent); color:var(--muted);
  transition:background-color .25s ease, color .25s ease, box-shadow .35s ease, transform .25s var(--ease-out), border-color .25s ease; }
.set-lamp:hover { color:var(--gold-hi); border-color:rgba(var(--gold-rgb), .6); }
.set-lamp.on { color:#0B0E14; border-color:#E8B84B; transform:scale(1.1);
  background:radial-gradient(circle at 50% 38%, #fff6dc, #E8B84B 62%, #c8952a);
  box-shadow:0 0 0 5px rgba(var(--gold-rgb), .16), 0 0 30px rgba(var(--gold-rgb), .6); }
.set-nav { width:44px; height:44px; border-radius:50%; cursor:pointer; font:700 20px/1 system-ui, sans-serif;
  border:1px solid rgba(var(--gold-rgb), .55); background:color-mix(in srgb, var(--panel) 80%, transparent); color:var(--gold-hi); }
.set-nav:hover { background:rgba(var(--gold-rgb), .14); }
.set-hint { display:none; text-align:center; color:var(--muted); font-size:13px; margin-top:14px; }
html.motion #halls.set-on .set-hint { display:block; }
html.motion #halls.set-on > .note { display:none; }
@media (max-width:899px) {
  .set-nav { display:none; }
  .set-lamps { gap:7px; flex-wrap:nowrap; }
  .set-lamp { width:40px; height:40px; font-size:15px; }
}

/* ================= story: through the lens ================= */
/* A camera lens with a hall photo behind the glass. Scrolling goes through the lens: the glass
   opens (--open 0 → 1) until the whole photo fills the stage, uncropped; between two ways of
   shooting it closes back to the lens and the aperture shuts on one photo and opens on the next.
   motion.js sets --s (lens diameter), --r0 (glass radius), --r1 (radius that clears the photo),
   each photo's size and --cv (how much it is enlarged to fill the glass while the lens is shut). */
.story { --s:420px; --r0:160px; --r1:420px; padding:clamp(64px, 9vw, 112px) var(--gutter); position:relative; }
.story-title { text-align:center; font-size:clamp(28px, 4.4vw, 44px); letter-spacing:-.01em; line-height:1.25; font-weight:700; }
.story-pin { display:grid; gap:36px; align-items:center; grid-template-columns:minmax(0, 1fr); }
.story-stage { position:relative; min-width:0; }
/* without the motion layer: the photo of the first way of shooting, whole */
.cam-hw, .cam-front, .cam-marks, .lens-tag, .cam-clip { display:none; }
.cam-shot { display:none; width:auto; max-width:100%; max-height:70vh; height:auto; margin:0 auto; border-radius:14px; }
.cam-shot.on[src] { display:block; }

html.motion .story-stage { height:var(--sh, 420px); perspective:1200px; perspective-origin:50% 44%; }
html.motion .story-stage::before { content:""; position:absolute; left:50%; top:46%; width:calc(var(--s) * 2.1); height:calc(var(--s) * 1.7);
  transform:translate(-50%, -50%); pointer-events:none; background:radial-gradient(closest-side, rgba(var(--gold-rgb), .20), transparent 72%); }
html.motion .cam { --open:0; position:absolute; inset:0 0 var(--strip, 46px); transform-style:preserve-3d; will-change:transform; }
/* the lens: it grows and fades as you go through it */
html.motion .cam-hw, html.motion .cam-front { display:block; position:absolute; left:50%; top:50%; width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform-style:preserve-3d; pointer-events:none; }
html.motion .cam-hw { transform:scale(calc(1 + var(--open) * 1.5)); opacity:calc(1 - var(--open) * 1.8); }
html.motion .cam-front { opacity:calc(1 - var(--open) * 4); }
.cam-hw > i, .cam-front > i { position:absolute; border-radius:50%; }
/* barrel: discs stacked behind the front ring give the lens its depth */
.lens-barrel { inset:-1%; background:#0c0f15; box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.lens-barrel.b1 { transform:translateZ(-26px); } .lens-barrel.b2 { transform:translateZ(-54px) scale(.985); } .lens-barrel.b3 { transform:translateZ(-84px) scale(.965); }
.lens-body { inset:0; background:radial-gradient(circle at 34% 28%, #343a4b 0, #161a23 46%, #07090d 100%);
  box-shadow:0 34px 80px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.07), 0 0 0 1px rgba(var(--gold-rgb), .4); }
/* focus ring (fine gold ticks) and zoom ring (wide white ticks) turn opposite ways with the scroll */
.lens-ring.r1 { inset:1.5%; background:repeating-conic-gradient(from 0deg, rgba(232,184,75,.95) 0 .9deg, transparent .9deg 5deg);
  -webkit-mask:radial-gradient(closest-side, transparent 91.5%, #000 92.5% 98%, transparent 99%); mask:radial-gradient(closest-side, transparent 91.5%, #000 92.5% 98%, transparent 99%); will-change:transform; }
.lens-ring.r2 { inset:6.5%; background:repeating-conic-gradient(from 3deg, rgba(255,255,255,.55) 0 2.2deg, transparent 2.2deg 15deg);
  -webkit-mask:radial-gradient(closest-side, transparent 92%, #000 93% 98%, transparent 99%); mask:radial-gradient(closest-side, transparent 92%, #000 93% 98%, transparent 99%); will-change:transform; }
.lens-gold { inset:10.6%; border:2px solid rgba(232,184,75,.85); box-shadow:0 0 18px rgba(var(--gold-rgb), .35); }
/* the photos: one stage-sized layer, cut to the glass while the lens is shut */
html.motion .cam-view { position:absolute; inset:0; cursor:zoom-in;
  clip-path:circle(calc(var(--r0) + (var(--r1) - var(--r0)) * var(--open)) at 50% 50%); }
html.motion .cam-shot { display:block; position:absolute; left:50%; top:50%; max-width:none; max-height:none; margin:0; border-radius:12px; opacity:0;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  transform:translate(-50%, -50%) scale(calc(var(--cv, 1) + (1 - var(--cv, 1)) * var(--open))); }
html.motion .cam-shot.on[src] { opacity:1; }
/* the smart board clip plays in the photo's place (motion.js adds .clip while it runs) */
html.motion .cam-clip { display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); border-radius:12px; background:#000;
  object-fit:contain; opacity:0; pointer-events:none; transition:opacity .5s ease; box-shadow:0 30px 70px rgba(0,0,0,.5); }
html.motion .cam.clip .cam-clip { opacity:1; }
html.motion .cam.clip .cam-shot.on[src] { opacity:0; transition:opacity .5s ease; }
/* aperture blades: --o runs from 1 (wide open) to 0 (closed) */
.lens-iris { inset:11.2%; background:repeating-conic-gradient(from 8deg, #0d1017 0deg 52deg, #1d2230 52deg 60deg);
  -webkit-mask:radial-gradient(circle closest-side, transparent calc(var(--o, 1) * 100%), #000 calc(var(--o, 1) * 100% + 1.5px));
  mask:radial-gradient(circle closest-side, transparent calc(var(--o, 1) * 100%), #000 calc(var(--o, 1) * 100% + 1.5px)); }
.lens-glare { inset:12%; mix-blend-mode:screen;
  background:radial-gradient(ellipse 46% 34% at 30% 22%, rgba(255,255,255,.26), transparent 70%),
             radial-gradient(ellipse 40% 30% at 72% 82%, rgba(140,180,255,.14), transparent 70%);
  box-shadow:inset 0 0 0 4px #141821, inset 0 0 44px rgba(0,0,0,.85); }
/* frame marks around the whole photo once the lens is open */
html.motion .cam-marks { display:block; position:absolute; left:50%; top:50%; width:calc(var(--mw, 300px) + 20px); height:calc(var(--mh, 300px) + 20px);
  transform:translate(-50%, -50%); pointer-events:none; opacity:calc((var(--open) - .8) * 5); transition:width .4s var(--ease-out), height .4s var(--ease-out); }
.cam-marks .c { position:absolute; width:20px; height:20px; border:2px solid rgba(var(--gold-rgb), .9); }
.cam-marks .tl { top:0; left:0; border-right:0; border-bottom:0; } .cam-marks .tr { top:0; right:0; border-left:0; border-bottom:0; }
.cam-marks .bl { bottom:0; left:0; border-right:0; border-top:0; } .cam-marks .br { bottom:0; right:0; border-left:0; border-top:0; }
/* the hall plate: under the lens while it is shut, under the photo once it is open */
html.motion .lens-tag { display:block; position:absolute; left:50%; transform:translateX(-50%); white-space:nowrap;
  top:calc(50% + (var(--s) / 2 + 8px) * (1 - var(--open)) + (var(--mh, 300px) / 2 + 14px) * var(--open));
  font:700 13px/1 "Alexandria", sans-serif; color:var(--ink); background:color-mix(in srgb, var(--panel) 92%, transparent); border:1px solid rgba(var(--gold-rgb), .6);
  padding:8px 14px; border-radius:999px; pointer-events:none; }
html.motion .lens-tag:empty { display:none; }

.story-caps { list-style:none; display:grid; gap:28px; max-width:520px; margin:0 auto; width:100%; }
.cap { display:grid; gap:8px; justify-items:start; }
.cap-n { font:900 clamp(40px, 6vw, 72px)/1 "Alexandria", sans-serif; color:transparent; -webkit-text-stroke:1px rgba(var(--gold-rgb), .7); direction:ltr; }
.cap h3 { font-size:clamp(28px, 4vw, 46px); font-weight:800; line-height:1.2; letter-spacing:-.01em; }
.cap p { color:var(--muted); font-size:18px; line-height:1.8; }
.cap .cta { margin-top:10px; }
.story-dots { display:none; }
@media (min-width:900px) {
  .story-pin { grid-template-columns:minmax(0, 1.45fr) minmax(0, 1fr); grid-template-areas:"title title" "stage caps"; column-gap:48px; }
  .story-title { grid-area:title; } .story-stage { grid-area:stage; } .story-caps { grid-area:caps; }
}

/* pinned: the section is tall, the content sticks, the lens works with the scroll */
html.motion .story { height:330vh; padding-block:0; }
html.motion .story-pin { position:sticky; top:var(--top-h, 60px); height:calc(100vh - var(--top-h, 60px)); height:calc(100svh - var(--top-h, 60px)); min-height:480px;
  align-content:center; padding-block:16px; gap:20px; }
html.motion .story-caps { display:grid; gap:0; }
html.motion .cap { grid-area:1 / 1; opacity:0; transform:translateY(26px); pointer-events:none;
  transition:opacity .5s ease, transform .6s var(--ease-out); }
html.motion .cap.on { opacity:1; transform:none; pointer-events:auto; }
html.motion .cap.past { transform:translateY(-26px); }
html.motion .story-dots { display:flex; gap:8px; justify-content:center; direction:ltr; }
.story-dots i { width:28px; height:3px; border-radius:3px; background:var(--line); transition:background-color .3s ease; }
.story-dots i.on { background:var(--gold-hi); }
@media (min-width:900px) {
  html.motion .story-pin { grid-template-areas:"title title" "stage caps" "dots dots"; }
  html.motion .story-dots { grid-area:dots; }
}
@media (max-width:899px) {
  /* phones: the photo takes the room — the big outline number goes, the text tightens */
  html.motion .story { height:310vh; }
  html.motion .story-pin { gap:10px; padding-block:10px; }
  html.motion .story-title { font-size:23px; }
  html.motion .story-title::after { margin-top:8px; }
  html.motion .cap { justify-items:center; text-align:center; gap:2px; }
  html.motion .cap-n { display:none; }
  html.motion .cap h3 { font-size:24px; }
  html.motion .cap p { font-size:14.5px; line-height:1.55; }
  html.motion .cap .cta { margin-top:6px; }
}

/* ================= buttons: lift, shine, ripple ================= */
html.motion .cta, html.motion .chip, html.motion .set-lamp, html.motion .set-nav { position:relative; overflow:hidden; }
.rip { position:absolute; border-radius:50%; background:currentColor; opacity:.3; transform:scale(0); pointer-events:none; animation:rip .65s ease-out forwards; }
@keyframes rip { to { transform:scale(1); opacity:0; } }
/* a band of light crosses a button when the pointer comes onto it */
.cta::after { content:""; position:absolute; top:-20%; bottom:-20%; left:-60%; width:42%; pointer-events:none; opacity:0; transform:skewX(-18deg);
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); }
.cta.ghost::after { background:linear-gradient(100deg, transparent, rgba(var(--gold-rgb), .4), transparent); }
html.motion .cta:hover::after { animation:cta-shine .8s ease-out; }
@keyframes cta-shine { from { left:-60%; opacity:1; } to { left:130%; opacity:1; } }
html.motion .cta:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(var(--gold-rgb), .38); }
html.motion .cta.ghost:hover { box-shadow:0 8px 22px rgba(var(--gold-rgb), .2); }
html.motion .cta:active { transform:translateY(0) scale(.96); }
html.motion[data-theme="light"] .cta:hover { box-shadow:0 10px 26px rgba(23,27,38,.28); }
/* the main call to action breathes, and the light crosses it on its own now and then */
html.motion .hero-cta { animation:cta-breathe 2.8s ease-in-out infinite; }
html.motion .hero-cta::after { animation:cta-shine-loop 4.6s ease-in-out 2s infinite; }
html.motion .hero-cta:hover::after { animation:cta-shine .8s ease-out; }
@keyframes cta-shine-loop { 0% { left:-60%; opacity:1; } 18% { left:130%; opacity:1; } 18.1%, 100% { left:130%; opacity:0; } }
@keyframes cta-breathe { 0%, 100% { box-shadow:0 0 0 0 rgba(var(--gold-rgb), .5); } 55% { box-shadow:0 0 0 13px rgba(var(--gold-rgb), 0); } }
html.motion[data-theme="light"] .hero-cta { animation-name:cta-breathe-ink; }
@keyframes cta-breathe-ink { 0%, 100% { box-shadow:0 0 0 0 rgba(23,27,38,.34); } 55% { box-shadow:0 0 0 13px rgba(23,27,38,0); } }
/* outline buttons fill from the bottom */
html.motion .chip { transition:transform .2s var(--ease-out), border-color .22s ease, box-shadow .22s ease, background .28s var(--ease-out), color .22s ease; }
html.motion .chip:hover { transform:translateY(-1px); }
html.motion .chip:active { transform:scale(.95); }
html.motion .chip.gold { background-image:linear-gradient(var(--gold-hi), var(--gold-hi)); background-repeat:no-repeat; background-size:100% 0; background-position:50% 100%; }
html.motion .chip.gold:hover { background-size:100% 100%; color:#0B0E14; border-color:var(--gold-hi); }
html.motion[data-theme="light"] .chip.gold:hover { color:#fff; }
html.motion .set-lamp:hover { transform:translateY(-2px) scale(1.06); }
html.motion .set-lamp.on:hover { transform:scale(1.12); }
html.motion .wa-help { animation:wa-help 2.8s ease-in-out infinite; }
@keyframes wa-help { 0%, 100% { box-shadow:0 0 0 0 rgba(37,211,102,.5); } 60% { box-shadow:0 0 0 9px rgba(37,211,102,0); } }

/* ================= floating WhatsApp / Facebook: they arrive, ring, and say what they are ================= */
#waFloat, #fbFloat { --fab:37,211,102; transition:transform .25s var(--ease-out), box-shadow .25s ease; }
#fbFloat { --fab:24,119,242; }
#waFloat::before, #waFloat::after, #fbFloat::before, #fbFloat::after { content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid rgb(var(--fab)); opacity:0; pointer-events:none; }
html.motion #waFloat::before, html.motion #fbFloat::before { animation:fab-ring 2.6s ease-out 2.2s infinite; }
html.motion #waFloat::after, html.motion #fbFloat::after { animation:fab-ring 2.6s ease-out 3.5s infinite; }
html.motion #fbFloat::before { animation-delay:2.85s; } html.motion #fbFloat::after { animation-delay:4.15s; }
@keyframes fab-ring { 0% { transform:scale(1); opacity:.75; } 75%, 100% { transform:scale(1.8); opacity:0; } }
html.motion #waFloat, html.motion #fbFloat { animation:fab-in .7s var(--ease-out) 1.2s backwards; }
html.motion #fbFloat { animation-delay:1.38s; }
@keyframes fab-in { from { transform:scale(0) rotate(-45deg); opacity:0; } 70% { transform:scale(1.16); opacity:1; } }
/* every few seconds the WhatsApp icon rings like a phone and the Facebook one hops */
html.motion #waFloat svg { transform-origin:50% 60%; animation:fab-shake 6s ease-in-out 3.2s infinite; }
html.motion #fbFloat svg { animation:fab-hop 6s ease-in-out 6.2s infinite; }
@keyframes fab-shake { 0%, 82%, 100% { transform:none; } 84% { transform:rotate(-17deg) scale(1.12); } 87% { transform:rotate(15deg) scale(1.12); }
  90% { transform:rotate(-11deg) scale(1.1); } 93% { transform:rotate(8deg) scale(1.06); } 96% { transform:rotate(-4deg); } }
@keyframes fab-hop { 0%, 84%, 100% { transform:none; } 88% { transform:translateY(-6px) scale(1.14); } 92% { transform:translateY(2px) scale(.98); } 96% { transform:translateY(-2px); } }
#waFloat:hover, #fbFloat:hover, #waFloat:focus-visible, #fbFloat:focus-visible { transform:scale(1.12);
  box-shadow:0 12px 30px rgba(0,0,0,.34), 0 0 0 7px rgba(var(--fab), .22); }
#waFloat:active, #fbFloat:active { transform:scale(.94); }
.fab-label { position:absolute; inset-inline-start:calc(100% + 12px); top:50%; transform:translateY(-50%) scale(.7); white-space:nowrap; pointer-events:none;
  font:700 13px/1 "Alexandria", system-ui, sans-serif; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:999px;
  padding:9px 13px; opacity:0; box-shadow:0 8px 24px rgba(0,0,0,.25); transition:opacity .22s ease, transform .3s var(--ease-out); }
[dir="rtl"] .fab-label { transform-origin:100% 50%; } [dir="ltr"] .fab-label { transform-origin:0 50%; }
#waFloat:hover .fab-label, #fbFloat:hover .fab-label, #waFloat:focus-visible .fab-label, #fbFloat:focus-visible .fab-label { opacity:1; transform:translateY(-50%) scale(1); }
/* a few seconds after the page opens, the WhatsApp button introduces itself once */
html.motion #waFloat .fab-label { animation:fab-peek 5s ease 4.2s 1 backwards; }
@keyframes fab-peek { 0% { opacity:0; transform:translateY(-50%) scale(.7); } 9%, 88% { opacity:1; transform:translateY(-50%) scale(1); } 100% { opacity:0; transform:translateY(-50%) scale(.7); } }
@media (max-width:640px) { .fab-label { font-size:12px; padding:8px 11px; inset-inline-start:calc(100% + 9px); } }

/* ================= light theme: echoes and glows that stay clean on a white page ================= */
[data-theme="light"] .hero-copy h1 { text-shadow:0 .05em 0 rgba(var(--gold-rgb), .20), 0 .1em 0 rgba(var(--gold-rgb), .09); }
[data-theme="light"] .band > h2, [data-theme="light"] .story-title { text-shadow:0 .05em 0 rgba(var(--gold-rgb), .22), 0 .1em 0 rgba(var(--gold-rgb), .10); }
[data-theme="light"] .hero-copy h1 .hl.last > span { color:var(--gold-display, var(--gold-hi)); }
[data-theme="light"] .band > h2::after, [data-theme="light"] .story-title::after { background:#C8952A; }
[data-theme="light"] .beam { opacity:.6; background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.4) 45%, transparent 76%); }
html.motion[data-theme="light"] .story-stage::before { background:radial-gradient(closest-side, rgba(23,27,38,.09), transparent 72%); }

/* ================= footer wordmark ================= */
.foot-word { margin-top:40px; text-align:center; white-space:nowrap; overflow:hidden; user-select:none;
  font:900 clamp(56px, 16.5vw, 220px)/.86 "Alexandria", sans-serif; letter-spacing:-.035em;
  color:transparent; -webkit-text-stroke:1px rgba(var(--gold-rgb), .30);
  background:linear-gradient(180deg, rgba(var(--gold-rgb), .16), rgba(var(--gold-rgb), 0) 85%);
  -webkit-background-clip:text; background-clip:text; }
.foot-word + .foot-legal { margin-top:8px; }

/* ================= small screens: keep it light ================= */
@media (max-width:719px) {
  .beam { display:none; }
  html.motion .hero-bg { transform:none; }
}

/* styles.css pads <body> on phones for the staff pages; the home page runs edge to edge. */
@media (max-width:700px) { body { padding-inline:0; } }