/* ════════════════════════════════════════════════════════════════
   Christmas background layer — integrated into the fish-sea site.
   Sits above the sea canvases (z 0-4) and below the cian wordmark
   (z 50), Discord widget (z 1200) and dock (z 1500). The wordmark,
   widget, cursor and dock all stay on top of whichever bg is active.
   ════════════════════════════════════════════════════════════════ */

#xmas-scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;            /* clicks pass through to the site */

  /* Night-sky gradient ground for the scene */
  background:
    linear-gradient(30deg,  #24334e 0%, #2a2c50 25%, transparent 50%),
    linear-gradient(75deg,  #2b2a52 0%, #2c2341 40%, transparent 70%),
    linear-gradient(120deg, #2c2341 0%, #1A2740 50%),
    linear-gradient(200deg, #2a2542 0%, #1A2740 60%),
    #1A2740;

  /* Hidden by default. Fade-OUT is slow (2.2s) so the scene + its falling
     snow linger and gently dissolve for a couple seconds after toggling off
     — continuity rather than a hard cut. (Fade-in is quicker, see .active.) */
  opacity: 0;
  visibility: hidden;
  transition: opacity 2.2s ease, visibility 0s linear 2.2s;
}

#xmas-scene.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.1s ease, visibility 0s linear 0s;
}

/* ════════════════════════════════════════════════════════════════
   "Lego build" reveal — when the scene activates, each layer slides
   up into place from the ground, back-to-front, staggered. Pieces
   start hidden; .active triggers a one-shot build-in keyframe. Pieces
   that already use transform (trees/sign/Kenny) get a dedicated
   keyframe that lands on their resting transform, and their looping
   sway is delayed until the build finishes so the two never fight.
   ════════════════════════════════════════════════════════════════ */

/* Hide every buildable piece until the scene is active */
#xmas-scene .xmas-build { opacity: 0; }
#xmas-scene.active .xmas-build {
  opacity: 1;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.22, 1.2, 0.36, 1);
  animation-fill-mode: both;
}

/* After the build, clear the lingering build transform on the mountains +
   ground so they no longer create a stacking context — otherwise the
   transformed SVG can paint over the falling-snow canvas. Plain z-index
   then keeps snow (z-100) cleanly in front of the mountains (z-8). */
#xmas-scene.built .xmas-mountains,
#xmas-scene.built .xmas-snow-layers {
  animation: none;
  transform: none;
  opacity: 1;
}

/* Ground + mountains rise up from below */
#xmas-scene.active .xmas-snow-layers,
#xmas-scene.active .xmas-mountains {
  animation-name: xmas-build-up;
}

/* Trees alternate sides: left-positioned trees slide in from the left,
   right-positioned ones from the right (podium feel). */
#xmas-scene.active .xmas-tree-1 { animation-name: xmas-build-left; }   /* left 10% */
#xmas-scene.active .xmas-tree-3 { animation-name: xmas-build-left; }   /* left 25% */
#xmas-scene.active .xmas-tree-4 { animation-name: xmas-build-right; }  /* left 40% -> from right */
#xmas-scene.active .xmas-tree-5 { animation-name: xmas-build-right; }  /* left 60% */
#xmas-scene.active .xmas-tree-2 { animation-name: xmas-build-right; }  /* right 15% */

/* Sign drops from above (keeps its translateX(-50%)) */
#xmas-scene.active .xmas-sign { animation-name: xmas-build-drop; }

/* Kenny rises from his corner (keeps his scale(1.15)) */
#xmas-scene.active .xmas-container { animation-name: xmas-build-kenny; }

/* Stagger: ground -> mountains -> trees L/R one-by-one -> sign drop -> Kenny */
#xmas-scene.active .xmas-snow-layers { animation-delay: 0.05s; }
#xmas-scene.active .xmas-mountains   { animation-delay: 0.30s; }
#xmas-scene.active .xmas-tree-1      { animation-delay: 0.55s; }
#xmas-scene.active .xmas-tree-2      { animation-delay: 0.70s; }
#xmas-scene.active .xmas-tree-3      { animation-delay: 0.85s; }
#xmas-scene.active .xmas-tree-4      { animation-delay: 1.00s; }
#xmas-scene.active .xmas-tree-5      { animation-delay: 1.15s; }
#xmas-scene.active .xmas-sign        { animation-delay: 1.35s; }
#xmas-scene.active .xmas-container   { animation-delay: 1.55s; }

/* Slightly longer, springier build now that there's more travel */
#xmas-scene.active .xmas-build { animation-duration: 0.7s; }

