/* atmosphere.css — purely decorative dread. All layers are aria-hidden and
   pointer-events:none. Every animated layer FREEZES under prefers-reduced-motion. */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* vignette — pull the eye inward, darken the edges of the world */
.atmosphere .vignette {
  position: absolute; inset: -10%;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 38%, rgba(0,0,0,0.55) 78%, rgba(0,0,0,0.85) 100%);
}

/* warm low spot — the sense of a single candle somewhere off-frame */
.atmosphere .emberlight {
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 30% at 50% 14%, rgba(216,162,74,0.10), transparent 70%);
  animation: flicker var(--flicker) ease-in-out infinite;
  transform-origin: 50% 0;
}

/* fog — two slow layers of soft cloud built from radial gradients */
.atmosphere .fog {
  position: absolute;
  top: -25%; left: -25%; width: 150%; height: 150%;
  background-repeat: repeat;
  opacity: 0.5;
  will-change: transform;
}
.atmosphere .fog.f1 {
  background-image:
    radial-gradient(60% 40% at 20% 30%, rgba(120,120,120,0.10), transparent 60%),
    radial-gradient(50% 35% at 70% 60%, rgba(90,100,90,0.08), transparent 60%),
    radial-gradient(40% 30% at 45% 80%, rgba(130,130,140,0.07), transparent 60%);
  background-size: 900px 700px;
  animation: drift var(--drift) linear infinite;
}
.atmosphere .fog.f2 {
  background-image:
    radial-gradient(55% 38% at 60% 25%, rgba(110,110,120,0.07), transparent 60%),
    radial-gradient(45% 32% at 25% 70%, rgba(138,154,99,0.05), transparent 60%);
  background-size: 1300px 1000px;
  opacity: 0.35;
  animation: drift-rev calc(var(--drift) * 1.6) linear infinite;
}

/* film grain — static SVG turbulence (animating grain is heavy + photosensitivity risk) */
.atmosphere .grain {
  position: absolute; inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-900px, -120px, 0); }
}
@keyframes drift-rev {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(1300px, 90px, 0); }
}
@keyframes flicker {
  0%, 100% { opacity: 0.85; }
  25%      { opacity: 1; }
  40%      { opacity: 0.78; }
  62%      { opacity: 0.95; }
  78%      { opacity: 0.7; }
}

/* finite content entrance (settles, never loops) */
.rise { animation: rise var(--rise) ease-out both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* the mask on the landing */
.mask-stage { text-align: center; margin: 0 auto clamp(1.5rem, 5vw, 2.5rem); }
.mask-stage img {
  width: clamp(150px, 34vw, 250px);
  height: auto;
  filter: drop-shadow(0 10px 40px rgba(0,0,0,0.7)) drop-shadow(0 0 22px rgba(216,162,74,0.12));
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-6px) scale(1.012); }
}

/* Landing photographic hero — full-bleed, darkened so the title stays legible.
   url() is relative to THIS stylesheet (styles/), so it resolves on every page. */
.hero-photo {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(11,10,12,0.58) 0%, rgba(11,10,12,0.32) 40%, rgba(11,10,12,0.92) 100%),
    url("../assets/img/hero-mask.jpg");
  background-size: cover, cover;
  background-position: center 44%, center 44%;
  background-repeat: no-repeat, no-repeat;
  /* Page-load "short": the image arrives distorted and resolves into clarity. */
  animation: reveal-clarity 2600ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  will-change: filter, transform, opacity;
}
@keyframes reveal-clarity {
  0%   { filter: blur(28px) saturate(0.35) brightness(0.45) contrast(1.5); transform: scale(1.14); opacity: 0; }
  30%  { opacity: 1; }
  55%  { filter: blur(12px) saturate(0.65) brightness(0.78) contrast(1.18); transform: scale(1.07); }
  100% { filter: blur(0) saturate(1) brightness(1) contrast(1); transform: scale(1); opacity: 1; }
}

/* HONOR reduced-motion: hold the whole world still. */
@media (prefers-reduced-motion: reduce) {
  .atmosphere .fog.f1,
  .atmosphere .fog.f2,
  .atmosphere .emberlight,
  .hero-photo,
  .mask-stage img,
  .rise {
    animation: none !important;
  }
  /* hold the hero clear, never distorted, for reduced-motion users */
  .hero-photo { filter: none !important; transform: none !important; opacity: 1 !important; }
  .atmosphere .fog.f1 { transform: translate3d(-300px, -60px, 0); }
  .atmosphere .fog.f2 { transform: translate3d(200px, 40px, 0); }
}