/* ============================================================
   ZBD — retro3d.css
   RETRO 3D "CAST ARCADE MACHINE" layer.
   Loaded last: turns the flat pixel console into a molded,
   three-dimensional arcade cabinet — extruded panels, tilted
   control deck, curved CRT glass, synthwave floor and digital
   waves. All existing elements & animations are preserved.
   ============================================================ */

/* ---------- CRT GLASS — curved screen with sheen ---------- */
.cabinet{
  border-radius:22px;
  overflow:hidden;
}
/* glass reflection cast over the whole screen */
.cabinet::before{
  content:""; position:absolute; inset:0; z-index:70; pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(140% 55% at 50% -12%, rgba(255,255,255,.07), transparent 55%),
    linear-gradient(112deg, transparent 40%, rgba(255,255,255,.035) 46%,
      rgba(122,240,230,.045) 50%, transparent 58%),
    radial-gradient(120% 120% at 50% 118%, rgba(0,0,0,.35), transparent 55%);
}

/* ---------- MARQUEE — lit sign hum ---------- */
.marquee-title{ animation:marquee-hum 3.6s steps(6) infinite; }
@keyframes marquee-hum{
  0%,100%{ text-shadow:0 2px 0 var(--shadow),
    0 0 14px color-mix(in srgb,var(--accent) 70%,transparent),
    0 0 34px color-mix(in srgb,var(--accent) 34%,transparent); }
  50%{ text-shadow:0 2px 0 var(--shadow),
    0 0 10px color-mix(in srgb,var(--accent) 52%,transparent),
    0 0 22px color-mix(in srgb,var(--accent) 22%,transparent); }
}

/* ---------- HERO — synthwave 3D floor + CRT sweep ---------- */
/* the flat grid becomes a perspective floor scrolling toward the player */
.hero-grid{
  inset:auto 0 -2px 0; height:48%; opacity:.85;
  transform:perspective(560px) rotateX(58deg);
  transform-origin:50% 100%;
  background:
    linear-gradient(rgba(34,211,197,.28) 2px, transparent 2px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(34,211,197,.22) 2px, transparent 2px) 0 0 / 44px 100%,
    linear-gradient(180deg, rgba(11,13,16,0) 0%, rgba(11,13,16,.25) 70%, rgba(11,13,16,.55) 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
  /* floor-scroll animation DISABLED for performance */
}
/* glowing horizon line at the far edge of the floor */
.hero-grid::before{
  content:""; position:absolute; left:-4%; right:-4%; top:-2px; height:3px;
  background:linear-gradient(90deg, transparent,
    var(--accent2) 22%, var(--accent) 50%, var(--accent2) 78%, transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--accent2) 80%,transparent),
             0 0 60px color-mix(in srgb,var(--accent) 40%,transparent);
}
/* CRT sweep DISABLED for performance */
.hero::after{
  display:none;
}

/* digital wave scope strip along the bottom of the hero */
.hero .digital-wave{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  width:100%; height:clamp(110px,20vh,200px);
  pointer-events:none; mix-blend-mode:screen; opacity:.85;
}

/* holographic pedestal glow under the 3D watch */
.hero-scene::after{
  content:""; position:absolute; left:50%; bottom:4%;
  width:64%; height:30px; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb,var(--accent2) 30%,transparent), transparent 72%);
  filter:blur(7px); pointer-events:none;
}

/* deep-cast hero title */
.hero-title{
  text-shadow:
    0 2px 0 var(--shadow), 0 4px 0 rgba(0,0,0,.8),
    0 6px 0 rgba(0,0,0,.55), 0 10px 22px rgba(0,0,0,.6);
}

/* ---------- SECTION TITLES — molded plastic letters ---------- */
.section-title{
  text-shadow:
    0 1px 0 var(--line),
    0 3px 0 var(--shadow), 0 5px 0 rgba(0,0,0,.72),
    0 7px 0 rgba(0,0,0,.45), 0 11px 26px rgba(0,0,0,.65);
}

/* ============================================================
   3D CARD STAGE — DISABLED for performance
   ============================================================ */

/* ---------- CTA — scope wave behind the contact band ---------- */
.cta-band{ overflow:hidden; }
.cta-band .digital-wave{
  position:absolute; left:0; right:0; bottom:0; z-index:0;
  width:100%; height:clamp(90px,16vh,160px);
  pointer-events:none; mix-blend-mode:screen; opacity:.6;
}
.cta-band .wrap{ position:relative; z-index:2; }

/* ============================================================
   CONTROL DECK — the physical panel of the machine.
   Fixed to the bottom of the viewport so the player is always
   standing at the cabinet while the screen content scrolls.
   Purely visual (pointer-events:none) — never blocks the page.
   ============================================================ */
