/* ============================================================================
   AION Promo Reel — 16:9 promo composition layer
   Sits on top of aion.css (which provides tokens, fonts, device frame, and the
   Home / Briefing / Listen screens). This file adds: the landscape stage, the
   phone placement, the right-side promo column, kinetic VO captions, the block
   label, and the Personalize ("Make AION yours") screen.
   ============================================================================ */

/* ---- landscape stage (1920×1080, JS-scaled, letterboxed) ---- */
#reel-viewport{position:fixed;inset:0;background:#000;display:grid;place-items:center;overflow:hidden;}
#reel{position:relative;width:1920px;height:1080px;flex:none;transform-origin:center center;
  background:radial-gradient(120% 90% at 28% 46%, #161019 0%, #0d0b0f 40%, var(--obsidian) 74%);
  color:var(--alabaster);font-family:var(--f-inter);overflow:hidden;}
#reel-ambient{position:absolute;left:50%;top:50%;width:1200px;height:1200px;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(200,163,92,.18) 0%, rgba(200,163,92,.06) 34%, transparent 64%);
  filter:blur(6px);pointer-events:none;will-change:transform,opacity;}
#reel-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(135% 120% at 50% 46%, transparent 50%, rgba(0,0,0,.6) 100%);}
#reel-grain{position:absolute;inset:0;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---- phone placement (centered) ---- */
#reel-phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);
  transform-origin:center center;will-change:transform,opacity;}
/* the device + screens inherit all styling from aion.css */

/* ---- right promo column (removed from layout) ---- */
#reel-right{display:none;}

/* ---- kinetic VO captions (lower-center) ---- */
#cap-wrap{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);width:1360px;text-align:center;
  pointer-events:none;z-index:20;}
#cap{display:inline-block;font-family:var(--f-inter);font-weight:500;font-size:38px;line-height:1.3;
  letter-spacing:.005em;color:var(--alabaster);
  padding:14px 30px;border-radius:14px;background:rgba(10,10,12,.42);backdrop-filter:blur(6px);
  box-shadow:0 10px 40px -16px rgba(0,0,0,.8);}
#cap b{color:var(--aurum);font-weight:600;}
.cap-word{display:inline-block;will-change:transform,opacity;margin:0 .12em;}

/* ---- block label (top-left) ---- */
#blocklabel{position:absolute;left:90px;top:64px;font-family:var(--f-mono);font-size:17px;letter-spacing:.2em;
  color:var(--fog);display:flex;align-items:center;gap:16px;}
#blocklabel .ix{color:var(--aurum);}
#blocklabel .nm{color:var(--alabaster);}
#aion-mark{position:absolute;right:90px;top:60px;font-family:var(--f-cinzel);font-size:26px;letter-spacing:.16em;color:var(--alabaster);opacity:.9;}
#aion-mark .i{color:var(--aurum);}

/* progress ticks for the reel (which block) */
#reel-ticks{position:absolute;left:90px;bottom:40px;display:flex;gap:8px;}
#reel-ticks i{width:34px;height:3px;border-radius:2px;background:var(--graphite);display:block;transition:background .3s;}
#reel-ticks i.on{background:var(--aurum);}

/* ============================================================================
   PERSONALIZE  ·  "Make AION yours"  (new screen)
   ============================================================================ */
.personalize{background:var(--obsidian);}
.personalize::after{content:'';position:absolute;top:0;left:0;right:0;height:66px;z-index:38;pointer-events:none;
  background:linear-gradient(180deg,var(--obsidian) 40%, transparent);}
.personalize .screen-inner{position:absolute;left:0;top:0;width:100%;will-change:transform;}
.personalize .pinner{padding:62px 30px 40px;}
.personalize .back{font-family:var(--f-mono);font-size:17px;letter-spacing:.06em;color:var(--aurum);}
.personalize .peyebrow{font-family:var(--f-mono);font-weight:500;font-size:15px;letter-spacing:.34em;color:var(--aurum-lo);margin-top:26px;}
.personalize .ptitle{font-family:var(--f-fraunces);font-weight:500;font-size:62px;line-height:.98;letter-spacing:-.02em;color:var(--alabaster);margin:14px 0 0;}
.personalize .ptitle .i{color:var(--aurum);}
.personalize .psub{font-family:var(--f-fraunces);font-style:italic;font-weight:400;font-size:25px;line-height:1.34;color:var(--fog);margin-top:22px;}
.personalize .psec{font-family:var(--f-fraunces);font-weight:500;font-size:34px;color:var(--alabaster);margin-top:44px;}
.personalize .pdesc{font-family:var(--f-inter);font-weight:300;font-size:19px;line-height:1.5;color:#A7A39C;margin-top:12px;}

.personalize .pcards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:24px;}
.personalize .pcard{border:1.5px solid var(--graphite);border-radius:18px;padding:24px 12px 20px;text-align:center;
  background:var(--ink-2);transition:none;}
