/* Donutween gate (home page): one full-screen night scene, wordmark, a line, ENTER IF YOU DARE */

html, body.dw-gate-body { height: 100%; margin: 0; background: #05040a !important; overflow: hidden; }
body.dw-gate-body #loading-screen, body.dw-gate-body .dw-fog:not(.dw-gate__layer) { display: none !important; }

.dw-gate { position: fixed; inset: 0; overflow: hidden; background: #05040a; isolation: isolate; }

/* ---------- scene ---------- */
.dw-gate__scene { position: absolute; inset: 0; }
.dw-gate__layer { position: absolute; inset: -4%; width: 108%; height: 108%; will-change: transform; }   /* oversize so parallax never shows an edge */
.dw-gate__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: brightness(.9) saturate(1.05);
  animation: dwBreathe 24s ease-in-out infinite alternate; }
@keyframes dwBreathe { from { transform: scale(1); } to { transform: scale(1.05); } }
.dw-gate__smoke { object-fit: cover; opacity: 0; mix-blend-mode: screen; transition: opacity 2s ease; }
.dw-gate__smoke.is-playing { opacity: .45; }
.dw-gate .dw-fog__layer { inset: -4%; width: 108%; height: 108%; }
.dw-gate .dw-fog__layer--1 { opacity: .28; }
.dw-gate .dw-fog__layer--2 { opacity: .16; }

/* warm pumpkin light that flickers, cold moonlight from above */
.dw-gate__glow { pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(60% 40% at 50% 92%, rgba(255, 140, 30, .35), transparent 70%),
    radial-gradient(30% 25% at 18% 80%, rgba(255, 120, 20, .28), transparent 70%),
    radial-gradient(30% 25% at 82% 82%, rgba(255, 120, 20, .28), transparent 70%);
  animation: dwFlicker 3.2s steps(1, end) infinite; }
@keyframes dwFlicker {
  0%, 100% { opacity: .9; } 6% { opacity: .75; } 9% { opacity: .95; } 14% { opacity: .7; } 17% { opacity: .9; }
  38% { opacity: .82; } 41% { opacity: 1; } 55% { opacity: .78; } 58% { opacity: .92; } 80% { opacity: .85; } 84% { opacity: 1; } }
.dw-gate__lightning { pointer-events: none; background: #dfe8ff; opacity: 0; mix-blend-mode: screen; }
.dw-gate__lightning.is-flash { animation: dwLightning .9s ease-out 1; }
@keyframes dwLightning { 0% { opacity: 0; } 4% { opacity: .55; } 8% { opacity: .05; } 14% { opacity: .35; } 20% { opacity: 0; } 100% { opacity: 0; } }
.dw-gate__vignette { pointer-events: none;
  background: radial-gradient(75% 65% at 50% 45%, transparent 40%, rgba(3, 2, 8, .55) 75%, rgba(3, 2, 8, .92) 100%); }
.dw-gate .dw-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; }

/* ---------- words ---------- */
.dw-gate__content { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 clamp(16px, 5vw, 48px); gap: .6rem; }
.dw-gate__wordmark { width: min(560px, 78vw); height: auto; opacity: 0;
  filter: drop-shadow(0 8px 0 #000) drop-shadow(0 0 40px rgba(227, 101, 45, .55));
  animation: dwRise 2.4s cubic-bezier(.2, .7, .2, 1) .4s forwards; }
.dw-gate__welcome { margin: 1.2rem 0 0; font: 700 .8rem/1 var(--dw-body); letter-spacing: .38em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
  opacity: 0; animation: dwFade 1.6s ease 1.6s forwards; }
.dw-gate__line { margin: 0; font: italic 400 clamp(1.05rem, 2.2vw, 1.45rem)/1.4 Georgia, "Times New Roman", serif; color: #f3ede7;
  text-shadow: 0 2px 12px #000, 0 0 30px #000; opacity: 0; animation: dwFade 1.8s ease 2.4s forwards; }
.dw-gate__enter { position: relative; margin-top: 2.2rem; padding: 1.05em 2.6em; border: 1px solid rgba(227, 101, 45, .75); border-radius: 2px;
  background: rgba(5, 4, 10, .55); color: #f3ede7 !important; font: 700 .85rem/1 var(--dw-body); letter-spacing: .32em; text-transform: uppercase;
  text-decoration: none; opacity: 0; animation: dwFade 1.6s ease 3.4s forwards, dwPulse 4s ease-in-out 5s infinite;
  transition: background .3s ease, color .3s ease, box-shadow .3s ease, letter-spacing .3s ease; }
.dw-gate__enter::before, .dw-gate__enter::after { content: ""; position: absolute; top: -1px; bottom: -1px; width: 10px; border: 1px solid var(--dw-orange); }
.dw-gate__enter::before { left: -1px; border-right: 0; } .dw-gate__enter::after { right: -1px; border-left: 0; }
.dw-gate__enter:hover, .dw-gate__enter:focus-visible { background: rgba(227, 101, 45, .18); letter-spacing: .4em; box-shadow: 0 0 40px rgba(227, 101, 45, .35), inset 0 0 20px rgba(227, 101, 45, .15); outline: none; }
@keyframes dwRise { from { opacity: 0; transform: translateY(24px) scale(.97); filter: drop-shadow(0 8px 0 #000) blur(6px); } to { opacity: 1; transform: none; } }
@keyframes dwFade { to { opacity: 1; } }
@keyframes dwPulse { 0%, 100% { box-shadow: 0 0 0 rgba(227, 101, 45, 0); } 50% { box-shadow: 0 0 36px rgba(227, 101, 45, .3); } }

.dw-gate__skip { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 2; text-align: center;
  font: 600 .72rem/1 var(--dw-body); letter-spacing: .12em; color: rgba(255, 255, 255, .38) !important; text-decoration: none;
  opacity: 0; animation: dwFade 2s ease 5s forwards; }
.dw-gate__skip:hover { color: var(--dw-orange) !important; }

/* sound toggle sits top-right on the gate */
body.dw-gate-body .dw-sound { top: max(14px, env(safe-area-inset-top)); right: 14px; bottom: auto; }

/* leaving the gate: quick fade to black */
body.dw-gate-body.is-leaving .dw-gate { animation: dwLeave .7s ease forwards; }
@keyframes dwLeave { to { opacity: 0; filter: brightness(0); } }

@media (max-width: 720px) {
  .dw-gate__content { justify-content: center; transform: translateY(-7%); }   /* the dark band sits mid-frame in the portrait scene */
  .dw-gate__wordmark { width: min(340px, 82vw); }
  .dw-gate__welcome { font-size: .7rem; letter-spacing: .3em; }
  .dw-gate__enter { margin-top: 1.6rem; padding: 1em 2em; }
  .dw-gate__skip { bottom: max(10px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.dw-motion-always) .dw-gate__bg img, body:not(.dw-motion-always) .dw-gate__glow, body:not(.dw-motion-always) .dw-gate__enter { animation: dwFade .01s forwards !important; }
  body:not(.dw-motion-always) .dw-gate__wordmark, body:not(.dw-motion-always) .dw-gate__welcome, body:not(.dw-motion-always) .dw-gate__line, body:not(.dw-motion-always) .dw-gate__skip { animation: dwFade .01s forwards !important; }
}

/* bats + witch are black silhouettes; the v2 sky is nearly black too — give them a faint moonlit rim so they read */
.dw-gate .dw-bats img { filter: drop-shadow(0 0 3px rgba(200, 215, 255, .75)) drop-shadow(0 0 14px rgba(160, 190, 255, .35)); opacity: 1; }
.dw-gate .dw-bats img.dw-witch { filter: drop-shadow(0 0 4px rgba(200, 215, 255, .8)) drop-shadow(0 0 22px rgba(160, 190, 255, .4)); }

/* the whisper (appears after ~18 s, then every ~30 s) */
.dw-gate__whisper { position: absolute; left: 0; right: 0; bottom: 12%; z-index: 2; margin: 0; text-align: center; pointer-events: none;
  font: italic 400 .95rem/1.4 Georgia, serif; color: rgba(255,255,255,.75); text-shadow: 0 2px 10px #000; opacity: 0; transform: translateY(6px); transition: opacity 1.2s ease, transform 1.2s ease; }
.dw-gate__whisper.is-on { opacity: 1; transform: none; }
@media (max-width: 720px) { .dw-gate__whisper { bottom: 9%; font-size: .85rem; } }