.control-deck{
  position:fixed; left:50%; bottom:0; z-index:420; margin-top:0;
  width:min(1320px,100vw);
  transform:translateX(-50%) perspective(900px) rotateX(10deg);
  transform-origin:bottom center;
  padding:10px clamp(16px,4vw,38px) 14px;
  gap:clamp(14px,4vw,44px);
  pointer-events:none;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.05),
    inset 0 0 40px rgba(0,0,0,.6),
    0 -18px 34px -10px rgba(0,0,0,.9);
}
/* compact hardware so the deck stays slim */
.control-deck .deck-stick{ width:40px; height:40px; }
.control-deck .deck-stick .ball{ width:22px; height:22px; }
.control-deck .deck-stick .shaft{ height:22px; transform-origin:bottom center; }
.control-deck .deck-btn{ width:24px; height:24px; }
.deck-btn.lit{
  filter:brightness(1.8);
  box-shadow:0 0 0 3px var(--shadow), 0 0 18px rgba(255,255,255,.75),
    inset 0 3px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.35);
}
/* coin slots */
.deck-coin{ display:flex; gap:10px; align-items:center; }
.deck-coin span{
  position:relative; width:13px; height:27px; background:#05070a;
  box-shadow:inset 0 0 0 2px #262c33, 0 0 10px rgba(34,211,197,.2);
}
.deck-coin span::after{
  content:""; position:absolute; left:50%; top:5px; bottom:5px; width:3px;
  transform:translateX(-50%);
  background:linear-gradient(var(--accent2), #0e6e66);
  box-shadow:0 0 8px color-mix(in srgb,var(--accent2) 80%,transparent);
}
@media(max-width:680px){
  .deck-coin{ display:none; }
  .control-deck{ padding:8px 16px 10px; }
}
/* clear the fixed deck at the very bottom of the page */
.footer{ padding-bottom:170px; }
@media(max-width:680px){ .footer{ padding-bottom:130px; } }

/* ============================================================
   SCREEN PAN — DISABLED for performance
   ============================================================ */

/* ============================================================
   BOOT INTRO — CRT power-on splash
   The shell animation (scanlines → logo → tube collapse) plays
   entirely in CSS; js/boot-intro.js only wires skip + cleanup.
   ============================================================ */
body.booting{ overflow:hidden; }
.boot-screen{
  position:fixed; inset:0; z-index:9400; overflow:hidden;
  display:grid; place-items:center;
  background:#020304;
  transform-origin:50% 50%;
  animation:boot-shell 2.7s steps(8) forwards;
}
.boot-screen.skip{ animation:boot-off .32s steps(5) forwards; }
/* scanlines + vignette on the dead tube */
.boot-screen::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 2px 4px),
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.7) 100%);
}
/* power-on beam flashing across the middle */
.boot-screen::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px;
  background:#eafff7;
  box-shadow:0 0 24px #7df0e6, 0 0 70px var(--accent2);
  transform:scaleX(0);
  animation:boot-beam .5s steps(6) forwards;
}
@keyframes boot-beam{
  0%{ transform:scaleX(0); opacity:1; }
  70%{ transform:scaleX(1); opacity:1; }
  100%{ transform:scaleX(1); opacity:0; }
}
@keyframes boot-shell{
  0%, 88%{ transform:none; opacity:1; visibility:visible; }
  96%{ transform:scaleY(.005); opacity:1; }
  100%{ transform:scaleY(.005) scaleX(0); opacity:0; visibility:hidden; }
}
@keyframes boot-off{
  0%{ transform:none; opacity:1; }
  60%{ transform:scaleY(.005); opacity:1; }
  100%{ transform:scaleY(.005) scaleX(0); opacity:0; visibility:hidden; }
}
.boot-inner{ position:relative; text-align:center; padding:0 18px; }
.boot-logo{
  font-family:'Press Start 2P','VT323',monospace;
  font-size:clamp(46px,11vw,100px); line-height:1;
  color:var(--accent); letter-spacing:.06em;
  opacity:0;
  animation:
    boot-pop .45s steps(4) .4s forwards,
    boot-glitch .8s steps(2) 1s 1;
  text-shadow:
    -4px 0 0 rgba(255,60,90,.5), 4px 0 0 rgba(34,211,197,.5),
    0 6px 0 var(--shadow),
    0 0 44px color-mix(in srgb,var(--accent) 55%,transparent);
}
@keyframes boot-pop{ from{ opacity:0; transform:scale(1.7); } to{ opacity:1; transform:scale(1); } }
@keyframes boot-glitch{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px) skewX(-4deg); }
  50%{ transform:translateX(4px) skewX(3deg); }
  75%{ transform:translateX(-2px); }
}
.boot-tag{
  margin-top:20px; font-family:'Press Start 2P',monospace;
  font-size:clamp(9px,1.6vw,13px); letter-spacing:.5em; text-indent:.5em;
  color:var(--accent2);
  opacity:0; animation:boot-fade .3s steps(3) .95s forwards;
}
.boot-rom{
  margin-top:26px; font-family:'VT323',monospace; font-size:19px;
  letter-spacing:.14em; color:var(--muted);
  opacity:0; animation:boot-fade .3s steps(3) 1.25s forwards;
}
.boot-start{
  margin-top:34px; font-family:'Press Start 2P',monospace;
  font-size:11px; letter-spacing:.2em; color:var(--text);
  opacity:0; animation:boot-blink .8s steps(1) 1.55s infinite;
}
@keyframes boot-fade{ to{ opacity:1; } }
@keyframes boot-blink{ 0%,49%{ opacity:1; } 50%,100%{ opacity:0; } }

/* ---------- MOTION SAFETY ---------- */
@media(prefers-reduced-motion:reduce){
  .hero-grid{ animation:none; }
  .hero::after{ animation:none; opacity:0; }
  .marquee-title{ animation:none; }
  .tilt-glare{ transition:none; }
  .boot-screen{ display:none; }
  #services .wrap, #products .wrap, #blog-preview .wrap, #contact .wrap{ animation:none; }
}