/* ============================================================
   Shivanya Event & Wedding Organiser
   Palette pulled from the Sewo flame mark: deep wine, marigold,
   magenta and a purple undertone, on a warm cream field.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Poppins:wght@300;400;500;600;700&family=Noto+Serif+Devanagari:wght@500;700&display=swap');

:root{
  --wine-950:#2b0713;
  --wine-900:#3b0a1e;
  --wine-800:#5c1230;
  --wine-700:#7a1a3b;
  --marigold-500:#e8a93c;
  --marigold-300:#f4c860;
  --marigold-100:#fbe8bd;
  --magenta-600:#c9184a;
  --magenta-500:#e14d78;
  --purple-800:#3d1740;
  --cream-100:#fbf3e7;
  --cream-50:#fffaf2;
  --ink:#241016;
  --line: rgba(43,7,19,0.14);

  --serif: 'Cormorant Garamond', 'Noto Serif Devanagari', serif;
  --sans: 'Poppins', 'Noto Serif Devanagari', sans-serif;

  --shadow-soft: 0 18px 40px rgba(43,7,19,0.16);
  --shadow-deep: 0 30px 70px rgba(43,7,19,0.35);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--cream-100);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }

.container{ width:min(1180px, 92%); margin:0 auto; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  margin:0;
  color:var(--wine-900);
}
.hindi{ font-family:'Noto Serif Devanagari', serif; }

.eyebrow{
  font-family:var(--sans);
  font-size:.8rem;
  color:var(--magenta-600);
  letter-spacing:.02em;
  margin:0 0 .6rem;
  font-weight:600;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- top notice ticker ---------- */
.notice-bar{
  background:var(--wine-950);
  color:var(--marigold-300);
  font-size:.85rem;
  padding:.5rem 0;
  overflow:hidden;
  white-space:nowrap;
  position:relative;
}
.notice-track{
  display:inline-block;
  padding-left:100%;
  animation:ticker 28s linear infinite;
}
.notice-track span{ margin-right:3.5rem; }
@keyframes ticker{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}

/* ---------- header ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,243,231,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem 0;
}
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand img{ height:46px; width:46px; object-fit:contain; mix-blend-mode:multiply; }
.brand-text .name{ font-family:var(--serif); font-size:1.35rem; font-weight:700; color:var(--wine-900); line-height:1; }
.brand-text .tag{ font-size:.68rem; color:var(--wine-700); letter-spacing:.05em; }

nav.main-nav ul{ display:flex; gap:1.7rem; }
nav.main-nav a{
  font-size:.92rem; font-weight:500; color:var(--ink);
  position:relative; padding:.2rem 0;
}
nav.main-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:2px; width:0;
  background:var(--magenta-600); transition:width .25s ease;
}
nav.main-nav a:hover::after{ width:100%; }

.header-cta{ display:flex; align-items:center; gap:.8rem; }
.btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.65rem 1.35rem;
  border-radius:2px;
  font-weight:600; font-size:.88rem;
  border:1px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primary{
  background:linear-gradient(135deg, var(--magenta-600), var(--wine-700));
  color:var(--cream-50);
  box-shadow:var(--shadow-soft);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-deep); }
.btn-ghost{
  border-color:var(--wine-800); color:var(--wine-900); background:transparent;
}
.btn-ghost:hover{ background:var(--wine-900); color:var(--cream-50); }
.btn-small{ padding:.45rem .9rem; font-size:.78rem; }

.nav-toggle{ display:none; }

/* ================= HERO — the fully-3D moment ================= */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:center;
  background:
    radial-gradient(ellipse at 20% -10%, rgba(232,169,60,.35), transparent 55%),
    radial-gradient(ellipse at 100% 10%, rgba(201,24,74,.28), transparent 50%),
    linear-gradient(180deg, var(--wine-950), var(--wine-900) 55%, var(--purple-800));
  overflow:hidden;
  perspective:1400px;
}
.hero-stage{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  pointer-events:none;
}
.hero-layer{
  position:absolute;
  border-radius:10px;
  box-shadow:0 25px 60px rgba(0,0,0,.45);
  overflow:hidden;
  will-change:transform;
  transition:transform .12s ease-out;
}
.hero-layer img{ width:100%; height:100%; object-fit:cover; }

.hero-layer.l1{ top:8%;  left:4%;  width:230px; height:300px; transform:translateZ(40px) rotate(-6deg); }
.hero-layer.l2{ top:56%; left:1%;  width:190px; height:150px; transform:translateZ(90px) rotate(4deg); }
.hero-layer.l3{ top:4%;  right:6%; width:210px; height:260px; transform:translateZ(70px) rotate(5deg); }
.hero-layer.l4{ bottom:6%; right:3%; width:250px; height:190px; transform:translateZ(30px) rotate(-4deg); }
.hero-layer.l5{ top:38%; left:50%; width:130px; height:130px; transform:translateZ(120px) translateX(-260px) rotate(-3deg); border-radius:50%; display:none; }

