/* Base */
:root{
  --bg: #000000;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.stage{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
isolation: isolate;
}


/* Title screen */
.title-screen{
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--bg);
  display: flex;
}
.title-screen img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.title-screen.fade{
  animation: titleFade 1s ease forwards;
}

@keyframes titleFade{
  from{ opacity: 1; }
  to{ opacity: 0; }
}

/* Scene */
.scene{
  position: absolute;
  inset: -3vh -3vw;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
  animation: cameraSway 6.5s ease-in-out infinite;
  opacity: 1;
}

.frame{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform: scale(1.04);
}

/* Vignette */
.vignette{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0.00) 45%,
      rgba(0,0,0,0.25) 62%,
      rgba(0,0,0,0.60) 78%,
      rgba(0,0,0,0.85) 100%);
  mix-blend-mode: multiply;
}

/* Camera sway */
@keyframes cameraSway{
  0%   { transform: translate3d(0px, 0px, 0) rotate(0deg) scale(1.02); }
  20%  { transform: translate3d(-10px, 6px, 0) rotate(-0.6deg) scale(1.03); }
  50%  { transform: translate3d(12px, -8px, 0) rotate(0.7deg) scale(1.04); }
  80%  { transform: translate3d(-6px, -4px, 0) rotate(-0.4deg) scale(1.03); }
  100% { transform: translate3d(0px, 0px, 0) rotate(0deg) scale(1.02); }
}

.scene.no-sway{ animation: none; }
.scene.zoomFade{ animation: zoomFadeOut 1.6s cubic-bezier(.16,.9,.2,1) forwards; }
.scene.gone{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes zoomFadeOut{
  0%{
    transform: scale(1.04);
    opacity: 1;
    filter: blur(0px);
  }
  100%{
    transform: scale(8);
    opacity: 0;
    filter: blur(14px);
  }
}
  30%{
    opacity: 0.7;
    filter: blur(2px);
  }
  60%{
    opacity: 0.35;
    filter: blur(6px);
  }
  100%{
    transform: scale(8);
    opacity: 0;
    filter: blur(14px);
  }
}

@media (prefers-reduced-motion: reduce){
  .scene{ animation: none; }
}


/* Tunnel layer (20 rotating slices approaching the camera) */
.stage{
  perspective: 900px;
  perspective-origin: 50% 50%;
}

.tunnel-layer{
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3; /* above scene, below title screen */
  pointer-events: none;
  overflow: hidden;
}

.tunnel-slice{
  z-index: calc(100 - var(--i)); /* earlier slices stay on top; later slices go behind */
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vmin, 1400px);
  height: min(120vmin, 1400px);
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
  opacity: 0;
  filter: blur(0px);
  transform: translate(-50%, -50%) rotate(0deg) scale(0.2);
  animation: tunnelFly 14s cubic-bezier(.25,0,.25,1) forwards;
  animation-delay: calc(var(--i) * 700ms);
}

.tunnel-slice img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* tonnel.png has transparent center */
  display: block;
}

@keyframes tunnelFly{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) translateZ(-800px) rotate(0deg) scale(0.08);
    filter: blur(0px);
  }
  4%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) translateZ(120px) rotate(340deg) scale(9);
    filter: blur(5px);
  }
}
  18%{
    opacity: 1;
    transform: translate(-50%, -50%) translateZ(-700px) rotate(40deg) scale(0.22);
    filter: blur(0.5px);
  }
  55%{
    opacity: 0.95;
    transform: translate(-50%, -50%) translateZ(-240px) rotate(140deg) scale(1.2);
    filter: blur(1.5px);
  }
  85%{
    opacity: 0.65;
    transform: translate(-50%, -50%) translateZ(60px) rotate(240deg) scale(4.6);
    filter: blur(3px);
  }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) translateZ(180px) rotate(320deg) scale(8.5);
    filter: blur(5px);
  }
}
  20%{
    opacity: 1;
  }
  60%{
    transform: translate(-50%, -50%) rotate(160deg) scale(2.8);
    filter: blur(2px);
  }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) rotate(300deg) scale(8.5);
    filter: blur(6px);
  }
}
  12%{
    opacity: 1;
  }
  70%{
    opacity: 0.9;
    filter: blur(1px);
  }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) rotate(210deg) scale(7.5);
    filter: blur(6px);
  }
}


