/* =========================================================
   Jomana & Ali | Fatha invitation
   White, embossed paper, lace flowers, serif lettering
   ========================================================= */

   :root {
    --paper-1: #FCF9F5;
    --paper-2: #F8F1E9;
    --paper-3: #F1E7DB;
    --ink: #5B4638;
    --ink-soft: #8C7765;
    --gold: #B4945F;
    --gold-soft: rgba(180, 148, 95, .55);
    --shadow: rgba(120, 90, 60, .18);
  
    --font: 'Cormorant Garamond', 'EB Garamond', Garamond, Georgia, serif;
    --font-ar: 'Amiri', 'Traditional Arabic', 'Times New Roman', serif;
  }
  
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  
  html, body { height: 100%; }
  
  body {
    font-family: var(--font);
    color: var(--ink);
    background: #EEE6DB;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  
  button, input { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; }
  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  
  /* =========================================================
     Stage = the "phone screen". Everything scales with it.
     ========================================================= */
  .stage {
    position: fixed;
    top: 0; left: 50%;
    transform: translateX(-50%);
    height: 100dvh;
    width: min(100vw, calc(100dvh * .58), 520px);
    container-type: size;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(120, 90, 60, .18);
    background: var(--paper-2);
  }
  
  .paper,
  .cover {
    position: absolute;
    inset: 0;
    font-size: 17px;
    font-size: min(4.7cqw, 2.2cqh);
  }
  
  .paper {
    background: linear-gradient(180deg, var(--paper-1) 0%, var(--paper-2) 55%, var(--paper-3) 100%);
  }
  /* soft paper grain */
  .paper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .35;
    mix-blend-mode: multiply;
    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%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .3 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  
  /* ---- arched frame ---- */
  .frame { position: absolute; inset: 0; width: 100%; height: 100%; }
  .frame__fill { fill: rgba(255, 255, 255, .5); }
  .frame__line { stroke: #CDB894; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
  .frame__line--thin { stroke: #DCCDB3; stroke-width: 1; }
  
  /* ---- lace flowers (your right.png) ---- */
  .lace {
    position: absolute;
    max-width: none;
    pointer-events: none;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  }
  .lace--tl { left: -1%; top: 0; height: 44%; width: auto; transform: scaleX(-1); transform-origin: 50% 0; animation: laceSway 8s ease-in-out infinite; }
  .lace--br { right: 0; bottom: 0; height: 27%; width: auto; transform: scaleY(-1); transform-origin: 100% 50%; animation: laceSway 9s ease-in-out -3s infinite; }
  
  .brand {
    position: absolute;
    top: 11.8%;
    left: 50%;
    transform: translateX(-50%);
    font-style: italic;
    font-weight: 500;
    font-size: 1.35em;
    letter-spacing: .22em;
    padding-left: .22em;
    white-space: nowrap;
    color: var(--ink);
    opacity: 0;
    z-index: 2;
  }
  body.is-open .brand { animation: brandIn 1.6s ease 3.4s both; }
  
  /* =========================================================
     Pages
     ========================================================= */
  .viewport {
    position: absolute;
    left: 15%; right: 15%;
    top: 19%; bottom: 16.5%;
    z-index: 2;
  }
  
  .slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--rest, 0));
    transition: opacity .8s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .8s;
  }
  .slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 1s ease .25s, transform 1.3s cubic-bezier(.2, .7, .2, 1) .15s, visibility 0s;
  }
  .slide:not(.slide--intro).is-active > * {
    animation: rise 1s cubic-bezier(.2, .7, .2, 1) both;
    animation-delay: calc(.4s + var(--k, 0) * .11s);
  }
  
  /* ---- little ornaments ---- */
  .orn { display: flex; align-items: center; justify-content: center; gap: .55em; margin: .9em 0; }
  .orn i { display: block; width: 3.4em; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
  .orn i:last-child { background: linear-gradient(270deg, transparent, var(--gold)); }
  .orn b { display: block; width: .4em; height: .4em; border-radius: 50%; background: var(--gold); }
  .orn .dia, .dia { width: .42em; height: .42em; border-radius: 0; background: #fff; border: 1px solid var(--gold); transform: rotate(45deg); }
  .dia--sm { width: .36em; height: .36em; display: block; margin: .45em auto; }
  .orn--short i { width: 2.4em; }
  
  .cap {
    font-size: .92em;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--ink-soft);
  }
  .cap--lg { font-size: 1.02em; letter-spacing: .12em; color: var(--ink); }
  
  .title { font-size: 2em; font-weight: 600; margin-bottom: .55em; }
  .address { font-size: .86em; line-height: 1.5; color: var(--ink-soft); margin: .7em 0 1em; max-width: 16em; }
  .quote { font-style: italic; font-size: 1.12em; line-height: 1.5; color: var(--ink-soft); max-width: 14em; }
  .quote--end { margin-top: 1.4em; }
  
  /* =========================================================
     1. Names
     ========================================================= */
  .intro-a, .intro-b {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: opacity 1.4s ease;
  }
  .intro-b { opacity: 0; }
  .slide--intro.is-b .intro-a { opacity: 0; }
  .slide--intro.is-b .intro-b { opacity: 1; }
  .slide--intro:not(.is-b) .intro-b { pointer-events: none; }
  
  .big-name { font-size: 4em; font-weight: 600; line-height: 1.05; }
  .big-and { font-size: 1.9em; font-style: italic; font-weight: 500; color: var(--ink-soft); line-height: 1.1; opacity: 0; }
  .lt { display: inline-block; opacity: 0; }
  .slide--intro.is-active .lt { animation: letterRise 1.2s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(1s + var(--i) * .12s); }
  .slide--intro.is-active .big-and { animation: fadeIn 1s ease 1.6s both; }
  .slide--intro.is-b .intro-b > * { animation: rise 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.2s + var(--k, 0) * .14s); }
  .slide--intro.is-active .intro-a .orn { animation: fadeIn 1.4s ease 1.9s both; }
  .intro-a .orn { opacity: 0; }
  
  .ar { font-family: var(--font-ar); font-size: 1.15em; color: var(--ink-soft); margin-bottom: .8em; }
  .line-name { font-size: 2.35em; font-weight: 600; line-height: 1.15; white-space: nowrap; }
  .line-name em { font-size: .58em; font-weight: 500; color: var(--ink-soft); margin: 0 .08em; }
  .line-name--sm { font-size: 2.1em; }
  .lead { font-size: 1.04em; font-weight: 500; line-height: 1.7; }
  .lead--ar {
    font-family: var(--font-ar);
    font-size: 1.1em;
    font-weight: 400;
    line-height: 2.2;
    letter-spacing: 0;
    color: var(--ink);
    margin-top: .2em;
  }
  .lead--ar b { font-weight: 700; }
  
  .families { margin-top: 1.3em; width: 100%; }
  .families__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8em; margin-top: .6em; }
  .families__row p { display: flex; flex-direction: column; gap: .15em; }
  .families__row strong { font-size: 1.1em; font-weight: 600; }
  .families__row .cap { font-size: .8em; }
  .families__sep { width: 1px; height: 2.8em; background: var(--gold-soft); }
  
  /* =========================================================
     Plates and buttons (small raised labels)
     ========================================================= */
  .plate, .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6em;
    padding: .62em 1.5em;
    background: linear-gradient(180deg, #FFFFFF, #F3ECE2);
    border: 1px solid var(--gold-soft);
    border-radius: 1.1em;
    box-shadow:
      0 0 0 .22em rgba(255, 255, 255, .75),
      0 0 0 calc(.22em + 1px) rgba(180, 148, 95, .4),
      0 .5em 1.1em var(--shadow),
      inset 0 1px 0 #fff;
    font-size: .95em;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ink);
  }
  .plate--banner { font-size: 1em; letter-spacing: .05em; padding: .7em 1.6em; max-width: 100%; }
  .address[hidden] + .btn { margin-top: 1.6em; }
  .plates { display: flex; gap: 1.2em; margin: 1.3em 0 1.4em; justify-content: center; }
  
  .btn { transition: transform .2s ease, box-shadow .2s ease; }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(1px); }
  .btn svg { width: 1.3em; height: 1.3em; }
  .btn--small { font-size: .84em; padding: .55em 1.3em; }
  
  /* "Scroll down": plain, elegant text with a thin arrow */
  .next {
    position: absolute;
    left: 50%;
    bottom: 4.6%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15em;
    padding: .4em 1.2em;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 1.12em;
    font-style: italic;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: none;
    white-space: nowrap;
    color: var(--ink-soft);
    transition: opacity .6s ease, color .3s ease;
    opacity: 0;
    pointer-events: none;
  }
  .next:hover { color: var(--ink); }
  .next svg { width: 1.1em; height: 1.1em; animation: nudge 2s ease-in-out infinite; }
  .next svg path { stroke-width: 1.3; }
  body.is-open .next { opacity: 1; pointer-events: auto; transition-delay: 2.4s; }
  
  /* =========================================================
     2. Date
     ========================================================= */
  .cartouche { position: relative; width: 10.8em; height: 14em; margin: .9em 0 0; }
  .cartouche > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .cartouche__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .cartouche__num { font-size: 4.4em; font-weight: 500; line-height: 1; }
  .cartouche__month { font-size: 1.1em; letter-spacing: .2em; margin-top: .4em; padding-left: .2em; }
  .cartouche__year { font-size: 1.05em; letter-spacing: .18em; padding-left: .18em; color: var(--ink-soft); }
  
  /* =========================================================
     3. Location
     ========================================================= */
  .map {
    position: relative;
    display: block;
    width: 100%;
    height: 11.2em;
    margin-bottom: 1.1em;
    border-radius: 5.6em 5.6em 1em 1em;
    overflow: hidden;
    background: #F4EEE4;
    box-shadow:
      0 0 0 .3em #fff,
      0 0 0 calc(.3em + 1px) var(--gold-soft),
      0 .7em 1.4em var(--shadow);
  }
  .map__art, .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .map__pin { position: absolute; left: 53%; top: 36%; width: 2.2em; margin-left: -1.1em; animation: pinHop 2.6s ease-in-out infinite; }
  
  /* =========================================================
     4. Countdown
     ========================================================= */
  .days {
    position: relative;
    font-size: 5.6em;
    font-weight: 500;
    line-height: 1;
    padding: 0 .55em;
    font-variant-numeric: lining-nums tabular-nums;
  }
  .days::before, .days::after {
    content: "";
    position: absolute;
    top: 52%;
    width: .07em; height: .07em;
    border: 1px solid var(--gold);
    transform: rotate(45deg);
  }
  .days::before { left: 0; }
  .days::after  { right: 0; }
  .days__lbl { margin-top: .1em; }
  
  .hms { display: flex; align-items: flex-start; gap: 1.1em; margin: 1.5em 0 1.2em; }
  .hms div { display: flex; flex-direction: column; align-items: center; min-width: 3.4em; }
  .hms div > span { font-size: 2em; font-weight: 500; line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; }
  .hms small { font-size: .8em; opacity: .8; margin-top: .2em; }
  .hms__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); margin-top: 1.5em; }
  
  /* =========================================================
     Doors
     ========================================================= */
  .cover { z-index: 30; perspective: 1700px; overflow: hidden; --W: min(78cqw, 50cqh); }
  
  .door {
    position: absolute;
    top: 0; bottom: 0;
    width: 50.2%;
    overflow: hidden;
    background: linear-gradient(90deg, #F5EEE5, #FCF9F4 45%, #F7F0E7);
    transition: transform 3.8s cubic-bezier(.45, .05, .25, 1) .7s;
    backface-visibility: hidden;
    will-change: transform;
  }
  .door--left  { left: 0;  transform-origin: left center;  border-right: 1px solid #D9C8AB; box-shadow: 2px 0 14px rgba(120, 90, 60, .25); }
  .door--right { right: 0; transform-origin: right center; border-left: 1px solid #D9C8AB;  box-shadow: -2px 0 14px rgba(120, 90, 60, .25); background: linear-gradient(270deg, #F5EEE5, #FCF9F4 45%, #F7F0E7); }
  .door::before {
    content: "";
    position: absolute;
    inset: 3.5% 6% 3.5% 6%;
    border: 1px solid rgba(180, 148, 95, .28);
    border-radius: .6em;
  }
  
  /* lace hugs the outer edge only: three small copies stacked */
  .door__edge {
    position: absolute;
    top: -1%; bottom: -1%;
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .door--left  .door__edge { left: -4%; }
  .door--right .door__edge { right: -4%; align-items: flex-end; }
  .door__edge img {
    display: block;
    height: 35%;
    width: auto;
    max-width: none;
  }
  .door--left  .door__edge img { transform: scaleX(-1); }
  .door--left  .door__edge img:nth-child(2) { transform: scale(-1, -1); }
  .door--right .door__edge img:nth-child(2) { transform: scaleY(-1); }
  
  /* the medallion piece is cut in half: each half rides on its own door */
  .door__seal {
    position: absolute;
    top: calc(50% - var(--W) * .684);
    width: var(--W);
    max-width: none;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 .5em .7em rgba(90, 60, 30, .28));
  }
  .door--left  .door__seal { left: calc(100% - var(--W) / 2); clip-path: inset(0 50% 0 0); }
  .door--right .door__seal { left: calc(var(--W) / -2);       clip-path: inset(0 0 0 50%); }
  
  .cover.is-open .door--left  { transform: rotateY(-98deg); }
  .cover.is-open .door--right { transform: rotateY(98deg); }
  
  /* invisible tap target with a soft ripple around the medallion */
  .seal {
    position: absolute;
    left: 50%; top: 50%;
    width: calc(var(--W) * .5);
    height: calc(var(--W) * .72);
    padding: 0;
    transform: translate(-50%, -50%);
    z-index: 3;
    border-radius: 50%;
  }
  .seal__ripple {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid var(--gold);
    animation: ripple 3s ease-out infinite;
  }
  .cover.is-open .seal { pointer-events: none; }
  .cover.is-open .seal__ripple { animation: none; opacity: 0; }
  
  .cover__hint {
    position: absolute;
    left: 0; right: 0;
    top: calc(50% + var(--W) * .4);
    text-align: center;
    font-size: 1em;
    font-weight: 600;
    font-style: italic;
    letter-spacing: .12em;
    color: var(--ink);
    animation: pulse 2.6s ease-in-out infinite;
    z-index: 3;
    transition: opacity .5s;
  }
  .cover__hint span.pillbox {
    display: inline-block;
    padding: .5em 1.5em .5em 1.7em;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--gold-soft);
    border-radius: 999px;
    box-shadow: 0 .4em 1em var(--shadow);
  }
  .cover.is-open .cover__hint { opacity: 0; animation: none; }
  
  /* closing emblem */
  .emblem { width: 4.2em; height: auto; margin-bottom: 1.3em; clip-path: ellipse(49.3% 49.5% at 50% 50%); animation: float 5s ease-in-out infinite; }
  
  /* =========================================================
     Keyframes
     ========================================================= */
  @keyframes rise   { from { opacity: 0; transform: translateY(.9em); } to { opacity: 1; transform: none; } }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes letterRise {
    0%   { opacity: 0; transform: translateY(.5em) scale(.94); }
    65%  { opacity: 1; transform: translateY(-.05em); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes ripple { 0% { transform: scale(.9); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
  @keyframes pulse  { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
  @keyframes nudge  { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
  @keyframes pinHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.5em); } }
  @keyframes shake  { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
  
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    .big-name, .big-and, .intro-a .orn { opacity: 1; }
  }
  
  /* =========================================================
     Typewriter
     ========================================================= */
  .tw { display: inline-block; white-space: nowrap; }
  .tc { opacity: 0; }
  .tc.on { opacity: 1; }
  .caret { display: inline-block; position: relative; width: 0; height: 0; vertical-align: baseline; pointer-events: none; }
  .caret::after {
    content: "";
    position: absolute;
    left: 1px; bottom: -.18em;
    width: 1.5px; height: 1em;
    background: var(--gold);
    animation: caretBlink .7s steps(1) infinite;
  }
  @keyframes caretBlink { 50% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .tc { opacity: 1; } .caret { display: none; } }
  
  /* floating gold sparkles */
  .motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
  .mote {
    position: absolute;
    bottom: -3%;
    left: var(--x);
    width: var(--s); height: var(--s);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0, #E9D3A6 45%, transparent 72%);
    opacity: 0;
    animation: moteUp var(--d) linear var(--delay) infinite;
  }
  
  /* tap feedback: a soft gold ring where you touch */
  .tap {
    position: absolute;
    z-index: 40;
    width: 2.6em; height: 2.6em;
    margin: -1.3em 0 0 -1.3em;
    border-radius: 50%;
    border: 1px solid var(--gold);
    background: radial-gradient(circle, rgba(255, 255, 255, .6), transparent 70%);
    pointer-events: none;
    animation: tapRing .8s ease-out forwards;
    font-size: min(4.7cqw, 2.2cqh);
  }
  
  @keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
  @keyframes brandIn   { from { opacity: 0; } to { opacity: .85; } }
  @keyframes float     { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.35em); } }
  @keyframes laceSway  { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.4deg; } }
  @keyframes moteUp {
    0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
    15%  { opacity: .9; }
    85%  { opacity: .6; }
    100% { transform: translate3d(var(--sway), -108cqh, 0) scale(1); opacity: 0; }
  }
  @keyframes tapRing   { from { transform: scale(.3); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
  
  button, a { touch-action: manipulation; }
  
  @media (prefers-reduced-motion: reduce) {
    .lt, .big-and { opacity: 1; }
    .motes, .tap { display: none; }
    .brand { opacity: .85; }
  }