.hero-glow{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 35%, rgba(244,200,96,.25), transparent 45%);
  transform:translateZ(10px);
}

.hero-petal{
  position:absolute;
  width:14px; height:14px;
  background:var(--marigold-300);
  border-radius:0 60% 0 60%;
  opacity:.75;
  animation:drift 11s linear infinite;
}
@keyframes drift{
  0%{ transform:translateY(-10vh) translateX(0) rotate(0); opacity:0; }
  10%{ opacity:.8; }
  100%{ transform:translateY(110vh) translateX(40px) rotate(360deg); opacity:0; }
}

.hero-content{
  position:relative; z-index:5;
  text-align:center;
  margin:0 auto;
  transform-style:preserve-3d;
  width:min(760px, 92%);
  padding:0 1rem;
}
.hero-content .hindi-line{
  font-family:'Noto Serif Devanagari', serif;
  color:var(--marigold-300);
  font-size:1.15rem;
  letter-spacing:.03em;
  margin-bottom:1rem;
  transform:translateZ(60px);
}
.hero-content h1{
  color:var(--cream-50);
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.05;
  transform:translateZ(80px);
  text-shadow:0 20px 40px rgba(0,0,0,.35);
}
.hero-content h1 em{
  font-style:italic;
  background:linear-gradient(90deg, var(--marigold-300), var(--magenta-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-content p{
  color:rgba(251,243,231,.85);
  font-size:1.08rem;
  max-width:520px; margin:1.1rem auto 0;
  transform:translateZ(50px);
}
.hero-actions{
  display:flex; gap:1rem; justify-content:center; margin-top:2.1rem;
  transform:translateZ(70px);
}

.hero-scroll{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  color:var(--marigold-300); font-size:.75rem; letter-spacing:.15em;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  z-index:5;
}
.hero-scroll span{
  width:1px; height:34px; background:linear-gradient(var(--marigold-300), transparent);
  animation:scrollpulse 1.8s ease-in-out infinite;
}
@keyframes scrollpulse{ 0%,100%{ opacity:.3; } 50%{ opacity:1; } }

/* ================= SECTION SHELL ================= */
section{ padding:5.5rem 0; position:relative; }
.section-head{ max-width:640px; margin:0 auto 3rem; text-align:center; }
.section-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); }
.section-head p{ color:#5a4046; margin-top:.7rem; }

.divider-mark{
  width:60px; height:2px; margin:1rem auto 0;
  background:linear-gradient(90deg, transparent, var(--magenta-600), transparent);
}

/* ================= SERVICES (two pillars) ================= */
.services-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:2rem;
  perspective:1600px;
}
.service-card{
  background:var(--cream-50);
  border:1px solid var(--line);
  border-radius:6px;
  padding:2.6rem 2.2rem;
  transform-style:preserve-3d;
  transition:transform .35s ease, box-shadow .35s ease;
  box-shadow:var(--shadow-soft);
  position:relative;
  overflow:hidden;
}
.service-card::before{
  content:"";
  position:absolute; top:-40%; right:-20%; width:220px; height:220px;
  background:radial-gradient(circle, rgba(232,169,60,.25), transparent 70%);
}
.service-card:hover{ box-shadow:var(--shadow-deep); }
.service-card .num{
  font-family:var(--serif); font-size:.95rem; color:var(--magenta-600);
  border:1px solid var(--magenta-600); border-radius:50%;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  margin-bottom:1.3rem;
}
.service-card h3{ font-size:1.7rem; margin-bottom:.6rem; }
.service-card p{ color:#5a4046; margin-bottom:1.4rem; }
.service-card ul{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.6rem; }
.service-card ul li{
  font-size:.78rem; background:var(--marigold-100); color:var(--wine-800);
  padding:.32rem .7rem; border-radius:20px; font-weight:500;
}

/* ================= CATEGORY / PACKAGE CARDS ================= */
.filter-row{
  display:flex; justify-content:center; gap:.7rem; margin-bottom:2.6rem; flex-wrap:wrap;
}
.filter-chip{
  padding:.5rem 1.15rem; border-radius:20px; border:1px solid var(--wine-800);
  font-size:.82rem; font-weight:600; color:var(--wine-800); background:transparent;
  transition:all .2s ease;
}
.filter-chip.active, .filter-chip:hover{
  background:var(--wine-900); color:var(--cream-50); border-color:var(--wine-900);
}

.category-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr));
  gap:1.6rem;
  perspective:1500px;
}
.cat-card{
  background:var(--cream-50);
  border:1px solid var(--line);
  border-radius:6px;
  padding:1.6rem 1.5rem;
  transform-style:preserve-3d;
  transition:transform .18s ease-out, box-shadow .18s ease-out;
  box-shadow:0 8px 20px rgba(43,7,19,0.08);
}
.cat-card:hover{ box-shadow:var(--shadow-deep); }
.cat-card .group-tag{ font-size:.7rem; color:var(--magenta-600); font-weight:600; letter-spacing:.02em; }
.cat-card h4{ font-size:1.22rem; margin:.4rem 0 .5rem; }
.cat-card p{ font-size:.87rem; color:#5a4046; margin-bottom:1rem; min-height:2.6em; }
.cat-card .price-row{
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px dashed var(--line); padding-top:.9rem;
}
.cat-card .price{ font-family:var(--serif); font-size:1.15rem; color:var(--wine-900); font-weight:700; }
.cat-card .price small{ font-family:var(--sans); font-size:.68rem; color:#8a6b70; font-weight:500; }

/* ================= BROCHURE SECTIONS (flip cards) ================= */
.brochure-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.6rem;
  perspective:1600px;
}
.flip-card{ height:260px; perspective:1200px; display:block; }
.flip-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.flip-card:hover .flip-inner{ transform:rotateY(180deg); }
.flip-face{
  position:absolute; inset:0;
  border-radius:8px;
  backface-visibility:hidden;
  padding:1.7rem;
  display:flex; flex-direction:column;
}
.flip-front{
  background:linear-gradient(160deg, var(--wine-900), var(--purple-800));
  color:var(--cream-50);
  justify-content:center; align-items:flex-start;
  box-shadow:var(--shadow-soft);
}
.flip-front h3{ color:var(--marigold-300); font-size:1.7rem; }
.flip-front .hint{ margin-top:.8rem; font-size:.78rem; color:rgba(251,243,231,.65); }
.flip-back{
  background:var(--cream-50);
  border:1px solid var(--line);
  transform:rotateY(180deg);
  justify-content:space-between;
  box-shadow:var(--shadow-soft);
}
.flip-back ul{ overflow-y:auto; }
.flip-back ul li{
  font-size:.85rem; color:var(--ink); padding:.28rem 0;
  border-bottom:1px dotted var(--line);
}
.flip-back ul li:last-child{ border-bottom:none; }
.flip-open-btn{ margin-top:.7rem; align-self:flex-start; }

/* ================= GALLERY (3D tilt) ================= */
.gallery-grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1.3rem;
  perspective:1800px;
}
.gallery-item{
  border-radius:6px; overflow:hidden; position:relative;
  box-shadow:var(--shadow-soft);
  transform-style:preserve-3d;
  transition:transform .15s ease-out, box-shadow .15s ease-out;
  aspect-ratio:4/5;
}
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding:.8rem 1rem;
  font-size:.8rem; color:var(--cream-50);
  background:linear-gradient(0deg, rgba(43,7,19,.85), transparent);
}

