:root{
  --bg0:#07060a;
  --bg1:#0b0812;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.09);
  --stroke:rgba(255,255,255,.14);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --gold:#f7d37b;
  --saffron:#ff9b5a;
  --rose:#ff6fb1;
  --mint:#79f2c1;
  --shadow:0 18px 60px rgba(0,0,0,.45);
  --radius:22px;
}

*{box-sizing:border-box}
html{min-height:100%; background:#130d18}
body{
  min-height:100%;
  margin:0;
  position:relative;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  padding-left: 100px;
  padding-right: 100px;
  background:
    radial-gradient(ellipse 90% 70% at 15% 20%, rgba(255, 180, 200, 0.18) 0%, rgba(255, 160, 185, 0.06) 50%, transparent 100%),
    radial-gradient(ellipse 80% 60% at 85% 15%, rgba(247, 211, 123, 0.14) 0%, rgba(247, 200, 100, 0.04) 50%, transparent 100%),
    radial-gradient(ellipse 70% 80% at 75% 75%, rgba(220, 150, 190, 0.15) 0%, rgba(200, 130, 175, 0.05) 55%, transparent 100%),
    radial-gradient(ellipse 85% 55% at 25% 85%, rgba(255, 200, 170, 0.12) 0%, rgba(240, 170, 140, 0.04) 55%, transparent 100%),
    radial-gradient(ellipse 60% 50% at 55% 45%, rgba(200, 160, 220, 0.08) 0%, transparent 100%),
    #130d18;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.95}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:.95em}

.srOnly{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  margin: 0 -100px;
  background:rgba(7,6,10,.75);
  backdrop-filter: blur(14px);
}
.brand{display:flex; align-items:center; gap:10px;}
.brand__mark{color:var(--gold); filter:drop-shadow(0 8px 18px rgba(247,211,123,.22));}
.brand__text{font-family:"Cormorant Garamond", serif; letter-spacing:.3px; font-weight:700; font-size:18px;}

.nav{display:flex; gap:14px; align-items:center;}
.nav a{padding:9px 10px; border-radius:999px; color:var(--muted); transition:background .25s ease, color .25s ease, transform .25s ease;}
.nav a:hover{background:rgba(255,255,255,.08); color:var(--text); transform:translateY(-1px)}

.navToggle{display:none; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:var(--text);
  border-radius:999px; padding:10px 12px; box-shadow:var(--shadow); cursor:pointer;}
.navToggle__lines{display:block; width:18px; height:12px; position:relative;}
.navToggle__lines:before,.navToggle__lines:after{content:""; position:absolute; left:0; right:0; height:2px; background:rgba(255,255,255,.85); border-radius:999px; transition:transform .25s ease, top .25s ease, opacity .2s ease;}
.navToggle__lines:before{top:1px}
.navToggle__lines:after{top:9px}

/* Sections + reveal transitions */
.section{
  width:min(1100px, calc(100% - 36px));
  margin:0 auto;
  padding:88px 0;
}
.section__head{margin-bottom:26px}
.h2{font-family:"Cormorant Garamond", serif; font-size:44px; line-height:1.05; margin:0 0 10px;}
.lead{margin:0; color:var(--muted); max-width:62ch;}

[data-reveal]{
  opacity:0;
  transform:translateY(16px) scale(.985);
  filter:blur(8px);
  transition:opacity .8s cubic-bezier(.2,.85,.2,1), transform .8s cubic-bezier(.2,.85,.2,1), filter .8s cubic-bezier(.2,.85,.2,1);
  will-change:transform, opacity, filter;
}
[data-reveal].is-in{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* Hero */
.hero{display:grid; grid-template-columns: 1.05fr .95fr; gap:28px; padding-top:44px; align-items:center}
.kicker{margin:0 0 10px; color:rgba(247,211,123,.92); letter-spacing:.2em; text-transform:uppercase; font-size:12px}
.title{font-family:"Cormorant Garamond", serif; font-size:64px; line-height:.95; margin:0 0 12px;}
.subtitle{margin:0 0 22px; color:var(--muted); max-width:56ch}

.hero__cta{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 10px}
.btn{border-radius:999px; padding:12px 16px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:var(--text);
  display:inline-flex; align-items:center; gap:10px; cursor:pointer; box-shadow:0 14px 40px rgba(0,0,0,.35);
  transition:transform .22s ease, background .22s ease, border-color .22s ease;}
.btn:hover{transform:translateY(-2px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.2)}
.btn--primary{border-color:rgba(247,211,123,.38); background:rgba(247,211,123,.15);}
.btn--ghost{background:rgba(255,255,255,.04)}

.hero__chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.chip{padding:10px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.78)}

.hero__art{position:relative; min-height:390px;}
/* Mandala decoration removed */

.floatingCard{
  position:absolute; width:200px;
  padding:14px 14px 12px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 70px rgba(0,0,0,.45);
  transform-origin:center;
  animation:floaty 5.3s ease-in-out infinite;
}
.floatingCard--one{top:18px; left:-6px; rotate:-6deg}
.floatingCard--two{bottom:18px; right:-10px; rotate:7deg; animation-delay:-1.5s}
.floatingCard__title{font-family:"Cormorant Garamond", serif; font-weight:700; font-size:18px; color:rgba(255,255,255,.92)}
.floatingCard__text{color:rgba(255,255,255,.72); margin-top:4px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.scrollHint{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); width:40px; height:58px; border-radius:999px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04);
  display:grid; place-items:center; backdrop-filter: blur(10px);}
.scrollHint__wheel{width:6px; height:10px; border-radius:99px; background:rgba(255,255,255,.65); animation:wheel 1.4s ease-in-out infinite;}
@keyframes wheel{0%{transform:translateY(-7px); opacity:.3}45%{opacity:1}100%{transform:translateY(10px); opacity:0}}

/* Timeline */
.timeline{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.event{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.06);
  box-shadow:var(--shadow);
  padding:16px 16px 14px;
  position:relative;
  overflow:hidden;
  transform:translateZ(0);
}
.event>*{position:relative}
.event__badge{display:inline-flex; padding:7px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.18); color:rgba(247,211,123,.92); font-size:12px; letter-spacing:.08em; text-transform:uppercase;}
.event__title{margin:10px 0 4px; font-family:"Cormorant Garamond", serif; font-size:26px}
.event__time{margin:0 0 8px; color:rgba(255,255,255,.72)}
.event__desc{margin:0; color:rgba(255,255,255,.72)}

