/* ==========================================================================
   Rumpari Holiday Bonus - depth, motion and 3D treatment (loads after style.css)
   ========================================================================== */

/* ---- Page backdrop: velvet + bokeh ------------------------------------- */
body { background: #05481F url("../img/bg-festive.jpg") center top / cover fixed no-repeat; }
@media (max-width: 800px) { body { background-image: url("../img/bg-festive-sm.jpg"); background-attachment: scroll; background-size: cover; } }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,40,18,0.35) 0%, rgba(4,40,18,0.55) 60%, rgba(60,6,10,0.7) 100%); pointer-events: none; }

/* ---- Gold 3D display type ---------------------------------------------- */
.section-title, .enter-card h2, .legal-title, .prize h3, .how-step h3, .product h3, .entry-closed h3, .form-success h3 {
  color: #FFF2B0;
  background: linear-gradient(180deg, #FFF7CF 0%, #FFE066 38%, #F5B400 62%, #FFE99A 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(120,70,0,0.55)) drop-shadow(0 6px 0 rgba(60,30,0,0.35)) drop-shadow(0 14px 22px rgba(0,0,0,0.45));
}
.section-title em { color: inherit; -webkit-text-fill-color: transparent; background: linear-gradient(180deg, #fff 0%, #fff 45%, #d9f7e3 100%); -webkit-background-clip: text; background-clip: text; }
.prize h3, .how-step h3, .product h3 { filter: drop-shadow(0 2px 0 rgba(120,70,0,0.5)) drop-shadow(0 8px 14px rgba(0,0,0,0.5)); }

/* ---- Buttons: glossy 3D pills with pointer sheen ------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 -3px 0 rgba(0,0,0,0.18) inset, 0 12px 30px rgba(0,0,0,0.4); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120px 60px at var(--sx, 30%) 0%, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%); opacity: 0.9; pointer-events: none; }
.btn::after { content: ""; position: absolute; top: -40%; bottom: -40%; width: 30%; left: -40%; background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); animation: sheen 5s ease-in-out infinite; pointer-events: none; }
@keyframes sheen { 0%, 60% { left: -40%; } 100% { left: 140%; } }
.btn--wa { background: linear-gradient(180deg, #4AE07E 0%, #25D366 55%, #128C4A 100%); }
.btn--gold { box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -3px 0 rgba(120,70,0,0.25) inset, 0 12px 30px rgba(0,0,0,0.4), 0 0 40px rgba(255,210,63,0.25); }
.btn--xl { font-size: clamp(1.25rem, 2.4vw, 1.7rem); padding: 0.85em 1.9em; }
.btn:hover { transform: translateY(-3px) scale(1.02); }

/* ---- Hero stage ----------------------------------------------------------- */
.stage { position: relative; min-height: min(92vh, 980px); overflow: hidden; perspective: 1200px; display: flex; flex-direction: column; }
.stage__bg { position: absolute; inset: 0; background: url("../img/bg-festive.jpg") center / cover no-repeat; transform: scale(1.06); }
.stage__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0) 0%, rgba(3,30,14,0.55) 75%); }
.stage__glitter { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.stage__inner { position: relative; z-index: 3; flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px; max-width: 1280px; width: 100%; margin: 0 auto; padding: 40px 24px 20px; }
.stage__copy { text-align: left; }
.stage__logo { width: min(460px, 100%); filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5)); animation: rise 0.9s cubic-bezier(.2,.8,.2,1) both; }
.stage__headline { margin: 14px 0 12px; animation: rise 0.9s 0.15s cubic-bezier(.2,.8,.2,1) both; }
.stage__headline img { width: min(560px, 100%); filter: drop-shadow(0 14px 28px rgba(0,0,0,0.55)); animation: pulseGlow 3.2s ease-in-out infinite; }
@keyframes pulseGlow { 0%, 100% { filter: drop-shadow(0 14px 28px rgba(0,0,0,0.55)) drop-shadow(0 0 14px rgba(255,220,80,0.15)); } 50% { filter: drop-shadow(0 14px 28px rgba(0,0,0,0.55)) drop-shadow(0 0 34px rgba(255,220,80,0.55)); } }
.stage__rule { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.35; margin: 0 0 20px; text-shadow: 0 2px 10px rgba(0,0,0,0.6); animation: rise 0.9s 0.25s cubic-bezier(.2,.8,.2,1) both; }
.stage__rule b { color: var(--yellow); font-weight: 700; }
.stage__actions { display: flex; flex-wrap: wrap; gap: 14px; animation: rise 0.9s 0.35s cubic-bezier(.2,.8,.2,1) both; }
.stage__legal { font-family: var(--font-cond); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; color: rgba(255,255,255,0.7); margin: 22px 0 0; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

.stage__scene { position: relative; height: min(70vh, 720px); transform-style: preserve-3d; }
.stage__scene img { position: absolute; will-change: transform; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)); }
.scene__spot { position: absolute; left: 50%; top: 55%; width: 120%; height: 120%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(255,215,90,0.28) 0%, rgba(255,215,90,0.08) 35%, rgba(0,0,0,0) 65%); pointer-events: none; }
.scene__campari { left: 8%; bottom: 22%; height: 68%; z-index: 4; }
.scene__wray { right: 6%; bottom: 22%; height: 70%; z-index: 3; }
.scene__cash { left: 16%; bottom: 4%; width: 30%; z-index: 6; }
.scene__groceries { right: 12%; bottom: 6%; width: 27%; z-index: 5; }
.scene__bmw { left: 50%; bottom: 0; width: 70%; transform: translateX(-50%); z-index: 7; filter: drop-shadow(0 26px 30px rgba(0,0,0,0.6)); }
.scene__floor { position: absolute; left: 10%; right: 10%; bottom: 0; height: 60px; background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%); transform: translateY(35%); }

