/* =================================================================
   Hof van Hoorn — BBQ-spel
   Zomerse, speelse huisstijl. Mobile-first.
   ================================================================= */

:root{
  /* Merkkleuren (uit logo + materiaal) */
  --magenta:#e0037d;
  --magenta-dark:#b80268;
  --yellow:#ffed01;
  --amber:#fbba04;
  --purple:#9a1d82;
  --lavender:#d4b0cc;
  --sky:#35beed;
  --sky-light:#9fe3f8;
  --grass:#b0d82f;
  --grass-dark:#8cbb1f;
  --ink:#2a1430;
  --white:#fff;

  --radius:26px;
  --radius-sm:16px;
  --shadow:0 16px 40px -12px rgba(42,20,48,.45);
  --shadow-card:0 22px 48px -18px rgba(42,20,48,.55);
  --ring:0 0 0 4px rgba(255,255,255,.85);

  --font-display:"Fredoka",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html,body{margin:0;min-height:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:linear-gradient(180deg,#1aa6e0 0%,var(--sky) 38%,var(--sky-light) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* =================================================================
   DECORATIEVE ACHTERGROND
   ================================================================= */
.scene{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}

.sun{
  position:absolute;top:-120px;right:-120px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(255,237,1,.95) 0%,rgba(255,237,1,.55) 30%,rgba(255,237,1,0) 70%);
  animation:sun-pulse 6s ease-in-out infinite;
}
@keyframes sun-pulse{50%{transform:scale(1.08)}}

/* Wolken */
.cloud{position:absolute;opacity:.95;filter:drop-shadow(0 10px 14px rgba(20,80,120,.12))}
.cloud--1{top:9%;width:180px;animation:drift 46s linear infinite}
.cloud--2{top:22%;width:120px;opacity:.8;animation:drift 64s linear infinite;animation-delay:-20s}
.cloud--3{top:5%;width:90px;opacity:.7;animation:drift 80s linear infinite;animation-delay:-50s}
@keyframes drift{
  from{transform:translateX(-30vw)}
  to{transform:translateX(130vw)}
}

/* Zwevende decoratie-items */
/* Zwevende prijzen */
.floaty{position:absolute;display:block;
  filter:drop-shadow(0 12px 16px rgba(20,40,60,.25));
  animation:bob 6s ease-in-out infinite}
.floaty--p1{top:13%;left:4%;width:clamp(54px,6vw,96px);animation-duration:5.5s}
.floaty--p2{top:9%;right:4%;width:clamp(58px,7vw,108px);animation-duration:6.5s;animation-delay:-1.5s}
.floaty--p3{top:42%;left:6%;width:clamp(54px,6vw,92px);animation-duration:6s;animation-delay:-3s}
.floaty--p4{top:37%;right:6%;width:clamp(54px,6vw,92px);animation-duration:7s;animation-delay:-2s}
.floaty--p5{top:66%;left:9%;width:clamp(38px,4.5vw,68px);animation-duration:5.8s;animation-delay:-4s}
.floaty--p6{top:61%;right:9%;width:clamp(42px,5vw,78px);animation-duration:6.8s;animation-delay:-2.5s}
@keyframes bob{50%{transform:translateY(-14px) rotate(-3deg)}}

/* Grond + gras: vaste strook onderaan, effen groen erachter zodat het
   op elk schermformaat een nette grasrand blijft (geen meeschalend beeld). */
.ground{position:absolute;left:0;right:0;bottom:0;
  z-index:-2;
  height:clamp(140px,22vh,240px);
  background-color:var(--grass);
  background-image:url(../img/gras.png);
  background-repeat:repeat-x;
  background-position:center top;
  background-size:auto 100%;}
.grass{display:none}

/* BBQ + rook: staat netjes bovenop de grasstrook */
.grill{position:absolute;left:26%;bottom:clamp(80px,4vh,240px);width:clamp(120px,13vw,210px)}
.grill img{width:100%;display:block;filter:drop-shadow(0 14px 18px rgba(20,40,60,.3))}
.smoke{position:absolute;left:50%;bottom:78%;width:16px;height:16px;border-radius:50%;
  background:rgba(255,255,255,.55);opacity:0;filter:blur(3px)}
.smoke--1{animation:smoke 5s ease-out infinite}
.smoke--2{animation:smoke 5s ease-out infinite;animation-delay:1.6s;left:42%}
.smoke--3{animation:smoke 5s ease-out infinite;animation-delay:3.2s;left:58%}
@keyframes smoke{
  0%{opacity:0;transform:translateY(0) scale(.5)}
  20%{opacity:.7}
  100%{opacity:0;transform:translateY(-120px) scale(2.4)}
}

/* Koeler rechts, zelfde uitlijning (bottom/breedte) als de grill, met
   waterspettertjes die uit de bak komen. */
.cooler{position:absolute;right:26%;bottom:clamp(80px,4vh,240px);width:clamp(120px,13vw,210px)}
.cooler img{width:100%;display:block;filter:drop-shadow(0 14px 18px rgba(20,40,60,.3))}
.drop{position:absolute;bottom:74%;width:11px;height:15px;z-index:3;
  border-radius:50% 50% 50% 50%/45% 45% 60% 60%;
  background:radial-gradient(circle at 35% 28%,#eaf9ff,#22a6df 78%);
  box-shadow:0 0 5px rgba(53,190,237,.55);
  opacity:0}
.drop--1{left:34%;animation:splash 2.4s ease-out infinite;animation-delay:0s}
.drop--2{left:46%;animation:splash 2.8s ease-out infinite;animation-delay:.5s}
.drop--3{left:58%;animation:splash 2.6s ease-out infinite;animation-delay:1s}
.drop--4{left:40%;animation:splash 3s   ease-out infinite;animation-delay:1.5s}
.drop--5{left:52%;animation:splash 2.5s ease-out infinite;animation-delay:2s}
@keyframes splash{
  0%{opacity:0;transform:translate(0,0) scale(.4)}
  18%{opacity:1;transform:translate(calc(var(--dx,4px)*.4),-30px) scale(1)}
  55%{opacity:1;transform:translate(var(--dx,4px),-52px) scale(.95)}
  100%{opacity:0;transform:translate(calc(var(--dx,4px)*1.4),-14px) scale(.7)}
}
.drop--1{--dx:-14px}
.drop--2{--dx:9px}
.drop--3{--dx:16px}
.drop--4{--dx:-9px}
.drop--5{--dx:6px}

/* =================================================================
   KOPREGEL / LOGO
   ================================================================= */
.brand{position:relative;z-index:2;display:flex;justify-content:center;
  padding:22px 16px 6px}
.brand__logo{width:min(260px,62vw);height:auto;
  filter:drop-shadow(0 8px 14px rgba(42,20,48,.28));
  animation:pop .7s cubic-bezier(.18,.9,.32,1.4) both}
@keyframes pop{from{transform:scale(.7) translateY(-10px);opacity:0}}

/* =================================================================
   STAGE / SCHERMEN
   ================================================================= */
.stage{position:relative;z-index:2;max-width:880px;margin:0 auto;
  padding:8px 18px 56px;min-height:60vh}
.screen{display:none}
.screen.is-active{display:block;animation:fade-in .5s ease both}
@keyframes fade-in{from{opacity:0;transform:translateY(14px)}}

/* =================================================================
   KAARTEN
   ================================================================= */
.card{
  background:var(--white);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  padding:24px 22px;
  border:3px solid #fff;
  position:relative;
}
.card+.card{margin-top:18px}

.card--welcome{
  background:linear-gradient(150deg,var(--magenta),var(--magenta-dark));
  color:#fff;border:none;
  transform:rotate(-1.2deg);
}
.card--welcome::after{ /* speels gekarteld randje boven */
  content:"";position:absolute;inset:auto 18px -10px 18px;height:14px;border-radius:0 0 18px 18px;
  background:var(--magenta-dark);z-index:-1;
}
.card--form{transform:rotate(.6deg)}

.reveal{opacity:0;animation:rise .7s cubic-bezier(.2,.8,.25,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:translateY(0) rotate(var(--rot,0))}}
.card--welcome.reveal{transform:translateY(22px) rotate(-1.2deg)}
.card--welcome.reveal{--rot:-1.2deg}
.card--form.reveal{transform:translateY(22px) rotate(.6deg);--rot:.6deg}

.eyebrow{font-family:var(--font-display);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;margin:0;opacity:.92;font-size:.95rem}
.title{font-family:var(--font-display);font-weight:700;line-height:.92;
  margin:.1em 0 .35em;font-size:clamp(2.6rem,11vw,3.6rem);
  text-shadow:0 3px 0 rgba(0,0,0,.12)}
.lead{margin:0;font-size:1rem;line-height:1.5;font-weight:600}

/* =================================================================
   FORMULIER
   ================================================================= */
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--font-display);font-weight:600;
  margin-bottom:6px;color:var(--purple)}
.field input{
  width:100%;font:inherit;font-weight:700;
  padding:15px 16px;border-radius:var(--radius-sm);
  border:2.5px solid #ecd9e6;background:#fff8fc;color:var(--ink);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.field input::placeholder{color:#c9a9bd;font-weight:600}
.field input:focus{outline:none;border-color:var(--magenta);
  background:#fff;box-shadow:0 0 0 4px rgba(224,3,125,.14)}
#code{letter-spacing:.12em;text-transform:uppercase}
.hint{display:block;margin-top:6px;color:#9b7d8d;font-weight:600;font-size:.8rem}

.check{display:flex;gap:11px;align-items:flex-start;margin:12px 0;
  font-size:.92rem;font-weight:600;line-height:1.35;cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--magenta);cursor:pointer}
.check a{color:var(--magenta);font-weight:800}

.form-error{margin:6px 0 0;color:var(--magenta-dark);font-weight:800;font-size:.9rem}

/* =================================================================
   KNOPPEN
   ================================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;border:none;cursor:pointer;
  font-family:var(--font-display);font-weight:700;font-size:1.2rem;color:#fff;
  padding:16px 22px;border-radius:999px;margin-top:8px;
  background:linear-gradient(180deg,var(--magenta),var(--magenta-dark));
  box-shadow:0 8px 0 #7d0146,0 14px 22px -8px rgba(224,3,125,.6);
  transition:transform .08s,box-shadow .08s,filter .15s;
}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:translateY(6px);box-shadow:0 2px 0 #7d0146,0 6px 12px -6px rgba(224,3,125,.6)}
.btn svg{transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn[disabled]{opacity:.7;cursor:wait}

.btn--sun{background:linear-gradient(180deg,var(--amber),#e09a00);
  box-shadow:0 8px 0 #a06d00,0 14px 22px -8px rgba(224,154,0,.6);color:#3a2700}
.btn--sun:active{box-shadow:0 2px 0 #a06d00}
.btn--ghost{background:transparent;color:var(--magenta);box-shadow:none;
  font-size:1rem;text-decoration:underline;margin-top:14px;padding:8px}
.btn--ghost:active{transform:none}

/* =================================================================
   SCHERM 2 — SPANNINGSOPBOUW
   ================================================================= */
.screen--suspense{min-height:56vh;display:none;place-items:center}
.screen--suspense.is-active{display:grid}
.suspense{text-align:center;color:#fff;padding:20px}

.grill-cook{position:relative;width:160px;height:120px;margin:0 auto 22px;
  display:grid;place-items:center}
.heat{position:absolute;inset:auto 0 0;height:60px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,180,0,.7),rgba(255,80,0,0) 70%);
  filter:blur(6px);animation:heat 1.1s ease-in-out infinite alternate}
@keyframes heat{from{transform:scaleY(.7);opacity:.6}to{transform:scaleY(1.15);opacity:1}}
.coals{display:flex;gap:8px;z-index:1}
.coals span{width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#ffd23f,#ff6a00 55%,#b22a00);
  box-shadow:0 0 18px 4px rgba(255,120,0,.7);
  animation:ember 1.4s ease-in-out infinite}
.coals span:nth-child(2){animation-delay:.2s}
.coals span:nth-child(3){animation-delay:.4s}
.coals span:nth-child(4){animation-delay:.6s}
.coals span:nth-child(5){animation-delay:.8s}
@keyframes ember{50%{filter:brightness(1.4);transform:translateY(-3px)}}

.suspense__title{font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.8rem,7vw,2.4rem);margin:0;text-shadow:0 3px 0 rgba(0,0,0,.15);
  animation:wiggle 1.4s ease-in-out infinite}
@keyframes wiggle{25%{transform:rotate(-1.5deg)}75%{transform:rotate(1.5deg)}}
.suspense__sub{font-weight:700;font-size:1.05rem;margin:.4em 0 0;opacity:.95;transition:opacity .2s}

.sizzle{display:flex;gap:9px;justify-content:center;margin-top:20px}
.sizzle span{width:14px;height:14px;border-radius:50%;background:#fff;
  animation:sizzle .9s ease-in-out infinite}
.sizzle span:nth-child(2){animation-delay:.15s}
.sizzle span:nth-child(3){animation-delay:.3s}
@keyframes sizzle{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(-12px);opacity:1}}

