:root { --ivory: #f7f2e8; --ivory-deep: #efe6d5; --cream: #fdfaf4; --beige: #e6dac4; --ink: #2b2620; --ink-soft: #6a6055; --gold: #c2a24c; --gold-light: #e2c988; --gold-deep: #9c7c30; --font-display: "Cinzel", "Cormorant Garamond", serif; --font-script: "Italiana", "Cormorant Garamond", serif; --font-body: "Cormorant Garamond", Georgia, serif; --font-arabic: "Noto Naskh Arabic", "Cormorant Garamond", serif; --canvas: 520px; --pad: 26px; --shadow-soft: 0 24px 60px -30px rgba(70, 55, 25, 0.45); }
* { box-sizing: border-box; }
html, body { margin: 0px; padding: 0px; }
html { scroll-behavior: smooth; text-size-adjust: 100%; }
body { background: rgb(236, 227, 210); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.65; overflow-x: hidden; }
body.is-locked { overflow: hidden; height: 100%; }
img, video { max-width: 100%; display: block; }
.site { width: 100%; max-width: var(--canvas); margin: 0px auto; background: var(--ivory); box-shadow: rgba(80, 62, 28, 0.35) 0px 0px 90px -20px; opacity: 0; transition: opacity 0.9s; }
.site.is-visible { opacity: 1; }
.wrap { padding: 0 var(--pad); }
.center { text-align: center; }
.section { padding: 82px 0px; position: relative; }
.section-bismillah { background: var(--cream); }
.section-quran { background: var(--ivory); }
.section-date { background: var(--cream); }
.section-events { background: var(--ivory); }
.section-timeline { background: var(--cream); }
.section-gallery { background: var(--ivory); padding-bottom: 40px; }
.section-rsvp { background: var(--cream); }
.section-closing { background: var(--ivory); }
.orn, .rule { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--gold); font-size: 12px; margin: 26px 0px; }
.orn span, .rule span { display: block; height: 1px; width: 54px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.orn-wide span { width: 84px; }
.rule { margin: 16px 0px; font-size: 10px; }
.rule span { width: 36px; }
.kicker { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold-deep); margin: 0px 0px 34px; }
.arabic { font-family: var(--font-arabic); color: var(--ink); line-height: 2.1; margin: 8px 0px; }
.arabic-lg { font-size: 30px; }
.arabic-md { font-size: 26px; }
.lede { font-size: 20px; font-style: italic; color: var(--ink-soft); letter-spacing: 0.03em; margin: 18px 0px 0px; }
.quote { font-family: var(--font-display); font-weight: 400; font-size: 25px; letter-spacing: 0.06em; margin: 22px 0px 10px; }
.attrib { font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-deep); margin: 0px; }
.envelope-scene { position: fixed; inset: 0px; z-index: 60; display: grid; place-items: center; background: radial-gradient(120% 80% at 50% 18%, rgb(255, 253, 248) 0%, rgb(243, 234, 216) 45%, rgb(227, 214, 189) 100%); transition: opacity 1s, visibility 1s; }
.envelope-scene.is-brightening { background: radial-gradient(120% 90% at 50% 20%, rgb(255, 254, 251) 0%, rgb(251, 246, 234) 55%, rgb(240, 231, 214) 100%); }
.envelope-scene.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.envelope-stage { width: min(78vw, 330px); display: flex; flex-direction: column; align-items: center; }
.envelope { position: relative; width: 100%; aspect-ratio: 1080 / 1600; animation: 6s ease-in-out 0s infinite normal none running breathe; transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.2s; }
@keyframes breathe { 
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-8px) scale(1.008); }
}
.env-img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: rgba(80, 58, 18, 0.65) 0px 40px 80px -34px, rgba(80, 58, 18, 0.4) 0px 10px 26px -14px; transition: opacity 1.4s, transform 1.6s cubic-bezier(0.25, 0.8, 0.3, 1); }
.env-open { opacity: 0; transform: scale(1.03); }
.envelope.is-open { animation: auto ease 0s 1 normal none running none; }
.envelope.is-open .env-open { opacity: 1; transform: scale(1.06); }
.envelope.is-open .env-closed { opacity: 0; transform: scale(1.02); }
.envelope.is-away { transform: translateY(26%) scale(0.94); opacity: 0; }
.env-caption { margin-top: 34px; text-align: center; transition: opacity 0.6s, transform 0.6s; }
.env-caption.is-hidden { opacity: 0; transform: translateY(10px); pointer-events: none; }
.env-caption-names { font-family: var(--font-script); font-size: 30px; margin: 0px; letter-spacing: 0.06em; }
.env-caption-date { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); margin: 4px 0px 20px; }
.btn-open, .btn-gold { display: inline-block; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: rgb(58, 47, 20); text-decoration: none; background: linear-gradient(120deg, rgb(240, 227, 194), rgb(220, 193, 119) 45%, rgb(242, 230, 200)); border: 1px solid rgba(156, 124, 48, 0.6); border-radius: 2px; padding: 16px 30px; min-height: 50px; cursor: pointer; box-shadow: rgba(90, 65, 15, 0.8) 0px 12px 26px -18px; transition: transform 0.3s, box-shadow 0.3s, filter 0.3s; }
.btn-open:hover, .btn-gold:hover { filter: brightness(1.04); transform: translateY(-1px); }
.btn-block { display: block; width: 100%; margin-top: 26px; }
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: rgb(222, 208, 180); }
.hero-media { position: absolute; inset: 0px; }
.hero-video { width: 100%; height: 100%; object-fit: cover; animation: 26s ease-in-out 0s infinite alternate none running heroPush; }
@keyframes heroPush { 
  0% { transform: scale(1.02); }
  100% { transform: scale(1.16); }
}
.hero-fallback { position: absolute; inset: 0px; display: none; }
.hero.no-video .hero-video { display: none; }
.hero.no-video .hero-fallback { display: block; }
.fb-layer { position: absolute; inset: -6%; background-size: cover; background-position: center center; }
.fb-bg { background-image: url("https://sitetale-referral-program.lovable.app/invite/assets/gallery/moment-4.jpg"); filter: blur(3px) brightness(1.05); animation: 22s ease-in-out 0s infinite alternate none running fbDrift; }
.fb-couple { background-image: url("https://sitetale-referral-program.lovable.app/invite/assets/gallery/moment-1.jpg"); mask-image: radial-gradient(60% 70% at 50% 62%, rgb(0, 0, 0) 55%, transparent 100%); animation: 16s ease-in-out 0s infinite alternate none running fbWalk; }
@keyframes fbDrift { 
  0% { transform: scale(1.05) translateX(-1%); }
  100% { transform: scale(1.12) translateX(1%); }
}
@keyframes fbWalk { 
  0% { transform: scale(1.12) translateY(2%); }
  100% { transform: scale(1) translateY(-3%); }
}
.fb-candles i { position: absolute; bottom: 16%; left: var(--x); width: 8px; height: 14px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 50% 70%, rgb(255, 246, 216), rgb(240, 196, 106) 60%, rgba(240, 196, 106, 0)); filter: blur(0.4px); animation-duration: 1.6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-play-state: running; animation-name: flicker; animation-timeline: auto; animation-range: normal; animation-delay: var(--d); }
@keyframes flicker { 
  0%, 100% { opacity: 0.85; transform: scaleY(1) scaleX(1); }
  35% { opacity: 1; transform: scaleY(1.22) scaleX(0.92); }
  70% { opacity: 0.7; transform: scaleY(0.9) scaleX(1.05); }
}
.hero-veil { position: absolute; inset: 0px; background: linear-gradient(rgba(247, 242, 232, 0.5) 0%, rgba(247, 242, 232, 0) 26%), linear-gradient(0deg, rgba(38, 27, 10, 0.82) 0%, rgba(38, 27, 10, 0.5) 34%, rgba(38, 27, 10, 0.16) 58%, transparent 78%); }
.hero-text { position: relative; z-index: 2; width: 100%; padding: 0 var(--pad) 56px; text-align: center; color: rgb(255, 250, 240); text-shadow: rgba(40, 28, 8, 0.55) 0px 2px 18px; }
.hero-eyebrow { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; margin: 0px 0px 14px; color: rgb(244, 227, 189); }
.hero-names { font-family: var(--font-script); font-weight: 400; margin: 0px; line-height: 1.05; font-size: clamp(46px, 15vw, 66px); letter-spacing: 0.04em; }
.hero-names .amp { display: block; font-family: var(--font-body); font-style: italic; font-size: 0.42em; color: var(--gold-light); margin: 4px 0px; }
.hero-sub { font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.9; margin: 20px 0px 0px; color: rgb(246, 236, 216); }
.scroll-cue { margin-top: 34px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: rgb(242, 226, 186); }
.scroll-cue i { display: block; width: 1px; height: 38px; margin: 12px auto 0px; background: linear-gradient(180deg, var(--gold-light), transparent); animation: 2.4s ease-in-out 0s infinite normal none running cue; }
@keyframes cue { 
  0%, 100% { transform: scaleY(0.5); opacity: 0.5; transform-origin: center top; }
  50% { transform: scaleY(1); opacity: 1; transform-origin: center top; }
}
.datestack { display: grid; gap: 2px; }
.d-day { font-family: var(--font-script); font-size: 74px; line-height: 1; color: var(--gold-deep); }
.d-month { font-family: var(--font-display); font-size: 20px; letter-spacing: 0.44em; text-transform: uppercase; }
.d-year { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.5em; color: var(--ink-soft); }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cd-cell { border: 1px solid rgba(194, 162, 76, 0.4); background: rgba(255, 253, 247, 0.7); padding: 16px 4px; }
.cd-cell b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 26px; color: var(--gold-deep); line-height: 1.1; }
.cd-cell span { display: block; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.card { background: var(--cream); border: 1px solid rgba(194, 162, 76, 0.38); padding: 38px 24px 34px; text-align: center; margin-bottom: 22px; box-shadow: rgba(80, 60, 20, 0.8) 0px 26px 50px -40px; }
.card-title { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: 0.2em; text-transform: uppercase; margin: 0px; }
.card-place { font-size: 19px; letter-spacing: 0.06em; margin: 16px 0px 10px; }
.card-when { font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin: 0px 0px 26px; }
.timeline { list-style: none; margin: 0px; padding: 0px 0px 0px 30px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(180deg, transparent, var(--gold), transparent); }
.timeline li { position: relative; padding: 0px 0px 34px 6px; }
.timeline li::before { content: ""; position: absolute; left: -30px; top: 9px; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 4px var(--cream); }
.tl-time { display: block; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.3em; color: var(--gold-deep); }
.tl-title { display: block; font-size: 22px; letter-spacing: 0.04em; margin-top: 2px; }
.tl-note { display: block; font-size: 15px; font-style: italic; color: var(--ink-soft); }
.shot { margin: 0px 0px 18px; padding: 0 var(--pad); }
.shot-frame { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid rgba(194, 162, 76, 0.35); box-shadow: rgba(70, 52, 18, 0.9) 0px 30px 60px -46px; }
.shot-frame.wide { aspect-ratio: 5 / 4; }
.shot-frame img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.14) translateY(var(--par, 0px)); transition: transform 0.2s linear; }
.rsvp { text-align: left; padding: 32px 22px 30px; }
.field { display: block; margin-bottom: 22px; border: 0px; padding: 0px; }
.field > span, .field legend { display: block; font-family: var(--font-display); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; padding: 0px; }
.field input[type="text"], .field input[type="number"] { width: 100%; font-family: var(--font-body); font-size: 18px; color: var(--ink); background: transparent; border-width: 0px 0px 1px; border-style: none none solid; border-color: currentcolor currentcolor rgba(194, 162, 76, 0.5); border-image: none; padding: 12px 2px; min-height: 48px; outline: none; }
.field input:focus { border-bottom-color: var(--gold-deep); }
.opt { display: flex; align-items: center; gap: 12px; min-height: 46px; font-size: 18px; cursor: pointer; }
.opt input { accent-color: var(--gold-deep); width: 18px; height: 18px; }
.rsvp-note { font-size: 15px; font-style: italic; color: var(--ink-soft); text-align: center; min-height: 22px; margin: 14px 0px 0px; }
.closing-title { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.7; letter-spacing: 0.1em; margin: 6px 0px 22px; }
.closing-names { font-family: var(--font-script); font-size: 42px; margin: 0px; }
.closing-date { font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--ink-soft); margin: 6px 0px 0px; }
.footer { background: var(--ivory-deep); padding: 46px 0px 54px; border-top: 1px solid rgba(194, 162, 76, 0.35); }
.foot-follow { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--ink-soft); margin: 0px 0px 8px; }
.foot-ig { color: var(--gold-deep); text-decoration: none; font-size: 18px; letter-spacing: 0.08em; border-bottom: 1px solid rgba(194, 162, 76, 0.5); padding-bottom: 2px; }
.foot-ig:visited, .foot-ig:active { color: var(--gold-deep); }
.foot-brand { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.4em; text-transform: uppercase; margin: 30px 0px 4px; }
.foot-tag { font-size: 14px; font-style: italic; color: var(--ink-soft); margin: 0px; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (min-width: 700px) {
  :root { --pad: 40px; }
  body { background: radial-gradient(90% 60% at 50% 0%, rgb(243, 235, 219) 0%, rgb(228, 217, 194) 60%, rgb(217, 203, 176) 100%); }
  .hero { min-height: 88vh; }
  .envelope-stage { width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .envelope, .hero-video, .fb-bg, .fb-couple, .fb-candles i, .scroll-cue i { animation: auto ease 0s 1 normal none running none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .env-flap, .env-card, .env-seal, .envelope { transition-duration: 0.01ms !important; }
  .shot-frame img { transform: scale(1.02); }
}