.noteCard{margin-top:18px; display:flex; gap:12px; align-items:flex-start; border-radius:var(--radius); padding:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05)}
.noteCard__icon{color:var(--gold)}
.noteCard__title{font-weight:600}
.noteCard__text{color:rgba(255,255,255,.72)}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:18px}
.polaroid{
  margin:0;
  border-radius:18px;
  padding:10px 10px 14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow);
  transform:rotate(var(--r, -1.2deg));
  transition:transform .25s ease;
}
.polaroid:nth-child(2){--r:1.4deg}
.polaroid:nth-child(3){--r:-.6deg}
.polaroid:nth-child(4){--r:1deg}
.polaroid:hover{transform:rotate(0deg) translateY(-4px)}
.polaroid__img{height:180px; border-radius:14px; background:var(--img); position:relative; overflow:hidden}
.polaroid__img:after{content:""; position:absolute; inset:-60px; background:radial-gradient(circle at 20% 30%, rgba(255,255,255,.45), transparent 45%);
  opacity:.55; transform:translate3d(-18px,-18px,0);}
.polaroid__cap{margin-top:10px; text-align:center; color:rgba(255,255,255,.78)}

.journeyCard{margin-top:16px; border-radius:var(--radius); border:1px dashed rgba(247,211,123,.35); background:rgba(247,211,123,.06)}
.journeyCard__inner{padding:16px}
.journeyCard__title{margin:0 0 6px; font-family:"Cormorant Garamond", serif; font-size:26px}
.journeyCard__text{margin:0; color:rgba(255,255,255,.72)}

/* Countdown */
.countdown{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px}
.countBox{border-radius:var(--radius); padding:18px 14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); text-align:center; box-shadow:var(--shadow)}
.countBox__num{font-family:"Cormorant Garamond", serif; font-weight:700; font-size:46px; line-height:1; color:rgba(255,255,255,.92)}
.countBox__label{margin-top:6px; color:rgba(255,255,255,.68); letter-spacing:.16em; text-transform:uppercase; font-size:12px}

.countdown__settings{margin-top:16px; display:flex; justify-content:flex-start}

/* Info */
.infoGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px}
.info{border-radius:var(--radius); padding:16px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); box-shadow:var(--shadow)}
.info__title{margin:0 0 6px; font-family:"Cormorant Garamond", serif; font-size:28px}
.info__text{margin:0 0 10px; color:rgba(255,255,255,.72)}
.bullets{margin:0; padding-left:18px; color:rgba(255,255,255,.72)}
.bullets li{margin:8px 0}

/* Form */
.form{border-radius:var(--radius); border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); padding:16px; box-shadow:var(--shadow)}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field{display:grid; gap:7px}
.field__label{color:rgba(255,255,255,.76); font-size:13px; letter-spacing:.02em}
.field__input{border-radius:14px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.22); color:var(--text); padding:12px 12px; outline:none}
.field__input:focus{border-color:rgba(247,211,123,.45); box-shadow:0 0 0 4px rgba(247,211,123,.12)}
.field__input--area{resize:vertical}
.field__hint{color:rgba(255,255,255,.52); font-size:12px; margin-top:2px}