/* Tunnel background (behind tunnel slices; fades out then is removed) */
.tunnel-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

.tunnel-bg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.tunnel-bg.active{
  opacity: 1;
  animation: tunnelBgFadeOut 21s ease forwards;
}

@keyframes tunnelBgFadeOut{
  0%{ opacity: 1; }
  70%{ opacity: 1; }
  100%{ opacity: 0; }
}


/* --- FIX: Tunnel background must cover the viewport like a fullscreen image (crop overflow, no distortion) --- */
.tunnel-layer{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

.tunnel-bg{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.tunnel-bg img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;         /* fills screen, preserves aspect ratio */
  object-position: center !important;   /* center crop */
  transform: scale(1.001);              /* avoids 1px seams on some GPUs */
}


/* --- RESTORE: Scene zoom + blur + smooth fade after frame4 --- */
.scene.zoomFade{
  animation: zoomFadeOut 1.6s cubic-bezier(.16,.9,.2,1) forwards !important;
  will-change: transform, opacity, filter;
}

@keyframes zoomFadeOut{
  0%{
    transform: translate3d(0,0,0) rotate(0deg) scale(1.04);
    opacity: 1;
    filter: blur(0px);
  }
  100%{
    transform: translate3d(0,0,0) rotate(0deg) scale(8);
    opacity: 0;
    filter: blur(14px);
  }
}


/* --- FIX: Tunnel background behind all images --- */
.tunnel-bg{
  z-index: -1 !important;
}

.tunnel-slice{
  z-index: auto;
}


/* --- LAYERING (authoritative) --- */
.title-screen{ z-index: 5 !important; }

/* Tunnel background: behind all other visuals */
.tunnel-bg{
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1 !important;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}

.tunnel-bg img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Scene above tunnel-bg */
.scene{ z-index: 2 !important; }

/* Tunnel slices above scene */
.tunnel-layer{ z-index: 3 !important; }

/* Vignette always on top */
.vignette{ z-index: 4 !important; }

/* Tunnel background fade */
.tunnel-bg.active{
  opacity: 1;
  animation: tunnelBgFadeOut 14s ease forwards; /* match current tunnel duration */
}


/* Title screen is clickable */
.title-screen{ cursor: pointer; }


/* --- SYNC: Tunnel background fade ends with the last tunnel slice --- */
.tunnel-bg.active{
  opacity: 1;
  animation: tunnelBgFadeOut var(--tunnel-bg-duration, 14s) ease forwards !important;
}

@keyframes tunnelBgFadeOut{
  0%{ opacity: 1; }
  88%{ opacity: 1; }
  100%{ opacity: 0; }
}


/* --- Tunnel background: visibility controlled ONLY from JS --- */
.tunnel-bg{
  opacity: 0;
  transition: opacity 0.6s ease;
}

.tunnel-bg.active{
  opacity: 1;
}


/* --- SMOOTH FADE: tunnel background --- */
.tunnel-bg{
  opacity: 0;
  transition: opacity 3.5s ease-in-out !important;
  will-change: opacity;
}

.tunnel-bg.active{
  opacity: 1;
}


/* --- AUTHORITATIVE: tunnel background fades ONLY via transition (disable any animations) --- */
.tunnel-bg{
  animation: none !important;
  opacity: 0;
  transition: opacity 3.5s ease-in-out !important;
}

.tunnel-bg.active{
  animation: none !important;
  opacity: 1;
}


/* --- FINAL TUNNEL BG BEHAVIOR --- */
/* Instant appearance, fast fade-out */
.tunnel-bg{
  opacity: 0;
  transition: opacity 1.2s ease-out !important; /* fade-out speed */
}

.tunnel-bg.active{
  opacity: 1;
  transition: none !important; /* instant show (1 frame) */
}


/* --- Main site behind intro --- */
#mainSite{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  border: 0;
  z-index: 0;
  background: #000;
}

/* Keep intro above the iframe */
.stage{
  z-index: 1;
}