@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;1,500&display=swap');

:root {
  color-scheme: dark;
  --background: #11100f;
  --cream: #efe7d5;
  --orange: #f18246;
}

* { box-sizing: border-box; }
html { background: #000; }
.js:not(.is-loaded) body { visibility: hidden; }
body { margin: 0; background: var(--background); color: var(--cream); }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 7px; }
::selection { background: var(--orange); color: var(--background); }

.intro { position: fixed; inset: 0; z-index: 10; overflow: hidden; display: grid; place-items: center; background: #000; }
.intro[hidden] { display: none; }
.intro-smoke { position: absolute; inset: -15%; pointer-events: none; animation: smoke-in .8s both; }
.intro.is-boo .intro-smoke { animation: smoke-part 2.4s both; }
.intro-smoke::before, .intro-smoke::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 22% 55%, #cbd0d340, transparent 36%),
    radial-gradient(ellipse at 67% 43%, #e0e4e63b, transparent 32%),
    radial-gradient(ellipse at 44% 64%, #bdc5cc30, transparent 28%),
    radial-gradient(ellipse at 81% 69%, #dce1e52b, transparent 31%);
  filter: blur(18px);
  animation: smoke-drift 6s ease-in-out infinite alternate;
}
.intro-smoke::after { transform: rotate(180deg); animation-direction: alternate-reverse; animation-delay: -3s; opacity: .7; }
.intro-logos { position: absolute; inset: 0; display: grid; place-items: center; padding: 80px 32px; }
.intro-logos img { display: block; width: min(72vw, 540px); height: min(52vh, 400px); height: min(52svh, 400px); object-fit: contain; opacity: 0; }
.intro-boo { position: relative; color: #fff; font-family: Arial, sans-serif; font-size: clamp(5rem, 27vw, 22rem); font-weight: 900; letter-spacing: -.08em; padding-right: .08em; opacity: 0; }
.skip, .replay { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 12px; border: 1px solid #efe7d52b; border-radius: 50%; background: #11100f66; color: #bfb4a3; cursor: pointer; transition: color .2s, border-color .2s; }
.skip { top: max(24px, env(safe-area-inset-top)); right: 24px; }
.skip svg, .replay svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.skip:hover, .replay:hover { color: var(--orange); border-color: var(--orange); }
.intro-active, .video-open { overflow: hidden; }
.intro-active .site { opacity: 0; }
.site { opacity: 1; transition: opacity 1s ease; }
@keyframes smoke-drift {
  from { translate: -5% 3%; scale: 1; }
  to { translate: 6% -4%; scale: 1.16; }
}
@keyframes smoke-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes smoke-part { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(1.8); } }

.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 110px 24px 90px; text-align: center; background: radial-gradient(ellipse at 50% 75%, #612e142b, transparent 58%); }
h1 { position: relative; margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 500; font-size: clamp(78px, 9.3vw, 142px); line-height: 1.04; letter-spacing: -5px; }
h1 em { color: var(--orange); font-weight: 500; }
.moon { position: absolute; z-index: -1; top: 10%; right: 17%; width: 83px; height: 83px; border-radius: 50%; box-shadow: 17px 10px 0 0 #e8d0a6; transform: rotate(-26deg); opacity: .8; }
.bats, .sparks { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.bats { z-index: 1; }
.bat { position: absolute; width: clamp(30px, 5vw, 70px); fill: #8f7664; animation: bat-float 7s ease-in-out infinite; rotate: -17deg; }
.bat-trigger { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.bat-trigger svg { display: block; width: 100%; height: auto; }
.bat:nth-child(1) { left: 12%; top: 19%; }
.bat:nth-child(2) { right: 8%; top: 36%; width: clamp(26px, 3.5vw, 49px); rotate: 20deg; animation-delay: -2s; }
.bat:nth-child(3) { left: 27%; top: 9%; width: 32px; rotate: 12deg; animation-delay: -4s; }
.bat:nth-child(4) { right: 28%; top: 21%; width: 38px; rotate: -25deg; animation-delay: -1s; }
.bat:nth-child(5) { left: 6%; top: 59%; width: 43px; rotate: 15deg; animation-delay: -5s; }
.bat:nth-child(6) { right: 17%; top: 73%; width: 56px; rotate: -12deg; animation-delay: -3s; }
.bat:nth-child(7) { left: 25%; top: 84%; width: 35px; rotate: 24deg; animation-delay: -6s; }
.bat:nth-child(8) { right: 6%; top: 13%; width: 27px; rotate: -8deg; animation-delay: -2.5s; }
@keyframes bat-float { 50% { transform: translate(10px, -12px) rotate(7deg); } }
.sparks span { position: absolute; width: 11px; height: 11px; background: #c9ab7f; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: twinkle 4s ease-in-out infinite; }
.sparks span:nth-child(3n) { width: 5px; height: 5px; animation-delay: -1s; }
.sparks span:nth-child(3n + 1) { animation-delay: -2.5s; }
.sparks span:nth-child(1) { left: 9%; top: 9%; }
.sparks span:nth-child(2) { left: 39%; top: 14%; }
.sparks span:nth-child(3) { left: 54%; top: 7%; }
.sparks span:nth-child(4) { left: 73%; top: 31%; }
.sparks span:nth-child(5) { left: 21%; top: 33%; }
.sparks span:nth-child(6) { left: 5%; top: 42%; }
.sparks span:nth-child(7) { left: 93%; top: 53%; }
.sparks span:nth-child(8) { left: 19%; top: 70%; }
.sparks span:nth-child(9) { left: 35%; top: 62%; }
.sparks span:nth-child(10) { left: 69%; top: 60%; }
.sparks span:nth-child(11) { left: 85%; top: 88%; }
.sparks span:nth-child(12) { left: 45%; top: 91%; }
.sparks span:nth-child(13) { left: 62%; top: 83%; }
.sparks span:nth-child(14) { left: 7%; top: 84%; }
.sparks span:nth-child(15) { left: 88%; top: 25%; }
.sparks span:nth-child(16) { left: 60%; top: 19%; }
.sparks span:nth-child(17) { left: 78%; top: 49%; }
.sparks span:nth-child(18) { left: 14%; top: 48%; }
@keyframes twinkle { 0%, 100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
.scene { position: relative; width: 100%; margin-top: 40px; }
.scene-haze { position: absolute; z-index: -1; width: 440px; height: 190px; max-width: 90%; left: 50%; bottom: -25px; transform: translateX(-50%); background: radial-gradient(ellipse, #c36b2530, transparent 68%); filter: blur(20px); }
.pumpkin { width: clamp(190px, 20vw, 270px); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 13px 20px #0009); animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-7px) rotate(2deg); } }
.replay { bottom: max(24px, env(safe-area-inset-bottom)); right: 24px; }

.video-dialog { width: min(800px, calc(100vw - 32px), calc((100svh - 140px) * 16 / 9)); max-width: none; max-height: calc(100svh - 32px); padding: 12px; border: 1px solid #efe7d52b; border-radius: 12px; background: var(--background); color: var(--cream); box-shadow: 0 24px 80px #000b; }
.video-dialog::backdrop { background: #000c; backdrop-filter: blur(6px); }
.video-toolbar { display: flex; justify-content: flex-end; padding-bottom: 8px; }
.video-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 1px solid #efe7d52b; border-radius: 50%; background: none; color: var(--cream); cursor: pointer; }
.video-close:hover { color: var(--orange); border-color: var(--orange); }
.video-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.video-player { aspect-ratio: 16 / 9; background: #000; }
.video-player iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 760px) {
  .hero { padding: 130px 24px 100px; }
  h1 { font-size: clamp(44px, 13vw, 100px); letter-spacing: -2px; }
  .moon { width: 43px; height: 43px; top: 7%; right: 23%; box-shadow: 10px 6px 0 0 #e8d0a6; }
  .bat:nth-child(1) { left: 8%; top: 22%; }
  .bat:nth-child(3) { left: 26%; top: 13%; width: 25px; }
  .bat:nth-child(4) { right: 10%; top: 25%; width: 28px; }
  .bat:nth-child(5) { left: 4%; top: 58%; width: 29px; }
  .bat:nth-child(6) { right: 9%; top: 76%; width: 38px; }
  .bat:nth-child(7) { left: 23%; top: 87%; width: 26px; }
  .scene { margin-top: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}