/* Fonts: Poppins + Playfair Display */
:root{
  --saffron:#ff9933;
  --maroon:#6b1e1e;
  --gold:#c9a227;
  --green:#138808;
  --cream:#fff9f0;
  --ink:#1b1b1b;
  --muted:#7a6d6d;
  --shadow: 0 10px 30px rgba(0,0,0,.15);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg, #fffaf2, #ffe7c7 60%, #fff1d8);
  overflow-x:hidden;
}

#bg-pattern{
  position:fixed; inset:0; pointer-events:none; opacity:.25;
  background-image: radial-gradient(circle at 10% 20%, rgba(201,162,39,.25) 0 2px, transparent 3px),
                    radial-gradient(circle at 80% 30%, rgba(19,136,8,.18) 0 2px, transparent 3px),
                    radial-gradient(circle at 30% 80%, rgba(107,30,30,.18) 0 2px, transparent 3px);
  background-size: 120px 120px, 160px 160px, 140px 140px;
  animation: drift 30s linear infinite;
}

@keyframes drift{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(2%, -2%,0)}100%{transform:translate3d(0,0,0)}}

.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; position:sticky; top:0; z-index:10; backdrop-filter:saturate(140%) blur(6px);
}
.brand{display:flex; align-items:center; gap:12px}
.logo-mark{font-size:28px}
.brand h1{margin:0; font-family:"Playfair Display", serif; font-size:28px; letter-spacing:.5px}
.brand h1 span{color:var(--maroon)}
.tagline{margin:2px 0 0; color:var(--muted); font-size:12px}

.audio-toggle{
  border:1px solid rgba(0,0,0,.08); background:#fff; color:#333; border-radius:999px; padding:8px 14px; cursor:pointer;
  display:flex; align-items:center; gap:8px; box-shadow:var(--shadow); transition:transform .15s ease, background .2s ease;
}
.audio-toggle:hover{transform:translateY(-2px)}
.audio-toggle[aria-pressed="true"]{background:linear-gradient(90deg, var(--gold), #ffd36b); color:#4a3a00}

.hero{min-height:72vh; display:grid; place-items:center; padding:32px 20px; position:relative}
.hero-content{max-width:920px; text-align:center}
.hero-title{font-family:"Playfair Display", serif; font-size: clamp(28px, 5vw, 56px); margin:8px 0 12px; color:#3b2a00}
.hero-subtext{font-size:clamp(14px, 2.4vw, 18px); color:#4b3f3f; margin:0 auto 18px; max-width:720px}

.animated-text{display:inline-block; white-space:nowrap; background:linear-gradient(90deg,var(--maroon),var(--saffron)); -webkit-background-clip:text; background-clip:text; color:transparent; animation: shimmer 4s ease-in-out infinite}
@keyframes shimmer{0%{filter:drop-shadow(0 4px 8px rgba(255,153,51,.25))}50%{filter:drop-shadow(0 10px 22px rgba(255,153,51,.45))}100%{filter:drop-shadow(0 4px 8px rgba(255,153,51,.25))}}

.countdown{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; background:#fff; border-radius:16px; box-shadow:var(--shadow); margin:8px 0 6px}
.countdown .time{display:flex; flex-direction:column; align-items:center; min-width:68px}
.countdown .time span{font-size:28px; font-weight:700}
.countdown .time small{font-size:12px; color:var(--muted)}
.countdown .sep{font-weight:700; color:var(--maroon)}
.countdown-msg{color:#6b4a00; margin:6px 0 16px}

.subscribe{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:8px 0}
.subscribe input{padding:12px 14px; min-width:260px; border-radius:12px; border:1px solid #e7d7b3; outline:none; box-shadow:inset 0 2px 6px rgba(0,0,0,.04)}
.subscribe input:focus{border-color:var(--gold)}
.btn.primary{background:linear-gradient(90deg,var(--saffron),#ffd08a); color:#3b1a00; border:none; padding:12px 16px; border-radius:12px; cursor:pointer; font-weight:600; box-shadow:var(--shadow); transition:transform .15s ease, filter .2s ease}
.btn.primary:hover{transform:translateY(-2px); filter:brightness(1.05)}
.form-message{height:18px; width:100%; text-align:center; color:var(--maroon); font-size:14px}
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.floating-illustrations{position:relative; height:120px; margin:8px 0 2px}
.sweet{position:absolute; filter: drop-shadow(0 10px 14px rgba(0,0,0,.12)); transition: transform .2s ease, filter .2s ease}
.sweet-laddoo{left:12%; animation:floatY 7s ease-in-out infinite}
.sweet-barfi{right:16%; animation:floatY 6s 1.2s ease-in-out infinite}
.sweet-samosa{left:46%; animation:floatY 8s .6s ease-in-out infinite}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.sweet:hover{transform:translateY(-6px) rotate(-2deg); filter:brightness(1.08)}

.quiz{margin:10px auto 0; max-width:560px; background:#fff; padding:14px; border-radius:14px; box-shadow:var(--shadow)}
.quiz label{display:block; font-weight:600; margin:0 0 8px}
.quiz input[type="range"]{width:100%}
.quiz .emoji-output{font-size:28px; margin-top:8px}
.choices{display:flex; justify-content:space-between; font-size:18px; color:#aa8a3a}

.social{position:fixed; left:16px; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:10}
.social-link{background:#fff; border-radius:999px; padding:10px 12px; text-decoration:none; color:#222; box-shadow:var(--shadow); font-weight:700; letter-spacing:.5px; transform:translateZ(0); transition: transform .15s ease, background .2s ease}
.social-link:hover{transform:translateY(-2px)}
.social-link.ig:hover{background:linear-gradient(90deg,#f58529,#dd2a7b,#8134af,#515bd4); color:#fff}
.social-link.fb:hover{background:#1877f2; color:#fff}
.social-link.yt:hover{background:#ff0000; color:#fff}

.whatsapp-fab{position:fixed; right:18px; bottom:18px; background:#25D366; color:#fff; text-decoration:none; border-radius:999px; padding:12px 16px; box-shadow:var(--shadow); font-weight:700; transition:transform .15s ease, filter .2s ease}
.whatsapp-fab:hover{transform:translateY(-2px); filter:brightness(1.05)}

.site-footer{padding:20px; text-align:center; color:#6b4a00}

/* Parallax: subtle scroll speed difference */
main{perspective:1px; transform-style:preserve-3d}
.hero{transform:translateZ(-0.3px) scale(1.3)}

/* Responsive */
@media (max-width:600px){
  .countdown .time{min-width:54px}
  .social{left:10px}
  .whatsapp-fab{right:10px}
  .hero{min-height:68vh}
}