.personalize .pcard .n{font-family:var(--f-fraunces);font-weight:400;font-size:42px;line-height:1;color:var(--alabaster);}
.personalize .pcard .l{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;color:var(--fog);margin-top:14px;line-height:1.4;}
.personalize .pcard .s{font-family:var(--f-mono);font-size:13px;color:var(--fog-dim);margin-top:10px;}
.personalize .pcard.sel{border-color:var(--aurum);background:rgba(200,163,92,.06);}
.personalize .pcard.sel .n{color:var(--aurum);}
.personalize .pcard.sel .l{color:var(--aurum);}

.personalize .pchips{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:24px;}
.personalize .pchip{border:1.5px solid var(--graphite);border-radius:14px;padding:18px 6px;text-align:center;background:var(--ink-2);}
.personalize .pchip .n{font-family:var(--f-fraunces);font-weight:400;font-size:34px;line-height:1;color:var(--alabaster);}
.personalize .pchip .l{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--fog);margin-top:10px;}
.personalize .pchip.sel{border-color:var(--aurum);background:rgba(200,163,92,.06);}
.personalize .pchip.sel .n,.personalize .pchip.sel .l{color:var(--aurum);}

.personalize .pvoice{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;}
.personalize .vcard{border:1.5px solid var(--graphite);border-radius:16px;padding:22px 22px;background:var(--ink-2);}
.personalize .vcard .vn{font-family:var(--f-fraunces);font-weight:500;font-size:26px;color:var(--alabaster);}
.personalize .vcard .vt{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;color:var(--fog);margin-top:10px;}
.personalize .vcard.sel{border-color:var(--aurum);background:rgba(200,163,92,.06);}
.personalize .vcard.sel .vn{color:var(--aurum);}

/* gold "lock-in" sweep on a freshly-selected option */
@keyframes selpop{0%{transform:scale(1);}40%{transform:scale(1.05);}100%{transform:scale(1);}}
.personalize .pop{animation:selpop .5s ease-out;}

/* ============================================================================
   SECTION SCREENS  ·  Picks / Analyze / Sources / History / Learning / More
   Shared "gx" system to keep these light.
   ============================================================================ */
.gx{background:var(--obsidian);}
.gx .gi{position:absolute;left:0;top:0;width:100%;padding:60px 30px 130px;will-change:transform;}
.gx::after{content:'';position:absolute;top:0;left:0;right:0;height:64px;z-index:38;pointer-events:none;
  background:linear-gradient(180deg,var(--obsidian) 44%,transparent);}
.gx-back{font-family:var(--f-mono);font-size:16px;letter-spacing:.06em;color:var(--aurum);}
.gx-eyebrow{font-family:var(--f-mono);font-weight:600;font-size:15px;letter-spacing:.26em;color:var(--aurum);
  display:flex;align-items:center;gap:12px;margin-top:8px;}
.gx-eyebrow i{width:9px;height:9px;border-radius:50%;background:var(--aurum);display:inline-block;}
.gx-h1{font-family:var(--f-fraunces);font-weight:500;font-size:54px;line-height:1.02;letter-spacing:-.02em;
  color:var(--alabaster);margin-top:16px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;}
