:root{
  --bg:#f7fbff;
  --bg-hero-grad-start:#e6f3ff;
  --bg-hero-grad-end:#f2f8ff;
  --text:#283544;
  --muted:#5d6b7a;
  --accent:#5aa7ff;
  --accent-2:#7cc4ff;
  --card:#ffffff;
  --shadow:0 10px 30px rgba(18,46,83,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6;-webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto;display:block}
.container{width:min(820px,92vw);margin:0 auto}
.section{padding:2.2rem 0; scroll-margin-top:16px;}
.section-title{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-size:1.5rem;margin:0 0 .4rem}
.section-subtitle{color:var(--muted);margin:0 0 1rem}

.btn{
  background:var(--accent);color:#fff;border:none;border-radius:14px;
  padding:.8rem 1.1rem;font-weight:700;cursor:pointer;
  transition:transform .15s ease,opacity .15s ease,box-shadow .15s ease;
  box-shadow:0 6px 16px rgba(90,167,255,.28);font-size:1rem
}
.btn:active{transform:scale(.98)}
.btn:hover{opacity:.96}
.btn:focus{outline:2px solid var(--accent-2);outline-offset:3px}
.btn-light{background:#fff;color:var(--text);border:1px solid #d9e6f7;box-shadow:var(--shadow)}
.btn-accent{background:linear-gradient(135deg,var(--accent),#8cc7ff);color:#fff}

/* Intro screens */
.gate,.overlay-screen{
  position:fixed;inset:0;display:grid;place-items:center;z-index:999;
  background:linear-gradient(160deg,#e8f3ff 0%,#f3f9ff 100%)
}
.gate-card,.overlay-card{
  position:relative;background:#fff;border:1px solid #d9e9ff;border-radius:18px;
  padding:1.4rem;width:min(520px,94vw);text-align:center;
  box-shadow:0 16px 40px rgba(31,76,131,.12);animation:fadeInUp .6s ease both
}
.gate-title{font-family:"Playfair Display",Georgia,serif;margin:0 0 .25rem;font-size:clamp(1.6rem,6vw,2.2rem)}
.gate-sub{color:var(--muted);margin:0 0 .7rem}
.gate-btn{font-size:1.05rem;width:100%}
.gate-note{color:var(--muted);margin:.6rem 0 0;font-size:.92rem}
#gate-confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

.overlay-title{font-family:"Playfair Display",Georgia,serif;margin:0 0 .4rem}
.overlay-sub{color:var(--muted);margin:.1rem 0 1rem}

.is-hidden{opacity:0;visibility:hidden}
.is-visible{opacity:1;visibility:visible;transition:opacity .35s ease}

/* Slideshow (orientation-aware) */
.slideshow{
  position:relative;
  width:min(820px,92vw);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#eaf4ff;
  height:56vw;
  max-height:520px;
  min-height:320px;
  transition:height .45s ease;
}
.slideshow.landscape{ height:calc(min(820px,92vw) * 9 / 16); max-height:520px; }
.slideshow.portrait{  height:calc(min(820px,92vw) * 4 / 3); max-height:640px; }

.slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  opacity:0;transform:scale(1);
  transition:opacity .9s ease-in-out, transform 5s ease, object-position 5s ease;
}
.slide.is-active{opacity:1;transform:scale(1.06)}
.slide.pan-left.is-active{object-position:40% 50%}
.slide.pan-right.is-active{object-position:60% 50%}

/* Hero (full screen, centered) */
.hero{
  position:relative;
  min-height:100vh;
  height:100svh;
  display:grid;
  place-items:center;
  text-align:center;
  background:
    linear-gradient(140deg,var(--bg-hero-grad-start),var(--bg-hero-grad-end)),
    url('assets/photos/hero.jpg') center/cover no-repeat;
  color:var(--text);
  overflow:hidden;
}
@supports (height:100dvh){
  .hero{ height:100dvh; }
}
.hero-overlay{position:absolute;inset:0;background:rgba(235,246,255,.65)}
.hero-content{
  position:relative;z-index:1;
  padding:2rem 1rem;
  margin:0 auto;
  width:min(680px,92vw);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.title{font-family:"Playfair Display",Georgia,serif;font-size:clamp(1.9rem,6.5vw,2.7rem);margin:0 0 .5rem}
.subtitle{margin:.25rem 0 1rem;color:var(--muted);font-weight:500}
.sparkles::before,.sparkles::after{content:'❥ ❦ ❧';position:absolute;font-size:1rem;color:#9ccaff;opacity:.5;filter:blur(.2px);animation:float 8s ease-in-out infinite}
.sparkles::before{top:10%;left:6%}
.sparkles::after{bottom:12%;right:8%;animation-delay:2.5s}

/* Down button to next part */
.hero-down{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  width:44px;height:44px;border-radius:50%;
  border:1px solid #d7e7fb;background:#ffffffcc;color:#3b5675;
  display:grid;place-items:center;font-size:1.3rem;cursor:pointer;
  box-shadow:0 8px 22px rgba(22,58,102,.12);
  transition:transform .15s ease, background .2s ease;
}
.hero-down:hover{ background:#fff; transform:translateX(-50%) translateY(-2px); }
.hero-down:active{ transform:translateX(-50%) translateY(0); }

/* Make first section start closer after full hero */
main .section:first-of-type { padding-top:1.6rem; }

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gallery-item{background:var(--card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.gallery-item .media{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}
.gallery-item.portrait .media{aspect-ratio:3/4}
.gallery-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Responsive */
@media (min-width:700px){
  .section{padding:2.4rem 0}
  .gallery{grid-template-columns:repeat(3,1fr);gap:12px}
}
@media (min-width:1024px){
  .gallery{grid-template-columns:repeat(4,1fr)}
  .container{width:min(1000px,92vw)}
}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(16,26,40,.88);display:grid;place-items:center;padding:1rem;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease;z-index:50}
.lightbox.open{opacity:1;visibility:visible}
.lightbox-image{max-width:96vw;max-height:70vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;background:rgba(255,255,255,.96);color:#233143;border:none;border-radius:12px;width:42px;height:42px;font-size:1.3rem;display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow)
}
.lightbox-close{top:10px;right:10px}
.lightbox-prev{left:10px}
.lightbox-next{right:10px}

/* Letter */
.message{background:var(--card);border-radius:14px;padding:1rem 1rem .2rem;box-shadow:var(--shadow);max-height:52vh;overflow:auto}
.message h3{font-family:"Playfair Display",Georgia,serif;margin:.6rem 0 .35rem}
.message p{margin-top:.15rem}

/* End celebration */
.end-celebrate{position:relative;display:grid;place-items:center;min-height:160px}
#end-confetti-canvas{position:absolute;inset:0;width:100%;height:160px;pointer-events:none}

/* Footer */
.footer{text-align:center;padding:1.6rem 0 2rem;color:var(--muted)}
.footer .closing{font-family:"Playfair Display",Georgia,serif;font-size:1.1rem;margin-bottom:.2rem}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Accessibility */
:focus-visible{outline:2px dashed var(--accent-2);outline-offset:3px}

/* Smooth scrolling */
html{ scroll-behavior:smooth; }

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}