/* ============================================================
   DECORATE — the "Let's Decorate" stage.
   Bunting, curled serpentine streamers, fairy lights and a
   spotlight sweep, layered on top of the orchestrator's own
   banner animation.

   Namespace: .dec-*    z-index band: 300-399
   Loads after css/stylesheet.css so it may override it.

   Colour: every colour here is a css/palette.css --bd-* token
   (or a color-mix()/rgba() derived from one). Bunting, streamer
   and light colours share one accent cycle so the stage reads
   as a single coordinated palette instead of clashing primaries.
   ============================================================ */

#decorate-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 300;
  overflow: hidden;
}

/* ---------------------------------------------------------
   Screen shake — applied to a wrapper, never left stuck on.
   --------------------------------------------------------- */
.dec-shake {
  animation: dec-shake-kf 0.5s ease-in-out;
}

@keyframes dec-shake-kf {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-1.2vw, 0.4vh); }
  20%  { transform: translate(1vw, -0.5vh); }
  30%  { transform: translate(-0.8vw, 0.3vh); }
  40%  { transform: translate(0.9vw, -0.3vh); }
  50%  { transform: translate(-0.6vw, 0.4vh); }
  60%  { transform: translate(0.5vw, -0.2vh); }
  70%  { transform: translate(-0.4vw, 0.2vh); }
  80%  { transform: translate(0.3vw, -0.1vh); }
  90%  { transform: translate(-0.15vw, 0.05vh); }
  100% { transform: translate(0, 0); }
}

/* ---------------------------------------------------------
   Shared accent tokens — one cohesive warm cycle used by
   bunting pennants and streamer ribbons alike.
   --------------------------------------------------------- */
.dec-acc-rose  { --dec-c: var(--bd-rose); }
.dec-acc-coral { --dec-c: var(--bd-coral); }
.dec-acc-gold  { --dec-c: var(--bd-gold); }
.dec-acc-sage  { --dec-c: var(--bd-sage); }
.dec-acc-teal  { --dec-c: var(--bd-teal); }
.dec-acc-plum  { --dec-c: var(--bd-plum); }
.dec-acc-berry { --dec-c: var(--bd-berry); }

/* ---------------------------------------------------------
   Bunting — a string of pennants across the top edge.
   --------------------------------------------------------- */
.dec-bunting {
  position: absolute;
  top: -6vh;
  left: 0;
  width: 100%;
  height: 16vh;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
  padding-top: 4vh;
  opacity: 0;
}