/* Floating props scattered around the stage */
.stage__props { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.prop { position: absolute; filter: drop-shadow(0 16px 22px rgba(0,0,0,0.5)); }
.prop--gift-gold { width: 120px; left: 3%; top: 12%; }
.prop--gift-red { width: 90px; left: 44%; top: 9%; }
.prop--gift-gold2 { width: 110px; right: 3%; top: 14%; }
.prop--bauble-green { width: 52px; left: 38%; bottom: 14%; }
.prop--bauble-gold { width: 46px; right: 30%; top: 8%; }
.prop--coin { width: 44px; left: 12%; top: 58%; }
.prop--coin2 { width: 34px; right: 12%; bottom: 30%; }

.float-a { animation: floatA 6s ease-in-out infinite; }
.float-b { animation: floatB 7.5s ease-in-out infinite; }
.float-c { animation: floatC 5.2s ease-in-out infinite; }
@keyframes floatA { 0%, 100% { margin-top: 0; } 50% { margin-top: -14px; } }
@keyframes floatB { 0%, 100% { margin-top: 0; } 50% { margin-top: -20px; } }
@keyframes floatC { 0%, 100% { margin-top: 0; } 50% { margin-top: -10px; } }

/* String of lights across the top */
.lights { position: absolute; top: 0; left: 0; right: 0; height: 60px; z-index: 3; display: flex; justify-content: space-around; padding: 0 2%; pointer-events: none; }
.lights::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 2px; background: rgba(0,0,0,0.5); }
.lights span { width: 12px; height: 18px; margin-top: 12px; border-radius: 50% 50% 55% 55%; background: radial-gradient(circle at 40% 35%, #fff9c4, #ffd23f 55%, #c98d00); box-shadow: 0 0 12px 3px rgba(255,220,80,0.75), 0 0 30px rgba(255,220,80,0.35); animation: twinkle 2.4s ease-in-out infinite; }
.lights span:nth-child(3n) { background: radial-gradient(circle at 40% 35%, #ffd6d6, #ff4d4d 55%, #8e0d0d); box-shadow: 0 0 12px 3px rgba(255,90,90,0.7), 0 0 30px rgba(255,90,90,0.3); animation-delay: 0.6s; }
.lights span:nth-child(3n+1) { background: radial-gradient(circle at 40% 35%, #dfffe6, #38d66b 55%, #0b7a3b); box-shadow: 0 0 12px 3px rgba(70,220,120,0.7), 0 0 30px rgba(70,220,120,0.3); animation-delay: 1.2s; }
.lights span:nth-child(2n) { animation-duration: 3.1s; }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.88); } }

/* Ticker strip under the hero */
.hero-strip { position: relative; z-index: 3; background: linear-gradient(90deg, rgba(120,8,14,0.92), rgba(179,19,28,0.92), rgba(120,8,14,0.92)); border-top: 3px solid var(--gold); border-bottom: 3px solid var(--gold); overflow: hidden; }
.hero-strip__inner { padding: 0; max-width: none; }
.ticker { display: flex; gap: 48px; white-space: nowrap; padding: 12px 0; font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 1rem; animation: ticker 28s linear infinite; width: max-content; }
.ticker span { padding-right: 48px; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Hero: tablet / mobile */
@media (max-width: 1000px) {
  .stage__inner { grid-template-columns: 1fr; text-align: center; padding-top: 70px; }
  .stage__copy { text-align: center; }
  .stage__logo, .stage__headline img { margin-inline: auto; }
  .stage__actions { justify-content: center; }
  .stage__scene { height: 62vw; max-height: 520px; }
  .prop--gift-red, .prop--bauble-gold { display: none; }
  .prop--gift-gold { width: 80px; top: 8%; } .prop--gift-gold2 { width: 76px; top: 9%; }
}
@media (max-width: 600px) {
  .stage { min-height: 0; }
  .stage__inner { padding: 60px 16px 10px; }
  .stage__actions .btn { flex: 1 1 100%; }
  .stage__scene { height: 74vw; }
  .scene__campari { left: 2%; height: 66%; } .scene__wray { right: 0; height: 70%; }
  .scene__cash { left: 14%; width: 40%; } .scene__groceries { right: 6%; width: 36%; }
  .scene__bmw { width: 92%; }
  .prop--gift-gold, .prop--gift-gold2 { width: 58px; }
  .prop--coin { top: 35%; }
}

/* ---- Cards: glass + 3D tilt ------------------------------------------------ */
[data-tilt] { transition: transform 0.25s ease, box-shadow 0.25s ease; transform-style: preserve-3d; position: relative; }
[data-tilt]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.14), transparent 45%); opacity: 0; transition: opacity 0.25s; pointer-events: none; }
[data-tilt]:hover::after { opacity: 1; }
.prize, .how-step, .product, .stat, .enter-card { box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 24px 60px rgba(0,0,0,0.45); border-color: rgba(255,210,63,0.28); background: linear-gradient(160deg, rgba(0,0,0,0.5), rgba(0,0,0,0.3)); backdrop-filter: blur(8px); }
.stat { border-width: 1px; }
.stat__num { background: linear-gradient(180deg, #FFF7CF 0%, #FFE066 40%, #F5B400 65%, #FFE99A 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 3px 0 rgba(120,70,0,0.5)) drop-shadow(0 10px 16px rgba(0,0,0,0.5)); }

/* Prize props (3D renders instead of flat icons) */
.prize--small .prize__body { align-items: center; gap: 22px; }
.prize__prop { width: 150px; flex: 0 0 auto; filter: drop-shadow(0 18px 24px rgba(0,0,0,0.55)); animation: floatA 6s ease-in-out infinite; }
.prize--small:nth-child(4) .prize__prop { animation: floatB 7s ease-in-out infinite; }
@media (max-width: 600px) { .prize__prop { width: 110px; } }
.prize--grand .prize__img, .prize--second .prize__img { transition: transform 0.6s ease; }
.prize--grand:hover .prize__img, .prize--second:hover .prize__img { transform: scale(1.06); }

/* Product cards use the cutouts on a spotlight */
.product img { object-fit: contain; aspect-ratio: auto; height: 260px; width: auto; max-width: 100%; margin: 0 auto; border-radius: 0; filter: drop-shadow(0 24px 26px rgba(0,0,0,0.6)); background: radial-gradient(ellipse at 50% 90%, rgba(255,215,90,0.35), rgba(0,0,0,0) 65%); }

/* How-to numbers: gold coins */
.how-step__num { background: radial-gradient(circle at 35% 30%, #FFF3B0, #FFD23F 45%, #C98D00 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 -3px 0 rgba(120,70,0,0.35) inset, 0 12px 20px rgba(0,0,0,0.45); }
.enter-step__num { background: radial-gradient(circle at 35% 30%, #FF7A7A, #C81622 50%, #6E0810 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -3px 0 rgba(0,0,0,0.3) inset, 0 10px 18px rgba(0,0,0,0.45); }

/* Draw table: final row glow */
.draw-table tr.final td { box-shadow: 0 0 30px rgba(255,210,63,0.45); }

/* ---- Scroll reveal ------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(26px) scale(0.985); transition: opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* Sticky CTA: glass */
.sticky-cta { background: rgba(5,72,31,0.7); backdrop-filter: blur(14px); }

@media (prefers-reduced-motion: reduce) {
  .float-a, .float-b, .float-c, .lights span, .ticker, .btn::after, .stage__headline img, .prize__prop { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- Static hero (key visual) with animated money layer --------------------- */
.hero--static { position: relative; }
.hero-visual { position: relative; overflow: hidden; }
.hero-visual .hero-img-desktop { display: block; width: 100%; }
.hero-glitter { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.hero-visual .lights { z-index: 4; }
.money-rain { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; perspective: 900px; }
.money-rain .note { position: absolute; top: -16%; will-change: transform; filter: blur(var(--blur, 0px)); opacity: 0; animation: noteFall var(--dur, 12s) cubic-bezier(.45,.05,.55,.95) var(--delay, 0s) infinite; }
.money-rain .note img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,0.45)); transform-style: preserve-3d; animation: noteTumble var(--tumble, 4s) ease-in-out var(--tdelay, 0s) infinite; }
.money-rain .note--coin img { animation-name: coinSpin; }
/* Fall path: leaf-like zigzag with drift, eased so each swing slows at the turn. */
@keyframes noteFall {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  5%   { opacity: var(--op, 1); }
  20%  { transform: translate3d(var(--sway), 22vh, 0); }
  40%  { transform: translate3d(calc(var(--sway) * -0.9), 44vh, 0); }
  60%  { transform: translate3d(calc(var(--sway) * 0.8 + var(--drift) * 0.5), 66vh, 0); }
  80%  { transform: translate3d(calc(var(--sway) * -0.7 + var(--drift)), 88vh, 0); }
  95%  { opacity: var(--op, 1); }
  100% { transform: translate3d(calc(var(--drift) * 1.1), 118vh, 0); opacity: 0; }
}
/* Tumble: a paper note flips around its long axis and wobbles, not a flat spin. */
@keyframes noteTumble {
  0%   { transform: rotateZ(var(--r0)) rotateX(var(--tx)) rotateY(0deg); }
  25%  { transform: rotateZ(calc(var(--r0) + 18deg)) rotateX(calc(var(--tx) + 40deg)) rotateY(80deg); }
  50%  { transform: rotateZ(calc(var(--r0) - 12deg)) rotateX(calc(var(--tx) - 25deg)) rotateY(180deg); }
  75%  { transform: rotateZ(calc(var(--r0) + 10deg)) rotateX(calc(var(--tx) + 30deg)) rotateY(260deg); }
  100% { transform: rotateZ(var(--r0)) rotateX(var(--tx)) rotateY(360deg); }
}
@keyframes coinSpin {
  0%   { transform: rotateY(0deg) rotateZ(var(--r0)); }
  100% { transform: rotateY(720deg) rotateZ(var(--r0)); }
}
.ticker-strip { position: relative; z-index: 3; background: linear-gradient(90deg, rgba(120,8,14,0.95), rgba(179,19,28,0.95), rgba(120,8,14,0.95)); border-bottom: 3px solid var(--gold); overflow: hidden; }
.hero--static .hero-strip { background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.8)); border-bottom: 0; }
.hero--static .hero-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; max-width: var(--max); }
.hero--static .hero-strip__copy { text-shadow: 0 2px 8px rgba(0,0,0,0.6); }
@media (max-width: 760px) {
  .hero-visual .hero-img-desktop { display: none; }
  .hero-visual .hero-mobile { display: block; position: relative; z-index: 1; }
  .hero--static .hero-strip__inner { justify-content: center; text-align: center; }
  .hero--static .hero-strip__actions { width: 100%; justify-content: center; }
  .hero--static .hero-strip__actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .money-rain { display: none; } }

/* ---- Outlets ---------------------------------------------------------------- */
.outlets__controls { max-width: 900px; margin: 0 auto 1rem; }
.outlets__search { width: 100%; padding: 14px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.28); background: rgba(0,0,0,0.35); color: #fff; font: 500 1.05rem var(--font-body); margin-bottom: 14px; }
.outlets__search:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.outlets__parishes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.outlets__parishes button { font-family: var(--font-cond); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.08); color: #fff; cursor: pointer; }
.outlets__parishes button.active { background: var(--gold); color: var(--green-dark); border-color: var(--gold); }
.outlets__count { text-align: center; font-family: var(--font-cond); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem; color: rgba(255,255,255,0.7); margin: 0 0 1.2rem; }
.outlet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1100px; margin: 0 auto; }
.outlet { background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; padding: 16px 18px; }
.outlet__parish { display: inline-block; font-family: var(--font-cond); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.7rem; color: var(--gold); margin-bottom: 6px; }
.outlet__group { color: rgba(255,255,255,0.55); font-size: 0.75rem; margin-left: 8px; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--font-cond); }
.outlet h4 { font-family: var(--font-cond); font-weight: 700; font-size: 1.1rem; text-transform: none; letter-spacing: 0; line-height: 1.25; margin-bottom: 6px; }
.outlet p { margin: 0 0 8px; font-size: 0.9rem; color: rgba(255,255,255,0.8); }
.outlet a { font-family: var(--font-cond); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.75rem; color: var(--gold); text-decoration: none; }
@media (max-width: 900px) { .outlet-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .outlet-grid { grid-template-columns: 1fr; } }

/* ---- Grand prize countdown + form notice ---------------------------------- */
.grand-countdown { margin: 0.4rem 0 1.6rem; padding: 18px 16px; border-radius: 18px; background: linear-gradient(160deg, rgba(179,19,28,0.35), rgba(0,0,0,0.35)); border: 1px solid rgba(255,210,63,0.35); }
.grand-countdown .eyebrow { margin-bottom: 0.4rem; }
.grand-countdown .countdown { margin: 0.4rem 0 0.6rem; }
.grand-countdown .countdown div { min-width: 82px; }
.grand-countdown__label { margin: 0; font-family: var(--font-cond); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.8rem; color: rgba(255,255,255,0.75); }
.form-notice { text-align: center; background: rgba(255,210,63,0.12); border: 1px solid rgba(255,210,63,0.4); border-radius: 12px; padding: 12px 14px; margin: 0 0 16px; font-size: 0.95rem; }
.form-notice strong { color: var(--gold); }
.entry-form button[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }
@media (max-width: 480px) { .grand-countdown .countdown { gap: 8px; } .grand-countdown .countdown div { min-width: 64px; padding: 8px 4px; } .grand-countdown .countdown b { font-size: 1.7rem; } }

/* ---- Legibility: darkened radial backdrop behind every text section ---------- */
.section { position: relative; isolation: isolate; }
.section::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(2,26,12,0.58) 0%, rgba(2,26,12,0.74) 55%, rgba(2,26,12,0.86) 100%); }
.section.enter::before, .section.how::before, .section.products::before { background: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(2,26,12,0.62) 0%, rgba(2,26,12,0.8) 55%, rgba(2,26,12,0.9) 100%); }
.section-sub, .how-note, .prizes__foot, .outlets__count { text-shadow: 0 1px 8px rgba(0,0,0,0.7); }

