/*
 * Christmas seasonal overlay styles for <ChristmasAtmosphere />
 * (remix/app/components/ChristmasAtmosphere.tsx).
 *
 * Same principles as halloween-theme.css: understated decoration for a historic
 * hotel, only transform and opacity animated, nothing interactive.
 *
 * Stacking: .oph-christmas-sky z-45 (below the sticky header, z-50)
 *           .oph-christmas-corners z-55 (hangs over the header corners, below the
 *           mobile menu at z-70); header controls are masked out from JS.
 */

.oph-christmas-sky,
.oph-christmas-corners {
  pointer-events: none;
  user-select: none;
  position: fixed;
  inset: 0;
  overflow: hidden;
  contain: strict;
}
.oph-christmas-sky {
  z-index: 45;
  opacity: var(--oph-sky-presence, 1);
  transition: opacity 0.4s linear;
}
.oph-christmas-sky[data-density="1"] :is(.oph-sleigh, .oph-snow__flake:nth-child(n + 13)),
.oph-christmas-sky[data-density="2"] .oph-snow__flake:nth-child(n + 25) {
  visibility: hidden;
}
.oph-christmas-sky[data-density="0"] { visibility: hidden; }
.oph-christmas-sky[data-density="0"] * { animation-play-state: paused; }
.oph-christmas-corners {
  z-index: 55;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
}

/* ── Snow ────────────────────────────────────────────────── */
.oph-snow { position: absolute; inset: 0; }
.oph-snow__flake {
  position: absolute;
  top: -12px;
  border-radius: 9999px;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #f3f6f9 55%, rgba(220, 228, 236, 0.6) 100%);
  box-shadow: 0 0 3px rgba(150, 165, 180, 0.45);
  will-change: transform;
  animation-name: oph-snow-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes oph-snow-fall {
  0% { transform: translate3d(0, -2vh, 0); }
  50% { transform: translate3d(calc(var(--oph-drift, 0px) * 0.6), 50vh, 0); }
  100% { transform: translate3d(var(--oph-drift, 0px), 104vh, 0); }
}

/* ── Twinkling stars ─────────────────────────────────────── */
.oph-star {
  position: absolute;
  fill: #c9a96e;
  opacity: 0.25;
  animation: oph-twinkle 3.6s ease-in-out infinite;
}
@keyframes oph-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.8) rotate(0deg); }
  50% { opacity: 0.85; transform: scale(1.1) rotate(12deg); }
}

/* ── Santa's sleigh ──────────────────────────────────────── */
.oph-sleigh {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(150px, 16vw, 220px);
  opacity: 0;
  animation: oph-sleigh-path 30s linear 4s infinite;
}
.oph-sleigh svg { display: block; width: 100%; height: auto; overflow: visible; fill: #2b231d; }
.oph-sleigh__line,
.oph-sleigh__rein { fill: none; stroke: #2b231d; stroke-width: 2; stroke-linecap: round; }
.oph-sleigh__rein { stroke-width: 1; opacity: 0.7; }
.oph-sleigh__bob { animation: oph-sleigh-bob 1.6s ease-in-out infinite alternate; }
@keyframes oph-sleigh-bob {
  from { transform: translateY(-3px) rotate(-2deg); }
  to { transform: translateY(3px) rotate(1deg); }
}
@keyframes oph-sleigh-path {
  0% { opacity: 0; transform: translate3d(-25vw, 26vh, 0); }
  4% { opacity: 0.8; }
  32% { opacity: 0.8; }
  38% { opacity: 0; transform: translate3d(110vw, 8vh, 0); }
  100% { opacity: 0; transform: translate3d(110vw, 8vh, 0); }
}

/* ── Hanging decorations ─────────────────────────────────── */
.oph-hang {
  position: absolute;
  top: 0;
  width: clamp(130px, 15vw, 210px);
  height: auto;
  overflow: visible;
}
.oph-hang--left { left: clamp(4px, 1vw, 16px); }
.oph-hang--right { right: clamp(4px, 1vw, 16px); }
.oph-hang__thread { stroke: #b89a5c; stroke-width: 1; }
.oph-hang__cap { fill: #b89a5c; }
.oph-hang__shine { fill: #ffffff; opacity: 0.55; }
.oph-hang__star { fill: #c9a96e; stroke: #a8823f; stroke-width: 0.6; }
.oph-hang__swing { animation: oph-swing 5.5s ease-in-out infinite alternate; }
@keyframes oph-swing {
  from { transform: rotate(-3deg); }
  to { transform: rotate(3deg); }
}
.oph-garland { fill: none; stroke: #2f5a3f; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 5; }
.oph-stocking { fill: #a8322c; }
.oph-stocking__cuff { fill: #f7f2ed; }

/* ── Winter scene (bottom-left) ──────────────────────────── */
.oph-scene {
  position: absolute;
  left: clamp(8px, 1.5vw, 28px);
  bottom: 0;
  width: clamp(170px, 14vw, 240px);
  display: none;
}
.oph-scene svg { display: block; width: 100%; height: auto; }
.oph-tree { fill: #2f5a3f; }
.oph-tree__trunk { fill: #5b4334; }
.oph-dot--red { fill: #c8463d; }
.oph-dot--gold { fill: #e6cf96; }
.oph-dot { animation: oph-twinkle 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.oph-dot:nth-of-type(2n) { animation-delay: 1.2s; }
.oph-gift--red { fill: #a8322c; }
.oph-gift--green { fill: #2f5a3f; }
.oph-ribbon { fill: #e6cf96; }
.oph-snowman { fill: #fbfcfd; stroke: #c9d3dc; stroke-width: 1.5; }
.oph-snowman__hat,
.oph-snowman__coal { fill: #231c18; }
.oph-snowman__scarf { fill: #a8322c; }
.oph-snowman__nose { fill: #e08a3c; }
.oph-snowbank { fill: #ffffff; opacity: 0.9; }
/* Only where the page has wide margins, so it never sits over content. */
@media (min-width: 1500px) {
  .oph-scene { display: block; }
}

/* Keep the hanging decorations clear of the centred banner text on mid-width screens. */
@media (max-width: 1279px) {
  .oph-hang { width: clamp(84px, 10vw, 120px); }
}

@media (max-width: 640px) {
  .oph-hang { width: clamp(72px, 20vw, 96px); }
  .oph-snow__flake:nth-child(n + 19) { display: none; }
  .oph-sleigh { width: 130px; }
}

/* ── Reduced motion: keep static decorations, no falling snow or flight ── */
@media (prefers-reduced-motion: reduce) {
  .oph-snow,
  .oph-sleigh { display: none; }
  .oph-star,
  .oph-dot,
  .oph-hang__swing,
  .oph-sleigh__bob { animation: none; }
  .oph-star { opacity: 0.5; }
}

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