/* Fade-out overlay styles */

:root{
  --bg-1:#0f1a14;   /* deep forest */
  --bg-2:#132219;   /* darker base */
  --accent:#89a67c; /* moss */
  --bar:#dfe9da;
  --timing:cubic-bezier(.25,.9,.25,1);
  --fade-ms:600;
  --rx: 0deg;  /* mouse tilt */
  --ry: 0deg;
}

html,body{height:100%;margin:0}
body{
  background:
    radial-gradient(1600px 1000px at 50% 35%, #1a2b22 0%, transparent 60%),
    radial-gradient(1200px 900px at 70% 70%, #17261e 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-2));
  overflow:hidden;
  display:block;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

.stage{
  position:relative;
  min-height:100dvh;
  width:100vw;
  display:grid;
  place-items:center;
  gap:2.2rem;
  text-align:center;
  perspective:800px;
}

body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none;
  opacity:.07; mix-blend-mode:soft-light;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 2px);
}

.layer{ position:absolute; inset:-10vmax; pointer-events:none; z-index:0; }
.layer.rays{
  background: conic-gradient(from 200deg at 40% 20%,
    rgba(255,255,255,.10), rgba(255,255,255,0) 20% 100%);
  filter: blur(20px) saturate(.9);
  opacity:.25; animation: rays 12s linear infinite;
}
.layer.motes{
  background:
    radial-gradient(6px 6px at 20% 40%, rgba(255,255,255,.12), transparent 60%),
    radial-gradient(5px 5px at 65% 25%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(7px 7px at 80% 70%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(4px 4px at 30% 75%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(5px 5px at 50% 55%, rgba(255,255,255,.06), transparent 60%);
  filter: blur(.5px);
  animation: motes 18s ease-in-out infinite alternate;
  opacity:.25;
}

#logo-wrap{ z-index:1 }
#logo{
  width: clamp(520px, 58vmin, 860px);
  height:auto;
  will-change: transform, opacity, filter;
  filter: drop-shadow(0 14px 36px rgba(0,0,0,.32));
  opacity:0;
  transform:
    translate3d(0,8px,0)
    rotateX(var(--rx)) rotateY(var(--ry))
    scale(.96) rotate(-0.3deg);
  animation:
    popIn .8s var(--timing) forwards,
    floaty 6s ease-in-out 1s infinite alternate,
    breathe 3s ease-in-out 1.2s infinite;
}

.progress{
  width: min(72vw, 520px); height:10px; z-index:1;
  background: rgba(255,255,255,.08);
  border-radius: 999px; overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.progress .bar{
  width:0%; height:100%;
  background: linear-gradient(90deg, var(--bar), #b7c9b1);
  transform-origin:left center;
  transition:width 160ms var(--timing);
}

#transition{
  position:fixed; inset:0; z-index:10;
  background:#000; opacity:0; pointer-events:none;
  transition:opacity var(--fade-ms) var(--timing);
}
#transition.show{ opacity:1 }

@keyframes popIn{
  0%{ opacity:0; transform:translate3d(0,30px,0) rotateX(-6deg) rotateY(6deg) scale(.9) rotate(-2deg); }
  60%{ opacity:1; transform:translate3d(0,0,0) rotateX(1deg) rotateY(-1deg) scale(1.05) rotate(.2deg); }
  100%{ opacity:1; transform:translate3d(0,0,0) rotateX(var(--rx)) rotateY(var(--ry)) scale(1) rotate(0); }
}
@keyframes floaty{
  0%{ transform: translate3d(0,6px,0) rotateX(var(--rx)) rotateY(var(--ry)) scale(1) rotate(.1deg); }
  100%{ transform: translate3d(0,-6px,0) rotateX(var(--rx)) rotateY(var(--ry)) scale(1.005) rotate(-.1deg); }
}
@keyframes breathe{
  0%,100%{ filter: drop-shadow(0 14px 36px rgba(0,0,0,.30)) brightness(1); }
  50%{    filter: drop-shadow(0 16px 42px rgba(0,0,0,.36)) brightness(1.03); }
}
@keyframes rays{
  0%{ transform: translate3d(-2%,0,0) rotate(-4deg); opacity:.22; }
  100%{ transform: translate3d(2%,0,0) rotate(4deg); opacity:.28; }
}
@keyframes motes{
  0%{ background-position: 0% 0%, 15% 10%, 70% 0%, 0% 50%, 50% 50%; transform: translateY(0); }
  100%{ background-position: 5% 6%, 60% 15%, 90% 8%, 4% 46%, 46% 44%; transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce){
  .layer.rays, .layer.motes{ animation:none }
  #logo{ animation:none; opacity:1; transform:none }
  .progress .bar{ transition:none }
}

/* Reduce heavy filter work for lower-end GPUs while keeping the look */
@media (prefers-reduced-motion: no-preference) {
  .layer.rays { filter: saturate(.9); /* drop intense blur */ }
  .layer.motes { filter: none; }
}