/* Cinematic autoplay hero.

   Desktop plays one muted film once; mobile gets the dedicated portrait
   lifestyle photograph and never discovers the movie. The old illustrated
   book stage is gone from both, and every degraded path (no JS, reduced motion,
   narrow viewport, autoplay rejection or media error) lands on a static poster.

   Load-order note: this file must not depend on motion.css. That file is gated
   behind the "premium motion" setting, and the hero has to survive the setting
   being switched off, so the handful of hero typography rules it used to supply
   are restated here scoped to .kcb-hero-scrub. */

.kcb-hero-scrub{position:relative;background:var(--kcb-paper)}

/* The legacy class names stay in place to avoid rebuilding the approved hero
   markup. The track is now ordinary document flow: there is no pinning and no
   300vh scroll distance. */
.kcb-hero-scrub__track{position:relative}
.kcb-hero-scrub__stage{position:relative;display:flex;align-items:center;min-height:calc(100svh - var(--kcb-header-h));overflow:hidden}

.kcb-hero-scrub__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--kcb-paper)}

/* Poster and movie are identically fitted. The movie remains transparent until
   a real playing event, so a rejected autoplay or decode error cannot expose a
   blank media box. */
.kcb-hero-scrub__poster,.kcb-hero-scrub__video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.kcb-hero-scrub__poster{z-index:0}
.kcb-hero-scrub__video{z-index:1;opacity:0;transform:scale(var(--kcb-hero-video-scale,1));transition:opacity var(--kcb-dur-base,.32s) ease;will-change:transform}
.kcb-hero-scrub.is-video-playing .kcb-hero-scrub__video,
.kcb-hero-scrub.is-video-ended .kcb-hero-scrub__video{opacity:1}

/* Cream wash over the copy column. It has to be strong rather than tasteful:
   the accent words in the headline use --kcb-coral-display and --kcb-sky-display,
   which are darkened just enough to clear 3:1 on --kcb-paper and no further, so
   the copy zone must read as paper. Measured over the honey wood table, the
   accents sit at 2.5:1 without this and 4.4:1 with it. It fades out well before
   the action lane, which starts around 52% of frame width. */
.kcb-hero-scrub__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(100deg,rgba(255,252,245,.975) 0%,rgba(255,252,245,.955) 32%,rgba(255,252,245,.90) 44%,rgba(255,252,245,.52) 56%,rgba(255,252,245,.12) 68%,rgba(255,252,245,0) 78%)}

.kcb-hero-scrub__grid{position:relative;z-index:4;width:min(calc(100% - 40px),var(--kcb-shell));margin-inline:auto;opacity:var(--kcb-hero-copy-opacity,1);transform:translate3d(0,var(--kcb-hero-copy-y,0),0);will-change:transform,opacity}
.kcb-hero-scrub__copy{width:50%;max-width:620px}

/* Restated from motion.css so the hero holds together on its own. Values are
   unchanged: same clamp, same line-height, same accent assignment per line. */
.kcb-hero-scrub__copy h1{display:flex;flex-direction:column;font-size:clamp(3.5rem,10vw,7.6rem);line-height:.88;letter-spacing:-.08em;margin:0 0 1.2rem}
.kcb-hero-scrub__copy h1 span:nth-child(1){color:var(--kcb-coral-display)}
.kcb-hero-scrub__copy h1 span:nth-child(2){color:var(--kcb-ink)}
.kcb-hero-scrub__copy h1 span:nth-child(3){color:var(--kcb-sky-display)}
.kcb-hero-scrub__copy .kcb-lead{max-width:32ch;font-size:clamp(1.02rem,2vw,1.24rem)}
.kcb-hero-scrub__proof{display:flex;flex-wrap:wrap;gap:.75rem 1rem;list-style:none;padding:0;margin:1.35rem 0 0;color:var(--kcb-muted);font-size:.84rem;font-weight:770}
.kcb-hero-scrub__proof li{display:flex;align-items:center;gap:.45rem;padding:.4rem .65rem;background:rgba(255,255,255,.66);border:1px solid rgba(32,33,31,.08);border-radius:999px}
.kcb-hero-scrub__proof li span{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--kcb-ink);color:#fff;font-size:.65rem}

/* Paper-craft floaters, kept from the approved hero. They sit above the photo
   but below the copy, and only on the calm side, so they never land on the hand
   or the printable. */
.kcb-hero-scrub__floaters{position:absolute;inset:0;z-index:3;pointer-events:none}
.kcb-hero-scrub__floaters .kcb-floater--star{left:6%;top:16%}
.kcb-hero-scrub__floaters .kcb-floater--splash{left:38%;top:12%;right:auto}
.kcb-hero-scrub__floaters .kcb-floater--blob{left:4%;bottom:14%}
.kcb-hero-scrub__floaters .kcb-floater--arc{left:30%;bottom:8%;right:auto}

/* Clipped wrapper: the ribbon is wider than the viewport and rotated, and the
   standing rule for this theme is no horizontal overflow anywhere. */
.kcb-hero-scrub__ribbon-wrap{position:relative;z-index:5;overflow:hidden}
.kcb-hero-scrub__ribbon{display:flex;justify-content:center;align-items:center;gap:clamp(1rem,4vw,3rem);width:108%;margin-left:-4%;min-height:52px;background:var(--kcb-ink);color:#fff;font-size:.72rem;font-weight:900;letter-spacing:.16em;transform:rotate(-1.25deg)}
.kcb-hero-scrub__ribbon i{font-style:normal;color:var(--kcb-yellow)}

/* ---- Mobile: dedicated portrait photograph, desktop movie never requested ---- */
@media(max-width:959.98px){
	.kcb-hero-scrub__stage{display:block;min-height:0;padding:0}
	.kcb-hero-scrub__video{display:none}

	/* Aspect ratio is declared rather than inferred, so the image reserves its
	   box before it decodes and the copy below it never shifts. */
	.kcb-hero-scrub__media{position:relative;inset:auto;aspect-ratio:1122/1402;max-height:58svh;width:100%}
	.kcb-hero-scrub__poster{position:absolute;inset:0}

	/* Cream fade at the foot of the photo, so the copy block reads as a
	   continuation of the image rather than a slab stacked under it. */
	.kcb-hero-scrub__scrim{inset:auto 0 -1px 0;height:34%;background:linear-gradient(180deg,rgba(255,252,245,0) 0%,rgba(255,252,245,.72) 58%,var(--kcb-paper) 100%)}
	.kcb-hero-scrub__grid{padding:1.6rem 0 3rem}
	.kcb-hero-scrub__copy{width:auto;max-width:720px}
	.kcb-hero-scrub__copy h1{font-size:clamp(3rem,14vw,5.6rem)}
	.kcb-hero-scrub__floaters{display:none}
}

@media(max-width:680px){
	.kcb-hero-scrub__proof{display:grid}
	.kcb-hero-scrub__media{max-height:52svh}
}

/* ---- Reduced motion: static poster, no autoplay or exit transform ---- */
@media(prefers-reduced-motion:reduce){
	.kcb-hero-scrub__video{display:none}
	.kcb-hero-scrub__grid{opacity:1;transform:none}
	.kcb-hero-scrub__floaters .kcb-floater{animation:none!important}
}