/* WeddingOS Premium Experience — visual layer only */
:root{
  --display:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",Inter,ui-sans-serif,system-ui,sans-serif;
  --ease-lux:cubic-bezier(.22,1,.36,1);
  --mx:50%;
  --my:30%;
}

body{
  background:
    radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb,var(--accent2) 8%,transparent),transparent 28%),
    linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg2) 82%,#000));
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
  opacity:.055;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
}

.hero{
  min-height:100svh;
  padding:48px 20px 110px;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:24px;
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  border-radius:36px;
  pointer-events:none;
  opacity:.75;
}

.hero-art{
  background:
    radial-gradient(ellipse at 50% 42%,transparent 0 30%,color-mix(in srgb,var(--bg) 35%,transparent) 74%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg2) 35%,transparent),transparent 45%,color-mix(in srgb,var(--bg) 72%,transparent));
}

.hero-art::before,
.hero-art::after{
  content:"";
  position:absolute;
  width:56vmax;
  height:56vmax;
  border-radius:44% 56% 48% 52%;
  filter:blur(68px);
  opacity:.2;
  will-change:transform;
}

.hero-art::before{
  left:-24vmax;
  top:-25vmax;
  background:color-mix(in srgb,var(--accent2) 42%,transparent);
  animation:aurora-one 19s var(--ease-lux) infinite alternate;
}

.hero-art::after{
  right:-25vmax;
  bottom:-31vmax;
  background:color-mix(in srgb,var(--accent) 46%,transparent);
  animation:aurora-two 23s var(--ease-lux) infinite alternate;
}

.grid-lines{
  background-size:64px 64px;
  opacity:.48;
  mask-image:radial-gradient(ellipse at center,black 0 22%,transparent 73%);
  animation:grid-breathe 14s ease-in-out infinite alternate;
}

.orb{
  filter:blur(16px);
  opacity:.7;
  mix-blend-mode:screen;
  will-change:transform;
}
.orb.one{animation:orb-one 15s ease-in-out infinite alternate}
.orb.two{animation:orb-two 18s ease-in-out infinite alternate}

.premium-stars{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.premium-stars span{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:var(--text);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent2) 70%,white);
  opacity:.18;
  animation:star-pulse var(--duration,5s) ease-in-out infinite var(--delay,0s);
}

.hero-card{
  position:relative;
  width:min(1050px,100%);
  padding:72px clamp(24px,8vw,110px) 66px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}

.hero-card::before,
.hero-card::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:min(550px,72%);
  height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 65%,white),transparent);
  opacity:.6;
}
.hero-card::before{top:28px}
.hero-card::after{bottom:22px}

.hero-card .eyebrow{
  color:color-mix(in srgb,var(--accent2) 75%,white);
  letter-spacing:.42em;
  font-size:.69rem;
  text-shadow:0 0 24px color-mix(in srgb,var(--accent2) 38%,transparent);
}

.hero h1{
  position:relative;
  margin:30px auto 28px;
  font-size:clamp(4.4rem,13vw,10.5rem);
  line-height:.76;
  letter-spacing:-.045em;
  font-weight:400;
  text-wrap:balance;
  text-shadow:0 14px 60px rgba(0,0,0,.32);
}

.hero h1 .amp{
  display:inline-block;
  margin:.05em .04em 0;
  font-size:.72em;
  color:transparent;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 68%,white),var(--accent));
  background-clip:text;
  -webkit-background-clip:text;
  filter:drop-shadow(0 0 25px color-mix(in srgb,var(--accent) 24%,transparent));
  transform:rotate(-6deg);
}

.hero-subtitle{
  max-width:680px;
  margin-bottom:30px;
  color:color-mix(in srgb,var(--text) 68%,var(--muted));
  font-size:clamp(.98rem,1.7vw,1.18rem);
  letter-spacing:.015em;
}

.hero-date{
  display:inline-flex;
  align-items:center;
  gap:18px;
  margin:0 auto 34px;
  color:color-mix(in srgb,var(--text) 88%,var(--accent));
  font-family:var(--display);
  font-size:clamp(1.25rem,3vw,1.85rem);
  letter-spacing:.12em;
  text-transform:capitalize;
}
.hero-date::before,.hero-date::after{
  content:"✦";
  color:var(--accent);
  font-family:var(--sans);
  font-size:.54em;
  opacity:.8;
}

.hero-actions .btn{
  min-width:165px;
  padding:15px 23px;
  border-radius:999px;
  letter-spacing:.035em;
}

.btn{
  transition:transform .4s var(--ease-lux),box-shadow .4s var(--ease-lux),background .4s ease,border-color .4s ease;
}
.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 38px color-mix(in srgb,var(--accent) 12%,rgba(0,0,0,.2));
}
.btn.primary{
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 90%,white),var(--accent),color-mix(in srgb,var(--accent) 70%,#fff));
  background-size:220% 100%;
  box-shadow:0 12px 35px color-mix(in srgb,var(--accent) 17%,transparent);
  animation:button-sheen 8s ease-in-out infinite;
}
.btn.secondary{
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent2) 82%,white),var(--accent2));
  box-shadow:0 12px 35px color-mix(in srgb,var(--accent2) 14%,transparent);
}