@keyframes xmas-build-up {
  0%   { opacity: 0; transform: translateY(80px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes xmas-build-left {
  0%   { opacity: 0; transform: translateX(-120px) translateY(20px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) translateY(0); }
}
@keyframes xmas-build-right {
  0%   { opacity: 0; transform: translateX(120px) translateY(20px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(0) translateY(0); }
}
@keyframes xmas-build-drop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-90px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes xmas-build-kenny {
  0%   { opacity: 0; transform: translateX(-20px) translateY(110px) scale(1.15); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(-20px) translateY(0) scale(1.15); }
}

/* When Christmas is on, fade the sea out (matched timing to the scene fade so
   the two cross-dissolve), then drop it from compositing once hidden. */
#app.xmas-on #caustics-canvas,
#app.xmas-on #goldfish-container,
#app.xmas-on #particles-canvas {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}

/* Water "pop" when toggling back from Christmas — JS adds .sea-pop briefly.
   Scale only (opacity is handled by the existing fade so we don't clobber the
   caustics' base 0.35 opacity). The individual fish pop in via JS. */
#app.sea-pop #caustics-canvas,
#app.sea-pop #particles-canvas {
  animation: xmas-sea-pop 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
}
@keyframes xmas-sea-pop {
  0%   { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Once the build finishes (.built added by JS), the gentle looping
   sway/pan animations kick in. Keeping them off during the build
   stops them fighting the build-in transforms. */
#xmas-scene.built .xmas-bg-elements { animation: xmas-slow-pan 120s infinite ease-in-out; }
#xmas-scene.built .xmas-cloud-1     { animation: xmas-cloud-drift 38s infinite ease-in-out; }
#xmas-scene.built .xmas-cloud-2     { animation: xmas-cloud-drift 46s infinite ease-in-out -18s; }
#xmas-scene.built .xmas-tree-1 { animation: xmas-tree-sway 8s infinite ease-in-out 0s; }
#xmas-scene.built .xmas-tree-2 { animation: xmas-tree-sway 8s infinite ease-in-out -2s; }
#xmas-scene.built .xmas-tree-3 { animation: xmas-tree-sway 8s infinite ease-in-out -4s; }
#xmas-scene.built .xmas-tree-4 { animation: xmas-tree-sway 8s infinite ease-in-out -1s; }
#xmas-scene.built .xmas-tree-5 { animation: xmas-tree-sway 8s infinite ease-in-out -3s; }
#xmas-scene.built .xmas-container { animation: xmas-character-sway 20s infinite ease-in-out; }

/* ─── Snow canvas (single layer) ─── */
/* Sits in FRONT of all scene scenery (mountains/trees/Kenny). Those get
   transforms from the build animation which can create stacking contexts,
   so the snow uses a high z-index + its own compositing layer to stay on top.
   It's still inside #xmas-scene (z-5), so it remains behind the Discord
   widget (z-1200) and the cian wordmark. */
#xmas-scene .xmas-snow {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
#xmas-snow-1 {
  z-index: 999;
}

/* ─── Mountains ─── */
#xmas-scene .xmas-mountains {
  position: absolute;
  bottom: calc(24vh - 1px);
  left: 0;
  width: 100%;
  height: auto;
  z-index: 8;
  pointer-events: none;
  display: block;
}
/* Keep the SVG's original inline fills (#273832 peaks / #275539 base ridge)
   so the blue #7C8DB3 snow-cap ellipses + paths read correctly on top, exactly
   like the clean christmas.html reference. No CSS fill override here on purpose. */

/* ─── Background elements (clouds / trees / sign) ─── */
#xmas-scene .xmas-bg-elements {
  position: absolute;
  width: 100%; height: 100%;
  z-index: 9;
  /* slow pan applied only after the build finishes (see .built rules) */
}

#xmas-scene .xmas-cloud {
  position: absolute;
  width: 340px; height: auto;
  opacity: 0;
  /* Blend the clouds softly into the night sky: heavy blur + screen blend +
     a radial fade so the hard PNG edges melt completely away. */
  filter: blur(7px);
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 45%, #000 35%, transparent 80%);
          mask-image: radial-gradient(ellipse 55% 50% at 50% 45%, #000 35%, transparent 80%);
  /* Slow, very gentle fade-in once the rest of the scene has built, so the
     clouds drift into existence rather than appearing abruptly. */
  transition: opacity 3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Start already on-screen so they drift instead of popping in from the edge */
#xmas-scene .xmas-cloud-1 { top: 8%;  left: 12%; width: 380px; }
#xmas-scene .xmas-cloud-2 { top: 18%; left: 55%; width: 300px; }
/* Only fade clouds in AFTER the build finishes (.built), and with a stagger,
   so they don't compete with the scene dissolve / build pop. */
#xmas-scene.built .xmas-cloud-1 { opacity: 0.32; transition-delay: 0.2s; }
#xmas-scene.built .xmas-cloud-2 { opacity: 0.24; transition-delay: 0.9s; }

#xmas-scene .xmas-tree {
  position: absolute;
  bottom: 0;
  z-index: 10;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
  transform-origin: bottom center;
  /* sway is applied only after the build finishes (see .built rules) */
}
#xmas-scene .xmas-tree-1 { left: 10%; height: 32vh; width: auto; bottom: 7vh; }
#xmas-scene .xmas-tree-2 { right: 15%; height: 26vh; width: auto; bottom: 6vh; }
#xmas-scene .xmas-tree-3 { left: 25%; height: 22vh; width: auto; bottom: 7vh; z-index: 9; }
#xmas-scene .xmas-tree-4 { left: 40%; height: 18vh; width: auto; bottom: 6vh; z-index: 8; }
#xmas-scene .xmas-tree-5 { left: 60%; height: 20vh; width: auto; bottom: 7vh; z-index: 9; }

#xmas-scene .xmas-sign {
  position: absolute;
  bottom: 20px;
  left: 10%;
  transform: translateX(-50%);
  height: 150px; width: auto;
  z-index: 11;
}

/* ─── Snow ground layers ─── */
#xmas-scene .xmas-snow-layers {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 24vh;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}
#xmas-scene .xmas-snow-layer { position: absolute; width: 100%; left: 0; }
#xmas-back-snow  { height: 100%; bottom: 0; background: #8C9CC2; z-index: 21; clip-path: polygon(0 -10%, 100% -5%, 100% 100%, 0 100%); transform: translateY(-3px); animation: xmas-ground 45s infinite ease-in-out; }
#xmas-mid-snow   { height: 75%;  bottom: 0; background: #A0AFCF; z-index: 22; clip-path: polygon(0 10%, 100% 10%, 100% 100%, 0 100%); animation: xmas-ground-mid 50s infinite ease-in-out; }
#xmas-front-snow { height: 50%;  bottom: 0; background: #B4C2DF; z-index: 23; clip-path: polygon(0 20%, 100% 20%, 100% 100%, 0 100%); animation: xmas-ground-front 55s infinite ease-in-out; }

/* ═══ Kenny (South Park) ═══ */
#xmas-scene .xmas-container {
  position: absolute;
  bottom: 0; right: 0;
  transform-origin: bottom right;
  transform: translateX(-20px) scale(1.15);
  z-index: 35;
  width: 660px; height: 210px;
  /* sway is applied only after the build finishes (see .built rules) */
}
#xmas-scene .xmas-boys { width: 100%; height: 100%; position: relative; }
#xmas-scene .xmas-kenny { position: absolute; }

