/* ==========================================================================
   Home page extras — highlighted glitter button + end-to-end scratch card.
   Loaded only by index.html, after css/style.css.
   ========================================================================== */

@keyframes glow-pulse{
  0%,100%{ box-shadow:5px 7px 0 var(--navy), 0 0 0 0 rgba(255,159,28,.55); }
  50%{ box-shadow:5px 7px 0 var(--navy), 0 0 0 12px rgba(255,159,28,0); }
}
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-2deg); } 50%{ transform:translateY(-7px) rotate(2deg); } }
@keyframes nudge{ 0%,100%{ transform:translateY(-3px); } 50%{ transform:translateY(5px); } }
@keyframes ring{ 0%,100%{ opacity:.3; } 50%{ opacity:.95; } }
@keyframes rays{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes twinkle{ 0%,100%{ transform:scale(.55) rotate(0); opacity:.35; } 50%{ transform:scale(1.25) rotate(45deg); opacity:1; } }
@keyframes prize-pop{ 0%{ transform:scale(.8); opacity:0; } 60%{ transform:scale(1.06); opacity:1; } 100%{ transform:scale(1); opacity:1; } }

.btn-row{ display:flex; gap:16px; flex-wrap:wrap; align-self:flex-start; }

/* highlighted button: glowing ring while idle, lifts and lights up on hover */
.btn-glitter{
  position:relative;
  background:linear-gradient(110deg, var(--accent) 0%, #FFD08A 45%, var(--accent) 100%);
  background-size:220% 100%;
  animation:glow-pulse 2.4s ease-out infinite;
  transition:transform .2s cubic-bezier(.3,1.8,.5,1), background-position .6s ease, filter .2s;
}
.btn-glitter:hover,
.btn-glitter:focus-visible{
  animation:none; background-position:100% 0;
  transform:translateY(-3px) scale(1.06) rotate(-1.5deg);
  filter:saturate(1.15) brightness(1.04);
  box-shadow:5px 7px 0 var(--navy), 0 0 0 7px rgba(255,208,138,.55), 0 0 30px 8px rgba(255,159,28,.55);
}

/* "a whole week" block: padding collapses on small screens so nothing spills sideways */
.inside-box{ padding:88px 72px; }
@media (max-width: 980px){
  .inside-box{ padding:56px 24px; gap:40px !important; }
  .inside-box-media img{ height:300px !important; }
  .inside-box .tag{ left:8px !important; }
}

/* scratch-to-reveal strip, edge to edge */
.scratch{ position:relative; padding:80px 0 124px; }
.scratch-head{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:0 24px 36px; }
.scratch-pill{
  padding:9px 20px; border-radius:22px; background:var(--accent); border:3px solid var(--navy);
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:16px; letter-spacing:1px; text-transform:uppercase;
  box-shadow:4px 5px 0 var(--navy); animation:bob 1.8s ease-in-out infinite;
}
.scratch-title{ font-weight:700; font-size:clamp(30px,4.2vw,56px); line-height:1.08; letter-spacing:-.8px; max-width:900px; }
.scratch-sub{ margin:0; font-family:'Fredoka',sans-serif; font-weight:600; font-size:20px; color:var(--pink); display:flex; align-items:center; gap:12px; }
.scratch-sub .arrow{ display:inline-block; font-size:26px; line-height:1; animation:nudge 1s ease-in-out infinite; }
.scratch-card{
  position:relative; width:100%; min-height:340px; overflow:hidden; display:flex; align-items:stretch;
  border-top:4px solid var(--navy); border-bottom:4px solid var(--navy); outline-offset:-10px;
}
.scratch-prize{
  position:relative; z-index:1; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:16px; padding:64px 24px;
  background:linear-gradient(100deg, #FFD08A, #FFE3A8 35%, #F6DCE4 68%, #BBD9F2);
}
.scratch-prize::before{
  content:""; position:absolute; z-index:-1; left:50%; top:50%; width:240%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(rgba(255,255,255,.4) 0 9deg, transparent 9deg 18deg);
  animation:rays 50s linear infinite;
}
.scratch-eyebrow{
  margin:0; font-family:'Fredoka',sans-serif; font-weight:700; font-size:22px; letter-spacing:2px;
  text-transform:uppercase; color:var(--pink);
}
.scratch-prize h3{
  font-weight:700; font-size:clamp(30px,4.2vw,56px); line-height:1.08; letter-spacing:-.8px; max-width:900px; color:var(--navy);
}
.scratch-card canvas{
  position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block;
  touch-action:pan-y; transition:opacity .8s ease;
}
.scratch-card:not(.revealed)::after{
  content:""; position:absolute; inset:12px; z-index:3; pointer-events:none;
  border:4px dashed rgba(22,34,74,.6); border-radius:22px; animation:ring 1.8s ease-in-out infinite;
}
.scratch-coin{
  position:absolute; left:0; top:0; z-index:4; width:56px; height:56px; border-radius:50%; pointer-events:none;
  display:grid; place-items:center; font-family:'Fredoka',sans-serif; font-weight:700; font-size:26px; color:var(--navy);
  background:radial-gradient(circle at 30% 28%, #fff6bf, #ffc93c 55%, #e29a00);
  border:3px solid var(--navy); box-shadow:3px 4px 0 var(--navy); opacity:0; transition:opacity .25s ease;
}
.scratch-card.revealed .scratch-coin,
.scratch-card.touched .scratch-coin{ display:none; }
.scratch-card.revealed canvas{ opacity:0; pointer-events:none; }
.scratch-card.revealed .scratch-prize h3,
.scratch-card.revealed .scratch-eyebrow{ animation:prize-pop .7s cubic-bezier(.3,1.5,.5,1) both; }
.scratch-card:not(.revealed) .scratch-cta{ pointer-events:none; }
.scratch .spark{
  position:absolute; color:#fff; font-size:28px; line-height:1; pointer-events:none;
  text-shadow:0 0 10px rgba(255,159,28,.95), 0 0 2px rgba(255,159,28,.9); animation:twinkle 2.6s ease-in-out infinite;
}

@media (max-width: 480px){
  .btn-row{ gap:12px; width:100%; }
  .btn-row .btn{ flex:1 1 0; min-width:0; padding:0 14px; font-size:16px !important; height:54px !important; }
}
@media (max-width: 640px){
  .scratch-card{ min-height:320px; }
  .scratch-prize{ padding:48px 20px; }
  .scratch-eyebrow{ font-size:18px; }
  .scratch{ padding:60px 0 100px; }
  .scratch-head{ padding-bottom:28px; }
  .scratch-sub{ font-size:17px; }
  .scratch-coin{ width:44px; height:44px; font-size:20px; }
}
@media (prefers-reduced-motion: reduce){
  .btn-glitter,.scratch-prize::before,.scratch .spark,.scratch-pill,.scratch-sub .arrow,.scratch-card::after,.edge svg{ animation:none !important; }
}

/* ==========================================================================
   Blended section bands. Each band paints its own animated edge (wave,
   scalloped awning or ticket zigzag) up over the section above it.
   ========================================================================== */
@keyframes edge-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

.band{ position:relative; background-color:var(--band); }
.band.dots{ background-image:radial-gradient(rgba(22,34,74,.08) 2.2px, transparent 2.7px); background-size:30px 30px; }
.band-navy.dots{ background-image:radial-gradient(rgba(255,255,255,.07) 2.2px, transparent 2.7px); }

.edge{
  position:absolute; left:0; right:0; bottom:calc(100% - 1px); height:var(--edge-h,84px);
  overflow:hidden; pointer-events:none; color:var(--band); z-index:2;
}
.edge svg{ position:absolute; left:0; bottom:0; width:200%; height:100%; animation:edge-slide 16s linear infinite; }
.edge svg.e-deep{ color:var(--deep); opacity:.6; bottom:7px; animation-duration:24s; animation-direction:reverse; }
.edge[data-edge="scallop"] svg{ animation-duration:40s; }
.edge[data-edge="zigzag"] svg{ animation-duration:30s; }
.edge.edge-end{ top:auto; bottom:-1px; color:var(--cream); }

/* the navy trust strip now carries its own wave on top and leaves room for the awning below */
@media (min-width: 981px){
  .trust-strip{ height:auto; min-height:104px; align-items:flex-start; padding:30px 72px 70px; }
}
@media (max-width: 980px){
  .trust-strip{ padding:24px 24px 72px; }
  .edge{ height:calc(var(--edge-h,84px) * .72); }
}

.band-cream{ padding-bottom:128px; }
.band-peach{ padding:40px 0 116px; }
.band-peach .inside-box{ padding-top:56px; padding-bottom:56px; }

/* offer band: full-bleed navy with a wavy cream bottom into the footer */
.cta-full{ padding:0; }
.cta-full .cta-band{
  margin:0 auto; max-width:1440px; background:transparent; border-radius:0;
  padding:104px 72px 128px;
}
@media (max-width: 980px){
  .cta-full .cta-band{ margin:0 auto; padding:84px 24px 108px; }
}

/* the cream wave already separates the footer from the offer band */
.site-footer{ border-top-color:transparent; }