:root{--ink:#08130f;--ink2:#0f1f19;--ivory:#f3ead8;--gold:#cdb27a;--sage:#8aa386;--mute:#a9b3a5;
--serif:"Aref Ruqaa","Amiri",serif;--sans:"IBM Plex Sans Arabic",Tahoma,sans-serif;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*:before,*:after{box-sizing:inherit;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink);scroll-padding-top:env(safe-area-inset-top,0px)}
body{background:var(--ink);color:var(--ivory);font-family:var(--sans);font-weight:300;line-height:1.9;overflow-x:hidden}
a{color:inherit}
a:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* ---------- Hero: the film frame ---------- */
.hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:#000}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;
transform:scale(1.12);animation:push 22s ease-out forwards}
@keyframes push{to{transform:scale(1.0)}}
.hero:before{content:"";position:absolute;inset:0;z-index:2;
background:radial-gradient(ellipse at 50% 40%,transparent 38%,rgba(4,10,8,.6) 100%),
linear-gradient(180deg,rgba(4,10,8,.55) 0,transparent 22%,transparent 42%,rgba(4,10,8,.92) 88%)}
.grain{position:absolute;inset:0;z-index:3;opacity:.16;mix-blend-mode:overlay;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation:jitter .6s steps(3) infinite}
@keyframes jitter{33%{transform:translate(-2%,1%)}66%{transform:translate(1%,-2%)}}
.bar{position:absolute;left:0;right:0;height:11svh;background:#000;z-index:5;transition:transform 2.4s cubic-bezier(.7,0,.2,1) .5s}
.bar.t{top:0}.bar.b{bottom:0}
.hero.open .bar.t{transform:translateY(-100%)}
.hero.open .bar.b{transform:translateY(100%)}
.title{position:absolute;z-index:4;left:0;right:0;bottom:0;text-align:center;padding:0 20px 13svh}
.bism{font-family:var(--serif);font-size:clamp(17px,3.6vw,22px);color:var(--gold)}
.names{font-family:var(--serif);font-weight:700;font-size:clamp(60px,15vw,128px);line-height:1.15;color:var(--ivory);
text-shadow:0 4px 40px rgba(0,0,0,.7);margin:6px 0 2px;display:flex;justify-content:center;align-items:baseline;gap:.22em}
.names i{font-style:normal;color:var(--gold);font-size:.55em;font-weight:400}
.sub{font-size:clamp(14px,3.4vw,17px);color:#e4dccb;letter-spacing:.02em}
.when{margin-top:14px;display:inline-block;padding:5px 22px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);
font-size:15px;color:var(--gold);font-weight:400}
.reel{opacity:0;transform:translateY(14px);transition:opacity 1.6s ease,transform 1.6s ease}
.hero.open .reel{opacity:1;transform:none}
.hero.open .reel.d1{transition-delay:1.9s}.hero.open .reel.d2{transition-delay:2.4s}.hero.open .reel.d3{transition-delay:2.9s}

/* ---------- Story ---------- */
.story{padding:110px 24px 90px;text-align:center;background:linear-gradient(180deg,var(--ink),var(--ink2))}
.story p.big{font-family:var(--serif);font-size:clamp(26px,6vw,44px);line-height:1.8;max-width:16em;margin:0 auto;color:var(--ivory)}
.story p.small{max-width:30em;margin:26px auto 0;color:var(--mute);font-size:16px}

/* ---------- Details ---------- */
.details{max-width:760px;margin:0 auto;padding:30px 24px 100px}
.row{display:grid;grid-template-columns:7.5em 1fr;gap:10px 24px;align-items:baseline;padding:30px 0;border-top:1px solid rgba(205,178,122,.28)}
.row:last-child{border-bottom:1px solid rgba(205,178,122,.28)}
.row dt{color:var(--gold);font-size:15px;font-weight:400}
.row dd{font-family:var(--serif);font-size:clamp(24px,5vw,34px);line-height:1.5}
.row dd small{display:block;font-family:var(--sans);font-size:15px;color:var(--mute);margin-top:4px}
.map{display:inline-block;margin-top:18px;padding:10px 26px;border:1px solid var(--gold);border-radius:999px;text-decoration:none;
font-family:var(--sans);font-size:15px;color:var(--ivory);transition:background .3s,color .3s}
.map:hover{background:var(--gold);color:var(--ink)}

/* ---------- Countdown ---------- */
.count{padding:90px 20px 110px;text-align:center;background:var(--ink2)}
.count h2{font-family:var(--serif);font-weight:400;font-size:clamp(26px,5vw,36px);color:var(--gold);margin-bottom:34px}
.clock{display:flex;justify-content:center;gap:clamp(14px,5vw,44px);direction:rtl}
.clock div{min-width:64px}
.clock strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(46px,12vw,86px);line-height:1.1;color:var(--ivory);font-variant-numeric:tabular-nums}
.clock span{font-size:14px;color:var(--mute)}
#msg{margin-top:22px;color:var(--gold);min-height:1.9em}

