/*
 * Halloween seasonal overlay styles for <HalloweenAtmosphere />
 * (remix/app/components/HalloweenAtmosphere.tsx).
 *
 * The aim is understated, period-appropriate atmosphere for a historic
 * hotel: silk-grey cobwebs in the corners, a spider dropping on its
 * dragline, the occasional bat crossing and a faint veiled apparition.
 * Only transform and opacity are animated, so it all stays on the compositor.
 *
 * Stacking: .oph-halloween-sky z-45 (below the sticky header, z-50)
 *           .oph-halloween-corners z-55 (webs hang over the header corners,
 *           below the mobile menu at z-70). The header logo and Book Now
 *           button are masked out of this layer so they read as on top.
 */

.oph-halloween-sky,
.oph-halloween-corners {
  pointer-events: none;
  user-select: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  contain: strict;
}
.oph-halloween-sky {
  z-index: 45;
  /* --oph-sky-presence (1 → 0) and data-density (3 → 0) are set from JS on scroll. */
  opacity: var(--oph-sky-presence, 1);
  transition: opacity 0.4s linear;
}
/* Figures drop out as the visitor scrolls; visibility keeps each one's timeline intact. */
.oph-halloween-sky[data-density="2"] :is(.oph-bat--3, .oph-ghost--2),
.oph-halloween-sky[data-density="1"] :is(.oph-bat--2, .oph-bat--3, .oph-ghost--2) {
  visibility: hidden;
}
.oph-halloween-sky[data-density="0"] { visibility: hidden; }
.oph-halloween-sky[data-density="0"] * { animation-play-state: paused; }
.oph-halloween-corners {
  z-index: 55;
  --oph-web-size: clamp(150px, 17vw, 250px);
  /* mask-image (holes around the header logo + Book Now) is set from JS. */
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

/* ── Cobwebs ─────────────────────────────────────────────── */
.oph-web {
  position: absolute;
  top: 0;
  width: var(--oph-web-size);
  height: var(--oph-web-size);
  overflow: visible;
}
.oph-web--left { left: 0; }
.oph-web--right { right: 0; transform: scaleX(-1); }

.oph-web path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}
.oph-web__silk path {
  stroke: rgba(70, 66, 61, 0.42);
  stroke-width: 0.6px;
}
.oph-web__silk .oph-web__hub { stroke: rgba(70, 66, 61, 0.3); }
/* Faint light catch so the silk still reads over dark photography. */
.oph-web__sheen path {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 0.5px;
}

