/* ===================================================================
   UP — drag-to-Vercel static site
   Swap art in /assets. Every slot has a CSS fallback so it ships empty.
   =================================================================== */

:root{
  --bg:#050805;
  --panel:#11140d;
  --panel-edge:#3a4a2c;
  --olive:#cdd6b0;
  --ink:#e9efd9;

  /* ===== Prevue / TV-Guide "Program Guide" EPG palette ===== */
  --epg-cell:#5d7e91;       /* steel-blue cell fill */
  --epg-cell-dk:#3f5e72;    /* darker cell (channel col / icon) */
  --epg-hi:#a7c6d6;         /* raised bevel highlight (top/left) */
  --epg-lo:#243d4c;         /* sunken bevel shadow (bottom/right) */
  --epg-text:#f3eed8;       /* cream guide text */
  --epg-textsh:#16303d;     /* text drop-shadow */
  --epg-magenta:#b8479c;    /* highlighted-program magenta */
  --epg-teal:#3fa9a0;       /* highlighted-program teal */
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:#040604;
  color:var(--ink);
  font-family:'M PLUS Rounded 1c',sans-serif;
  overflow-x:hidden;
  position:relative;
}
/* ===================== BACKGROUND VIDEO =====================
   Bottom-most layer: z-index 0, under every other layer (sections 10, rail 30,
   crt 9000, mascot 9500). object-fit:cover so it fills any aspect without bars.
   The old body::before vignette is gone — a child element at z-index 0 always
   paints over a body pseudo-element, so it would have been dead weight. The
   scrim below replaces it and does the same job on top of the video. */
.bgvid{
  position:fixed;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none;background:#040604;
}
/* keeps the page readable over moving footage, and re-creates the vignette */
.bgscrim{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%,
    rgba(2,4,2,.42) 0%, rgba(2,4,2,.66) 62%, rgba(0,0,0,.82) 100%);
}

/* ===================== CRT / COMPOSITE-VIDEO LO-RES PASS =====================
   Full-screen overlay. backdrop-filter blurs EVERYTHING behind it (text, cells,
   TV, images) for the soft low-resolution tuner look, without disturbing layout
   or the fixed rail/mascot. Scanlines + faint RGB shift finish the old-TV feel. */
.crt{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  backdrop-filter:blur(0.8px) contrast(1.06) saturate(1.12) brightness(1.02);
  -webkit-backdrop-filter:blur(0.8px) contrast(1.06) saturate(1.12) brightness(1.02);
  /* horizontal scanlines */
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px,
      rgba(0,0,0,0)   1px, rgba(0,0,0,0)   3px),
    /* faint vertical RGB phosphor stripes */
    repeating-linear-gradient(90deg,
      rgba(255,0,0,.035)  0px, rgba(0,255,0,.035) 1px,
      rgba(0,0,255,.035)  2px, rgba(0,0,0,0)      3px);
  mix-blend-mode:normal;
}
/* gentle flicker so it feels like a live signal */
@keyframes crtFlicker{ 0%,100%{opacity:1} 50%{opacity:.94} 92%{opacity:.97} }
.crt{animation:crtFlicker 5.5s ease-in-out infinite}

/* low-res RGB-bleed on the cream guide text (the blurry white-text look) */
.ca-text,.ca-copy,
.rail-btn,.slide .ph{
  text-shadow:
    0.7px 0 0 rgba(255,40,40,.55),
   -0.7px 0 0 rgba(40,150,255,.55),
    0 1px 1px rgba(8,6,30,.7);
}

img,video{display:block}
a{text-decoration:none;color:inherit}

/* ===================== RIGHT RAIL ===================== */
.rail{
  position:fixed;top:50%;right:18px;transform:translateY(-50%);
  z-index:30;display:flex;flex-direction:column;gap:10px;
}
/* ===== DIAMOND PLAQUE BUTTONS =====
   btn.png is a gold-bevelled octagonal plate (1200x400). Its corner chamfers are
   a 45' cut running 78px in from each corner, so the slice has to clear 78 or the
   chamfers tear. Slice and border-width are both kept uniform so that 45' cut
   still renders at 45' instead of being squashed to a smear.
   `fill` paints the diamond centre across the content box. */
.plaque{
  background:transparent;border:15px solid transparent;border-radius:0;
  border-image:url(assets/btn.png) 86 fill stretch;
  color:#2b1e05;
  /* dark type on a bright diamond fill — a light top edge keeps it legible
     against the glitter rather than a dark drop shadow, which reads as mud */
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  transition:transform .4s cubic-bezier(.4,.0,.2,1),filter .4s ease;
}
/* same pop as the carousel's active slide: scale(1.12) on the same curve.
   Glow is drop-shadow, not box-shadow — box-shadow would trace the rectangular
   border-box and hang a square halo off these octagonal plaques. */