#xmas-scene .xmas-kenny { left: 82%; height: 120px; width: 120px; margin-top: 84px; animation: xmas-waddle 3s ease-in-out infinite; }
#xmas-scene .xmas-kenny * { position: absolute; }

#xmas-scene .xmas-container .eye {
  left: calc(50% - 33px); top: 50px;
  height: 40px; width: 32px;
  background: #FFFFFF; border-radius: 50%;
}
#xmas-scene .xmas-container .eye:before {
  content: ""; position: absolute; top: 15px;
  height: 4px; width: 4px; border-radius: 50%; background: #333333;
}
#xmas-scene .xmas-container .eye.left  { margin-right: 34px; transform: rotate(30deg); }
#xmas-scene .xmas-container .eye.left:before  { right: 7px; }
#xmas-scene .xmas-container .eye.right { margin-left: 34px; transform: rotate(-30deg); }
#xmas-scene .xmas-container .eye.right:before { left: 7px; }

#xmas-scene .xmas-container .body {
  top: 35px; left: 18%; width: 64%;
  perspective: 60px; perspective-origin: 50% 50%; z-index: 7;
}
#xmas-scene .xmas-container .body .inner {
  left: 0; height: 54px; width: 100%;
  background: #BB6F4F; transform: rotateX(20deg);
  border-radius: 10% 10% 50% 50% / 0 0 5% 5%;
}
#xmas-scene .xmas-container .body .inner:before {
  content: ""; position: absolute; left: 50%; height: 100%; width: 10px;
  border-left: 1px solid #333333;
}
#xmas-scene .xmas-container .body .arm {
  height: 38px; width: 14px; background: #BB6F4F; transform: rotateX(25deg);
}
#xmas-scene .xmas-container .body .arm:before {
  content: ""; position: absolute; bottom: 0; height: 10px; width: 10px;
}
#xmas-scene .xmas-container .body .arm .hand {
  bottom: -11px; height: 18px; width: 18px; background: #E33940;
}
#xmas-scene .xmas-container .body .arm.left  { left: -10px; border-radius: 0 0 30% 50% / 0 0 10% 20%; }
#xmas-scene .xmas-container .body .arm.left:before  { right: -2px; border-right: 1px solid #333333; }
#xmas-scene .xmas-container .body .arm.left .hand   { left: -1px; transform: rotateX(-30deg) skewX(14deg);  border-radius: 50% 50% 40% 60% / 50% 20% 20% 50%; }
#xmas-scene .xmas-container .body .arm.right { right: -10px; border-radius: 0 0 50% 30% / 0 0 20% 10%; }
#xmas-scene .xmas-container .body .arm.right:before { left: -2px; border-left: 1px solid #333333; }
#xmas-scene .xmas-container .body .arm.right .hand  { right: -1px; transform: rotateX(-30deg) skewX(-14deg); border-radius: 50% 50% 60% 40% / 20% 50% 50% 20%; }