/* =================================================================
   SCHERM 3 — UITSLAG
   ================================================================= */
.card--result{text-align:center;overflow:hidden}
.result-emoji{font-size:3.4rem;line-height:1;display:block;animation:pop .6s cubic-bezier(.18,.9,.32,1.4) both}
.result-head{font-family:var(--font-display);font-weight:700;
  font-size:clamp(2rem,9vw,2.7rem);margin:.15em 0 .1em;color:var(--magenta)}
.result-text{font-weight:700;font-size:1.02rem;line-height:1.5;margin:.2em auto 0;max-width:30ch}
.prize-name{font-family:var(--font-display);font-weight:700;color:var(--purple);
  font-size:1.5rem;margin:.6em 0 .3em}
.prize-img{width:min(230px,70%);height:auto;margin:6px auto 4px;display:block;
  filter:drop-shadow(0 16px 22px rgba(42,20,48,.3));
  animation:float-in .7s cubic-bezier(.2,.8,.25,1) both}
@keyframes float-in{from{opacity:0;transform:translateY(20px) scale(.9)}}

.result-head--lose{color:var(--purple)}

/* Kortingen kiezen */
.kies-titel{font-family:var(--font-display);font-weight:700;color:var(--magenta);
  font-size:1.35rem;margin:.2em 0 .1em}