.plaque:hover{
  transform:scale(1.12);
  filter:brightness(1.12) drop-shadow(0 10px 20px rgba(0,0,0,.55))
         drop-shadow(0 0 13px rgba(255,214,120,.5));
}
.plaque:active{transform:scale(1.06) translateY(1px);filter:brightness(.95)}

.rail-btn{
  position:relative;display:flex;align-items:center;gap:10px;
  min-width:126px;padding:5px 7px;border-width:17px;
  font:900 15px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:1px;
}
.rail-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;flex:none;font-size:12px;font-weight:900;
  color:#f6e6b0;background:rgba(24,16,2,.82);
  border:1px solid rgba(255,215,120,.85);border-radius:2px;
  text-shadow:none;
}

/* ---- volume slider: metal housing, gold thumb, matches the rail ---- */
.rail-vol{
  display:flex;align-items:center;gap:8px;
  border-width:11px;padding:4px 7px;min-width:126px;
}
.vol-ico{font:900 13px/1 'M PLUS Rounded 1c',sans-serif;color:#16130c;flex:none;
  text-shadow:0 1px 0 rgba(255,255,255,.5)}
.vol-slider{
  -webkit-appearance:none;appearance:none;
  flex:1;min-width:0;height:8px;background:transparent;cursor:pointer;
}
/* track + thumb must be declared per-engine; a combined selector list is dropped
   wholesale by both engines, so these blocks are intentionally duplicated */
.vol-slider::-webkit-slider-runnable-track{
  height:8px;border-radius:2px;
  background:linear-gradient(#14100a,#2e2a20);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.3);
}
.vol-slider::-moz-range-track{
  height:8px;border-radius:2px;
  background:linear-gradient(#14100a,#2e2a20);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.3);
}
.vol-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:16px;margin-top:-4px;border-radius:2px;
  background:linear-gradient(#ffe9a3,#d9a326 45%,#8a5f12);
  border:1px solid #4a3208;
  box-shadow:0 1px 2px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.6);
}
.vol-slider::-moz-range-thumb{
  width:14px;height:16px;border-radius:2px;
  background:linear-gradient(#ffe9a3,#d9a326 45%,#8a5f12);
  border:1px solid #4a3208;
  box-shadow:0 1px 2px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.6);
}
.vol-slider:focus-visible{outline:2px solid #ffd24a;outline-offset:3px}

/* ===================== MASCOT ===================== */
/* z-index clears .crt (9000) so the character sits ABOVE the CRT pass — it keeps
   its own sharp edges instead of being blurred and scanlined with the page.
   Sized to content, and pointer-events:none so a character this large can't
   swallow clicks on whatever it overlaps. */
.mascot{
  position:fixed;left:14px;bottom:0;z-index:9500;
  display:flex;align-items:flex-end;pointer-events:none;
}
/* tall and narrow (~0.44:1): drive it off height and let width follow */
.mascot-vid{height:clamp(320px,58vh,720px);width:auto}

/* ===================== SECTIONS ===================== */
section{position:relative;z-index:10;min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:40px 200px;}

/* ---------- HERO ---------- */
/* tighter than before so the bigger frame gets the vertical room back */
.wordmark{
  text-align:center;margin-bottom:16px;line-height:0;
}
/* the UP lettering is artwork, not type — the gold bevel is baked into the PNG,
   so the depth that text-shadow used to give the wordmark comes from drop-shadow. */
.wordmark-img{
  display:inline-block;width:clamp(110px,15vw,200px);height:auto;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.6));
}
/* overflow:hidden contains the AWGE transition — turn-on translates the video a
   full height on its way in, which would otherwise fly clean past the cloud frame.
   Size: `100%` is the section's content box, so this grows into the available
   space WITHOUT eating the 200px side padding (94vw used to overrun it on
   mid-width screens). 94vh keeps a square frame from overflowing short viewports.
   Net effect vs the old min(94vw,820px): never smaller, up to ~22% bigger. */
.tv-wrap{
  position:relative;width:min(100%,94vh,1000px);aspect-ratio:1/1;overflow:hidden;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));
}
.tv-frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
/* Screen hole measured off frame.png (1254x1254). Sizing to the fully-transparent
   (alpha==0) region is NOT enough: the cloud edge feathers through partial alpha,
   so those semi-transparent pixels still leak the page background. Measured
   instead against alpha<254 — every pixel that is not solid cloud — which is
   bbox 273,259 -> 998,981, then overshot ~1.5% per side so the video edges run
   under fully opaque cloud and the corners tuck behind the puffs.
   width/height given explicitly so the <video> (a replaced element) actually
   fills the hole instead of falling back to its 300x150 intrinsic size. */