#xmas-scene .xmas-container .legs {
  left: 17%; bottom: 12px; width: 66%; height: 20px; background: #5060AB;
}
#xmas-scene .xmas-container .legs .foot {
  bottom: 0; width: calc(50% + 5px); height: 5px; background: #333333;
  border-radius: 50% 50% 0 0 / 95% 95% 0 0;
}
#xmas-scene .xmas-container .legs .foot.left  { left: -5px; }
#xmas-scene .xmas-container .legs .foot.right { right: -5px; }

/* Kenny-specific */
#xmas-scene .xmas-kenny .hoodie {
  top: -60px; left: calc(50% - 62px);
  height: 122px; width: 124px; background: #F7731E;
  border-radius: 50% 50% 50% 50% / 48% 48% 50% 50%;
  z-index: 8; box-shadow: 0 1px 3px -2px rgba(0,0,0,0.5);
}
#xmas-scene .xmas-kenny .hoodie:before,
#xmas-scene .xmas-kenny .hoodie:after {
  content: ""; position: absolute; top: 90px; height: 25px; width: 1px;
  border: 1px solid transparent; border-left: 1px solid #333333;
  border-radius: 50%; transform-origin: top center; left: 50%;
}
#xmas-scene .xmas-kenny .hoodie:before { transform: rotate(20deg); }
#xmas-scene .xmas-kenny .hoodie:after  { transform: rotate(-20deg); }

#xmas-scene .xmas-kenny .head {
  top: -60px; left: 0; width: 120px; height: 120px;
  background-color: #FEDDB2;
  border-radius: 50% 50% 50% 50% / 48% 48% 50% 50%;
  clip-path: circle(28% at 50% 50%); z-index: 8;
}
#xmas-scene .xmas-kenny .head .eye { top: 39px; }

#xmas-scene .xmas-kenny .hoodie-edge {
  top: -31px; left: 20px; height: 72px; width: 80px;
  border: 1px solid #333333; border-top-color: transparent;
  border-radius: 50%; z-index: 9;
}
#xmas-scene .xmas-kenny .hoodie-edge:before,
#xmas-scene .xmas-kenny .hoodie-edge:after {
  content: ""; position: absolute; top: -5px;
  width: calc(100% - 2px); height: calc(100% - 2px);
  border-left: 14px solid #7E3821; border-radius: 50%;
}
#xmas-scene .xmas-kenny .hoodie-edge:before { left: 1px; }
#xmas-scene .xmas-kenny .hoodie-edge:after  { transform: rotate(180deg); right: 1px; }

#xmas-scene .xmas-kenny .body .inner,
#xmas-scene .xmas-kenny .body .arm { background: #F37521; }
#xmas-scene .xmas-kenny .body .inner { box-shadow: 0 1px 3px -2px rgba(0,0,0,0.5); }
#xmas-scene .xmas-kenny .body .arm .hand { background: #78341E; }
#xmas-scene .xmas-kenny .legs { background: #F07321; }

