/* Festival looks (see js/fest.js): nothing here applies until a promo with a theme is running,
   which sets <html data-fest="…">. Pictures in /media/fest/. */

/* ================= Halloween ================= */
html[data-fest="halloween"] {
  --teal-deep: #3b2a5c;   /* headings, prices, outline buttons: Halloween-night purple */
  --teal: #6a4c9c;
  --blush: #fdf0e3;       /* "4 steps" background: a pumpkin tint */
  --shelf: #f3eff8;       /* FAQ background: a lavender tint */
  --mint: #efe9f6;        /* add-ons box, menu hover (instead of mint green) */
  --mint-2: #e3dbef;
}
html[data-fest="halloween"] .facts li::before { border-color: #e2701c; }

/* the "สั่งทำรูป" button in the menu bar: a lit jack-o'-lantern (ribbed pumpkin, stem and leaf,
   glowing triangle eyes, the label glows like its carved grin) */
html[data-fest="halloween"] .nav .btn-cta {
  position: relative; min-height: 46px; padding: 15px 18px 4px; line-height: 1.25; font-weight: 700;
  border-radius: 46% 46% 42% 42% / 62% 62% 46% 46%; color: #ffdc6a;
  text-shadow: 0 0 6px rgba(255, 196, 60, .85), 0 0 1px #ffe9a0;
  background:
    radial-gradient(44% 78% at 50% 52%, transparent 96%, rgba(96, 30, 4, .42) 97.5%, transparent 99.5%),
    radial-gradient(36% 74% at 50% 52%, transparent 96%, rgba(96, 30, 4, .32) 97.5%, transparent 99.5%),
    radial-gradient(120% 110% at 50% 22%, #ef7d2c, #cf5a1c 55%, #a9420f);
  box-shadow: inset 0 -5px 9px rgba(80, 22, 0, .38), inset 0 4px 7px rgba(255, 196, 130, .38), 0 4px 12px rgba(150, 55, 10, .32);
  animation: fest-glow 2.6s ease-in-out infinite;
}
html[data-fest="halloween"] .nav .btn-cta::before { /* stem + leaf */
  content: ''; position: absolute; left: 50%; top: -8px; width: 24px; height: 12px; transform: translateX(-35%) rotate(-6deg); pointer-events: none;
  background:
    radial-gradient(ellipse 34% 36% at 78% 62%, #78a23e 0 96%, transparent 100%),
    linear-gradient(90deg, transparent 30%, #5d7a2d 30% 56%, transparent 56%);
  border-radius: 3px 3px 0 0;
}
html[data-fest="halloween"] .nav .btn-cta::after { /* the eyes */
  content: ''; position: absolute; left: 50%; top: 6px; width: 30px; height: 8px; transform: translateX(-50%); pointer-events: none;
  background: #ffd75e; clip-path: polygon(0 100%, 17% 0, 36% 100%, 64% 100%, 83% 0, 100% 100%);
}
html[data-fest="halloween"] .nav .btn-cta:hover { background-color: transparent; filter: brightness(1.08) saturate(1.05); }
@keyframes fest-glow { 50% { text-shadow: 0 0 10px rgba(255, 210, 80, 1), 0 0 1px #fff2c0; } }
@media (prefers-reduced-motion: reduce) { html[data-fest="halloween"] .nav .btn-cta { animation: none; } }

/* bunting: a string of pennants (some with a jack-o'-lantern face) */
html[data-fest="halloween"] .fest-bunting { display: block; height: 40px; background: url(/media/fest/bunting.svg) repeat-x 0 0 / 200px 40px; pointer-events: none; }
html[data-fest="halloween"] .fest-strip { position: relative; z-index: 5; margin-bottom: -16px; }
@media (max-width: 699px) { html[data-fest="halloween"] .fest-bunting { height: 30px; background-size: 150px 30px; } }

/* the cover: bunting + cobwebs behind the text, bats in front */
html[data-fest="halloween"] .hero-in { z-index: 1; }
html[data-fest="halloween"] .fest-back,
html[data-fest="halloween"] .fest-sky { position: absolute; inset: 0; pointer-events: none; }
html[data-fest="halloween"] .fest-back { z-index: 0; }
html[data-fest="halloween"] .fest-sky { z-index: 2; }
html[data-fest="halloween"] .fest-back .fest-bunting { position: absolute; left: 0; right: 0; top: 0; }
html[data-fest="halloween"] .fest-web { position: absolute; top: 0; width: 170px; height: 170px; background: url(/media/fest/web.svg) no-repeat 0 0 / contain; }
html[data-fest="halloween"] .fest-web.l { left: 0; }
html[data-fest="halloween"] .fest-web.r { right: 0; transform: scaleX(-1); }
@media (max-width: 699px) { html[data-fest="halloween"] .fest-web { width: 110px; height: 110px; opacity: .8; } }

/* bats: each drifts on its own path, wings beating */
html[data-fest="halloween"] .fest-bat { position: absolute; width: var(--w, 34px); aspect-ratio: 120 / 48; opacity: .88;
  animation: fest-drift var(--t, 9s) ease-in-out var(--dl, 0s) infinite; }
html[data-fest="halloween"] .fest-bat b { display: block; width: 100%; height: 100%; background: url(/media/fest/bat.svg) no-repeat center / contain;
  animation: fest-flap var(--f, .34s) ease-in-out infinite alternate; }
@keyframes fest-drift {
  0%, 100% { transform: translate(0, 0) rotate(-4deg); }
  25% { transform: translate(var(--dx, 26px), calc(var(--dy, 14px) * -1)) rotate(5deg); }
  50% { transform: translate(calc(var(--dx, 26px) * 1.6), 4px) rotate(-2deg); }
  75% { transform: translate(calc(var(--dx, 26px) * .6), var(--dy, 14px)) rotate(4deg); }
}
@keyframes fest-flap { from { transform: scaleX(1); } to { transform: scaleX(.5) scaleY(1.06); } }
@media (prefers-reduced-motion: reduce) { html[data-fest="halloween"] .fest-bat, html[data-fest="halloween"] .fest-bat b { animation: none; } }
/* where they fly on the cover: above the print and the phone (right half), never over the headline */
html[data-fest="halloween"] .hero .b1 { left: 47%; top: 9%; --w: 38px; --t: 11s; --dx: 30px; }
html[data-fest="halloween"] .hero .b2 { left: 61%; top: 5.5%; --w: 26px; --t: 8s; --dl: -3s; --dx: -22px; --f: .28s; }
html[data-fest="halloween"] .hero .b3 { left: 79%; top: 11%; --w: 32px; --t: 10s; --dl: -6s; --dx: 18px; }
html[data-fest="halloween"] .hero .b4 { left: 92%; top: 24%; --w: 22px; --t: 7s; --dl: -2s; --dx: -16px; --f: .26s; }
html[data-fest="halloween"] .hero .b5 { left: 40%; top: 72%; --w: 24px; --t: 12s; --dl: -8s; --dx: 20px; --f: .3s; }
@media (max-width: 979px) { /* phone: the text comes first, the print below it: three bats on the right of the headline */
  html[data-fest="halloween"] .hero .b1 { left: 66%; top: 12%; --w: 30px; }
  html[data-fest="halloween"] .hero .b2 { left: 80%; top: 9%; --w: 22px; }
  html[data-fest="halloween"] .hero .b3 { left: 74%; top: 17.5%; --w: 24px; --dx: -18px; }
  html[data-fest="halloween"] .hero .b4, html[data-fest="halloween"] .hero .b5 { display: none; }
}

/* the last section: a night sky with a moon, stars and bats */
html[data-fest="halloween"] .end { position: relative; overflow: hidden; color: #efe9fb;
  background:
    radial-gradient(1.6px 1.6px at 12% 28%, rgba(255,255,255,.9), transparent), radial-gradient(1.4px 1.4px at 27% 70%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.8px 1.8px at 44% 18%, rgba(255,244,214,.9), transparent), radial-gradient(1.3px 1.3px at 58% 82%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 70% 40%, rgba(255,255,255,.8), transparent), radial-gradient(1.3px 1.3px at 88% 76%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 6% 84%, rgba(255,244,214,.8), transparent), radial-gradient(1.2px 1.2px at 35% 45%, rgba(255,255,255,.55), transparent),
    linear-gradient(180deg, #241a3a, #3b2a5c); }
html[data-fest="halloween"] .end-in { position: relative; z-index: 1; }
html[data-fest="halloween"] .end h2 { color: #fff; }
html[data-fest="halloween"] .end-in p { color: rgba(239,233,251,.82); }
html[data-fest="halloween"] .end .btn-ghost { border-color: rgba(255,255,255,.7); color: #fff; }
html[data-fest="halloween"] .end .btn-ghost:hover { background: rgba(255,255,255,.1); }
html[data-fest="halloween"] .fest-moon { position: absolute; right: 9%; top: 22%; width: clamp(64px, 9vw, 104px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 64% 34%, rgba(214,190,120,.55) 0 7%, transparent 8%), radial-gradient(circle at 36% 62%, rgba(214,190,120,.45) 0 10%, transparent 11%),
    radial-gradient(circle at 40% 38%, #fffbe6, #f6e3a1 62%, #e9cd78);
  box-shadow: 0 0 46px 14px rgba(255, 228, 150, .22); }
html[data-fest="halloween"] .end .fest-bat { opacity: 1; }
html[data-fest="halloween"] .end .fest-bat b { filter: brightness(.4); } /* black against the moon */
html[data-fest="halloween"] .end .b1 { right: calc(9% + 30px); left: auto; top: calc(22% + 26px); --w: 34px; --t: 9s; --dx: -14px; --dy: 8px; }
html[data-fest="halloween"] .end .b2 { right: 5%; left: auto; top: 58%; --w: 24px; --t: 7s; --dl: -3s; --dx: 18px; --f: .27s; }
html[data-fest="halloween"] .end .b3 { right: 30%; left: auto; top: 64%; --w: 20px; --t: 11s; --dl: -5s; --dx: 14px; --f: .3s; }
@media (max-width: 699px) {
  html[data-fest="halloween"] .fest-moon { top: 14%; right: 6%; }
  html[data-fest="halloween"] .end .b3 { display: none; }
}

/* footer: deep purple */
html[data-fest="halloween"] .foot { background: #1f1830; color: #cfc5e3; }
html[data-fest="halloween"] .foot a { color: #ebe3fb; }

/* ================= Christmas ================= */
html[data-fest="christmas"] {
  --teal-deep: #1d4a35;   /* headings, prices, outline buttons: pine green */
  --teal: #2f7a4f;
  --cta: #c62828;         /* order buttons: Christmas red */
  --cta-hover: #a61f1f;
  --blush: #fcefee;       /* "4 steps" background: a candy-cane tint */
  --shelf: #eef5ef;       /* FAQ background: a pine tint */
  --mint: #e9f3ec;
  --mint-2: #dcebe1;
}
html[data-fest="christmas"] .facts li::before { border-color: #c62828; }
html[data-fest="christmas"] .btn-cta { box-shadow: 0 6px 16px rgba(198, 40, 40, .24); }
/* the promo line: pine green and gold */
html[data-fest="christmas"] .promo { background: linear-gradient(135deg, #25643f, #143d2b); color: #f3fbf5; box-shadow: 0 6px 18px -6px rgba(20, 61, 43, .55), inset 0 0 0 1px rgba(255, 255, 255, .14); }
html[data-fest="christmas"] .promo b, html[data-fest="christmas"] .promo i { color: #ffd166; }

/* the "สั่งทำรูป" button in the menu bar wears a Santa hat */
html[data-fest="christmas"] .nav .btn-cta { position: relative; overflow: visible; }
html[data-fest="christmas"] .nav .btn-cta::before { content: ''; position: absolute; left: -15px; top: -17px; width: 38px; height: 32px; pointer-events: none;
  background: url(/media/fest/santa-hat.svg) no-repeat center / contain; transform: rotate(-24deg); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2)); }

/* fairy lights: two glow layers take turns, so the bulbs twinkle */
html[data-fest="christmas"] .fest-lights { display: block; position: relative; height: 44px; background: url(/media/fest/lights.svg) repeat-x 0 0 / 200px 44px; pointer-events: none; }
html[data-fest="christmas"] .fest-lights::before,
html[data-fest="christmas"] .fest-lights::after { content: ''; position: absolute; inset: 0; background: url(/media/fest/lights-glow-a.svg) repeat-x 0 0 / 200px 44px;
  animation: fest-twinkle 1.6s ease-in-out infinite alternate; }
html[data-fest="christmas"] .fest-lights::after { background-image: url(/media/fest/lights-glow-b.svg); animation-delay: -1.6s; }
@keyframes fest-twinkle { from { opacity: 1; } to { opacity: .12; } }
html[data-fest="christmas"] .fest-strip { position: relative; z-index: 5; margin-bottom: -18px; }
@media (max-width: 699px) {
  html[data-fest="christmas"] .fest-lights, html[data-fest="christmas"] .fest-lights::before, html[data-fest="christmas"] .fest-lights::after { height: 33px; background-size: 150px 33px; }
}

/* the cover: lights along the top, holly in its corners, snowflakes drifting down the wall behind the text */
html[data-fest="christmas"] .hero-in { z-index: 1; }
html[data-fest="christmas"] .fest-back,
html[data-fest="christmas"] .fest-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
html[data-fest="christmas"] .fest-back .fest-lights { position: absolute; left: 0; right: 0; top: 0; }
html[data-fest="christmas"] .fest-holly { position: absolute; top: 0; width: 130px; height: 110px; background: url(/media/fest/holly.svg) no-repeat 0 0 / contain; }
html[data-fest="christmas"] .fest-holly.l { left: 0; }
html[data-fest="christmas"] .fest-holly.r { right: 0; transform: scaleX(-1); }
@media (max-width: 699px) { html[data-fest="christmas"] .fest-holly { width: 86px; height: 73px; } }
html[data-fest="christmas"] .fest-snow { position: absolute; inset: 0; container-type: size; }
html[data-fest="christmas"] .fest-flake,
html[data-fest="christmas"] .fest-dot { position: absolute; top: -30px; left: var(--x); width: var(--s); height: var(--s); opacity: var(--o);
  animation: fest-fall var(--d) linear var(--dl) infinite; }
html[data-fest="christmas"] .fest-flake { background: url(/media/fest/flake.svg) no-repeat center / contain; }
html[data-fest="christmas"] .fest-dot { border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255, 255, 255, .7); }
@keyframes fest-fall {
  from { transform: translateY(0) rotate(0deg); translate: 0 0; }
  to { transform: translateY(1100px) rotate(220deg); transform: translateY(calc(100cqh + 60px)) rotate(220deg); translate: var(--sx) 0; }
}
@media (max-width: 699px) { html[data-fest="christmas"] .fest-back .fest-flake:nth-child(n+13) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html[data-fest="christmas"] .fest-snow { display: none; }
  html[data-fest="christmas"] .fest-lights::before, html[data-fest="christmas"] .fest-lights::after { animation: none; }
}

/* the last section: a snowy winter night with the moon, and hills with pine trees */
html[data-fest="christmas"] .end { position: relative; overflow: hidden; color: #eef5ff;
  background:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,255,255,.9), transparent), radial-gradient(1.4px 1.4px at 31% 48%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.8px 1.8px at 46% 14%, rgba(255,248,220,.9), transparent), radial-gradient(1.3px 1.3px at 63% 36%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 74% 12%, rgba(255,255,255,.8), transparent), radial-gradient(1.3px 1.3px at 92% 44%, rgba(255,255,255,.7), transparent),
    linear-gradient(180deg, #0f1f38, #1f3a5f); }
html[data-fest="christmas"] .end-in { position: relative; z-index: 1; }
html[data-fest="christmas"] .end h2 { color: #fff; }
html[data-fest="christmas"] .end-in p { color: rgba(238, 245, 255, .84); }
html[data-fest="christmas"] .end .btn-ghost { border-color: rgba(255, 255, 255, .7); color: #fff; }
html[data-fest="christmas"] .end .btn-ghost:hover { background: rgba(255, 255, 255, .1); }
html[data-fest="christmas"] .fest-moon { position: absolute; right: 9%; top: 18%; width: clamp(60px, 8vw, 96px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 64% 34%, rgba(190,200,215,.45) 0 7%, transparent 8%), radial-gradient(circle at 36% 62%, rgba(190,200,215,.4) 0 10%, transparent 11%),
    radial-gradient(circle at 40% 38%, #ffffff, #eef3fa 62%, #d9e3f0);
  box-shadow: 0 0 46px 14px rgba(220, 232, 255, .2); }
html[data-fest="christmas"] .fest-hills { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: url(/media/fest/hills.svg) repeat-x 0 100% / 600px 70px; }
@media (max-width: 699px) {
  html[data-fest="christmas"] .fest-moon { top: 12%; right: 6%; }
  html[data-fest="christmas"] .fest-hills { height: 49px; background-size: 420px 49px; }
}

/* footer: deep pine */
html[data-fest="christmas"] .foot { background: #11291f; color: #cfe3d6; }
html[data-fest="christmas"] .foot a { color: #eaf6ee; }