:root{
  --bg0:#070812;
  --bg1:#0b0d1d;
  --bone:#d8c7a3;
  --warm:#f2d6a6;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

body.intro-lock{ overflow:hidden; }
body.intro-done{ overflow-y:auto; }

/* =============================
   SCENE
============================= */

.scene{ position: fixed; inset:0; overflow:hidden; z-index:0; }

.sceneBg{
  position:absolute; inset:0;
  background-image: url("assets/robkgrnd2.png?v=15");
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
}

/* =============================
   SHADOW FIGURES (FINAL TUNED VERSION)
============================= */

.shadowFigure{
  position:absolute;
  inset:0;
  pointer-events:none;

  /* Above fog (20) but below beam/vignette */
  z-index: 22;

  opacity: 0;
  transition: opacity 200ms ease-out;

  /* Important: no blending washout */
  mix-blend-mode: normal;

  /* Deep black but distant */
  filter: blur(1.2px) contrast(1.8) brightness(0.48);

  transform: translate3d(0,0,0) scale(0.93);
  will-change: opacity, transform, filter;
}

.shadowFigure.shadowLeft{
  background-repeat: no-repeat;
  background-size: min(36vw, 540px);
  background-position: 16% 46%;
}

.shadowFigure.shadowRight{
  background-repeat: no-repeat;
  background-size: min(36vw, 540px);
  background-position: 84% 46%;
}

/* Lightning visibility level */
.shadowFigure.flash{
  opacity: 0.22;
}

/* =============================
   ATMOSPHERE
============================= */

.sceneVignette{
  position:absolute; inset:0; pointer-events:none; z-index:30;
  background: radial-gradient(1100px 700px at 50% 45%,
    rgba(0,0,0,0), rgba(0,0,0,.52) 62%, rgba(0,0,0,.88) 100%);
}

.sceneBeam{
  position:absolute; inset:0; pointer-events:none; z-index:35;
  background: radial-gradient(260px 1050px at 50% 34%,
      rgba(255,245,210,.45),
      rgba(255,245,210,.18) 40%,
      rgba(255,245,210,0) 72%);
  mix-blend-mode: screen;
  opacity: .75;
  animation: beamPulse 4.6s ease-in-out infinite;
}
@keyframes beamPulse{
  0%,100%{ opacity:.55; }
  50%{ opacity:.95; }
}

.sceneCrackGlow{
  position:absolute; inset:0; pointer-events:none; z-index:36;
  background: linear-gradient(90deg,
      rgba(0,0,0,0) 48.7%,
      rgba(255,120,40,.26) 49.55%,
      rgba(255,210,140,.16) 50%,
      rgba(255,120,40,.26) 50.45%,
      rgba(0,0,0,0) 51.3%);
  mix-blend-mode: screen;
  opacity: .55;
  animation: crackPulse 3.2s ease-in-out infinite;
}
@keyframes crackPulse{
  0%,100%{ opacity:.28; }
  50%{ opacity:.88; }
}

/* =============================
   FOG
============================= */

.fog{
  position:absolute; left:-30%; right:-30%; top:-20%; bottom:-20%;
  pointer-events:none; z-index:20;
  filter: blur(10px);
  background:
    radial-gradient(900px 320px at 20% 40%, rgba(255,255,255,.22), transparent 70%),
    radial-gradient(950px 340px at 60% 55%, rgba(220,235,255,.18), transparent 72%),
    radial-gradient(900px 320px at 85% 35%, rgba(255,220,180,.14), transparent 72%),
    radial-gradient(1000px 360px at 45% 80%, rgba(255,255,255,.10), transparent 72%);
  mix-blend-mode: screen;
}

.fogBack{ opacity:.22; animation: fogDriftBack 22s linear infinite; }
.fogMid{  opacity:.30; animation: fogDriftMid 16s linear infinite; }
.fogFront{opacity:.18; animation: fogDriftFront 12s linear infinite; }

@keyframes fogDriftBack{
  0%{ transform: translate3d(-2%, 0%, 0) scale(1.06); }
  50%{ transform: translate3d(2%, -1%, 0) scale(1.10); }
  100%{ transform: translate3d(-2%, 0%, 0) scale(1.06); }
}
@keyframes fogDriftMid{
  0%{ transform: translate3d(-5%, 0%, 0) scale(1.08); }
  50%{ transform: translate3d(5%, -1%, 0) scale(1.12); }
  100%{ transform: translate3d(-5%, 0%, 0) scale(1.08); }
}
@keyframes fogDriftFront{
  0%{ transform: translate3d(-8%, 1%, 0) scale(1.10); }
  50%{ transform: translate3d(8%, -1%, 0) scale(1.16); }
  100%{ transform: translate3d(-8%, 1%, 0) scale(1.10); }
}

/* =============================
   LIGHTNING
============================= */

.lightningFlash{
  position:absolute; inset:0; pointer-events:none; z-index:60;
  opacity:0;
  background:
    radial-gradient(900px 600px at 50% 25%, rgba(230,250,255,.95), transparent 60%),
    linear-gradient(180deg, rgba(230,250,255,.55), rgba(0,0,0,0) 65%);
  mix-blend-mode: screen;
}
.lightningFlash.on{ animation: lightningFlash 0.55s ease-out 1; }

@keyframes lightningFlash{
  0%{ opacity:0; }
  10%{ opacity:1; }
  28%{ opacity:.25; }
  45%{ opacity:.9; }
  100%{ opacity:0; }
}

#dustCanvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:40; pointer-events:none; opacity:.85;
}