/* ---------- Closing credits ---------- */
.end{padding:120px 24px 90px;text-align:center;background:var(--ink)}
.end p{color:var(--mute);margin-bottom:10px}
.end h2{font-family:var(--serif);font-weight:700;font-size:clamp(48px,12vw,96px);line-height:1.2;color:var(--ivory)}
.end h2 i{font-style:normal;color:var(--gold);font-size:.55em;font-weight:400;margin:0 .2em}
footer{padding:0 20px 36px;text-align:center;font-size:13px;color:#5d6a60;background:var(--ink)}

@media(max-width:560px){.row{grid-template-columns:1fr;gap:2px}.hero img{object-position:46% 30%}}
@media(prefers-reduced-motion:reduce){.hero img,.grain{animation:none;transform:none}.bar{display:none}.reel{opacity:1;transform:none;transition:none}}

/* ---------- Gate: doors that open ---------- */
body.lock{overflow:hidden;height:100svh}
#gate{position:fixed;inset:0;z-index:100;perspective:1600px;overflow:hidden;cursor:pointer}
.leaf{position:absolute;top:0;bottom:0;width:50.2%;background:radial-gradient(circle at 50% 50%,#17301f,#0a1611 72%);
transition:transform 2.3s cubic-bezier(.65,0,.25,1),opacity 1.4s ease .9s;backface-visibility:hidden}
.leaf:before{content:"";position:absolute;inset:16px;border:1px solid rgba(205,178,122,.55);
box-shadow:inset 0 0 0 7px #0a1611,inset 0 0 0 8px rgba(205,178,122,.25);
background:repeating-linear-gradient(45deg,transparent 0 22px,rgba(205,178,122,.08) 22px 23px),repeating-linear-gradient(-45deg,transparent 0 22px,rgba(205,178,122,.08) 22px 23px)}
.leaf.l{left:0;transform-origin:0 50%}.leaf.r{right:0;transform-origin:100% 50%}
#gate.open .leaf.l{transform:rotateY(105deg);opacity:0}#gate.open .leaf.r{transform:rotateY(-105deg);opacity:0}
.seal{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:132px;height:132px;border-radius:50%;
border:1px solid var(--gold);background:var(--ink);color:var(--gold);font-family:var(--serif);font-size:36px;cursor:pointer;
box-shadow:0 0 0 8px var(--ink),0 0 0 9px rgba(205,178,122,.5),0 0 50px rgba(205,178,122,.25);animation:beat 2.4s ease-in-out infinite;
transition:opacity .6s,transform .9s}
.seal:focus-visible{outline:2px solid var(--ivory);outline-offset:14px}
@keyframes beat{50%{box-shadow:0 0 0 8px var(--ink),0 0 0 9px rgba(205,178,122,.5),0 0 100px rgba(205,178,122,.55)}}
.g-top,.g-hint{position:absolute;z-index:2;left:0;right:0;text-align:center;transition:opacity .5s}
.g-top{top:calc(50% - 150px);font-family:var(--serif);font-size:clamp(20px,5vw,26px);color:var(--gold)}
.g-hint{top:calc(50% + 98px);color:var(--mute);font-size:15px}
#gate.open .seal{opacity:0;transform:translate(-50%,-50%) scale(1.7)}
#gate.open .g-top,#gate.open .g-hint{opacity:0}
.pw{position:absolute;inset:-7% 0;will-change:transform;transform:translateY(var(--py,0px))}
.amb{display:none}
.prog{position:fixed;top:0;left:0;right:0;height:2px;background:var(--gold);transform-origin:100% 50%;transform:scaleX(0);z-index:60;pointer-events:none}
.seal:hover{transform:translate(-50%,-50%) scale(1.06)}
.hero img{animation-play-state:paused}.hero.open img{animation-play-state:running}
.hero.open .names span:first-child{animation:inR 1.7s cubic-bezier(.2,.8,.2,1) 2.2s both}
.hero.open .names span:last-child{animation:inL 1.7s cubic-bezier(.2,.8,.2,1) 2.2s both}
.hero.open .names i{animation:pp 1.2s cubic-bezier(.3,1.6,.4,1) 3.3s both}
@keyframes inR{from{opacity:0;transform:translateX(120px);filter:blur(16px)}}
@keyframes inL{from{opacity:0;transform:translateX(-120px);filter:blur(16px)}}
@keyframes pp{from{opacity:0;transform:scale(0) rotate(-90deg)}}

/* ---------- Pages that flip ---------- */
.flip{opacity:0;transform:perspective(900px) rotateX(-75deg) translateY(50px);transform-origin:50% 0;
transition:opacity 1s ease,transform 1.3s cubic-bezier(.2,.8,.2,1)}
.flip.in{opacity:1;transform:none}
.clock div{perspective:400px}.clock strong{transform-origin:50% 0}
.clock strong.pop{animation:popd .55s cubic-bezier(.2,.8,.2,1)}
@keyframes popd{from{transform:rotateX(-90deg);opacity:0}}
.heart{margin-top:26px;font-size:40px;color:var(--gold);animation:hb 2s infinite}
@keyframes hb{50%{transform:scale(1.18)}}
.petals{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden}
.petal{position:absolute;top:-24px;width:9px;height:14px;background:var(--gold);border-radius:100% 0 100% 0;
animation:fall linear forwards;box-shadow:0 0 10px rgba(205,178,122,.6)}
@keyframes fall{to{transform:translate3d(var(--x),112vh,0) rotate(600deg);opacity:0}}

/* ---------- Desktop: framed portrait + title side by side ---------- */
@media(min-width:900px) and (min-aspect-ratio:1/1){
 .amb{display:block;position:absolute;inset:-6%;z-index:0;background-size:cover;background-position:center;filter:blur(46px) brightness(.42) saturate(1.15)}
 .hero:before{z-index:1;background:radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(4,10,8,.75) 100%)}
 .pw{inset:auto;z-index:2;top:50%;left:clamp(40px,7vw,150px);height:min(78svh,44vw);aspect-ratio:1;overflow:hidden;
  transform:translateY(calc(-50% + var(--py,0px)));border:1px solid rgba(205,178,122,.6);
  box-shadow:0 0 0 10px rgba(8,19,15,.55),0 0 0 11px rgba(205,178,122,.3),0 40px 120px rgba(0,0,0,.6)}
 .hero img{object-position:50% 40%}
 .title{left:auto;right:0;top:0;width:calc(100% - min(78svh,44vw) - clamp(40px,7vw,150px) - 40px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 3vw 0 2vw}
 .names{flex-direction:column;align-items:center;gap:0;font-size:clamp(70px,8.2vw,140px);line-height:1.1}
 .names i{font-size:.4em}
 .sub{max-width:20em;line-height:2}
 .when{margin-top:22px;font-size:17px}
 .story{padding:150px 24px 130px}
 .details{max-width:1120px;display:grid;grid-template-columns:repeat(3,1fr);padding:0 24px 130px;border-block:1px solid rgba(205,178,122,.28);margin-block:0 130px}
 .row{grid-template-columns:1fr;text-align:center;border:0!important;border-inline-start:1px solid rgba(205,178,122,.28)!important;padding:56px 34px}
 .row:first-child{border-inline-start:0!important}
 .row dd small{max-width:15em;margin-inline:auto}
 .map{margin-inline:5px}
 .count{padding:120px 20px 140px}
}
@media(min-width:1500px){.story p.big{font-size:52px}}
@media(prefers-reduced-motion:reduce){.leaf,.seal{transition:none;animation:none}.flip{opacity:1;transform:none;transition:none}.petals{display:none}.names span,.names i{animation:none!important}}