/* ═══════════════════════════════════════════════════════════════════
   VARIANT · البستان / GARDEN
   Asymmetric and airy. Nothing is centred: the photo sits off to one
   side and the type overlaps it. Oval frames, botanical line work,
   generous leading. Opening: the photo fills the screen, then settles.
   ═══════════════════════════════════════════════════════════════════ */

:root[data-variant="garden"] {
  --ground:   #FBF4F1;  --ground-2: #F5E7E1;
  --ink:      #453639;  --ink-soft: #857073;
  --accent:   #C0857C;  --accent-2: #6E8067;
  --line:     #E9D3CC;
  --shadow:   rgba(94,62,58,.16);
  --paper-a:  #FEFAF8;  --paper-b:  #F3E0D9;
  --input-radius: 999px;

  --display: var(--f-ar-disp);
  --body:    var(--f-ar-body);

  --sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' fill='none' stroke='%23C0857C' stroke-width='1.1'%3E%3Cpath d='M14 22 H186'/%3E%3Cellipse cx='52' cy='13' rx='14' ry='6' transform='rotate(-22 52 13)'/%3E%3Cellipse cx='76' cy='31' rx='14' ry='6' transform='rotate(22 76 31)'/%3E%3Cellipse cx='124' cy='13' rx='14' ry='6' transform='rotate(-22 124 13)'/%3E%3Cellipse cx='148' cy='31' rx='14' ry='6' transform='rotate(22 148 31)'/%3E%3Ccircle cx='100' cy='22' r='4'/%3E%3C/svg%3E");
}
:root[data-variant="garden"][data-lang="en"] {
  --display: var(--f-la-disp);
  --body:    var(--f-la-body);
}

[data-variant="garden"] body { line-height: 2.05; }
[data-variant="garden"] h2 { font-size: var(--step-3); line-height: 1.25; }

/* ── hero: photo pushed to one side, type overlapping it ───────── */

[data-variant="garden"] .hero {
  position: relative; min-height: 100svh; overflow: hidden;
  display: grid; align-content: center;
  gap: 2rem; padding: calc(var(--gap) * .9) var(--pad);
}
[data-variant="garden"] .hero-copy {
  display: grid; gap: .9rem; justify-items: start; text-align: start;
  position: relative; z-index: 2;
}
[data-variant="garden"] .hero-media { position: relative; z-index: 1; justify-self: end; }

[data-variant="garden"] .frame {
  position: relative; overflow: hidden;
  width: min(66vw, 17rem); aspect-ratio: 3/4;
  border-radius: 50%;                       /* an oval, not an arch */
  box-shadow: 0 26px 60px -26px var(--shadow);
  background: var(--ground-2);
}
[data-variant="garden"] .frame img { width: 100%; height: 100%; object-fit: cover; }
[data-variant="garden"] .frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  pointer-events: none;
}

@media (min-width: 48rem) {
  [data-variant="garden"] .hero {
    grid-template-columns: 1.06fr .94fr; align-items: center; gap: 0;
    /* keep the two halves close enough that the overlap actually reads
       instead of drifting apart on a wide screen */
    width: min(100%, 62rem); margin-inline: auto;
  }
  [data-variant="garden"] .hero-media { grid-column: 2; grid-row: 1; }
  [data-variant="garden"] .hero-copy  {
    grid-column: 1; grid-row: 1;
    margin-inline-end: -16%;   /* the overlap that makes it asymmetric */
  }
  [data-variant="garden"] .frame { width: min(38vw, 24rem); }
}

[data-variant="garden"] .bism {
  font-family: var(--f-quran); font-size: var(--step-0);
  color: var(--accent-2); margin: 0; line-height: 2;
}
[data-variant="garden"] .kicker { font-size: var(--step--1); color: var(--accent-2); margin: 0; }
[data-variant="garden"] .names {
  font-family: var(--display); font-size: var(--step-4);
  line-height: 1.02; display: grid; gap: .02em; justify-items: start;
}
[data-variant="garden"] .names .amp {
  font-size: .3em; color: var(--accent); margin-inline-start: .3em;
}
[data-variant="garden"] .hero-date { color: var(--ink-soft); margin: 0; }
[data-variant="garden"] .count { justify-content: start; }

/* ── ornament: a botanical sprig ───────────────────────────────── */

[data-variant="garden"] .orn {
  display: block; width: min(58vw, 12.5rem); height: 2.2rem;
  margin-block: 1.4rem; margin-inline: auto;
  background: var(--sprig) center / contain no-repeat;
}
[data-variant="garden"] .orn i { display: none; }
[data-variant="garden"] .hero-copy .orn { margin-inline: 0; }

[data-variant="garden"] .rule {
  display: block; height: 3.4rem;
  background: var(--sprig) center / auto 2.2rem no-repeat;
  opacity: .75;
}

/* ── verse ─────────────────────────────────────────────────────── */