.tv-screen{
  position:absolute;top:19.2%;left:20.3%;
  width:60.9%;height:60.7%;
  z-index:2;object-fit:cover;
  /* black, never transparent: the hole must read as a switched-off screen before
     the first frame paints and while the AWGE collapse is mid-flight — anything
     placed behind this video becomes visible the instant it scales to a line */
  background:#000;
}

/* ---- hero video switcher ----
   Parked in the cloud hole's clear span: measured off frame.png, rows y 0.62-0.72
   are open from x 27.5% to 74.3%. Below 0.72 the hole pinches shut, so these sit
   as low as they can go while still landing on visible video rather than cloud. */
.hero-arrow{
  position:absolute;z-index:5;
  width:30px;height:30px;border-width:9px;padding:0;
  font:900 15px/1 'M PLUS Rounded 1c',sans-serif;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.hero-prev{left:28.5%;top:64%}
.hero-next{right:27%;top:64%}

/* ---- AWGE CRT screen transition (keyframes verbatim from awge-website) ---- */
@keyframes turn-on{
  0%   {transform:scale(1,0.8) translate3d(0,0,0);filter:brightness(30);opacity:1}
  3.5% {transform:scale(1,0.8) translate3d(0,100%,0)}
  3.6% {transform:scale(1,0.8) translate3d(0,-100%,0);opacity:1}
  9%   {transform:scale(1.3,0.6) translate3d(0,100%,0);filter:brightness(30);opacity:0}
  11%  {transform:scale(1,1) translate3d(0,0,0);filter:contrast(0) brightness(0) saturate(1);opacity:0}
  100% {transform:scale(1,1) translate3d(0,0,0);filter:contrast(1.075) brightness(1.14) saturate(1.3);opacity:1}
}
@keyframes turn-off{
  0%   {transform:scale(1,1.3) translate3d(0,0,0);filter:brightness(1);opacity:1}
  60%  {transform:scale(1.3,0.001) translate3d(0,0,0);filter:brightness(10)}
  100% {animation-timing-function:cubic-bezier(0.755,0.05,0.855,0.06);
        transform:scale(0,0.0001) translate3d(0,0,0);filter:brightness(50)}
}
/* turn-off is AWGE's 0.55s verbatim; turn-on is shortened from their 3.4s
   power-up — this is a channel flip, not a cold boot */
.crt-turn-off{animation:turn-off .55s cubic-bezier(0.755,0.05,0.855,0.06) both;transform-origin:center}
.crt-turn-on {animation:turn-on 1.5s linear both;transform-origin:center}

/* ---------- LORE ---------- */
/* contract bar = beveled guide cell + magenta copy button */
/* the CA bar is the lore panel in miniature: same .metal frame, thinner border */
.ca-bar{
  display:flex;align-items:center;gap:10px;margin-bottom:30px;max-width:600px;width:100%;
  border-width:13px;padding:3px 5px;
}
.ca-text{
  flex:1;min-width:0;padding:4px 6px;
  font:700 13px/1.4 'M PLUS Rounded 1c',sans-serif;letter-spacing:1px;
  color:#201c14;text-shadow:0 1px 0 rgba(255,255,255,.4);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ca-copy{
  font:900 12px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:2px;
  padding:7px 10px;cursor:pointer;flex:none;
  border-width:9px;
  color:#16130c;text-shadow:0 1px 0 rgba(255,255,255,.5);
  transition:transform .4s cubic-bezier(.4,.0,.2,1),filter .4s ease;
}
/* metal button, so the glow is cool white rather than the plaques' gold */
.ca-copy:hover{
  transform:scale(1.12);
  filter:brightness(1.12) drop-shadow(0 8px 16px rgba(0,0,0,.5))
         drop-shadow(0 0 12px rgba(220,232,240,.45));
}
.ca-copy:active{transform:scale(1.06) translateY(1px);filter:brightness(.94)}

/* ---- Prevue/TV-Guide "Program Guide" panel ---- */
/* ===== BRUSHED-METAL FRAME (lore-bg.png, 1400x880) =====
   The bevel meets the flat field at a dark seam 72px in, so slice 76 keeps the
   whole mitred frame in the border and stretches only the flat centre. Shared by
   the lore panel, the CA bar and its COPY button — the bar is literally the
   panel at a smaller border-width, which is why border-image is worth it here:
   one source, any size, bevel never smears. */
.metal{
  background:transparent;border-radius:0;
  border:22px solid transparent;
  border-image:url(assets/lore-bg.png) 76 fill stretch;
  color:#201c14;
}
.lore-panel{
  display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:18px;
  max-width:980px;width:100%;padding:20px;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.6));
}
/* sunken screen cut into the metal panel */
.lore-img{
  overflow:hidden;min-height:320px;position:relative;background:#000;
  border-top:3px solid #4a453c;   border-left:3px solid #4a453c;
  border-right:3px solid #d8d4cc;  border-bottom:3px solid #d8d4cc;
}
.lore-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;
}
/* the panel field is mid-grey brushed metal, so the guide's cream-on-navy type
   inverts to dark-on-metal with a light top edge (engraved, not glowing) */
