/* ==========================================================
   Christmas Night Market: neon border "switch on" animation
   Timed to match the client video (4.5s loop, both sides in sync).
   Add AFTER style.css. Needs the 3 PNGs: cnm-base, cnm-frame, cnm-colour.

   Loop:
   0.00s  everything unlit (faint tubes only)
   0.12s  outline frame fades on
   0.20s  coloured pieces light top to bottom
   1.15s  fully lit, small buzz/dips while holding
   2.85s  slow dim
   4.25s  back to full
   4.38s  stutters off, loop restarts
   ========================================================== */

.CNM-shape-left,
.CNM-shape-right {
  --cnm-loop: 4.5s;
}

/* Unlit tubes (the base art, very faint) */
.CNM-shape-left .cnm-base,
.CNM-shape-right .cnm-base {
  opacity: .13;
}

/* Lit layers sit exactly on top of the base */
.CNM-shape-left .cnm-on,
.CNM-shape-right .cnm-on,
.CNM-shape-left .cnm-lit,
.CNM-shape-right .cnm-lit,
.CNM-shape-left .cnm-layer,
.CNM-shape-right .cnm-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.CNM-shape-left .cnm-layer,
.CNM-shape-right .cnm-layer {
  display: block;
  max-width: none;
}

/* Right side is a mirror image of the left, same files */
.CNM-shape-right .cnm-base,
.CNM-shape-right .cnm-layer {
  transform: scaleX(-1);
}

/* Neon glow */
.cnm-frame {
  filter: drop-shadow(0 0 1.5px rgba(255,255,255,.9)) drop-shadow(0 0 5px rgba(170,215,255,.55));
}
.cnm-glow {
  filter: blur(5px) brightness(1.4) saturate(1.5);
  opacity: .75;
}
.cnm-colour {
  filter: brightness(1.08) saturate(1.15);
}

/* Master power: buzz, slow dim, stutter off. Same on both sides. */
.cnm-on {
  animation: cnm-power var(--cnm-loop) linear infinite;
}
/* Frame switches on first */
.cnm-frame {
  animation: cnm-frame-on var(--cnm-loop) linear infinite;
}
/* Coloured pieces light top to bottom */
.cnm-lit {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 55%, transparent 100%);
  -webkit-mask-size: 100% 300%;
          mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  animation: cnm-wipe var(--cnm-loop) linear infinite;
}

@keyframes cnm-frame-on {
  0%, 2.7%  { opacity: 0; }
  5%        { opacity: .55; }
  6%        { opacity: .3; }
  9.3%,100% { opacity: 1; }
}

@keyframes cnm-wipe {
  0%, 4.4%  { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  25.5%,100%{ -webkit-mask-position: 0 17.5%; mask-position: 0 17.5%; }
}

@keyframes cnm-power {
  0%, 41%   { opacity: 1; }
  41.8%     { opacity: .88; }
  42.6%     { opacity: 1; }
  53.4%     { opacity: 1; }
  54%       { opacity: .92; }
  54.6%     { opacity: 1; }
  63%       { opacity: 1; }
  90%       { opacity: .86; }
  94%, 97%  { opacity: 1; }
  97.3%     { opacity: .3; }
  98.3%     { opacity: .85; }
  99%, 100% { opacity: 0; }
}

/* Full height borders on desktop/landscape (matches the video).
   Sized to the screen height so they always run past the top and bottom.
   Phones in portrait keep the original sizing from style.css. */
@media (min-width: 768px) and (orientation: landscape) {
  .placeholder .elements {
    overflow: hidden;
  }
  .placeholder .elements .CNM-shape-left,
  .placeholder .elements .CNM-shape-right {
    --cnm-h: 120vh;            /* border height: bigger number = bigger border */
    height: var(--cnm-h);
    width: calc(var(--cnm-h) * .3316);   /* keeps the artwork's proportions */
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) rotate(13deg);
  }
  .placeholder .elements .CNM-shape-left  { left: -5vw;  right: auto; }  /* push in/out from the edge */
  .placeholder .elements .CNM-shape-right { right: -5vw; left: auto; }
  .placeholder .elements .CNM-shape-left img.cnm-base,
  .placeholder .elements .CNM-shape-right img.cnm-base,
  .placeholder .elements .CNM-shape-left .cnm-layer,
  .placeholder .elements .CNM-shape-right .cnm-layer {
    width: 100%;
    height: 100%;
  }
}

/* No flashing for people who turn motion off: just show it lit */
@media (prefers-reduced-motion: reduce) {
  .cnm-on, .cnm-frame, .cnm-lit { animation: none; }
  .cnm-lit { -webkit-mask-image: none; mask-image: none; }
}