/* Garden florals (core/hero/001) — library w1 (A1279), ported from themes/garden/theme.css (Wave 2, A1263): florals
   that part like curtains, clouds behind the names, the blessing, hosts, invite line, names, sprig, date, the boxed
   countdown, and the cloud veil after it. The root holds the hero box (.he001__hero) and the zero-height veil; it sets
   no z-index, so the veil (z 2) still floats over the next section. Entrances start at the opening's reveal time
   (--kjy-reveal-at; Garden's envelope: 1750 ms). */
.he001 { background: var(--k-light-ground); color: var(--k-ink); }

/* hero entrance: CSS, timed from the opening's reveal (the envelope starts fading at 1800 ms) */
html.js:not(.motion-reduce) .he001 [data-he001-hero] { opacity: 0; transform: translateY(24px); }
html.kjy-enter:not(.motion-reduce) .he001 [data-he001-hero] {
  opacity: 1; transform: none;
  transition: opacity .9s var(--k-ease), transform .9s var(--k-ease);
  transition-delay: calc(var(--kjy-reveal-at, 0ms) + var(--he001-i, 0) * 110ms);
}
html.kjy-instant .he001 [data-he001-hero],
html.kjy-instant .he001-names .k-ink,
html.kjy-instant .he001 .kjy-unit,
html.kjy-instant .he001-sky { transition: none !important; }

.he001__hero {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(150px, 40vw, 230px) var(--k-gutter) var(--k-s-8); text-align: center;
}
/* florals: the wrapper is positioned and moved by GSAP; the mirror sits on the img (never CSS-mirror a GSAP node) */
.he001__floral { position: absolute; top: -5vw; width: min(52vw, 360px); pointer-events: none; }
.he001__floral img { width: 100%; height: auto; }
.he001__floral--l { left: -7vw; }
.he001__floral--r { right: -7vw; }
.he001__floral--r img { transform: scaleX(-1); }

/* sky: anchored to the names (large script, fine over clouds) so a cloud never drifts behind small text.
   .he001-sky fades in (CSS), .he001-sky__layer takes a 40 px scroll parallax (GSAP), each cloud drifts sideways (CSS).
   Sizes are width-driven; offsets use the art's aspect (bank 800x324, puff 357x220) so no transform is needed. */
.he001-names-wrap { position: relative; width: 100%; }
.he001-sky, .he001-sky__layer { position: absolute; inset: 0; pointer-events: none; }
.he001-cloud { position: absolute; height: auto; max-width: none; will-change: transform; }
.he001-cloud--a { width: min(140vw, 1000px); top: 50%; margin-top: calc(min(140vw, 1000px) * -.2025); left: calc(50% - min(140vw, 1000px) * .62); opacity: .85; }
.he001-cloud--b { width: min(80vw, 560px); top: calc(100% - min(80vw, 560px) * .2); left: calc(50% - min(80vw, 560px) * .15); opacity: .8; }
html.js:not(.motion-reduce) .he001-sky { opacity: 0; }
html.kjy-enter:not(.motion-reduce) .he001-sky { opacity: 1; transition: opacity 2.4s ease calc(var(--kjy-reveal-at, 0ms) + 150ms); }
html.kjy-opening:not(.motion-reduce):not(.kjy-lite) .he001-cloud--a { animation: he001-drift-a 44s ease-in-out infinite alternate; }
html.kjy-opening:not(.motion-reduce):not(.kjy-lite) .he001-cloud--b { animation: he001-drift-b 36s ease-in-out -9s infinite alternate; }
html.kjy-lite .he001-cloud { animation: none; }
html.kjy-opening:not(.motion-reduce) .he001.is-off .he001-cloud { animation-play-state: paused; } /* must out-rank the drift shorthand */
@keyframes he001-drift-a { to { transform: translate3d(10vw, 0, 0); } }
@keyframes he001-drift-b { to { transform: translate3d(-8vw, 0, 0); } }

/* a soft light behind the names, above the sky. A1508 (D-071, eye review #7): the text above the names is lifted over
   it, or the glow's 50-85 % white washed the hosts and invite line (darkest grey 128-174 instead of 99). */
.he001-blessing, .he001-hosts, .he001-invite-line { position: relative; z-index: 1; }
.he001__glow {
  position: absolute; left: 50%; top: 50%; width: min(130vw, 760px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 253 249 / .85), rgb(255 253 249 / .5) 50%, rgb(255 253 249 / 0));
}
.he001__inner { position: relative; max-width: var(--k-measure); display: flex; flex-direction: column; align-items: center; gap: var(--k-s-4); }
.he001-blessing { font-size: 1.5rem; line-height: 1.7; color: var(--c-secondary-dark); }
.he001-blessing[lang="ar"] { font-family: "Geeza Pro", "Noto Naskh Arabic", "Amiri", "Times New Roman", serif; }
.he001-hosts { display: grid; gap: var(--k-s-3); }
.he001-host__names { display: block; font: 600 .8125rem/1.5 var(--k-font-body); letter-spacing: .16em; text-transform: uppercase; }
.he001-host__rel { display: block; font-style: italic; font-size: 1rem; color: var(--k-ink-soft); }
.he001-invite-line { max-width: 28ch; font-style: italic; color: var(--k-ink-soft); }
/* A1508 (D-071, W1 stress check): two or more host lines pushed the couple's names below the first screen (4 hosts: the
   names ended at 950 px of a 390x844 phone and 1084 px of 1440x900). With 2+ hosts they sit in two columns from 700 px
   wide, and from 1280 px wide (where the florals keep to the corners) the gap above them shrinks and the invite line
   runs wider. One host is unchanged. */
