@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/cormorant-garamond-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;src:url(../fonts/cormorant-garamond-latin-300-italic.woff2) format("woff2")}
:root{
  --ink:#0f0e0c;
  --cream:#f4ede0;
  --cream-dim:rgba(244,237,224,.72);
  --sage:#a9c3a2;          /* her favourite colour, tuned to read on dark photos */
  --green:#2f4a3a;         /* deep green for fills */
  --green-ink:#122019;
  --serif:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --fade:2200ms;
  --gutter:clamp(20px,4.5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);color:var(--cream)}
body{font-family:var(--serif);-webkit-font-smoothing:antialiased;overflow:hidden}

.stage{position:fixed;inset:0;overflow:hidden}

/* ---------- slides ---------- */
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity var(--fade) ease-in-out;will-change:opacity}
.slide.is-on{opacity:1;z-index:2}
.slide.is-off{z-index:1}
.slide.pair{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--ink)}
.frame{position:relative;overflow:hidden;height:100%}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform-origin:var(--fx,50%) var(--fy,50%);
  transform:scale(var(--s0,1.08)) translate(var(--x0,0),var(--y0,0))}
.slide.is-on .frame img,.slide.is-off .frame img{
  animation:kb var(--kb-dur,10s) cubic-bezier(.33,.0,.45,1) forwards}
@keyframes kb{
  from{transform:scale(var(--s0)) translate(var(--x0),var(--y0))}
  to  {transform:scale(var(--s1)) translate(var(--x1),var(--y1))}
}

/* legibility: deepen bottom-left for the name, bottom-right for the button */
.scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(120% 70% at 0% 100%, rgba(12,11,9,.78) 0%, rgba(12,11,9,.35) 45%, rgba(12,11,9,0) 70%),
    linear-gradient(to top, rgba(12,11,9,.55) 0%, rgba(12,11,9,0) 38%),
    linear-gradient(to bottom, rgba(12,11,9,.28) 0%, rgba(12,11,9,0) 18%)}
.grain{position:absolute;inset:-50%;z-index:3;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* ---------- title ---------- */
.title{position:absolute;z-index:4;left:var(--gutter);bottom:calc(var(--gutter) + env(safe-area-inset-bottom));
  max-width:min(620px,80vw);text-shadow:0 1px 18px rgba(0,0,0,.35)}
.name-en{font-weight:300;font-size:clamp(2.6rem,6.2vw,5.4rem);line-height:.95;letter-spacing:.01em;
  opacity:0;transform:translateY(14px);animation:rise 1.6s .5s cubic-bezier(.2,.7,.2,1) forwards}
.name-fa{margin-top:clamp(10px,1.6vw,20px);width:clamp(170px,22vw,300px);
  clip-path:inset(0 0 0 100%);animation:ink 2.4s 1.4s cubic-bezier(.6,.05,.3,1) forwards}
.name-fa img{display:block;width:100%;height:auto;filter:drop-shadow(0 1px 10px rgba(0,0,0,.45))}
.meta{display:flex;align-items:center;gap:.8em;margin-top:clamp(12px,1.6vw,20px);
  font-size:clamp(.78rem,1.05vw,.95rem);letter-spacing:.24em;text-transform:uppercase;color:var(--cream-dim);
  opacity:0;animation:fade 1.4s 3s ease forwards}
.meta .dot{width:5px;height:5px;border-radius:50%;background:var(--sage)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes ink{to{clip-path:inset(0 0 0 0)}}   /* reveals right-to-left, the way Persian is written */
@keyframes fade{to{opacity:1}}

/* ---------- enter ---------- */
.enter{position:absolute;z-index:4;right:var(--gutter);bottom:calc(var(--gutter) + env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;gap:14px;padding:14px 22px 14px 24px;
  font:400 clamp(.82rem,1vw,.95rem)/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--cream);
  background:rgba(15,14,12,.18);border:1px solid rgba(169,195,162,.65);border-radius:0;cursor:pointer;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;animation:fade 1.4s 3.6s ease forwards;transition:background .5s,border-color .5s,color .5s}
.enter svg{width:30px;height:10px;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.enter:hover,.enter:focus-visible{background:var(--green);border-color:var(--sage);outline:none}
.enter:hover svg,.enter:focus-visible svg{transform:translateX(6px)}
.enter:focus-visible{box-shadow:0 0 0 3px rgba(169,195,162,.35)}

/* ---------- coming-soon dialog ---------- */
.soon{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:var(--gutter);
  background:rgba(14,24,19,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .7s ease}
.soon[hidden]{display:none}
.soon.is-open{opacity:1}
.soon-inner{position:relative;max-width:540px;text-align:center;transform:translateY(10px);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.soon.is-open .soon-inner{transform:none}
.soon-fa{width:150px;height:auto;margin:0 auto 26px;display:block}
.soon h2{font-weight:300;font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.15;margin-bottom:18px}
.soon p{font-size:clamp(1.05rem,1.6vw,1.22rem);line-height:1.6;color:var(--cream-dim)}
.soon-link{margin-top:26px;padding-top:22px;border-top:1px solid rgba(169,195,162,.3);font-style:italic;font-weight:300}
.soon a{color:var(--sage);text-decoration:none;border-bottom:1px solid rgba(169,195,162,.45);transition:border-color .3s,color .3s}
.soon a:hover{color:var(--cream);border-color:var(--cream)}
.close{position:fixed;top:calc(var(--gutter) + env(safe-area-inset-top));right:var(--gutter);width:44px;height:44px;
  display:grid;place-items:center;background:none;border:1px solid rgba(169,195,162,.4);color:var(--cream);cursor:pointer;transition:background .4s}
.close svg{width:16px;height:16px}
.close:hover,.close:focus-visible{background:var(--green);outline:none}

/* ---------- phones ---------- */
@media (max-width:820px){
  .scrim{background:
    linear-gradient(to top, rgba(12,11,9,.86) 0%, rgba(12,11,9,.45) 34%, rgba(12,11,9,0) 58%),
    linear-gradient(to bottom, rgba(12,11,9,.3) 0%, rgba(12,11,9,0) 16%)}
  .title{right:var(--gutter);bottom:calc(var(--gutter) + 78px + env(safe-area-inset-bottom))}
  .name-fa{width:min(200px,52vw)}
  .meta{letter-spacing:.18em}
  .enter{left:var(--gutter);right:var(--gutter);justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  .slide.is-on .frame img,.slide.is-off .frame img{animation:none;transform:scale(1.02)}
  .grain{animation:none}
  .name-en,.name-fa,.meta,.enter{animation-duration:.01s;animation-delay:0s}
}