/* Photo-fade card (core/hero/004) — sage_light_core w1 (INV-05, D-031), from hero inspiration 21.
   The couple's photo (or the faceless default) melts into cream; below it the card: kicker, Gilda caps names with a
   tiny script "and", the ruled date block, venue, heart rule, "Reception to follow". Gypsophila top-right, a
   watercolour sage sprig bottom-left (it never moves: a painting would not), and still window-light leaf shadows.
   Phone = the card. Tablet = the card centred on a deeper cream. Desktop = split, photo left (D-030).
   The leaf shadow is a multiply layer: .30 on the paper just under the photo, fading to .10 at the foot of the card
   so the text sits on clean cream; .22 over the photo, easing to .08 around the faces (eye check A1311: .45 greyed it).
   live.js draws the same shadow (and the gypsophila) with the same numbers, so its first frame is this one. */
.he004 {
  --he004-ph: clamp(300px, 56svh, 600px);
  --he004-avail: calc(100vw - 2 * var(--k-gutter));
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; touch-action: pan-y;
  background: var(--k-paper); color: var(--k-ink); text-align: center;
}
.he004__frame { position: relative; display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
.he004__photo {
  position: relative; z-index: 1; flex: none; height: var(--he004-ph); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%); mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.he004__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--he004-pos, 50% 35%); }