.kies-sub{font-weight:700;margin:0 0 16px;color:var(--ink)}
.discounts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:4px 0 6px}
.discount{
  appearance:none;border:3px solid #f0e2ec;background:#fff8fc;cursor:pointer;
  border-radius:var(--radius-sm);padding:14px 10px;text-align:center;
  font:inherit;color:var(--ink);transition:transform .12s,border-color .12s,box-shadow .12s;
}
.discount:hover{transform:translateY(-3px)}
.discount.is-picked,.discount:focus-visible{outline:none;border-color:var(--magenta);
  box-shadow:0 0 0 4px rgba(224,3,125,.16)}
.discount img{width:100%;max-width:200px;height:auto;object-fit:contain;margin:0 auto 8px;display:block}
.discount .d-name{font-family:var(--font-display);font-weight:600;display:block;line-height:1.15}
.discount .d-desc{font-size:.78rem;font-weight:700;color:#8a6f7d;display:block;margin-top:3px}

@media (max-width:360px){.discounts{grid-template-columns:1fr}}

/* =================================================================
   CONFETTI
   ================================================================= */
#confetti{position:fixed;inset:0;width:100%;height:100%;z-index:50;
  pointer-events:none;display:none}
#confetti.is-on{display:block}

/* =================================================================
   GROTERE SCHERMEN
   ================================================================= */
@media (min-width:760px){
  .brand{padding-top:30px}
  .screen--intro{display:none;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
  .screen--intro.is-active{display:grid}
  .card+.card{margin-top:0}
}

/* Op smalle (telefoon)schermen minder zwevende prijzen, om de kaarten
   niet te overladen — de bovenste twee blijven naast het logo zichtbaar. */
@media (max-width:760px){
  .floaty--p3,.floaty--p4,.floaty--p5,.floaty--p6{display:none}
  .floaty--p1{top:11%;left:3%;width:60px}
  .floaty--p2{top:8%;right:3%;width:64px}
}

/* =================================================================
   TOEGANKELIJKHEID — bewegingsvoorkeur
   ================================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1}
}