/* ---- Terms page accordions ------------------------------------------------- */
.legal-body--acc { padding: clamp(16px, 3vw, 28px); }
.legal-body--acc > p { padding: 0 6px 10px; }
.legal-acc { background: rgba(0,0,0,0.35); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px; margin-bottom: 10px; scroll-margin-top: 90px; }
.legal-acc summary { font-family: var(--font-cond); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.03em; color: var(--gold); padding: 16px 52px 16px 18px; }
.legal-acc__body { padding: 4px 18px 18px; }
.legal-acc__body p:first-child, .legal-acc__body ol:first-child, .legal-acc__body ul:first-child { margin-top: 0; }

/* ---- UX pass ---------------------------------------------------------------- */
.money-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
/* Hero: keep the call-to-action strip inside the first screen on laptops */
.hero-visual .hero-img-desktop { max-height: 78vh; object-fit: cover; object-position: 50% 100%; }
@media (min-aspect-ratio: 2/1) { .hero-visual .hero-img-desktop { max-height: 70vh; } }
/* Ticker: quieter */
.ticker { font-size: 0.92rem; animation-duration: 40s; }
.ticker span { position: relative; }
.ticker span + span::before { content: "•"; position: absolute; left: -30px; color: var(--gold); }
/* Prize cards with cut-out art: contained, on a soft spotlight */
.prize__img--cut { object-fit: contain; padding: 8% 6% 30%; background: radial-gradient(ellipse at 50% 62%, rgba(255,215,90,0.32), rgba(0,0,0,0) 62%); filter: drop-shadow(0 22px 26px rgba(0,0,0,0.6)); }
.prize__img--cash { padding: 6% 14% 34%; }
.prize--grand .prize__body, .prize--second .prize__body { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 55%); }
/* Countdown in the prizes header */
.prizes .grand-countdown { max-width: 620px; margin: 0 auto 2rem; text-align: center; }
/* Draw table: scroll instead of squash on phones */
.draw-table { min-width: 640px; }
/* Enter card: tighter rhythm */
.enter-card h2 { margin-bottom: 0.2em; }
.enter-steps { margin-top: 1.4rem; }
.entry-form { margin-top: 1.4rem; }
/* Focus states for keyboard users */
.btn:focus-visible, .nav-links a:focus-visible, details summary:focus-visible, .outlets__parishes button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* Small-screen fit and legibility; retain the campaign artwork and treatment. */
.prize__body, .product > div, .outlet { min-width: 0; }
.prize p, .how-step p, .product p, .details-body { line-height: 1.65; }
.prize h3, .product h3, .outlet h4 { overflow-wrap: break-word; }
.outlet__group { color: rgba(255,255,255,0.75); }
.outlets__search::placeholder { color: rgba(255,255,255,0.7); opacity: 1; }
.outlets__parishes button { min-height: 44px; }
.nav-toggle { min-width: 44px; min-height: 44px; }
.nav-toggle:focus-visible, .receipt-drop:focus-visible, .draw-table__wrap:focus-visible,
.footer-links a:focus-visible, .footer-social a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.draw-table__wrap { overscroll-behavior-x: contain; }
.btn:disabled { cursor: wait; opacity: 0.7; }
.btn:disabled:hover { transform: none; }
@media (max-width: 960px) {
  .nav-links { visibility: hidden; pointer-events: none; }
  .nav-links.active { visibility: visible; pointer-events: auto; }
}
@media (max-width: 600px) {
  .prize--small .prize__body { gap: 16px; padding: 22px 18px; }
  .prize__prop { width: clamp(64px, 22vw, 110px); }
  .prize--small h3 { font-size: clamp(1.65rem, 6vw, 2.2rem); line-height: 1.05; }
  .prize--small p { font-size: 0.95rem; }
  .entry-form .check { line-height: 1.55; }
  .wa-cta .btn { white-space: normal; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  [data-tilt], .prize__img, .reveal { transition: none !important; }
}

/* Source-art finish: retain the hero and campaign palette throughout. */
.nav-links a.nav-cta, .nav-links a.nav-cta:hover { color: #12351c; background: linear-gradient(180deg, #ffe45c, #ffd23f); text-shadow: none; }
#draws .grand-countdown { max-width: 560px; margin: 28px auto; text-align: center; }
#draws .grand-countdown .countdown div { min-width: 0; flex: 1; }
#draws .calendar-help, #calendar-status { max-width: 800px; margin: 16px auto; text-align: center; font-size: 0.8rem; line-height: 1.6; color: #dce8df; }
.exit-reminder { color: #fff; width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; margin: auto; padding: 38px 30px 24px; border: 1px solid rgba(255,210,63,0.5); border-radius: 22px; background: #073c22; box-shadow: 0 24px 90px rgba(0,0,0,0.55); text-align: center; }
.exit-reminder::backdrop { background: rgba(0,15,7,0.8); backdrop-filter: blur(5px); }
.exit-reminder > img { width: 180px; height: auto; margin: 0 auto 24px; }
.exit-reminder .eyebrow { display: block; }
.exit-reminder h2 { font-size: 2.7rem; color: var(--gold); }
.exit-reminder p { font: 400 0.95rem/1.7 "Helvetica Neue", Arial, sans-serif; color: #e0e9df; margin: 18px 0 24px; }
.exit-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; color: white; font: 300 28px Arial, sans-serif; cursor: pointer; }
.exit-dismiss { display: block; margin: 12px auto 0; min-height: 44px; border: 0; color: #d3e1d5; background: none; font: 400 0.85rem "Helvetica Neue", Arial, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.exit-reminder button:focus-visible, .exit-reminder a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
body:has(.exit-reminder[open]) { overflow: hidden; }
@media (max-width: 900px) { .calendar-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 380px) { .calendar-grid { grid-template-columns: 1fr; } }
.section p, .section .check, .section .field label, .section .field input,
.section .details-body, .section .draw-table td:not(:first-child) {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}
.section p b, .section p strong { font-weight: 600; }
.section { padding-block: clamp(64px, 7vw, 96px); }
.section .eyebrow { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 0.18em; }
.section-title { line-height: 1.02; margin-bottom: 18px; }
.section-title, .enter-card h2, .prize h3, .how-step h3, .product h3 {
  filter: drop-shadow(0 2px 0 rgba(90,55,0,0.3));
}
.section-sub { max-width: 660px; font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,0.85); }
.prize, .how-step, .product, .stat, .enter-card {
  border-color: rgba(255,210,63,0.24);
  background: linear-gradient(145deg, rgba(10,48,29,0.94), rgba(3,24,13,0.94));
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 16px 38px rgba(0,0,0,0.2);
  backdrop-filter: none;
}
.section .btn { min-height: 48px; font-family: var(--font-cond); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.045em; }
.section .btn::after { animation: none; opacity: 0; }
.section .btn:hover { transform: translateY(-2px); }
.section .btn--ghost { border-width: 1px; border-color: rgba(255,255,255,0.35); }
.section a:not(.btn) { text-underline-offset: 4px; }

/* A single, clearly divided entry panel retains all existing form hooks. */
.enter-card { max-width: 1080px; padding: clamp(24px, 4vw, 48px); border-radius: 24px; }
.enter-card h2 { font-size: clamp(2.4rem, 4.4vw, 3.8rem); line-height: 1.02; }
.enter-rule { gap: 12px; margin: 22px 0 32px; font-size: 0.95rem; }
.enter-rule > span { padding: 9px 16px; border: 1px solid rgba(255,210,63,0.2); background: rgba(255,210,63,0.045); border-radius: 8px; }
.entry-channels { display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); grid-template-rows: auto auto 1fr; column-gap: 40px; text-align: left; }
.entry-channels .wa-cta { grid-column: 1; grid-row: 1; align-items: stretch; gap: 12px; }
.entry-channels .wa-cta .btn { font-size: 1.2rem; }
.wa-cta__hint { font-size: 0.9rem; line-height: 1.6; text-align: center; color: rgba(255,255,255,0.7); }
.entry-channels .enter-steps { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; gap: 20px; margin: 26px 0 0; }
.enter-step { background: transparent; padding: 0; gap: 14px; }
.enter-step__num { width: 32px; height: 32px; font-size: 1.15rem; box-shadow: none; }
.enter-step p { font-size: 0.98rem; line-height: 1.65; }
.entry-bottles { grid-column: 1; grid-row: 3; display: flex; gap: 28px; justify-content: center; align-items: center; padding-top: 26px; height: 245px; }
.entry-bottles img { width: auto; max-width: 36%; height: 210px; object-fit: contain; filter: drop-shadow(0 12px 12px rgba(0,0,0,0.3)); }
.entry-bottles span { color: var(--gold); font: 400 2rem var(--font-body); }
.entry-online { grid-column: 2; grid-row: 1 / 4; border-left: 1px solid rgba(255,255,255,0.12); padding-left: 40px; min-width: 0; }
.entry-form { border-top: 0; padding-top: 0; margin-top: 0; }
.entry-form__title { text-align: left; color: #fff; margin: 0 0 22px; font-size: 1.15rem; letter-spacing: 0.06em; }
.field { margin-bottom: 18px; }
.field label { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-size: 0.85rem; margin-bottom: 8px; }
.field input { border-radius: 9px; background: rgba(0,0,0,0.18); border-color: rgba(255,255,255,0.25); padding: 13px 14px; }
.field input:focus { background: rgba(255,255,255,0.055); }
.receipt-drop { border-width: 1px; border-color: rgba(255,210,63,0.45); background: rgba(255,210,63,0.045); padding: 22px 14px; border-radius: 10px; }
.receipt-drop__hint { font-size: 0.8rem; line-height: 1.6; color: rgba(255,255,255,0.7); }
.check { font-size: 0.85rem; line-height: 1.6; margin-bottom: 14px; }
.check input { accent-color: var(--gold); }
.entry-prelaunch { margin-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.88rem; }
.stats { max-width: 1080px; margin: 28px auto 0; gap: 14px; }
.stat { border-radius: 14px; padding: 24px 16px; }
.stat__num { font-size: 2.8rem; filter: none; }
.stat__label { font-size: 0.75rem; letter-spacing: 0.1em; margin-top: 9px; }

/* Use the original photographed prize elements with their native proportions. */
.prizes__headline { width: min(560px, 90%); margin-bottom: 24px; }
.prizes .grand-countdown { max-width: 560px; background: rgba(3,28,15,0.75); border-radius: 14px; padding: 20px; }
.grand-countdown .countdown div { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.08); }
.prize-grid { gap: 20px; margin-top: 32px; }
.prize { border-radius: 20px; justify-content: flex-start; min-height: 0; }
.prize--grand { background: radial-gradient(ellipse at 50% 30%, rgba(43,114,53,0.62), rgba(4,30,16,0.96) 74%); }
.prize--second { background: radial-gradient(ellipse at 55% 15%, rgba(140,30,34,0.52), rgba(29,18,14,0.97) 78%); }
.prize__img--cut { position: static; display: block; height: 250px; width: 100%; object-fit: contain; padding: 30px 26px 0; background: none; filter: drop-shadow(0 15px 15px rgba(0,0,0,0.3)); }
.prize__img--cheque { padding: 22px 46px 0; }
.prize--grand .prize__body, .prize--second .prize__body { background: none; padding: 26px 30px 32px; }
.prize__tag { border-radius: 5px; font-size: 0.7rem; letter-spacing: 0.13em; padding: 6px 10px; margin-bottom: 14px; }
.prize h3 { font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1.04; }
.prize p { margin-top: 13px; font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,0.83); }
.prize--small .prize__body { min-height: 190px; padding: 26px; gap: 24px; }
.prize__prop { width: 128px; height: 135px; object-fit: contain; animation: none !important; filter: drop-shadow(0 12px 12px rgba(0,0,0,0.3)); }
.prize--small h3 { font-size: 2rem; line-height: 1.06; }
.prizes__foot { max-width: 660px; margin: 28px auto 0; line-height: 1.65; }

/* Clearer hierarchy and a consistent finish for the supporting sections. */
.how-grid { gap: 18px; }
.how-step { padding: 30px 22px; text-align: left; }
.how-step__num { width: 42px; height: 42px; margin: 0 0 25px; font-size: 1.5rem; box-shadow: 0 2px 0 rgba(0,0,0,0.2); }
.how-step h3 { font-size: 2rem; margin-bottom: 14px; }
.how-step p { font-size: 0.98rem; }
.draw-table { max-width: 1080px; border-spacing: 0 8px; }
.draw-table th { padding-bottom: 8px; letter-spacing: 0.1em; }
.draw-table td { padding: 20px 18px; background: rgba(4,30,16,0.85); font-size: 0.95rem; }
.draw-table tr.final td { box-shadow: none; }
.product { grid-template-columns: 125px 1fr; padding: 30px; gap: 26px; }
.product img { height: 250px; background: none; filter: drop-shadow(0 12px 15px rgba(0,0,0,0.3)); }
.product h3 { font-size: 2rem; line-height: 1.05; margin-bottom: 14px; }
.product p { font-size: 1rem; line-height: 1.65; }
.pill { border-radius: 6px; letter-spacing: 0.07em; }
.outlets__search { border-radius: 12px; padding: 16px 20px; }
.outlets__parishes button { letter-spacing: 0.05em; padding-inline: 16px; }
.outlet { padding: 22px; background: rgba(4,30,16,0.88); }
.outlet h4 { line-height: 1.4; font-size: 1.15rem; }
.outlet__group { display: block; margin: 0 0 12px; font-size: 0.7rem; }
.outlet p { line-height: 1.6; }
.outlet a { display: inline-flex; align-items: center; min-height: 40px; }
.faq-list details { background: rgba(4,30,16,0.85); border-color: rgba(255,255,255,0.14); border-radius: 12px; }
.faq-list summary { padding: 22px 54px 22px 24px; font-size: 1.18rem; letter-spacing: 0.015em; }
.faq-list details[open] { border-color: rgba(255,210,63,0.45); }
.details-body { padding: 18px 24px 24px; line-height: 1.75; }
.footer-social a { letter-spacing: 0.04em; }

@media (max-width: 900px) {
  .entry-channels { column-gap: 26px; }
  .entry-online { padding-left: 26px; }
  .entry-channels .wa-cta .btn { font-size: 1rem; padding-inline: 12px; }
  .entry-channels .form-row { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 760px) {
  .enter-card { padding: 26px 22px; border-radius: 20px; }
  .entry-channels { display: flex; flex-direction: column; }
  .entry-online { padding: 24px 0 0; margin-top: 26px; border-left: 0; border-top: 1px solid rgba(255,255,255,0.12); }
  .entry-channels .wa-cta .btn { font-size: 1.15rem; }
  .entry-channels .enter-steps { margin-top: 22px; gap: 18px; }
  .entry-bottles { display: none; }
  .enter-rule { flex-direction: column; gap: 8px; margin-block: 22px; }
  .enter-rule > span { padding: 9px 10px; font-size: 0.9rem; }
  .entry-form__title { text-align: center; }
  .stats { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
  .stat { padding: 18px 6px; border-radius: 10px; }
  .stat__num { font-size: clamp(1.6rem, 5.8vw, 2.3rem); }
  .stat__label { font-size: 0.65rem; letter-spacing: 0.03em; line-height: 1.4; }
  .prize__img--cut { height: 210px; padding: 22px 20px 0; }
  .prize__img--cheque { padding-inline: 40px; }
  .prize--grand .prize__body, .prize--second .prize__body { padding: 22px 24px 26px; }
  .prize--small .prize__body { min-height: 160px; padding: 22px 18px; gap: 18px; }
  .prize__prop { width: 90px; height: 110px; }
  .prize--small h3 { font-size: 1.85rem; }
  .prize p { font-size: 0.98rem; }
  .prizes .grand-countdown { padding-inline: 14px; }
  .grand-countdown .countdown { gap: 8px; }
  .grand-countdown .countdown div { min-width: 0; flex: 1; }
  .how-step { padding: 25px 22px; }
  .product { grid-template-columns: 95px 1fr; text-align: left; padding: 24px 20px; gap: 20px; }
  .product img { height: 230px; width: 95px; }
  .product h3 { font-size: 1.8rem; }
  .product p { font-size: 0.95rem; }
}
@media (max-width: 360px) {
  .enter-card { padding-inline: 18px; }
  .prize__prop { width: 64px; height: 90px; }
  .prize--small h3 { font-size: 1.65rem; }
  .product { grid-template-columns: 70px 1fr; gap: 16px; }
  .product img { width: 70px; height: 200px; }
}

/* Portrait art direction uses the same source elements as the desktop artwork. */
.hero-desktop-entry { position: absolute; left: 12%; bottom: 7vw; z-index: 5; min-width: 190px; min-height: 50px; padding: 13px 28px; gap: 26px; font-size: 1.2rem; color: #12351c; border: 1px solid #fff0a1; }
.hero-desktop-entry::after { animation: none; }
@media (max-width: 1024px) {
  .hero-desktop-entry { display: none; }
  .hero-visual .hero-img-desktop { display: none; }
  .hero-visual .hero-mobile { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; padding: 44px 20px 24px; isolation: isolate; background: radial-gradient(ellipse at 50% 48%, rgba(22,148,74,0.45), transparent 65%), url("../img/bg.jpg") center / cover; }
  .hero-mobile__logo { width: clamp(230px, 42vw, 350px); max-width: 85%; margin: 0 0 18px; }
  .hero-mobile__cta { width: clamp(280px, 49vw, 430px); max-width: 95%; margin: 0 0 18px; filter: drop-shadow(0 8px 14px rgba(0,0,0,0.2)); }
  .hero-mobile__entry { min-height: 46px; font-size: 1.05rem; padding: 12px 26px; gap: 20px; z-index: 5; }
  .hero-mobile__entry::after { animation: none; }
  .hero-mobile__scene { position: relative; width: min(620px, calc(100% + 24px)); aspect-ratio: 1.18; margin-top: 6px; isolation: isolate; }
  .hero-mobile__halo { position: absolute; inset: 7% -5% 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,216,74,0.3), rgba(247,214,78,0.06) 50%, transparent 72%); }
  .mobile-art { position: absolute; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(0,25,6,0.28)); pointer-events: none; }
  .mobile-art--campari { height: 65%; width: 22%; left: 11%; top: 2%; z-index: 2; transform: rotate(-6deg); }
  .mobile-art--wray { height: 66%; width: 22%; right: 10%; top: 1%; z-index: 2; transform: rotate(6deg); }
  .mobile-art--envelope { width: 48%; height: auto; left: 27%; top: 23%; z-index: 3; animation: portrait-float 7s ease-in-out infinite; }
  .mobile-art--cheque { width: 31%; height: auto; right: 0; bottom: 18%; z-index: 4; animation: portrait-float 8s ease-in-out -3s infinite; }
  .mobile-art--groceries { width: 26%; height: auto; left: 1%; bottom: 15%; z-index: 4; }
  .mobile-art--car { width: 92%; height: auto; left: 6%; bottom: 0; z-index: 5; filter: drop-shadow(0 14px 9px rgba(0,15,5,0.5)); }
  .hero-mobile__spark { position: absolute; color: #ffe976; font-size: 25px; z-index: 1; animation: portrait-spark 4s ease-in-out infinite; }
  .hero-mobile__spark--one { top: 25%; left: 1%; }
  .hero-mobile__spark--two { top: 12%; right: 2%; font-size: 18px; animation-delay: -2s; }
  .hero-mobile__dates { margin: 18px 0 0; font: 500 11px/1.7 "Helvetica Neue", Arial, sans-serif; color: #fff4cb; text-align: center; }
  .hero-mobile__dates span { display: block; font-size: 10px; color: #e0eadb; }
  .hero-visual #money-canvas { display: block; opacity: 0.65; }
  .hero-visual #glitter { display: none; }
  .hero-visual .lights { opacity: 0.8; }
}
@keyframes portrait-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-7px) rotate(1deg); } }
@keyframes portrait-spark { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 0.9; transform: scale(1); } }
@media (max-width: 400px) {
  .hero-visual .hero-mobile { padding-top: 34px; }
  .hero-mobile__logo { width: 230px; margin-bottom: 12px; }
  .hero-mobile__cta { width: 285px; margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-art, .hero-mobile__spark { animation: none !important; }
}

/* Paired entry actions and calendar controls within the draw schedule. */
.hero-strip__actions .btn { min-height: 50px; }
.hero-whatsapp { color: #fff; background: #123d28; border: 1px solid #8fb59e; }
.hero-whatsapp:hover { background: #20563b; }
.hero-whatsapp svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; }
.next-draw-calendar { text-align: center; margin: 24px auto 0; scroll-margin-top: 100px; }
@media (max-width: 760px) {
  .hero--static .hero-strip__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero--static .hero-strip__actions .btn { width: 100%; min-width: 0; padding: 12px 8px; gap: 6px; font-size: clamp(0.82rem, 3.2vw, 1rem); white-space: normal; }
  .hero-whatsapp svg { width: 17px; height: 17px; }

}

/* Compact prize grouping follows the original campaign composition. */
@media (max-width: 1024px) {
  .hero-mobile__scene { aspect-ratio: 1.04; overflow: clip; }
  .mobile-art--campari { height: 69%; width: 23%; left: 5%; top: 1%; transform: none; }
  .mobile-art--wray { height: 69%; width: 23%; right: 2%; top: 0; transform: none; }
  .mobile-art--envelope { width: 54%; left: 25%; top: 16%; z-index: 1; animation: prize-reveal 850ms ease-out 150ms both; }
  .mobile-art--cheque { width: 36%; right: 0; top: auto; bottom: 16%; z-index: 4; animation: certificate-reveal 900ms ease-out 300ms both; }
  .mobile-art--groceries { width: 29%; left: 0; bottom: 14%; z-index: 4; animation: trolley-arrive 1200ms cubic-bezier(.18,.7,.25,1) 350ms both; }
  .mobile-art--car { width: 80%; left: 0; bottom: 0; animation: car-drive-in 1600ms cubic-bezier(.16,.65,.25,1) 550ms both; }
  .mobile-art--campari { animation: bottle-left-reveal 950ms ease-out both; }
  .mobile-art--wray { animation: bottle-right-reveal 950ms ease-out 100ms both; }
}
@keyframes car-drive-in {
  0% { transform: translateX(115%); }
  78% { transform: translateX(-1.2%) translateY(0); }
  90% { transform: translateX(0.4%) translateY(1px); }
  100% { transform: translateX(0) translateY(0); }
}
@keyframes trolley-arrive {
  0% { transform: translateX(-130%) rotate(-5deg); opacity: 0; }
  18% { opacity: 1; }
  80% { transform: translateX(1%) rotate(1deg); }
  100% { transform: translateX(0) rotate(0); opacity: 1; }
}
@keyframes prize-reveal { from { opacity: 0; transform: translateY(15px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes certificate-reveal { from { opacity: 0; transform: translateY(12px) rotate(3deg); } to { opacity: 1; transform: none; } }
@keyframes bottle-left-reveal { from { opacity: 0; transform: translateY(16px) rotate(-7deg); } to { opacity: 1; transform: none; } }
@keyframes bottle-right-reveal { from { opacity: 0; transform: translateY(16px) rotate(7deg); } to { opacity: 1; transform: none; } }

/* Comfortable reading and section navigation on the supporting pages. */
.legal-body { font-family: "Helvetica Neue", Arial, sans-serif; line-height: 1.75; overflow-wrap: anywhere; }
.legal-body h2[id] { scroll-margin-top: 100px; }
.legal-toc a { display: inline-flex; align-items: center; min-height: 44px; }
.legal-meta { margin-top: 18px; }
@media (max-width: 760px) {
  .legal-main { padding-top: 32px; }
  .legal-body { padding: 20px 16px; border-radius: 16px; }
  .legal-body--acc { padding: 12px; }
  .legal-body p, .legal-body li { font-size: 0.94rem; }
  .legal-acc summary { padding: 16px 38px 16px 12px; font-size: 1.1rem; line-height: 1.3; }
  .legal-acc__body { padding: 4px 12px 16px; }
  .legal-toc { justify-content: flex-start; gap: 6px; }
  .legal-toc a { letter-spacing: 0.025em; padding: 8px 12px; }
  .outlets__parishes { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; }
  .outlets__parishes button { flex-shrink: 0; }
}
/* Desktop uses individual original assets, with the same foreground hierarchy. */
@media (min-width: 1025px) {
  .hero-visual .hero-img-desktop, .hero-desktop-entry { display: none; }
  .hero-visual .hero-mobile { display: block; position: relative; aspect-ratio: 16 / 8.5; isolation: isolate; background: url("../img/bg.jpg") center / cover; }
  .hero-mobile__logo { position: absolute; width: 28%; left: 6%; top: 22%; margin: 0; }
  .hero-mobile__cta { position: absolute; width: 36%; left: 2%; top: 52%; margin: 0; }
  .hero-mobile__entry { position: absolute; left: 12%; bottom: 8%; z-index: 5; min-width: 190px; min-height: 50px; }
  .hero-mobile__scene { position: absolute; width: 60%; height: 85%; right: 0; bottom: 5%; isolation: isolate; }
  .hero-mobile__halo { position: absolute; inset: 15% 0; background: radial-gradient(ellipse, #ffd23f33, transparent 70%); }
  .mobile-art { position: absolute; object-fit: contain; pointer-events: none; filter: drop-shadow(0 10px 10px #00190644); }
  .mobile-art--campari { height: 78%; width: 18%; left: 5%; top: 0; z-index: 2; animation: bottle-left-reveal 950ms ease-out both; }
  .mobile-art--wray { height: 78%; width: 18%; right: 3%; top: 0; z-index: 2; animation: bottle-right-reveal 950ms ease-out 100ms both; }
  .mobile-art--envelope { width: 51%; left: 23%; top: 15%; z-index: 1; animation: prize-reveal 850ms ease-out 150ms both; }
  .mobile-art--groceries { width: 25%; left: 0; bottom: 10%; z-index: 4; animation: trolley-arrive 1200ms cubic-bezier(.18,.7,.25,1) 350ms both; }
  .mobile-art--cheque { width: 33%; right: 0; bottom: 12%; z-index: 4; animation: certificate-reveal 900ms ease-out 300ms both; }
  .mobile-art--car { width: 64%; left: 12%; bottom: 0; z-index: 5; filter: drop-shadow(0 14px 9px #0007); animation: car-drive-in 1600ms cubic-bezier(.16,.65,.25,1) 550ms both; }
  .hero-mobile__spark { display: none; }
  .hero-mobile__dates { position: absolute; bottom: 1%; left: 4%; margin: 0; font-size: 12px; color: #fff4cb; }
  .hero-mobile__dates span { margin-left: 12px; }
}

.hero-desktop-legal { display: none; }
@media (min-width: 1025px) { .hero-desktop-legal { display: block; position: absolute; left: 4%; bottom: 4%; margin: 0; max-width: 35%; font: 600 clamp(8px, .65vw, 12px)/1.4 var(--font-cond); text-transform: uppercase; color: #fff; } }

@media (prefers-reduced-motion: reduce) { .hero-visual #money-canvas, .hero-visual #glitter { display: none; } }

/* Campaign rhythm: build the prize scene once; keep ambient motion gentle. */
.mobile-art--campari { animation: bottle-left-reveal 650ms cubic-bezier(.2,.7,.3,1) 0ms both; }
.mobile-art--wray { animation: bottle-right-reveal 650ms cubic-bezier(.2,.7,.3,1) 90ms both; }
.mobile-art--envelope { animation: prize-reveal 750ms cubic-bezier(.2,.7,.3,1) 200ms both; }
.mobile-art--groceries { animation: trolley-arrive 1000ms cubic-bezier(.2,.65,.3,1) 380ms both; }
.mobile-art--cheque { animation: certificate-reveal 700ms ease-out 520ms both; }
.mobile-art--car { animation: car-drive-in 1450ms cubic-bezier(.18,.6,.25,1) 650ms both; }
.motion-waiting .mobile-art { animation-play-state: paused; }
@keyframes car-drive-in {
  0% { transform: translateX(125%); opacity: 0; }
  12% { opacity: 1; }
  85% { transform: translateX(0) translateY(0); }
  93% { transform: translateX(0) translateY(1px); }
  100% { transform: none; opacity: 1; }
}
@keyframes trolley-arrive {
  0% { transform: translateX(-110%); opacity: 0; }
  16% { opacity: 1; }
  88% { transform: translateX(0) rotate(-.5deg); }
  100% { transform: none; opacity: 1; }
}
.lights span, .lights span:nth-child(2n) { animation-duration: 5.5s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.hero-mobile__spark { animation-duration: 6s; }
.motion-offscreen .lights span, .motion-offscreen .hero-mobile__spark { animation-play-state: paused; }
.ticker { animation-duration: 55s; }
.ticker-strip:hover .ticker, .ticker-strip:focus-within .ticker { animation-play-state: paused; }
.btn::after { animation: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover::after { animation: sheen 900ms ease-out 1; }
}
.reveal { transform: translateY(14px); transition: opacity 480ms ease-out, transform 560ms cubic-bezier(.2,.7,.3,1); }
.reveal.in, .reveal:focus-within { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mobile-art, .lights span, .hero-mobile__spark, .ticker, .btn::after { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none !important; }
}

/* The campaign lockup introduces the headline; the prize amount grows into focus. */
.hero-mobile__logo { transform-origin: center; animation: campaign-logo-in 700ms cubic-bezier(.2,.7,.3,1) both; }
.hero-mobile__cta { transform-origin: center; animation: campaign-headline-in 1050ms cubic-bezier(.2,.7,.3,1) 180ms both; }
.copy-waiting .hero-mobile__logo, .copy-waiting .hero-mobile__cta { animation-play-state: paused; }
@keyframes campaign-logo-in {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to { opacity: 1; transform: none; }
}
@keyframes campaign-headline-in {
  0% { opacity: 0; transform: translateY(12px) scale(.82); }
  65% { opacity: 1; transform: translateY(0) scale(1.035); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mobile__logo, .hero-mobile__cta { animation: none !important; }
}

/* Hang the festive lights from the navigation edge, including while scrolling. */
#navbar > .lights { top: 100%; height: 40px; z-index: 2; opacity: 1; overflow: visible; }
#navbar > .lights::before { top: 0; height: 2px; background: #173d20; }
#navbar > .lights span { --bulb-glow: 255, 215, 85; position: relative; margin-top: 4px; width: 11px; height: 17px; box-shadow: 0 0 7px 2px rgba(var(--bulb-glow), .95), 0 0 19px 7px rgba(var(--bulb-glow), .55), 0 0 36px 12px rgba(var(--bulb-glow), .2); }
#navbar > .lights span::before { content: ""; position: absolute; top: -4px; left: 3px; width: 5px; height: 5px; border-radius: 2px 2px 0 0; background: #244a29; }
#navbar > .lights span:nth-child(3n) { --bulb-glow: 255, 100, 90; }
#navbar > .lights span:nth-child(3n+1) { --bulb-glow: 95, 255, 135; }
#navbar.hidden > .lights, #navbar:has(.nav-links.active) > .lights { visibility: hidden; }
@media (max-width: 480px) {
  #navbar > .lights span { width: 9px; height: 14px; }
  #navbar > .lights span:nth-child(n+17) { display: none; }
  #navbar > .lights span::before { left: 2px; }
}

/* Keep bottle bases planted as scroll depth increases their scale. */
.mobile-art--campari, .mobile-art--wray { transform-origin: center bottom; }

/* Contain real content within the available browser pane, including narrow desktops. */
.nav-container, .container, .hero-strip__inner { min-width: 0; }
.enter-card > *, .entry-form > *, .prize-grid > *, .product-grid > *, .outlet-grid > * { min-width: 0; }
.outlet h4, .outlet p, .legal-body a { overflow-wrap: anywhere; }
@media (min-width: 1025px) {
  .hero-mobile__scene { width: 58%; right: 2%; bottom: 5%; height: 82%; }
  .hero-mobile__logo { width: 27%; left: 6%; }
  .hero-mobile__cta { width: 34%; left: 3%; }
}
/* Hover feedback supports content instead of rotating it away from the reader. */
[data-tilt] { transform-style: flat; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .prize:hover { box-shadow: 0 12px 30px rgba(0,0,0,.24); }
  .btn:hover { transform: translateY(-2px); }
}
.hero-visual #glitter { opacity: .45; }
.hero-visual #money-canvas { transition: opacity 600ms ease; }
.hero-visual:has(.copy-waiting) #money-canvas { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero-visual #money-canvas { transition: none; } }

.hero-visual #money-canvas { mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 78%, transparent 96%); }
@media (min-width: 1025px) { .hero-visual #money-canvas { opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .mobile-art { translate: none !important; scale: none !important; } }

/* ==========================================================================
   Christmas lights, taken from the campaign key-visual Photoshop file.
   The strand and its bulb glows are separate layers in that file, so the wire
   is laid down once and the glows are pulsed over it to light the bulbs up.
   Inserted at the top of each section by fx.js.
   ========================================================================== */
.light-strand {
  /* Hung across the seam between two sections, so the bulbs fall into the
     padding above and below the copy rather than across it. */
  position: absolute; left: 0; right: 0; top: -74px;
  height: 148px; z-index: 4; pointer-events: none; overflow: hidden;
  background: url("../img/lights-strand.webp") repeat-x left top / auto 100%;
  -webkit-user-select: none; user-select: none;
}
.light-strand i {
  position: absolute; inset: 0; display: block;
  background-repeat: repeat-x; background-position: left top; background-size: auto 100%;
  mix-blend-mode: screen; will-change: opacity;
}
.light-strand i:nth-child(1) { background-image: url("../img/lights-glow-a.webp"); animation: strandGlowA 3.4s ease-in-out infinite; }
.light-strand i:nth-child(2) { background-image: url("../img/lights-glow-b.webp"); animation: strandGlowB 3.4s ease-in-out infinite; }
@keyframes strandGlowA { 0%, 100% { opacity: 0.45; } 45% { opacity: 1; } }
@keyframes strandGlowB { 0%, 100% { opacity: 1; } 45% { opacity: 0.45; } }

/* The hero artwork already carries this same strand, so strands start below it. */
.hero .light-strand { display: none; }

@media (max-width: 760px) { .light-strand { height: 104px; top: -52px; } }
@media (prefers-reduced-motion: reduce) {
  .light-strand i { animation: none; opacity: 0.9; }
}

/* The strip under the sticky nav uses the same strand from the key visual.
   It is cropped just above the wire, so the upward bulbs read as tucked behind
   the nav bar and only the hanging ones show. */
#navbar > .lights {
  top: 100%; height: 78px; z-index: 2; opacity: 1; overflow: hidden;
  display: block; padding: 0;
  background: url("../img/lights-nav.webp") repeat-x left top / auto 100%;
}
#navbar > .lights span { display: none; }
#navbar > .lights::before,
#navbar > .lights::after {
  content: ""; position: absolute; inset: 0; top: 0; height: 100%;
  /* The older strip rule painted a solid colour here. The nav is its own
     stacking context, so that colour could not blend away and showed as a dark
     band across the page. Clear it and draw the glows straight. */
  background-color: transparent;
  background-repeat: repeat-x; background-position: left top; background-size: auto 100%;
  mix-blend-mode: normal; will-change: opacity;
}
#navbar > .lights::before { background-image: url("../img/lights-nav-glow-a.webp"); animation: strandGlowA 3.4s ease-in-out infinite; }
#navbar > .lights::after { background-image: url("../img/lights-nav-glow-b.webp"); animation: strandGlowB 3.4s ease-in-out infinite; }
#navbar > .lights { transition: opacity 320ms ease; }
#navbar.scrolled > .lights { opacity: 0; }
@media (max-width: 760px) { #navbar > .lights { height: 54px; } }
@media (prefers-reduced-motion: reduce) {
  #navbar > .lights::before, #navbar > .lights::after { animation: none; opacity: 0.9; }
}

/* Hero prize items lift and light up under the cursor. `scale` is its own
   property, so it layers on top of the reveal animations' transforms rather
   than fighting them, and the bottom-anchored props stay planted. */
.hero-mobile__scene .mobile-art--car,
.hero-mobile__scene .mobile-art--groceries,
.hero-mobile__scene .mobile-art--cheque { transform-origin: center bottom; }
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .hero-mobile__scene .mobile-art {
    pointer-events: auto;
    transition: scale 280ms cubic-bezier(0.2, 0.7, 0.3, 1), filter 280ms ease;
  }
  .hero-mobile__scene .mobile-art:hover {
    scale: 1.07;
    z-index: 6;
    filter: drop-shadow(0 16px 20px rgba(0,25,6,0.42)) drop-shadow(0 0 22px rgba(255,210,63,0.4));
  }
  .hero-mobile__scene .mobile-art--car:hover {
    scale: 1.045;
    filter: drop-shadow(0 18px 12px rgba(0,0,0,0.55)) drop-shadow(0 0 26px rgba(255,210,63,0.34));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mobile__scene .mobile-art { transition: none; }
}

/* The grand prize is two cars, shown nose to nose as on the poster. The pair is
   wider than the single car it replaced, so the slot widens to keep the cars at
   about the same height, and the cars rise into place rather than driving in,
   since one of them faces the other way. */
@media (max-width: 1024px) {
  .hero-mobile__scene .mobile-art--car { width: 100%; left: 0; }
}
@media (min-width: 1025px) {
  .hero-mobile__scene .mobile-art--car { width: 90%; left: 5%; }
}
.hero-mobile__scene .mobile-art--car { animation: prize-reveal 900ms cubic-bezier(.2,.7,.3,1) 650ms both; }