/* =============================
   HERO LOGO
============================= */

.heroLogoWrap{
  position: fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
}

.heroLogo{
  position:absolute;
  left:50%;
  top:50%;
  width: min(72vw, 520px);
  max-width: 520px;
  height:auto;
  opacity:.93;

  transform: translate(-50%, -50%);
  animation: heroFloat 6.2s ease-in-out infinite;

  filter:
    drop-shadow(0 0 12px rgba(255, 120, 40, .35))
    drop-shadow(0 0 30px rgba(255, 200, 120, .22))
    drop-shadow(0 18px 60px rgba(0, 0, 0, .65));
}

@keyframes heroFloat{
  0%,100%{ transform: translate(-50%,-50%); }
  50%{ transform: translate(-50%, calc(-50% - 10px)); }
}

/* =============================
   SIDE SCRIPT
============================= */

.sideScript{
  position: fixed;
  top: 50%;
  width: min(520px, 44vw);
  z-index:150;
  pointer-events:none;

  color: #d8c7a3 !important;
  opacity: 0;
  letter-spacing: .06em;
  font-weight: 520;
  line-height: 1.5;
  font-size: clamp(17px, 1.45vw, 26px);

  text-shadow: 0 10px 35px rgba(0,0,0,.70);
  filter: blur(10px);
}

.sideScript.left{
  left: 5vw;
  text-align: left;
  transform: translateY(-50%) translateX(-12px);
}
.sideScript.right{
  right: 5vw;
  text-align: right;
  transform: translateY(-50%) translateX(12px);
}

.sideScript.smoke-in{ animation: smokeIn 1.6s ease forwards; }
.sideScript.smoke-out{ animation: smokeOut 1.6s ease forwards; }

@keyframes smokeIn{
  0%{ opacity:0; filter: blur(14px); transform: translateY(-50%) translateY(10px); }
  100%{ opacity:.92; filter: blur(0); transform: translateY(-50%); }
}
@keyframes smokeOut{
  0%{ opacity:.92; }
  100%{ opacity:0; filter: blur(14px); }
}

/* =============================
   AUDIO GATE
============================= */

.audioGate{
  position: fixed;
  left: 50%;
  bottom: 6vh;
  transform: translateX(-50%);
  z-index:200;

  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid rgba(216,199,163,.45);
  background: rgba(0,0,0,.55);
  color: rgba(216,199,163,.95);

  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;

  cursor: pointer;
  user-select: none;

  backdrop-filter: blur(8px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

.audioGate.hidden{
  opacity: 0;
  pointer-events: none;
}

/* =============================
   MOBILE
============================= */

@media (max-width: 768px){
  .heroLogo{ width: min(70vw, 360px); }

  .sideScript{
    width: min(680px, 88vw);
    left: 6vw !important;
    right: 6vw !important;
    text-align: center !important;
    top: 72%;
    font-size: clamp(17px, 3.8vw, 24px);
  }

  .shadowFigure.flash{ opacity: 0.16; }
}