@media (min-width: 700px) {
  .he001-hosts:has(.he001-host + .he001-host) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--k-s-6); width: min(calc(100vw - 2 * var(--k-gutter)), 720px); }
}
@media (min-width: 1280px) {
  .he001__hero:has(.he001-host + .he001-host) { padding-top: 150px; }
  .he001__hero:has(.he001-host + .he001-host) .he001-invite-line { max-width: 40ch; }
}
.he001-names { position: relative; z-index: 1; margin: var(--k-s-2) 0; font: 400 clamp(3.5rem, 17vw, 6rem)/1 var(--k-font-script); color: var(--c-primary); }
.he001-names > span { display: block; }
.he001-names .k-amp { margin: .25em 0; font-size: .34em; }

/* the names write on after the envelope (the skin draws the ink; this sets the hero's own timing) */
html.js:not(.motion-reduce) .he001-names .k-ink {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
}
html.kjy-enter:not(.motion-reduce) .he001-names .k-ink {
  -webkit-mask-position: 0 0; mask-position: 0 0;
  transition-property: -webkit-mask-position, mask-position;
  transition-duration: 700ms; transition-timing-function: cubic-bezier(.5, 0, .2, 1); transition-delay: calc(var(--kjy-reveal-at, 0ms) + 300ms);
}
html.kjy-enter:not(.motion-reduce) .he001-names .he001-ink--2 { transition-duration: 400ms; transition-delay: calc(var(--kjy-reveal-at, 0ms) + 500ms); }
html.kjy-enter:not(.motion-reduce) .he001-names .he001-ink--3 { transition-delay: calc(var(--kjy-reveal-at, 0ms) + 600ms); }
/* must come last and out-rank the rules above: drop the mask once the ink has written */
html.js:not(.motion-reduce) .he001-names.is-done .k-ink { -webkit-mask: none; mask: none; }
.he001-sprig { width: 84px; height: auto; }
.he001__date { font: 600 .875rem/1.4 var(--k-font-body); letter-spacing: .2em; text-transform: uppercase; }
.he001__countdown { margin-top: var(--k-s-5); }

/* countdown (engine partial) */
.he001 .kjy-countdown { text-align: center; }
.he001 .kjy-countdown__label { margin-bottom: var(--k-s-3); font: 600 .75rem/1.4 var(--k-font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--c-secondary-dark); }
.he001 .kjy-countdown__units { display: flex; justify-content: center; gap: var(--k-s-2); }
.he001 .kjy-unit {
  width: clamp(62px, 18vw, 76px); padding: var(--k-s-3) 0 var(--k-s-2);
  background: var(--k-card); border: 1px solid rgb(var(--c-secondary-rgb) / .45); border-radius: 10px;
  box-shadow: 0 1px 2px rgb(58 52 49 / .05);
}
.he001 .kjy-unit__n { display: block; font: 600 1.75rem/1.1 var(--k-font-body); font-variant-numeric: lining-nums tabular-nums; color: var(--k-ink); }
.he001 .kjy-unit__l { display: block; margin-top: 2px; font: 600 .6875rem/1 var(--k-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--c-secondary-dark); }
.he001 .kjy-countdown__done { font: italic 500 1.375rem/1.4 var(--k-font-body); color: var(--c-primary); }
/* the four boxes arrive one after another */
.he001 .kjy-unit:nth-child(1) { --he001-u: 0; }
.he001 .kjy-unit:nth-child(2) { --he001-u: 1; }
.he001 .kjy-unit:nth-child(3) { --he001-u: 2; }
.he001 .kjy-unit:nth-child(4) { --he001-u: 3; }
html.js:not(.motion-reduce) .he001 .kjy-unit { opacity: 0; transform: translateY(10px); }
html.kjy-enter:not(.motion-reduce) .he001 .kjy-unit {
  opacity: 1; transform: none;
  transition: opacity .8s var(--k-ease), transform .8s var(--k-ease);
  transition-delay: calc(var(--kjy-reveal-at, 0ms) + 770ms + var(--he001-u, 0) * 90ms);
}

/* cloud veil: a zero-height strip after the hero. The CSS position is the CLOSED state (banks overlap
   in the middle); it stays invisible unless section.js fades it in and parts it with the scroll. */
.he001-veil { position: relative; z-index: 2; height: 0; pointer-events: none; opacity: 0; }
.he001-veil__l, .he001-veil__r { position: absolute; width: min(120vw, 1300px); }
.he001-veil__l { top: 0; left: calc(35vw - min(60vw, 650px)); }
.he001-veil__r { top: 28px; left: calc(65vw - min(60vw, 650px)); }
.he001-veil img { width: 100%; height: auto; }
.he001-veil__r img { transform: scaleX(-1); }