.lore-title{
  font:800 30px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:1px;color:#16130c;
  text-shadow:0 1px 0 rgba(255,255,255,.5);margin-bottom:14px;
}
.lore-body p{font-size:14px;line-height:1.55;color:#201c14;margin-bottom:11px;
  text-shadow:0 1px 0 rgba(255,255,255,.4)}
.lore-body b{color:#000}
/* stat block = grid of beveled guide cells */
.stats{
  margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px;
}
/* same brushed-metal frame as the panel it sits in, just a thinner border */
.stat{
  padding:6px 8px;display:flex;flex-direction:column;gap:5px;
  border-width:11px;
}
.stat span{font:900 9px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:2px;color:#4a4132;
  text-shadow:0 1px 0 rgba(255,255,255,.45)}
.stat b{font:900 15px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:1px;color:#16130c;
  text-shadow:0 1px 0 rgba(255,255,255,.5)}
.stat .burn{color:#ffd24a}

/* ---------- GALLERY ---------- */
.gallery-section{padding-top:60px}
.carousel{position:relative;width:min(96vw,1000px);display:flex;align-items:center;justify-content:center}
.track{
  position:relative;width:100%;height:380px;perspective:1400px;
}
/* square rendition of the lore panel — same .metal frame, square instead of wide.
   No overflow:hidden here: it would clip the border-image frame away. */
.slide{
  position:absolute;top:50%;left:50%;
  width:320px;height:320px;
  background:transparent;border-radius:0;
  border:16px solid transparent;
  border-image:url(assets/lore-bg.png) 76 fill stretch;
  transform:translate(-50%,-50%);
  transition:transform .4s cubic-bezier(.4,.0,.2,1),opacity .4s ease,filter .4s ease;
  cursor:pointer;will-change:transform;
}
.slide img{width:100%;height:100%;object-fit:cover}
.slide .ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#2b2519;font:900 15px/1 'M PLUS Rounded 1c',sans-serif;letter-spacing:2px;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.slide img{width:100%;height:100%;object-fit:cover}
/* neighbors tuck BEHIND the active one, dimmed + "locked" looking */
.slide.side-left  {transform:translate(-50%,-50%) translateX(-150px) scale(.82);opacity:.5;filter:brightness(.5) saturate(.7);z-index:3}
.slide.side-right {transform:translate(-50%,-50%) translateX( 150px) scale(.82);opacity:.5;filter:brightness(.5) saturate(.7);z-index:3}
.slide.far-left   {transform:translate(-50%,-50%) translateX(-260px) scale(.66);opacity:.22;filter:brightness(.35) saturate(.5);z-index:2}
.slide.far-right  {transform:translate(-50%,-50%) translateX( 260px) scale(.66);opacity:.22;filter:brightness(.35) saturate(.5);z-index:2}
/* highlighted meme = the magenta "selected program" cell, beveled like the guide */
/* keep border-width at .slide's 16px — overriding `border` here would shrink the
   metal frame to a sliver on the one slide that matters most */
.slide.active{
  transform:translate(-50%,-50%) scale(1.12);opacity:1;z-index:5;
  filter:drop-shadow(0 24px 50px rgba(0,0,0,.7));
}
.slide.hidden{transform:translate(-50%,-50%) scale(.5);opacity:0;z-index:1;pointer-events:none}
/* arrows = beveled blue guide buttons */
.arrow{
  position:absolute;z-index:5;width:58px;height:58px;
  font:900 24px/1 'M PLUS Rounded 1c',sans-serif;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  /* square button, so a thinner border keeps the glyph from being crowded */
  border-width:13px;
}
/* hover/active come from .plaque — no override, so every button pops alike */
.arrow-left{left:-6px}
.arrow-right{right:-6px}

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  section{padding:40px 16px 90px}
  .rail{right:8px;gap:7px}
  .rail-btn{min-width:auto;padding:8px 10px;font-size:0}
  .rail-btn span:last-child{display:none}
  .rail-ico{font-size:13px}
  .mascot-vid{height:clamp(200px,34vh,320px)}
  .lore-panel{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .slide{width:74vw;height:74vw;max-width:300px;max-height:300px}
}