.checks{display:flex; flex-wrap:wrap; gap:10px 12px; padding-top:2px}
.check{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04)}
.check input{accent-color:var(--gold)}

.form__actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
.form__fineprint{margin:10px 0 0; color:rgba(255,255,255,.56); font-size:12px}

.toast{position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px); opacity:0;
  padding:12px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  box-shadow:0 18px 60px rgba(0,0,0,.5);
  transition:opacity .25s ease, transform .25s ease; z-index:60;}
.toast.is-on{opacity:1; transform:translateX(-50%) translateY(0)}

/* Footer */
.footer{padding:26px 0 40px}
.footer__inner{width:min(1100px, calc(100% - 36px)); margin:0 auto; display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; color:rgba(255,255,255,.72)}
.footer__brand{font-family:"Cormorant Garamond", serif; font-weight:700; color:rgba(255,255,255,.9)}
.footer__sub{font-size:13px}

/* Motion: tilt / parallax hooks */
[data-tilt]{transform-style:preserve-3d;}

/* Responsive */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr;}
  .hero__art{min-height:360px;}
  .timeline{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .infoGrid{grid-template-columns:1fr}
}
@media (max-width: 700px){
  .section{padding:74px 0}
  .title{font-size:50px}
  .h2{font-size:38px}
  .timeline{grid-template-columns:1fr}
  .countdown{grid-template-columns:repeat(2,1fr)}
  .form__row{grid-template-columns:1fr}

  .navToggle{display:inline-flex; align-items:center; justify-content:center;}
  .nav{position:fixed; top:62px; left:18px; right:18px; padding:12px; border-radius:18px;
    background:rgba(7,6,10,.78); border:1px solid rgba(255,255,255,.12); backdrop-filter: blur(16px);
    transform:translateY(-10px); opacity:0; pointer-events:none; flex-direction:column; align-items:stretch; gap:6px;
    transition:opacity .25s ease, transform .25s ease;}
  .nav a{padding:12px 12px;}
  .nav.is-open{opacity:1; transform:translateY(0); pointer-events:auto;}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}

.venueHero {
  position: relative;
  height: 80vh;
  min-height: 600px;
  max-height: 800px;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  z-index: 46;
}

.venueHero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Use local asset */
  background-image: url('public/hotel.PNG');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform: scale(1);
}

/* Image element no longer used for hero */
.venueHero__img {
  display: none;
}

.venueHero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.venueHero__content {
  position: relative;
  z-index: 2;
  width: min(980px, 92vw);
  margin: 0 auto;
  text-align: center;
  padding: 60px 0 40px;
}

.venueHero .kicker,
.venueHero .title,
.venueHero .subtitle {
  text-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.venueHero .subtitle {
  opacity: 0.95;
}

.venueHero__countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px auto 22px;
  width: min(720px, 92vw);
}

@media (max-width: 680px) {
  .venueHero__countdown {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .venueHero {
    height: auto !important;
    min-height: 100svh;
    max-height: none !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible !important;
  }

  .venueHero__content {
    padding: 76px 16px 40px !important;
    width: 100% !important;
    box-sizing: border-box;
    overflow: visible;
  }

  .venueHero .title {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }

  .heroLogo {
    width: min(150px, 52vw) !important;
  }

  .hero__cta {
    justify-content: center;
  }

  .venueHero__countdown {
    width: 100% !important;
    margin: 14px auto 18px !important;
  }
}

/* Override: keep scroll hint pinned visually on the splash */
.venueHero .scrollHint {
  display: none;
}

/* Ensure the banner fills width */
.venueHero {
  width: auto;
  margin-left: -100px;
  margin-right: -100px;
}

.venueHero__bg {
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
}

/* Keep Venue section cards compact (without changing global card styles) */
#venue .infoGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

#venue .info {
  padding: 14px;
}

#venue .info__title {
  font-size: 24px;
}

#venue .info__text {
  margin-bottom: 8px;
}

/* Compact hotel thumbnail in the Venue card */
#venue .venueHotel__img {
  height: 96px;
  margin: 8px 0 8px;
}

/* Venue: make Hotel + Map cards match in size */
.venueGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.venueCard {
  display: flex;
  flex-direction: column;
  min-height: 160px;
}

.venueCard .info__text:last-child {
  margin-bottom: 0;
}

@media (max-width: 980px) {
  .venueGrid {
    grid-template-columns: 1fr;
  }
  .venueCard {
    min-height: 0;
  }
}

/* Subtle micro-animations (kept lightweight) */

/* Hero: slow cinematic drift on the background image */
.venueHero__bg {
  will-change: transform, filter;
}