.he004__img, .he004__gyp, .he004__sage { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.he004__sage { position: absolute; z-index: 2; left: -4%; bottom: 0; width: clamp(110px, 32vw, 220px); height: auto; pointer-events: none; }
.he004__shade {
  position: absolute; z-index: 3; inset: 0; pointer-events: none;
  background: url("assets/shadow.webp") center / cover no-repeat; mix-blend-mode: multiply; opacity: .3;
  -webkit-mask-image:
    radial-gradient(circle calc(var(--he004-ph) * .22) at calc(var(--he004-fx) * 100%) calc(var(--he004-fy) * var(--he004-ph)), rgb(0 0 0 / .375) 0%, #000 100%),
    linear-gradient(180deg, rgb(0 0 0 / .733) 0, rgb(0 0 0 / .733) calc(var(--he004-ph) * .62), #000 var(--he004-ph), rgb(0 0 0 / .333) 100%);
  mask-image:
    radial-gradient(circle calc(var(--he004-ph) * .22) at calc(var(--he004-fx) * 100%) calc(var(--he004-fy) * var(--he004-ph)), rgb(0 0 0 / .375) 0%, #000 100%),
    linear-gradient(180deg, rgb(0 0 0 / .733) 0, rgb(0 0 0 / .733) calc(var(--he004-ph) * .62), #000 var(--he004-ph), rgb(0 0 0 / .333) 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.he004__stage { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.he004__gyp {
  position: absolute; z-index: 5; top: calc(var(--he004-ph) * -.02); right: -5%; width: clamp(150px, 44vw, 300px); height: auto;
  pointer-events: none; filter: drop-shadow(6px 8px 6px rgb(0 0 0 / .18));
}
/* the foot of the card keeps room for the sage sprig, so a long address never runs over it (eye check A1311) */
.he004__card { position: relative; z-index: 6; margin-top: calc(var(--he004-ph) * -.14); padding: 0 var(--k-gutter) calc(max(104px, 30vw) + env(safe-area-inset-bottom)); }
.he004__blessing { margin-bottom: 10px; font: 400 1.05rem/1.6 var(--k-font-body); color: var(--k-ink-soft); }
.he004__kicker { font: 400 .95rem/1.5 var(--k-font-body); color: var(--k-ink-soft); }
.he004-names { display: flex; flex-direction: column; align-items: center; margin-top: 18px; font-weight: 400; }
.he004-name {
  display: block; white-space: nowrap;
  font: 400 min(clamp(2.4rem, 10.5vw, 4.2rem), calc(var(--he004-avail) / (var(--he004-len) * .74)))/1.08 var(--k-font-display);
  letter-spacing: .04em; text-transform: uppercase; color: var(--k-ink);
}
.he004-and { display: block; margin: .15em 0 .1em; font: 400 1.5rem/1 var(--k-font-script); color: var(--k-ink-soft); }
.he004__date { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: min(100%, 360px); margin: 24px auto 0; }
.he004__side { display: grid; row-gap: 7px; }
.he004__side--l { justify-items: end; padding-right: 16px; }
.he004__side--r { justify-items: start; padding-left: 16px; }
.he004__w { padding: 0 2px 7px; border-bottom: 1px solid var(--k-line); font: 400 .9rem/1 var(--k-font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--k-ink); }
.he004__side--l .he004__w { justify-self: stretch; text-align: right; }
.he004__side--r .he004__w { justify-self: stretch; text-align: left; }
.he004__t { font: 400 .95rem/1 var(--k-font-body); color: var(--k-ink-soft); }
.he004__day { padding: 6px 16px; border-left: 1px solid var(--k-line); border-right: 1px solid var(--k-line); font: 400 3.1rem/1 var(--k-font-display); color: var(--k-ink); }
.he004__venue { display: grid; row-gap: 4px; margin-top: 22px; }
.he004__vname { font: 500 .72rem/1.4 var(--k-font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--k-ink); }
.he004__vaddr { font: 400 .95rem/1.5 var(--k-font-body); color: var(--k-ink-soft); }
.he004__rule { width: 180px; margin: 22px auto 10px; color: var(--c-secondary); }
.he004__follow { font: 400 .95rem/1.5 var(--k-font-body); color: var(--k-ink-soft); }

/* tablet: the card, centred on a deeper cream (D-030) */
@media (min-width: 768px) {
  .he004 {
    --he004-ph: min(50svh, 540px); --he004-avail: 544px;
    display: flex; align-items: center; justify-content: center; padding: 48px var(--k-gutter);
    background: var(--k-paper-deep, var(--k-paper));
  }
  .he004__frame { width: 100%; max-width: 640px; min-height: 0; background: var(--k-card); box-shadow: var(--k-shadow-paper); border-radius: 2px; overflow: hidden; }
  .he004__card { padding: 0 48px 132px; }
  .he004__gyp { right: -4%; width: 42%; }
  .he004__sage { left: -3%; bottom: -1%; width: 32%; }
}

/* desktop and landscape phones: split, the photo fills the left half and melts into the text on the right */
@media (min-width: 1200px) and (min-aspect-ratio: 5/4), (max-height: 500px) and (orientation: landscape) {
  .he004 { --he004-ph: 100svh; --he004-avail: min(calc(50vw - 112px), 520px); display: block; padding: 0; background: var(--k-paper); }
  .he004__frame { flex-direction: row; align-items: stretch; max-width: none; min-height: 100vh; min-height: 100svh; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .he004__photo { width: 50%; height: auto; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, #000 70%, transparent 100%); }
  .he004__shade {
    -webkit-mask-image:
      radial-gradient(circle calc(var(--he004-ph) * .22) at calc(var(--he004-fx) * 50%) calc(var(--he004-fy) * 100%), rgb(0 0 0 / .375) 0%, #000 100%),
      linear-gradient(90deg, rgb(0 0 0 / .733) 0, rgb(0 0 0 / .733) 35%, #000 50%, rgb(0 0 0 / .333) 100%);
    mask-image:
      radial-gradient(circle calc(var(--he004-ph) * .22) at calc(var(--he004-fx) * 50%) calc(var(--he004-fy) * 100%), rgb(0 0 0 / .375) 0%, #000 100%),
      linear-gradient(90deg, rgb(0 0 0 / .733) 0, rgb(0 0 0 / .733) 35%, #000 50%, rgb(0 0 0 / .333) 100%);
  }
  .he004__card { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; margin: 0; padding: 64px 56px; }
  .he004__card > * { max-width: 520px; }
  .he004__gyp { top: -2%; right: auto; left: calc(50% - 21vw); width: min(24vw, 360px); }
  .he004__sage { left: calc(50% - 2vw); bottom: 4%; width: min(15vw, 230px); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .he004 { --he004-avail: calc(50vw - 64px); }
  .he004__card { padding: 24px 32px; }
  .he004-name { font-size: min(2.2rem, calc(var(--he004-avail) / (var(--he004-len) * .74))); }
  .he004__date { margin-top: 12px; }
  .he004__venue, .he004__rule { margin-top: 10px; }
}

/* entrance, only behind an opening (kjy-enter two frames after the tap; --kjy-reveal-at from the opening) */
.js .he004__img { opacity: 0; }
.js.kjy-enter .he004__img { animation: he004-clear 1.6s ease calc(var(--kjy-reveal-at, 0ms) + 100ms) both; }
@keyframes he004-clear { from { opacity: 0; filter: blur(6px) brightness(1.12); } to { opacity: 1; filter: none; } }
.js .he004 [data-he004-in] { opacity: 0; transform: translateY(12px); }
.js.kjy-enter .he004 [data-he004-in] { opacity: 1; transform: none; transition: opacity 1s var(--k-ease), transform 1.2s var(--k-ease); transition-delay: calc(var(--kjy-reveal-at, 0ms) + 400ms + var(--he004-i, 0) * 120ms); }
.js.motion-reduce .he004__img, .js.kjy-instant .he004__img { animation: none; opacity: 1; }
.js.motion-reduce .he004 [data-he004-in], .js.kjy-instant .he004 [data-he004-in] { opacity: 1; transform: none; transition: none; }

/* live (Tier 3): the canvas draws the shade and the gypsophila from the first frame; the poster copies step aside */
.he004.is-live .he004__shade, .he004.is-live .he004__gyp { opacity: 0; }