[data-variant="garden"] .ayah-sec { background: var(--ground-2); }
[data-variant="garden"] .ayah {
  font-family: var(--f-quran); font-size: var(--step-2);
  line-height: 2.3; text-align: center; text-wrap: balance;
  max-width: 30rem; margin-inline: auto;
}
[data-variant="garden"] .ayah-src { text-align: center; color: var(--accent-2); font-size: var(--step--1); margin: 1.2rem 0 0; }

/* ── story: offset the other way, so the page zig-zags ─────────── */

[data-variant="garden"] .story { display: grid; gap: 2rem; align-items: center; }
[data-variant="garden"] .story .frame { width: min(70vw, 20rem); aspect-ratio: 3/4; justify-self: start; }
@media (min-width: 48rem) {
  [data-variant="garden"] .story { grid-template-columns: .94fr 1.06fr; gap: 0; }
  [data-variant="garden"] .story .frame { grid-column: 1; width: min(36vw, 22rem); }
  [data-variant="garden"] .story .txt {
    grid-column: 2; text-align: start; margin-inline-start: -14%;
    position: relative; z-index: 2;
    background: color-mix(in srgb, var(--ground) 88%, transparent);
    padding: clamp(1.4rem, 4vw, 2.4rem);
    backdrop-filter: blur(3px);
  }
  [data-variant="garden"] .story .txt h2,
  [data-variant="garden"] .story .txt .eyebrow { text-align: start; }
  [data-variant="garden"] .story .txt .lede { text-align: start; margin-inline: 0; }
  [data-variant="garden"] .story .txt .orn { margin-inline: 0; }
}

/* ── cards become soft pills ───────────────────────────────────── */

[data-variant="garden"] .card {
  border-radius: 1.6rem; border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ── venue: wide oval, copy beside it ──────────────────────────── */

[data-variant="garden"] .venue-stage { padding-block: var(--gap); }
[data-variant="garden"] .venue-pin {
  display: grid; gap: 2rem; align-items: center;
  width: min(100% - (var(--pad) * 2), 60rem); margin-inline: auto;
}
[data-variant="garden"] .venue-pin img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 30px 70px -30px var(--shadow);
}
[data-variant="garden"] .venue-veil { display: none; }
[data-variant="garden"] .venue-copy { display: grid; justify-items: center; gap: .2rem; text-align: center; }
@media (min-width: 52rem) {
  [data-variant="garden"] .venue-pin { grid-template-columns: 1.15fr .85fr; }
  [data-variant="garden"] .venue-copy { justify-items: start; text-align: start; margin-inline-start: -8%; }
  [data-variant="garden"] .venue-copy .lede { text-align: start; margin-inline: 0; }
  [data-variant="garden"] .venue-copy .orn { margin-inline: 0; }
}

/* ═══ OPENING · the blue envelope; the couple's card rises out ══ */

[data-variant="garden"] #gate-bloom { display: grid; }

.bloom-gate {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 1.6rem;
  border: 0; background: none; padding: 0; cursor: pointer;
}
.bloom-stack { position: relative; width: min(74vw, 19rem); aspect-ratio: 490/572; }
.bloom-stack .env {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; z-index: 2;
  transition: transform 1s cubic-bezier(.3,.9,.3,1);
}
.bloom-gate:hover .env { transform: translateY(-3px); }
.bloom-gate.opening .env { transform: translateY(3%); }

/* the couple's wax stamp seals the blank note — and is the tap target */
.bloom-seal {
  position: absolute; left: 50%; top: 52%; translate: -50% -50%;
  width: 37%; z-index: 3;
  filter: drop-shadow(0 5px 10px rgba(40, 20, 10, .38));
  transition: transform .45s cubic-bezier(.3,1.4,.5,1), opacity .6s ease .1s;
}
.bloom-gate:hover .bloom-seal { transform: scale(1.06); }
.bloom-gate.pressing .bloom-seal { transform: translateY(2px) scale(.93); }
.bloom-gate.opening .bloom-seal {
  transform: translateY(74px) rotate(-17deg) scale(.94); opacity: 0;
}

/* rises from behind the envelope, between the flap and the flowers */
.bloom-card {
  position: absolute; left: 50%; top: 26%; translate: -50% 0;
  width: 58%; aspect-ratio: 4/5; overflow: hidden; z-index: 1;
  border: 3px solid #fff; box-shadow: 0 14px 34px -16px rgba(80,60,55,.45);
  opacity: 0; transform: translateY(24%) rotate(2deg);
  transition: opacity .5s ease .25s, transform 1.15s cubic-bezier(.25,.9,.3,1) .25s;
}
.bloom-card img { width: 100%; height: 100%; object-fit: cover; }
.bloom-gate.opening .bloom-card { opacity: 1; transform: translateY(-96%) rotate(2deg); }

.bloom-gate.gone { opacity: 0; transform: scale(1.07); transition: opacity .8s ease, transform 1s ease; }