/* Buttons: soft sheen on hover */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18) 50%, transparent 65%);
  transform: translateX(-35%) rotate(8deg);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

.btn:hover::after {
  opacity: 1;
  animation: btnSheen .9s ease-out 1;
}

@keyframes btnSheen {
  from { transform: translateX(-45%) rotate(8deg); }
  to { transform: translateX(45%) rotate(8deg); }
}

/* Cards: gentle hover lift + glow */
.event,
.info,
.polaroid,
.noteCard,
.form {
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.event:hover,
.info:hover,
.noteCard:hover,
.form:hover {
  transform: translateY(-4px);
  border-color: rgba(247, 211, 123, 0.22);
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
}

/* Links: underline reveal on hover (only inside main content) */
main a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .22s ease, opacity .22s ease;
}

main a:hover {
  background-size: 100% 1px;
}

/* Reduced motion: disable added animations */
@media (prefers-reduced-motion: reduce) {
  .btn::after { animation: none !important; }
  .event:hover,
  .info:hover,
  .noteCard:hover,
  .form:hover { transform: none !important; }
}

/* Improve readability: black outline on text over the hero background */
.venueHero .kicker,
.venueHero .title,
.venueHero .subtitle,
.venueHero .countBox__num,
.venueHero .countBox__label{
  -webkit-text-stroke: 0.8px rgba(0,0,0,.75);
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 rgba(0,0,0,.55),
    0 10px 30px rgba(0,0,0,.45);
}

/* Slightly smaller stroke for small labels */
.venueHero .kicker,
.venueHero .countBox__label{
  -webkit-text-stroke: 0.6px rgba(0,0,0,.78);
}

.heroLogo{
  display:block;
  width:min(220px, 62vw);
  height:auto;
  margin:10px auto 8px;
  filter: drop-shadow(0 14px 40px rgba(0,0,0,.45));
}

/* Journey: vertical tree with branches */
.treeTimeline{
  position: relative;
  margin-top: 22px;
  padding: 8px 0 10px;
  display: grid;
  gap: 18px;
}

.treeTimeline__trunk{
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(247,211,123,.4);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.35) inset,
    0 12px 40px rgba(0,0,0,.35);
}

.treeNode{
  position: relative;
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  align-items: center;
  min-height: 220px;
  grid-auto-rows: auto;
}

.treeNode__branch{
  position: absolute;
  top: 50%;
  left: 50%;
  height: 2px;
  width: min(300px, 40vw);
  transform: translateY(-50%);
  background: rgba(247,211,123,.3);
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
}

.treeNode--left .treeNode__branch{
  transform: translate(-100%, -50%);
  background: rgba(247,211,123,.3);
}

.treeNode--right .treeNode__branch{
  transform: translate(0%, -50%);
}

.treeNode__photo{
  grid-column: 2;
  justify-self: center;
  width: 198px;
  height: 198px;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid rgba(247,211,123,.55);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.48) inset,
    0 20px 70px rgba(0,0,0,.55);
  background: rgba(255,255,255,.04);
}

/* Tree timeline text: keep it on the same side as the branch */
.treeNode--right .treeNode__text{
  grid-column: 3;
  justify-self: start;
  text-align: left;
}

.treeNode--left .treeNode__text{
  grid-column: 1;
  justify-self: end;
  text-align: right;
}

/* Keep text hovering near the branch line */
.treeNode__text{
  max-width: 42ch;
  line-height: 1.3;
}

.treeNode--right .treeNode__text{ margin-top: -64px; }
.treeNode--left .treeNode__text{ margin-top: -128px; }

@media (max-width: 700px){
  .treeNode--right .treeNode__text,
  .treeNode--left .treeNode__text{ margin-top: 0; }
  
  .treeNode{
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 16px;
  }
  
  .treeNode__photo{
    grid-column: 1;
    justify-self: center;
    width: 150px;
    height: 150px;
  }
  
  .treeNode__branch{
    display: none;
  }
  
  .treeNode--right .treeNode__text,
  .treeNode--left .treeNode__text{
    grid-column: 1;
    justify-self: center;
    text-align: center;
    max-width: 90%;
  }
}

main {
  position: relative;
}

/* Floral side banners */
.floralBanner {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 60px;
  pointer-events: none;
  z-index: 45;
  overflow: hidden;
  opacity: 0.9;
}

.floralBanner svg {
  width: 100%;
  height: 100%;
  display: block;
}

.floralBanner--left  { left: 0; }
.floralBanner--right { right: 0; }

@media (max-width: 700px) {
  .floralBanner { display: none; }
  body { padding-left: 0; padding-right: 0; }
  .topbar { margin: 0; }
  .venueHero { margin-left: 0; margin-right: 0; }
}