/* ── Spider ──────────────────────────────────────────────── */
.oph-spider {
  position: absolute;
  top: 0;
  right: calc(var(--oph-web-size) * 0.44);
  width: 24px;
}
.oph-spider__drop {
  position: relative;
  transform: translate3d(0, -60px, 0);
  animation: oph-spider-drop 34s cubic-bezier(0.45, 0, 0.3, 1) 4s infinite;
  will-change: transform;
}
.oph-spider__silk {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 3px);
  width: 1px;
  height: 120vh;
  margin-left: -0.5px;
  background: rgba(70, 66, 61, 0.5);
  box-shadow: 0.6px 0 0 rgba(255, 255, 255, 0.35);
}
.oph-spider__body {
  display: block;
  width: 24px;
  height: 30px;
  transform-origin: 50% 0;
  animation: oph-spider-turn 7s ease-in-out infinite alternate;
}
.oph-spider__legs path {
  fill: none;
  stroke: #1e1916;
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.oph-spider__cephalo { fill: #231c18; }
.oph-spider__abdomen { fill: #2b231d; }
.oph-spider__mark { fill: #6b5442; opacity: 0.35; }
.oph-spider__palps { fill: none; stroke: #1e1916; stroke-width: 1; stroke-linecap: round; }

@keyframes oph-spider-drop {
  0%, 5%   { transform: translate3d(0, -60px, 0); }
  24%      { transform: translate3d(0, min(28vh, 260px), 0); }
  27%      { transform: translate3d(0, calc(min(28vh, 260px) - 6px), 0); }
  44%      { transform: translate3d(0, min(28vh, 260px), 0); }
  62%      { transform: translate3d(0, 90px, 0); }
  70%      { transform: translate3d(0, 90px, 0); }
  86%, 100% { transform: translate3d(0, -60px, 0); }
}
@keyframes oph-spider-turn {
  from { transform: rotate(-5deg) scaleX(1); }
  to   { transform: rotate(4deg) scaleX(0.9); }
}

/* ── Bats ────────────────────────────────────────────────── */
.oph-bat {
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  opacity: 0;
  will-change: transform, opacity;
}
.oph-bat svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: #1b1715;
}
.oph-bat__feet { fill: none; stroke: #1b1715; stroke-width: 1.4; stroke-linecap: round; }
.oph-bat__wing {
  transform-box: fill-box;
  transform-origin: 0% 45%;
  animation: oph-bat-flap var(--oph-flap, 0.2s) ease-in-out infinite alternate;
}
.oph-bat__bob { animation: oph-bat-bob var(--oph-flap, 0.2s) ease-in-out infinite alternate; }

@keyframes oph-bat-flap {
  from { transform: rotate(-34deg) scaleX(0.86); }
  to   { transform: rotate(26deg) scaleX(1); }
}
@keyframes oph-bat-bob {
  from { transform: translateY(2px); }
  to   { transform: translateY(-2px); }
}

.oph-bat--1 { --oph-flap: 0.19s; animation: oph-bat-path-1 26s linear 3s infinite; }
.oph-bat--2 { --oph-flap: 0.16s; width: 30px; animation: oph-bat-path-2 33s linear 12s infinite; }
.oph-bat--3 { --oph-flap: 0.23s; width: 54px; animation: oph-bat-path-3 29s linear 20s infinite; }

/* Erratic, darting flight lines that occupy part of each cycle; off-screen otherwise. */
@keyframes oph-bat-path-1 {
  0%   { opacity: 1; transform: translate3d(-8vw, 40vh, 0) rotate(6deg); }
  6%   { transform: translate3d(14vw, 31vh, 0) rotate(-8deg); }
  10%  { transform: translate3d(27vw, 36vh, 0) rotate(10deg); }
  15%  { transform: translate3d(44vw, 24vh, 0) rotate(-6deg); }
  19%  { transform: translate3d(58vw, 29vh, 0) rotate(8deg); }
  25%  { transform: translate3d(78vw, 18vh, 0) rotate(-10deg); }
  31%  { opacity: 1; transform: translate3d(108vw, 22vh, 0) rotate(4deg); }
  31.1%, 100% { opacity: 0; transform: translate3d(108vw, 22vh, 0); }
}
@keyframes oph-bat-path-2 {
  0%   { opacity: 1; transform: translate3d(106vw, 16vh, 0) rotate(-4deg); }
  7%   { transform: translate3d(84vw, 22vh, 0) rotate(9deg); }
  12%  { transform: translate3d(70vw, 13vh, 0) rotate(-7deg); }
  18%  { transform: translate3d(52vw, 19vh, 0) rotate(6deg); }
  23%  { transform: translate3d(36vw, 11vh, 0) rotate(-9deg); }
  30%  { transform: translate3d(14vw, 17vh, 0) rotate(5deg); }
  36%  { opacity: 1; transform: translate3d(-8vw, 9vh, 0) rotate(-3deg); }
  36.1%, 100% { opacity: 0; transform: translate3d(-8vw, 9vh, 0); }
}
@keyframes oph-bat-path-3 {
  0%   { opacity: 1; transform: translate3d(-10vw, 64vh, 0) rotate(-8deg); }
  5%   { transform: translate3d(12vw, 52vh, 0) rotate(7deg); }
  9%   { transform: translate3d(26vw, 58vh, 0) rotate(-6deg); }
  14%  { transform: translate3d(46vw, 44vh, 0) rotate(10deg); }
  18%  { transform: translate3d(60vw, 50vh, 0) rotate(-8deg); }
  23%  { transform: translate3d(82vw, 38vh, 0) rotate(6deg); }
  27%  { opacity: 1; transform: translate3d(110vw, 42vh, 0) rotate(-4deg); }
  27.1%, 100% { opacity: 0; transform: translate3d(110vw, 42vh, 0); }
}

/* ── Apparitions ─────────────────────────────────────────── */
.oph-ghost {
  position: absolute;
  width: 104px;
  opacity: 0;
  will-change: transform, opacity;
}
.oph-ghost svg { display: block; width: 100%; height: auto; overflow: visible; }
.oph-ghost__sway {
  transform-origin: 50% 0;
  animation: oph-ghost-sway 8s ease-in-out infinite alternate;
}
.oph-ghost--1 { left: 3vw; top: 46vh; animation: oph-ghost-drift-1 40s ease-in-out 7s infinite; }
.oph-ghost--2 { right: 4vw; top: 30vh; width: 84px; animation: oph-ghost-drift-2 52s ease-in-out 26s infinite; }

@keyframes oph-ghost-sway {
  from { transform: rotate(-1.6deg) scaleY(1); }
  to   { transform: rotate(1.4deg) scaleY(1.03); }
}
@keyframes oph-ghost-drift-1 {
  0%   { opacity: 0; transform: translate3d(0, 2vh, 0); }
  12%  { opacity: 0.55; }
  24%  { opacity: 0.42; transform: translate3d(4vw, -3vh, 0); }
  36%  { opacity: 0; transform: translate3d(7vw, -7vh, 0); }
  100% { opacity: 0; transform: translate3d(7vw, -7vh, 0); }
}
@keyframes oph-ghost-drift-2 {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  10%  { opacity: 0.45; }
  20%  { opacity: 0.34; transform: translate3d(-3vw, -4vh, 0); }
  30%  { opacity: 0; transform: translate3d(-6vw, -8vh, 0); }
  100% { opacity: 0; transform: translate3d(-6vw, -8vh, 0); }
}

/* ── Small screens: lighter touch ────────────────────────── */
@media (max-width: 640px) {
  .oph-halloween-corners { --oph-web-size: clamp(100px, 30vw, 140px); }
  .oph-bat--1 { width: 34px; }
  .oph-bat--3, .oph-ghost--2 { display: none; }
  .oph-ghost--1 { width: 72px; top: 52vh; }
}

/* ── Reduced motion: keep the static webs and a resting spider ── */
@media (prefers-reduced-motion: reduce) {
  .oph-halloween-sky { display: none; }
  .oph-spider__drop,
  .oph-spider__body { animation: none; }
  .oph-spider__drop { transform: translate3d(0, 90px, 0); }
}

@media print {
  .oph-halloween-sky,
  .oph-halloween-corners { display: none; }
}