/* Local review only: first section, using the observed Sacred Garden assets.
   Palette remains ours: wine #551f2b, ink #654635, paper #f5e8da, gold #b38a55.
   Reference: 224/236px asymmetric bouquets on a 450px canvas; 4s loops.
   No rules target the envelope, seal, opening layers, or opening timeline. */
#invitation .hero {height:var(--stable-hero-height,95dvh);min-height:0;max-height:none;aspect-ratio:auto;overflow:visible!important;z-index:auto}
#invitation.motion-enhanced .hero-art {object-fit:cover;object-position:50% 50%;transform:none;mask-image:none;z-index:0}
#invitation .hero-copy {top:calc(14% - 20px);padding:0 30px;z-index:1}
#invitation .hero h1 {font-size:clamp(54px,14vw,64px);margin-top:20px}
#invitation.motion-enhanced .hero h1.english-names {font-family:'Cormorant Garamond',Didot,'Times New Roman',serif;font-size:clamp(49px,13vw,72px);font-weight:400;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:.96;letter-spacing:-.035em;white-space:nowrap;width:82%;max-width:330px;margin:26px auto 20px;direction:ltr}
#invitation.motion-enhanced .hero h1.english-names>span:first-child {align-self:center}
#invitation.motion-enhanced .hero h1.english-names>span:last-child {align-self:center}
#invitation.motion-enhanced .hero h1.english-names em {font-family:'Great Vibes','Cormorant Garamond',cursive;font-size:.42em;font-weight:400;font-style:normal;letter-spacing:0;margin:2px 0;line-height:.8;color:var(--wine)}
#invitation .hero-bottom {bottom:28px;z-index:2}
#invitation .hero-bottom p {font-size:23px}
#invitation .hero .motion-item {--duration:2000ms;--from-x:0px;--from-y:30px}
#invitation .hero .scroll-hint {display:inline-flex;flex-direction:column;align-items:center;gap:0;text-decoration:none;animation:none;color:#551f2b}
#invitation .hero .scroll-label {font-size:15px;line-height:1.7;padding:3px 14px;border-radius:20px;background:#f8eddfeb;text-shadow:none}
#invitation .hero .scroll-arrow {font-size:25px;line-height:1;animation:study-cue 1.8s ease-in-out infinite;text-shadow:0 1px 3px #fff}
@media(prefers-reduced-motion:reduce){#invitation .hero .scroll-arrow{animation:none}}
#invitation .hero-petal-shower{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;perspective:700px}
#invitation .hero-petal-fall{position:absolute;top:-45px;width:var(--size);height:calc(100% + 90px);animation:hero-petal-fall var(--fall-time) var(--fall-delay) linear infinite;animation-play-state:paused;will-change:transform;pointer-events:none}
#invitation .hero-petal-fall img{display:block;width:100%;height:auto;animation:hero-petal-turn var(--sway-time) ease-in-out infinite alternate;animation-delay:var(--fall-delay);animation-play-state:paused;transform-origin:48% 65%}
#invitation .hero-petal-shower.is-running .hero-petal-fall,#invitation .hero-petal-shower.is-running img{animation-play-state:running}
@keyframes hero-petal-fall{0%{transform:translate3d(0,0,0);opacity:0}8%{opacity:.85}78%{opacity:.85}100%{transform:translate3d(var(--drift),100%,0);opacity:0}}
@keyframes hero-petal-turn{0%{transform:translateX(-12px) rotate(-25deg) rotateY(-35deg) rotateX(15deg)}50%{transform:translateX(8px) rotate(18deg) rotateY(25deg) rotateX(-15deg)}100%{transform:translateX(-4px) rotate(var(--turn)) rotateY(65deg) rotateX(20deg)}}
@media(prefers-reduced-motion:reduce){#invitation .hero-petal-shower{display:none}}
#invitation .study-bouquet {position:absolute;height:auto;pointer-events:none;z-index:3;transform-origin:center;animation:study-left 4s linear infinite;animation-play-state:paused}
#invitation .study-bouquet.left {width:40%;left:-3%;top:calc(100% - min(31.5vw,176.4px));transform:scaleX(-1);transform-origin:50% 12%;animation:castle-cascade-left 7s ease-in-out infinite;animation-play-state:paused;will-change:transform}
#invitation .study-bouquet.right {width:40%;right:-3%;top:calc(100% - min(31.5vw,176.4px));transform-origin:50% 12%;animation:castle-cascade 7s ease-in-out infinite;animation-play-state:paused;will-change:transform}
#invitation .hero.in-viewport .study-bouquet {animation-play-state:running}
#invitation nav {display:none}
#invitation #welcome {padding:160px 36px 72px;min-height:475px;background:transparent;isolation:auto;z-index:auto}
/* Opaque warm paper overlaps the lake; reference alpha supplies the actual torn edge.
   Both bouquets sit above it. There is no faded band between lake and stationery. */
/* Reference renders this 1680px sheet at 744px across a 450px composition.
   Keep the RGB fibers and deckled rim, not just its alpha silhouette. */
#invitation #welcome::before {content:'';position:absolute;top:-24px;bottom:-1px;left:-32.667%;width:165.334%;z-index:1;background:url('reference-study/paper.png') center/100% 100% no-repeat;pointer-events:none}
#invitation #welcome>* {position:relative;z-index:2}
#invitation #welcome>.flourish,#invitation #welcome>.tiny-rose,#invitation #welcome>.small-title {display:none}
#invitation #welcome h2 {font-size:31px;line-height:1.5;margin:0 auto 26px;max-width:300px;--from-y:0px;--duration:1000ms;--delay:0ms}
#invitation #welcome>p:not(.small-title) {font-size:19px;line-height:1.8;margin:0 auto 22px;max-width:300px;--from-y:0px;--duration:2000ms;--delay:200ms}
#invitation #welcome .verse {font-size:20px!important;color:var(--wine)}
#invitation #welcome>p.basmala {position:absolute;top:55px;left:20%;right:20%;max-width:none;margin:0;text-align:center;white-space:nowrap;font-family:Amiri,serif;font-size:clamp(18px,4.8vw,25px);line-height:2;color:#997541;--from-y:0px;--delay:0ms}
/* The lighter sheet must extend behind the welcome sheet's transparent torn edge. */
#invitation #date {background:#fbf1e1;clip-path:none;padding-top:50px;isolation:auto}
#invitation #date::before {content:'';position:absolute;top:-40px;left:0;right:0;height:40px;background:#fbf1e1;pointer-events:none;z-index:0}
/* Align the visible paper, compensating for asymmetric transparent PNG gutters. */
#invitation #date>.small-title {display:none}
#invitation #date h2 {font-size:32px;margin:0 0 24px}
/* A single Arabic date inscription: weekday above, day and month together. */
#invitation #date .date-row {display:none}
#invitation #date .date-row>strong {font-size:64px;line-height:1.3;font-weight:400;border:0;outline:0;text-shadow:none}
#invitation #date .date-row>span {width:auto;border:0;padding:0;font-family:Amiri,serif;font-size:32px;color:var(--wine)}
#invitation #date .date-row>span:first-child {grid-column:1/-1;font-family:'Noto Naskh Arabic',serif;font-size:18px;color:var(--ink);margin-bottom:3px}
#invitation #date .year {margin:0 0 20px;letter-spacing:0;font-family:Amiri,serif;font-size:clamp(25px,6.5vw,30px);font-weight:700;line-height:1.8;color:var(--wine);text-wrap:balance}
#invitation #date .wedding-week {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;max-width:350px;margin:0 auto 28px;padding:16px 0 12px;border-top:1px solid #b38a5530;border-bottom:1px solid #b38a5530;direction:rtl}
#invitation #date .week-day {position:relative;min-width:0;padding:8px 0 20px;color:#927965}
#invitation #date .week-day>span:first-child {display:block;font-size:12px;line-height:1.8}
#invitation #date .week-day>strong {display:block;font-family:Amiri,serif;font-size:25px;font-weight:400;line-height:1.8}
#invitation #date .wedding-day {color:var(--wine);background:#551f2b08;border-radius:24px 24px 6px 6px}
#invitation #date .wedding-day>strong {font-weight:700}
#invitation #date .date-heart {position:absolute;bottom:3px;left:0;right:0;font-size:12px;line-height:18px;color:var(--wine)}
#invitation #date .timeline {padding:0 0 12px}
#invitation #date .rose-mark {display:none}
#invitation #date .timeline::before {content:none}
#invitation #date .timeline>strong {font-size:28px;line-height:1.6}
#invitation #date .timeline p {font-size:17px;margin:4px 0}
#invitation #date .countdown {gap:clamp(5px,2vw,12px);margin:20px auto 0;padding:22px 0 14px;border-top:1px solid #b38a5545;max-width:340px}
#invitation #date .countdown>div {flex:1;min-width:0}
#invitation #date .countdown strong {position:relative;overflow:hidden;height:58px;font-size:38px;line-height:58px;font-variant-numeric:tabular-nums;direction:ltr}
#invitation #date .countdown strong span {display:block;font:inherit;color:inherit;line-height:inherit}
#invitation #date .countdown .count-old {position:absolute;inset:0}
#invitation #date .countdown>div>span {display:block;font-size:13px;margin-top:6px}
#invitation #date .countdown>b {align-self:auto;font-size:17px;margin-top:-23px;color:#b38a5580}
#invitation #date .countdown-note {font-size:15px;margin:12px 0 24px}
@media(max-width:360px){#invitation #date h2{font-size:29px}#invitation #date .date-row>strong{font-size:58px}#invitation #date .date-row>span{font-size:29px}}
#invitation #venue {isolation:isolate;z-index:1;background:transparent;padding-top:64px;padding-bottom:72px}
/* One continuous textured sheet retains both native torn edges. */
#invitation #venue::before {content:'';position:absolute;left:-32.667%;width:165.334%;top:-24px;bottom:-24px;background:url('reference-study/paper.png') center/100% 100% no-repeat;pointer-events:none;z-index:-1}
#invitation #venue::after {content:none}
#invitation #venue .venue-petals {position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
#invitation #venue .venue-petal {position:absolute;width:28px;height:auto;opacity:.8;will-change:transform;pointer-events:none}
@media(prefers-reduced-motion:reduce){#invitation #venue .venue-petals{display:none}}
/* Keep scrolling functional without a light RTL scrollbar gutter beside the artwork. */
html {scrollbar-width:none}
html::-webkit-scrollbar {width:0;height:0}
@keyframes study-left {0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.06) rotate(2deg)}}
@keyframes study-right {0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.04) rotate(-2deg)}}
@keyframes castle-cascade {0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
@keyframes castle-cascade-left {0%,100%{transform:rotate(.7deg) scaleX(-1)}50%{transform:rotate(-.7deg) scaleX(-1)}}
@keyframes study-cue {0%,100%{translate:0 0}55%{translate:0 5px}}
@media(prefers-reduced-motion:reduce){#invitation .study-bouquet,#invitation .hero .scroll-hint{animation:none}}