.gx-h1 .ct{font-size:30px;color:var(--aurum);}
.gx-h1 .g{color:var(--aurum);font-style:normal;}
.gx-desc{font-family:var(--f-inter);font-weight:300;font-size:20px;line-height:1.5;color:#A7A39C;margin-top:20px;}
.gx-card{border:1px solid var(--graphite);border-radius:16px;background:var(--ink-2);padding:24px 22px;margin-top:16px;position:relative;}
.gx-tag{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;padding:6px 11px;border-radius:6px;}
.gx-tag.fin{color:#5FB58A;border:1px solid rgba(95,181,138,.4);background:rgba(95,181,138,.08);}
.gx-tag.lon{color:var(--violet);border:1px solid rgba(155,123,212,.4);background:rgba(155,123,212,.08);}
.gx-tag.tier{color:#7FA6D8;border:1px solid rgba(127,166,216,.4);background:rgba(127,166,216,.08);}
.gx .chev{color:var(--aurum-lo);font-family:var(--f-mono);font-size:26px;margin-left:auto;}
.gx .tabbar{position:absolute;}

/* ---- PICKS ---- */
.picks .gx-eyebrow{letter-spacing:.24em;}
.picks .gx-h1{font-size:46px;}
.pk-num{position:absolute;top:18px;right:22px;font-family:var(--f-fraunces);font-weight:500;font-size:64px;color:rgba(244,239,230,.07);line-height:1;}
.pk-lbl{font-family:var(--f-mono);font-size:14px;letter-spacing:.16em;color:var(--aurum);}
.pk-card h3{font-family:var(--f-fraunces);font-weight:600;font-size:30px;line-height:1.16;color:var(--alabaster);margin:14px 50px 0 0;}
.pk-via{font-family:var(--f-mono);font-size:13.5px;letter-spacing:.06em;color:var(--aurum);margin-top:14px;}
.pk-body{font-family:var(--f-inter);font-weight:300;font-size:18px;line-height:1.5;color:#A7A39C;margin-top:14px;}
.pk-actions{display:flex;align-items:center;gap:12px;margin-top:22px;}
.pk-btn{font-family:var(--f-mono);font-size:14px;letter-spacing:.12em;padding:12px 16px;border-radius:11px;border:1px solid var(--graphite);color:var(--fog);}
.pk-btn.gold{border-color:var(--aurum-lo);color:var(--aurum);}
.pk-ic{width:44px;height:44px;border-radius:50%;border:1px solid var(--graphite);display:grid;place-items:center;color:var(--fog);}
.pk-ic svg{width:20px;height:20px;}

/* ---- ANALYZE ---- */
.analyze .gx-h1{font-size:50px;}
.az-types{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.az-type{font-family:var(--f-mono);font-size:15px;letter-spacing:.1em;color:var(--fog);padding:14px 18px;border-radius:12px;border:1px solid var(--graphite);background:var(--ink-2);display:flex;align-items:center;gap:8px;}
.az-type.sel{border-color:var(--aurum);color:var(--aurum);background:rgba(200,163,92,.05);}
.az-run{display:flex;gap:14px;margin-top:22px;}
.az-field{flex:1;border:1px solid var(--graphite);border-radius:13px;background:var(--ink-2);padding:22px;font-family:var(--f-inter);font-size:19px;color:var(--alabaster);overflow:hidden;white-space:nowrap;}
.az-field .caret{display:inline-block;width:2px;height:20px;background:var(--aurum);margin-left:2px;vertical-align:-3px;animation:caret 1s step-end infinite;}
@keyframes caret{50%{opacity:0;}}
.az-go{width:120px;display:grid;place-items:center;border-radius:13px;background:var(--aurum);color:var(--obsidian);font-family:var(--f-mono);font-weight:600;font-size:18px;letter-spacing:.1em;}
.az-hist-lbl{display:flex;justify-content:space-between;margin-top:36px;font-family:var(--f-mono);font-size:14px;letter-spacing:.18em;}
.az-hist-lbl span:first-child{color:var(--aurum);}
.az-hist-lbl span:last-child{color:var(--fog-dim);}
.az-card{display:flex;align-items:center;gap:18px;border:1px solid var(--graphite);border-radius:16px;background:var(--ink-2);padding:22px;margin-top:16px;}
.az-play{width:54px;height:54px;border-radius:50%;border:1px solid var(--aurum-lo);display:grid;place-items:center;color:var(--aurum);flex:none;}
.az-card h4{font-family:var(--f-fraunces);font-weight:500;font-size:24px;line-height:1.18;color:var(--alabaster);margin:0;}
.az-card .d{font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;color:var(--aurum-lo);margin-top:10px;}

/* ---- SOURCES ---- */
.sr-add{margin-top:26px;border:1.5px dashed var(--aurum-lo);border-radius:14px;padding:22px;text-align:center;
  font-family:var(--f-mono);font-weight:600;font-size:17px;letter-spacing:.14em;color:var(--aurum);background:rgba(200,163,92,.03);}
.sr-toggle{display:flex;gap:14px;margin-top:22px;}
.sr-toggle span{font-family:var(--f-mono);font-size:16px;padding:14px 20px;border-radius:12px;border:1px solid var(--graphite);color:var(--fog);}
.sr-toggle span.sel{border-color:var(--aurum);color:var(--aurum);}
.sr-seclbl{font-family:var(--f-mono);font-size:14px;letter-spacing:.2em;color:var(--aurum-lo);margin-top:26px;}
.sr-name{display:flex;align-items:center;gap:14px;font-family:var(--f-fraunces);font-weight:600;font-size:27px;color:var(--alabaster);}
.sr-name .dot{width:11px;height:11px;border-radius:50%;background:#3FBF7F;display:block;}
.sr-row{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap;}
.sr-trust{font-family:var(--f-mono);font-size:15px;color:var(--alabaster);}
.sr-act{font-family:var(--f-mono);font-size:15px;padding:11px 18px;border-radius:11px;border:1px solid var(--graphite);color:var(--alabaster);margin-left:auto;}
.sr-votes{margin-top:16px;display:inline-flex;gap:8px;font-family:var(--f-mono);font-size:15px;color:var(--alabaster);border:1px solid var(--graphite);border-radius:10px;padding:10px 14px;}

/* ---- HISTORY ---- */
.hi-row{display:flex;align-items:center;gap:18px;border:1px solid var(--graphite);border-radius:16px;background:var(--ink-2);padding:22px 20px;margin-top:14px;}
.hi-row.sel{border-color:var(--aurum-lo);background:rgba(200,163,92,.05);}
.hi-date{flex:none;width:130px;}
.hi-date .d{font-family:var(--f-mono);font-size:14px;letter-spacing:.06em;color:var(--aurum);}
.hi-date .tm{font-family:var(--f-mono);font-size:22px;color:var(--alabaster);display:block;margin-top:8px;}
.hi-bar{width:1px;align-self:stretch;background:var(--graphite);}
.hi-t{font-family:var(--f-fraunces);font-weight:500;font-size:25px;line-height:1.16;color:var(--alabaster);}
.hi-meta{font-family:var(--f-mono);font-size:14px;letter-spacing:.06em;color:var(--fog);margin-top:10px;}

/* ---- LEARNING ---- */
.ln-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:26px;}
.ln-tile{border:1px solid var(--graphite);border-radius:16px;background:var(--ink-2);padding:24px 14px;text-align:center;}
.ln-tile .n{font-family:var(--f-fraunces);font-weight:600;font-size:42px;color:var(--aurum);line-height:1;}
.ln-tile .l{font-family:var(--f-mono);font-size:13px;letter-spacing:.04em;color:var(--fog);margin-top:14px;line-height:1.4;}
.ln-card{border:1px solid var(--graphite);border-radius:16px;background:var(--ink-2);padding:24px 22px;margin-top:16px;}
.ln-card.like{border-left:3px solid #3FBF7F;}
.ln-top{display:flex;align-items:center;gap:12px;font-size:20px;}
.ln-date{margin-left:auto;font-family:var(--f-mono);font-size:14px;letter-spacing:.06em;color:var(--fog);}
.ln-card h3{font-family:var(--f-fraunces);font-weight:500;font-size:27px;line-height:1.18;color:var(--alabaster);margin:18px 0 0;}
.ln-via{font-family:var(--f-mono);font-size:14px;color:var(--fog);margin-top:12px;}
.ln-tags{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}
.ln-tags span{font-family:var(--f-mono);font-size:13px;color:var(--aurum);border:1px solid var(--aurum-lo);border-radius:999px;padding:8px 14px;background:rgba(200,163,92,.04);}
.ln-watch{font-family:var(--f-mono);font-size:16px;letter-spacing:.06em;color:var(--aurum);margin-top:20px;}

/* ---- MORE ---- */
.more .gx-h1{font-size:62px;}
.mo-sec{font-family:var(--f-mono);font-size:14px;letter-spacing:.24em;color:var(--aurum-lo);margin-top:38px;}
.mo-row{display:flex;align-items:center;gap:20px;border:1px solid var(--graphite);border-radius:16px;background:var(--ink-2);padding:26px 22px;margin-top:14px;}
.mo-ic{font-size:30px;width:40px;text-align:center;flex:none;}
.mo-t{font-family:var(--f-fraunces);font-weight:500;font-size:26px;color:var(--alabaster);}
.mo-s{font-family:var(--f-inter);font-weight:300;font-size:17px;color:var(--fog);margin-top:8px;}

/* selection glow + heart fill for choreography */
.gx-card.glow,.ln-card.glow{border-color:var(--aurum-lo);box-shadow:0 0 0 1px var(--aurum-lo),0 16px 50px -20px rgba(200,163,92,.45);}
.pk-ic.on{border-color:var(--aurum-lo);color:var(--aurum);}
.pk-ic.on svg{fill:rgba(200,163,92,.25);}

/* controls reuse #controls styles from aion.css; nudge z so it sits above #reel */
#controls{z-index:300;}