.scroll-hint{
  bottom:37px;
  color:color-mix(in srgb,var(--muted) 78%,white);
  animation:scroll-hint 2.6s ease-in-out infinite;
}
.scroll-hint::after{
  content:"";
  display:block;
  width:1px;
  height:35px;
  margin:12px auto 0;
  background:linear-gradient(var(--accent),transparent);
}

.guest-banner{
  padding:20px 25px;
  border-radius:999px;
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  box-shadow:0 24px 75px rgba(0,0,0,.22);
}
.guest-banner::before{
  content:"✦";
  color:var(--accent);
  flex:0 0 auto;
}

.section{
  position:relative;
  padding:115px 0;
}
.section::before{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  width:min(920px,72vw);
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,var(--line),transparent);
  opacity:.45;
}
.section-header{margin-bottom:46px}
.section-kicker{
  letter-spacing:.34em;
  font-size:.69rem;
}
.section-title{
  font-size:clamp(3rem,7vw,5.8rem);
  letter-spacing:-.025em;
  text-wrap:balance;
}
.section-copy{max-width:680px}

.panel{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--line) 80%,var(--accent) 6%);
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--surface) 110%,transparent),color-mix(in srgb,var(--surface) 45%,transparent));
  box-shadow:0 35px 100px rgba(0,0,0,.25);
  transition:transform .55s var(--ease-lux),border-color .55s ease,box-shadow .55s var(--ease-lux);
}
.panel::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.055) 44%,transparent 72%);
  transform:translateX(-130%);
  transition:transform 1.1s var(--ease-lux);
}
.panel:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--accent) 28%,var(--line));
  box-shadow:0 42px 120px rgba(0,0,0,.32);
}
.panel:hover::after{transform:translateX(130%)}

.countdown{
  gap:16px;
  perspective:1000px;
}
.countdown-item{
  position:relative;
  padding:28px 12px 24px;
  border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.018));
  overflow:hidden;
}
.countdown-item::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:.55;
}
.countdown-item strong{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.4rem,6vw,4.1rem);
  line-height:1;
}

.info-card,.event-card,.rsvp-form,.rsvp-summary,.save-date-card{padding:clamp(26px,4vw,48px)}
.info-card h3,.rsvp-summary h3,.save-date-card h3{font-weight:400}

.event-icon{
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent);
  box-shadow:inset 0 0 20px color-mix(in srgb,var(--accent) 5%,transparent);
}
.timeline-dot{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent2) 8%,transparent),0 0 25px color-mix(in srgb,var(--accent2) 30%,transparent)}
.gallery img{transition:transform .7s var(--ease-lux),filter .7s ease;filter:saturate(.86) contrast(1.03)}
.gallery img:hover{transform:scale(1.025);filter:saturate(1.05) contrast(1.02)}

.choice:has(input:checked){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent2) 25%,transparent),0 12px 30px color-mix(in srgb,var(--accent2) 7%,transparent)}

.footer{padding-top:82px}
.footer strong{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:400}

/* Scroll reveal */
.motion-ready .reveal{
  opacity:0;
  transform:translateY(34px) scale(.985);
  filter:blur(5px);
  transition:opacity .95s var(--ease-lux),transform .95s var(--ease-lux),filter .95s ease;
  transition-delay:var(--reveal-delay,0ms);
}
.motion-ready .reveal.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

@keyframes aurora-one{to{transform:translate(19vmax,13vmax) rotate(25deg) scale(1.15)}}
@keyframes aurora-two{to{transform:translate(-17vmax,-11vmax) rotate(-22deg) scale(1.12)}}
@keyframes orb-one{to{transform:translate(90px,-42px) scale(1.18)}}
@keyframes orb-two{to{transform:translate(-80px,48px) scale(.9)}}
@keyframes grid-breathe{to{opacity:.7;transform:scale(1.035)}}
@keyframes star-pulse{0%,100%{opacity:.12;transform:scale(.7)}50%{opacity:.72;transform:scale(1.7)}}
@keyframes button-sheen{0%,72%,100%{background-position:100% 0}85%{background-position:0 0}}
@keyframes scroll-hint{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(8px);opacity:1}}

@media(max-width:820px){
  .hero::before{inset:12px;border-radius:26px}
  .hero-card{padding-top:58px}
  .hero h1{font-size:clamp(4rem,19vw,7rem);line-height:.8}
  .guest-banner{border-radius:26px}
  .section{padding:88px 0}
}

@media(max-width:520px){
  .hero{padding-top:38px}
  .hero-card{padding-inline:13px}
  .hero h1{font-size:clamp(3.7rem,20vw,5.7rem)}
  .hero-date{gap:9px;font-size:1.05rem;letter-spacing:.07em}
  .hero-card::before,.hero-card::after{width:82%}
  .countdown{gap:8px}
  .countdown-item{padding:20px 5px 17px;border-radius:18px}
  .section-title{font-size:clamp(2.7rem,13vw,4.2rem)}
  .panel:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .motion-ready .reveal{opacity:1;transform:none;filter:none}
}