/* ─── Scene animations (prefixed to avoid clashes) ─── */
@keyframes xmas-cloud-drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(200px); }
  100% { transform: translateX(0); }
}
@keyframes xmas-waddle {
  0%   { transform: translateY(0)    rotate(0deg); }
  25%  { transform: translateY(-2px) rotate(1deg); }
  50%  { transform: translateY(0)    rotate(0deg); }
  75%  { transform: translateY(-2px) rotate(-1deg); }
  100% { transform: translateY(0)    rotate(0deg); }
}
@keyframes xmas-tree-sway {
  0%,100% { transform: rotate(0deg)    scale(1,1); }
  25%     { transform: rotate(3deg)    scale(1.02,1.02); }
  50%     { transform: rotate(-2deg)   scale(1,1); }
  75%     { transform: rotate(2.5deg)  scale(1.01,1.01); }
}
@keyframes xmas-slow-pan {
  0%   { transform: translateX(0px)   scale(1); }
  50%  { transform: translateX(-30px) scale(1.02); }
  100% { transform: translateX(0px)   scale(1); }
}
@keyframes xmas-character-sway {
  0%,100% { transform: translateX(-20px) scale(1.15) rotate(0deg); }
  25%     { transform: translateX(-22px) scale(1.15) rotate(0.5deg); }
  75%     { transform: translateX(-18px) scale(1.15) rotate(-0.5deg); }
}
@keyframes xmas-ground {
  0%,100% { clip-path: polygon(0 -10%, 100% -5%, 100% 100%, 0 100%); }
  50%     { clip-path: polygon(0 -12%, 100% -7%, 100% 100%, 0 100%); }
}
@keyframes xmas-ground-mid {
  0%,100% { clip-path: polygon(0 10%, 100% 10%, 100% 100%, 0 100%); }
  50%     { clip-path: polygon(0 8%,  100% 8%,  100% 100%, 0 100%); }
}
@keyframes xmas-ground-front {
  0%,100% { clip-path: polygon(0 20%, 100% 20%, 100% 100%, 0 100%); }
  50%     { clip-path: polygon(0 22%, 100% 22%, 100% 100%, 0 100%); }
}

/* ═══ The cian wordmark is the toggle ═══ */
/* Subtle affordance: lift slightly on hover, keyboard focus ring. */
#xmas-toggle.wordmark { transition: transform 0.25s cubic-bezier(0.23,1,0.32,1); }
#xmas-toggle.wordmark:hover { transform: translateY(-4px) scale(1.03); }
#xmas-toggle.wordmark:focus-visible {
  outline: 2px solid rgba(143,188,187,0.75);
  outline-offset: 8px;
  border-radius: 8px;
}

/* On phones, keep Kenny smaller and always tucked to the bottom-RIGHT,
   beside/above the centred Discord panel (which is max 360px wide, so there's
   a strip on the right). No waddle drift here so he can't wander off-screen. */
@media (max-width: 480px) {
  #xmas-scene .xmas-container {
    width: 220px;
    height: 150px;
    right: 0;
    bottom: 4px;
    transform-origin: bottom right;
    /* fixed resting transform; beats build keyframe + sway via !important */
    transform: translateX(-6px) scale(0.7) !important;
    animation: none !important;        /* no sway/waddle drift on mobile */
  }
  /* Push Kenny to the far right of his (now smaller) box */
  #xmas-scene .xmas-kenny {
    left: auto; right: 6px;
    animation: none !important;        /* no waddle bob */
  }
}

@media (prefers-reduced-motion: reduce) {
  #xmas-scene .xmas-bg-elements,
  #xmas-scene .xmas-cloud,
  #xmas-scene .xmas-tree,
  #xmas-scene .xmas-container,
  #xmas-scene .xmas-kenny,
  #xmas-back-snow, #xmas-mid-snow, #xmas-front-snow { animation: none !important; }
}

/* ═══ Inline comments panel (iframe overlay) ═══ */
#comments-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
}
#comments-overlay.open { display: block; }

#comments-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 5, 12, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
#comments-overlay.open #comments-backdrop { opacity: 1; }

#comments-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.98);
  width: min(640px, calc(100vw - 32px));
  height: min(80vh, 760px);
  background: #313338;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
#comments-overlay.open #comments-panel {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

#comments-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

#comments-close {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  background: rgba(20,22,26,0.85);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
#comments-close:hover { background: rgba(40,44,52,0.95); transform: scale(1.08); }

@media (max-width: 480px) {
  #comments-panel {
    width: calc(100vw - 16px);
    height: 86vh;
    border-radius: 14px;
  }
}