/* Blossom branch card (core/hero/011) — INV-12 Burgundy Blossom · Premium W1 (A1483; D-062; plan
   docs/plans/plan_inv12_burgundy_blossom_master.md §2). The owner's card as a phone screen, and the top of the long
   card (.k-card--top, skin.css): the quince branch up the left edge, two corner sprays, off-centre type. Sizes are the
   approved W0 mock's (evidence_inv12_blossom_w0/mock.css). cqw resolves against the card (a container); the card's
   own clip cuts the art at its edge. Tier 2, no script: the words rise once from the opening's reveal, the art fades. */
.he011 .he011-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.he011 .he011__panel { position: relative; height: var(--k-panel-h); }

/* the art (k-bb-*, skin.css): positions only */
.he011 .he011__branch { height: 86%; bottom: 0; left: -14cqw; }
.he011 .he011__tr { width: 24cqw; right: -4cqw; top: -6cqw; rotate: -148deg; }
.he011 .he011__br { width: 15cqw; right: -3cqw; bottom: 1%; rotate: 24deg; }

/* the column of words */
.he011 .he011__col { position: absolute; top: 9%; bottom: 4%; left: 29cqw; right: 4.5cqw;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.he011 .he011__kicker { margin-bottom: clamp(18px, 6cqw, 32px);
  font: 400 clamp(9.5px, 2.75cqw, 13px)/1.3 var(--k-font-caps); letter-spacing: .14em; text-transform: uppercase; color: var(--k-wine-soft); }
.he011 .he011-names { display: flex; flex-direction: column; align-items: center; margin: 0; font-weight: 400; }
.he011 .he011-name { font: 600 max(28px, min(clamp(34px, 12.2cqw, 58px), calc(66cqw / (var(--he011-len) * .66))))/1 var(--k-font-display);
  letter-spacing: .045em; text-transform: uppercase; color: var(--k-wine); }
.he011 .he011-and { display: inline-flex; align-items: center; gap: clamp(6px, 2.2cqw, 12px); margin: clamp(1px, .5cqw, 4px) 0 clamp(4px, 1.4cqw, 9px);
  font: 400 clamp(22px, 7.4cqw, 36px)/1 var(--k-font-script); color: var(--k-wine); }
.he011 .he011-sw { width: clamp(44px, 15cqw, 82px); height: auto; overflow: visible; color: var(--k-gold); }
.he011 .he011-sw--r { transform: scaleX(-1); }
.he011 .he011__lede, .he011 .he011__time { max-inline-size: 22em; text-wrap: balance;
  font: 400 clamp(10px, 3.05cqw, 14.5px)/1.6 var(--k-font-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--k-ink); }
.he011 .he011__lede { margin-top: clamp(16px, 5.2cqw, 30px); }
.he011 .he011__month { margin: clamp(16px, 5cqw, 28px) 0 clamp(5px, 1.4cqw, 9px);
  font: 400 clamp(11px, 3.5cqw, 16px)/1 var(--k-font-caps); letter-spacing: .16em; text-transform: uppercase; color: var(--k-ink); }
.he011 .he011__date { display: inline-flex; align-items: center; gap: clamp(9px, 3cqw, 16px);
  font: 400 clamp(9.5px, 2.95cqw, 14px)/1 var(--k-font-caps); letter-spacing: .12em; text-transform: uppercase; color: var(--k-ink); }
.he011 .he011__date i { display: block; width: 1px; height: clamp(22px, 7.5cqw, 40px); background: var(--k-wine); }
.he011 .he011__date b { font: 600 clamp(30px, 10cqw, 48px)/1 var(--k-font-display); letter-spacing: 0; color: var(--k-wine); }
.he011 .he011__time { margin-top: clamp(12px, 4cqw, 22px); max-inline-size: 15em; } /* two balanced lines, as the plan reads it (W0 broke it by hand) */
.he011 .he011__venue { margin: clamp(14px, 4.6cqw, 26px) 0 clamp(2px, .8cqw, 5px); font: 400 clamp(25px, 8.2cqw, 40px)/1.1 var(--k-font-script); color: var(--k-wine); }
.he011 .he011__addr { text-wrap: balance; font: 400 clamp(9px, 2.75cqw, 13px)/1.65 var(--k-font-caps); letter-spacing: .1em; text-transform: uppercase; color: var(--k-ink); }
.he011 .he011__after { margin-top: clamp(14px, 4.6cqw, 26px); text-wrap: balance;
  font: 400 clamp(8.5px, 2.6cqw, 12px)/1.5 var(--k-font-caps); letter-spacing: .14em; text-transform: uppercase; color: var(--k-ink); }
.he011 .he011__reply { margin: clamp(16px, 5.2cqw, 28px) 0 clamp(9px, 2.6cqw, 13px);
  font: 400 clamp(8.5px, 2.6cqw, 12px)/1.4 var(--k-font-caps); letter-spacing: .14em; text-transform: uppercase; color: var(--k-wine-soft); }
.he011 .he011__cta { margin: 0; }
.he011 .he011__reply + .he011__cta { margin-top: 0; }
.he011 .he011__after + .he011__cta { margin-top: clamp(16px, 5.2cqw, 28px); }

/* wide screens: the panel is shorter for its width, so the corner spray sits smaller and higher (W0 landscape block) */
@media (min-aspect-ratio: 1/1) {
  .he011 .he011__tr { width: 18cqw; top: -13cqw; right: -5.5cqw; rotate: -128deg; }
  .he011 .he011__col { top: 11%; bottom: 3%; }
}

/* entrance, only behind an opening (kjy-enter two frames after the tap; --kjy-reveal-at from the opening). Text rises
   once; the art fades only (D-017: objects move only with the scroll or one interaction) */
.js .he011 [data-he011-in] { opacity: 0; translate: 0 10px; }
.js .he011 .k-bb-art[data-he011-in] { translate: none; }
.js.kjy-enter .he011 [data-he011-in] { opacity: 1; translate: none;
  transition: opacity 600ms var(--k-ease, ease), translate 600ms var(--k-ease, ease);
  transition-delay: calc(var(--kjy-reveal-at, 0ms) + 120ms + var(--he011-i, 0) * 90ms); }
.js.motion-reduce .he011 [data-he011-in], .js.kjy-instant .he011 [data-he011-in] { opacity: 1; translate: none; transition: none; }

/* W2 (rev3 A1, A1498): the card now continues below the hero, so the stems fade out instead of being cut at the join */
.he011 .he011__branch, .he011 .he011__br { -webkit-mask-image: linear-gradient(#000 calc(100% - 7cqw), transparent); mask-image: linear-gradient(#000 calc(100% - 7cqw), transparent); }