.dec-bunting.dec-show {
  animation: dec-bunting-drop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes dec-bunting-drop {
  0%   { opacity: 0; transform: translateY(-14vh); }
  60%  { opacity: 1; transform: translateY(1vh); }
  100% { opacity: 1; transform: translateY(0); }
}

.dec-pennant {
  width: 4vw;
  max-width: 44px;
  min-width: 20px;
  height: 5.5vw;
  max-height: 60px;
  min-height: 26px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  background: var(--dec-c);
  box-shadow: 0 0.3vh 0.6vh var(--bd-shadow);
}

/* Swaying only starts once the bunting has dropped in, so init()
   leaves nothing animating. */
.dec-bunting.dec-show .dec-pennant {
  animation: dec-sway 3.4s ease-in-out infinite;
}

@keyframes dec-sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

.dec-bunting.dec-show .dec-pennant:nth-child(odd)  { animation-duration: 3.1s; }
.dec-bunting.dec-show .dec-pennant:nth-child(even) { animation-duration: 3.7s; }

/* ---------------------------------------------------------
   Streamer ribbons — curled serpentine coils hugging the top
   corners. Each ribbon is a chain of tapering "coil" segments
   that alternate left/right offset and rotation, so the whole
   thing reads as an S-curve streamer rather than a flat bar.
   The whole ribbon fades and narrows toward its tip.
   --------------------------------------------------------- */
.dec-ribbon {
  position: absolute;
  top: -3vh;
  width: 2.8vw;
  max-width: 30px;
  min-width: 16px;
  transform-origin: top center;
  opacity: 0;
}

.dec-ribbon.dec-show {
  animation: dec-ribbon-unfurl 1.3s ease-out forwards,
             dec-ribbon-sway 4.6s ease-in-out 1.3s infinite;
}

@keyframes dec-ribbon-unfurl {
  0%   { opacity: 0; transform: scaleY(0); }
  70%  { opacity: 1; }
  100% { opacity: 1; transform: scaleY(1); }
}

@keyframes dec-ribbon-sway {
  0%, 100% { transform: scaleY(1) rotate(-3deg); }
  50%      { transform: scaleY(1) rotate(3deg); }
}

/* Hug the extreme edges so the ribbons never cross into the
   centre stage where the cake and letter row live. */
.dec-ribbon-left   { left: 0.3vw; }
.dec-ribbon-left2  { left: 3.6vw; }
.dec-ribbon-right  { right: 0.3vw; }
.dec-ribbon-right2 { right: 3.6vw; }

.dec-coil {
  display: block;
  width: 100%;
  margin: -1.6vh auto 0;
  background: linear-gradient(180deg, var(--dec-c), color-mix(in srgb, var(--dec-c) 55%, transparent));
  box-shadow: 0 0.3vh 0.6vh var(--bd-shadow);
}

.dec-coil:nth-child(odd) {
  border-radius: 60% 40% 55% 45% / 65% 35% 60% 40%;
  filter: brightness(1.06);
}

.dec-coil:nth-child(even) {
  border-radius: 40% 60% 45% 55% / 35% 65% 40% 60%;
  filter: brightness(0.9);
}

/* Taper: each successive coil is shorter, narrower and more
   transparent, so the ribbon tapers to a soft, faded tip
   instead of a uniform-width bar. The alternating translateX
   + rotate is what reads as the S-curve/coil. */
.dec-coil:nth-child(1) { height: 7.5vh; margin-top: 0;      opacity: 0.88; transform: translateX(0)     rotate(2deg); }
.dec-coil:nth-child(2) { height: 7vh;                       opacity: 0.8;  transform: translateX(22%)  rotate(11deg)  scaleX(0.92); }
.dec-coil:nth-child(3) { height: 6.5vh;                     opacity: 0.72; transform: translateX(-24%) rotate(-11deg) scaleX(0.84); }
.dec-coil:nth-child(4) { height: 6vh;                       opacity: 0.64; transform: translateX(26%)  rotate(13deg)  scaleX(0.76); }
.dec-coil:nth-child(5) { height: 5.5vh;                     opacity: 0.55; transform: translateX(-28%) rotate(-13deg) scaleX(0.66); }
.dec-coil:nth-child(6) { height: 5vh;                       opacity: 0.46; transform: translateX(30%)  rotate(15deg)  scaleX(0.55); }
.dec-coil:nth-child(7) { height: 4.5vh;                     opacity: 0.34; transform: translateX(-32%) rotate(-15deg) scaleX(0.42); }

/* ---------------------------------------------------------
   Fairy lights — strings of small glowing bulbs.
   --------------------------------------------------------- */
.dec-lightstring {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 2vw;
  opacity: 0;
}

.dec-lightstring.dec-show {
  animation: dec-lights-in 0.7s ease-out forwards;
}

@keyframes dec-lights-in {
  0%   { opacity: 0; transform: translateY(-1.5vh); }
  100% { opacity: 1; transform: translateY(0); }
}

.dec-bulb {
  width: 1.1vw;
  height: 1.1vw;
  max-width: 14px;
  max-height: 14px;
  min-width: 7px;
  min-height: 7px;
  border-radius: 50%;
  background: var(--bd-gold-lt);
  box-shadow: 0 0 0.8vh 0.3vh color-mix(in srgb, var(--bd-gold) 35%, transparent);
  opacity: 0.45;
}

/* Twinkling only starts once its string is lit, so init() leaves
   nothing animating. */
.dec-lightstring.dec-show .dec-bulb {
  animation: dec-twinkle 1.8s ease-in-out infinite;
}

@keyframes dec-twinkle {
  0%, 100% { opacity: 0.45; box-shadow: 0 0 0.5vh 0.2vh color-mix(in srgb, var(--bd-gold) 25%, transparent); }
  50%      { opacity: 1;    box-shadow: 0 0 1.4vh 0.5vh color-mix(in srgb, var(--bd-gold) 65%, transparent); }
}

/* All three tones stay in the warm gold family — the glow halo
   is always gold-toned, only the bulb body warmth varies. */
.dec-bulb.dec-bulb-gold  { background: var(--bd-gold-lt); }
.dec-bulb.dec-bulb-amber { background: var(--bd-gold); box-shadow: 0 0 0.8vh 0.3vh color-mix(in srgb, var(--bd-gold-dk) 30%, transparent); }
.dec-bulb.dec-bulb-blush { background: color-mix(in srgb, var(--bd-coral) 55%, var(--bd-gold-lt)); box-shadow: 0 0 0.8vh 0.3vh color-mix(in srgb, var(--bd-coral) 30%, transparent); }

/* ---------------------------------------------------------
   Spotlight sweep — a single soft light band that crosses
   the screen once, then disappears. A pure white beam is a
   lighting effect, not a brand colour, so it stays white.
   --------------------------------------------------------- */
.dec-spotlight {
  position: absolute;
  top: -20%;
  left: -30vw;
  width: 22vw;
  height: 140%;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.22) 45%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0.22) 55%,
    rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(0);
}

.dec-spotlight.dec-sweep {
  animation: dec-spotlight-sweep 1.6s ease-in-out forwards;
}

@keyframes dec-spotlight-sweep {
  0%   { opacity: 0;   transform: translateX(0); }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0;   transform: translateX(160vw); }
}

/* ---------------------------------------------------------
   Reduced motion: keep the decor, drop the shake & sweep,
   slow everything else to a calm, mostly-static state.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .dec-shake {
    animation: none !important;
  }

  .dec-spotlight.dec-sweep {
    animation: none !important;
    opacity: 0 !important;
  }

  /* Snap decorations straight to their settled state instead of
     animating in, but keep them visible (do not remove the decor).
     The coils' static zigzag offsets are not animations, so the
     curled shape is preserved even with motion reduced. */
  .dec-bunting.dec-show,
  .dec-lightstring.dec-show {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .dec-ribbon.dec-show {
    animation: none !important;
    opacity: 1 !important;
    transform: scaleY(1) !important;
  }

  .dec-pennant,
  .dec-bulb {
    animation-duration: 6s !important;
  }
}