/* ================= VIDEO — cinematic 3D panel ================= */
.video-wrap{
  max-width:860px; margin:0 auto;
  perspective:1600px;
}
.video-frame{
  position:relative;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:var(--wine-950);
  box-shadow:var(--shadow-deep);
  border:7px solid var(--cream-50);
  transform-style:preserve-3d;
  transform:rotateY(22deg) translateZ(-80px);
  opacity:0;
  transition:opacity 1s ease, transform 1s cubic-bezier(.2,.8,.2,1);
}
.video-frame.revealed{ opacity:1; transform:rotateY(0) rotateX(0) translateZ(0); }
.video-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  pointer-events:none; /* lets the frame div receive mousemove for the tilt effect */
}
.video-frame .frame-veil{
  position:absolute; inset:0;
  box-shadow: inset 0 0 0 1px rgba(244,200,96,.25);
  pointer-events:none;
}
.video-frame .frame-badge{
  position:absolute; top:1rem; left:1rem; z-index:5;
  display:flex; align-items:center; gap:.45rem;
  background:rgba(43,7,19,.55); backdrop-filter:blur(6px);
  color:var(--marigold-300); font-size:.72rem; font-weight:600; letter-spacing:.03em;
  padding:.4rem .75rem; border-radius:20px;
  border:1px solid rgba(244,200,96,.3);
}
.frame-badge .dot{
  width:7px; height:7px; border-radius:50%; background:var(--magenta-500);
  animation:pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot{ 0%,100%{ opacity:.4; transform:scale(.85); } 50%{ opacity:1; transform:scale(1.1); } }

.sound-toggle{
  position:absolute; right:1rem; bottom:1rem; z-index:5; pointer-events:auto;
  width:48px; height:48px; border-radius:50%;
  background:rgba(43,7,19,.65); backdrop-filter:blur(6px);
  color:var(--marigold-300); border:1px solid rgba(244,200,96,.4);
  font-size:1.2rem; display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease, background .2s ease;
}
.sound-toggle:hover{ transform:scale(1.08); background:var(--wine-900); }

.video-petal-host{ position:absolute; inset:-10%; pointer-events:none; z-index:1; overflow:hidden; }

/* ================= BOOKING FORM ================= */
.booking-section{
  background:linear-gradient(180deg, var(--purple-800), var(--wine-950));
  color:var(--cream-50);
}
.booking-section .section-head h2{ color:var(--cream-50); }
.booking-section .section-head p{ color:rgba(251,243,231,.75); }

.booking-shell{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:0;
  background:var(--cream-50);
  border-radius:10px; overflow:hidden;
  box-shadow:var(--shadow-deep);
  color:var(--ink);
}
.booking-info{
  background:radial-gradient(circle at 30% 20%, rgba(232,169,60,.35), transparent 60%),
             linear-gradient(160deg, var(--wine-900), var(--purple-800));
  color:var(--cream-50);
  padding:2.6rem 2.2rem;
}
.booking-info h3{ color:var(--marigold-300); font-size:1.6rem; margin-bottom:1rem; }
.booking-info li{ display:flex; gap:.6rem; padding:.5rem 0; font-size:.9rem; border-bottom:1px solid rgba(251,243,231,.12); }
.booking-info .min-note{
  margin-top:1.6rem; padding:.9rem 1rem; border:1px dashed rgba(244,200,96,.5); border-radius:6px;
  font-size:.82rem; color:var(--marigold-300);
}
.booking-form{ padding:2.6rem 2.2rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.8rem; font-weight:600; margin-bottom:.35rem; color:var(--wine-900); }
.field input, .field select, .field textarea{
  width:100%; padding:.72rem .85rem; border:1px solid var(--line); border-radius:5px;
  font-family:var(--sans); font-size:.92rem; background:var(--cream-100);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--magenta-600); box-shadow:0 0 0 3px rgba(201,24,74,.12);
}
.field textarea{ resize:vertical; min-height:90px; }
.form-note{ font-size:.78rem; color:#8a6b70; margin-top:.6rem; }
.form-status{ margin-top:1rem; font-size:.86rem; font-weight:600; }
.form-status.ok{ color:#1a7a3c; }
.form-status.err{ color:var(--magenta-600); }

/* ================= WHY US / STRIP ================= */
.why-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.why-item{ text-align:center; padding:1.2rem; }
.why-item .fig{ font-family:var(--serif); font-size:2.4rem; color:var(--magenta-600); font-weight:700; }
.why-item p{ font-size:.85rem; color:#5a4046; margin-top:.4rem; }

/* ================= FOOTER ================= */
footer{
  background:var(--wine-950); color:rgba(251,243,231,.8);
  padding:3.5rem 0 1.6rem;
}
.footer-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:2rem; }
.footer-grid h4{ color:var(--marigold-300); font-size:1.05rem; margin-bottom:.9rem; }
.footer-grid p, .footer-grid a{ font-size:.85rem; color:rgba(251,243,231,.72); }
.footer-brand{ display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; }
.footer-brand img{ height:38px; width:38px; }
.footer-brand span{ font-family:var(--serif); font-size:1.2rem; color:var(--cream-50); }
.footer-grid li{ padding:.28rem 0; }
.footer-bottom{
  margin-top:2.6rem; padding-top:1.4rem; border-top:1px solid rgba(251,243,231,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
  font-size:.78rem; color:rgba(251,243,231,.55);
}
.whatsapp-float{
  position:fixed; bottom:1.4rem; right:1.4rem; z-index:80;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 26px rgba(0,0,0,.3);
  font-size:1.5rem;
  animation:floatpulse 2.6s ease-in-out infinite;
}
@keyframes floatpulse{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .services-grid{ grid-template-columns:1fr; }
  .brochure-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .booking-shell{ grid-template-columns:1fr; }
  .why-strip{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-layer{ display:none; }
}
@media (max-width: 700px){
  nav.main-nav{ display:none; }
  .nav-toggle{ display:block; }
  .form-row{ grid-template-columns:1fr; }
  .brochure-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
}