/* ==========================================================================
   Our Story — animated storytelling page (Boardroom request, 19 Jul 2026).
   Same world as the D1 footer: hero-gradient band, clouds, petals, wave.
   The timeline draws itself and chapters float in as she scrolls — pure
   CSS scroll-driven animation (animation-timeline: view()) with graceful
   fallback and prefers-reduced-motion fully honoured. Tokens only.
   Raw + ?v=filemtime via mb-brand-tokens.php (wp_head:157).
   ========================================================================== */

.mb-ourstory-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#FFE0EC 0%,#E8D5F5 52%,#D1C4E9 100%);padding:64px 0 96px;text-align:center}
.mb-ourstory-hero .mb-container{position:relative;z-index:2}
.mb-ourstory-hero__cloud{position:absolute;border-radius:var(--mb-radius-full,9999px);background:color-mix(in srgb,var(--mb-white,#FFFFFF) 56%,transparent);pointer-events:none;animation:mbCloudDrift 36s var(--mb-ease,cubic-bezier(.4,0,.2,1)) infinite alternate}
.mb-ourstory-hero__cloud--1{top:36px;left:8%;width:210px;height:52px}
.mb-ourstory-hero__cloud--2{bottom:60px;right:7%;width:160px;height:42px;animation-direction:alternate-reverse}
.mb-ourstory-hero__petals{position:absolute;inset:0;pointer-events:none}
.mb-ourstory-hero__petals span{position:absolute;top:-40px;opacity:0;animation:mbPetalDrift 16s linear infinite}
.mb-ourstory-hero__petals span:nth-child(1){left:14%;font-size:18px;animation-delay:0s}
.mb-ourstory-hero__petals span:nth-child(2){left:38%;font-size:13px;animation-delay:6s;animation-duration:20s}
.mb-ourstory-hero__petals span:nth-child(3){left:58%;font-size:21px;animation-delay:3s;animation-duration:15s}
.mb-ourstory-hero__petals span:nth-child(4){left:82%;font-size:15px;animation-delay:9s;animation-duration:19s}
.mb-ourstory-hero__kicker{display:inline-block;font-family:var(--mb-font-body,'Poppins',sans-serif);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--mb-rose-gold-deep,#C07C88);margin-bottom:12px}
.mb-ourstory-hero__title{font-family:var(--mb-font-display,'Playfair Display',serif);font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.16;margin:0 0 14px;background:linear-gradient(100deg,var(--mb-pink,#E91E63) 25%,var(--mb-rose-gold,#B76E79) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mb-ourstory-hero__sub{max-width:600px;margin:0 auto;color:color-mix(in srgb,var(--mb-ink,#3D2630) 84%,transparent);font-size:1.02rem;line-height:1.7;font-style:italic}
.mb-ourstory-hero__wave{position:absolute;left:0;right:0;bottom:-1px;height:64px;line-height:0;z-index:1}
.mb-ourstory-hero__wave svg{display:block;width:100%;height:100%}

/* --- The timeline ------------------------------------------------------- */
.mb-tl{position:relative;max-width:860px;margin:0 auto;padding:30px 16px 10px}
.mb-tl::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);border-radius:2px;background:linear-gradient(180deg,var(--mb-pink,#E91E63),var(--mb-rose-gold,#B76E79),var(--mb-rose-gold-light,#E0BFB8))}
.mb-tl__item{position:relative;width:50%;padding:18px 40px 18px 0;opacity:1}
.mb-tl__item:nth-child(even){left:50%;padding:18px 0 18px 40px}
.mb-tl__year{position:absolute;top:26px;right:-34px;z-index:2;width:68px;height:68px;border-radius:var(--mb-radius-full,9999px);display:flex;align-items:center;justify-content:center;background:var(--mb-gradient-rosegold,linear-gradient(135deg,#B76E79,#E0BFB8));color:var(--mb-white,#FFFFFF);font-family:var(--mb-font-display,'Playfair Display',serif);font-weight:700;font-size:.95rem;box-shadow:var(--mb-shadow-md,0 4px 12px rgba(233,30,99,.1));border:3px solid var(--mb-white,#FFFFFF)}
.mb-tl__item:nth-child(even) .mb-tl__year{right:auto;left:-34px}
.mb-tl__card{background:var(--mb-white,#FFFFFF);border-radius:var(--mb-radius-lg,16px);box-shadow:var(--mb-shadow-card,0 2px 8px rgba(0,0,0,.06));padding:22px 24px;transition:transform var(--mb-duration,250ms) var(--mb-ease,cubic-bezier(.4,0,.2,1)),box-shadow var(--mb-duration,250ms) var(--mb-ease,cubic-bezier(.4,0,.2,1))}
.mb-tl__card:hover{transform:translateY(-3px);box-shadow:var(--mb-shadow-lg,0 8px 30px rgba(233,30,99,.12))}
.mb-tl__emoji{font-size:1.5rem;display:block;margin-bottom:6px}
.mb-tl__title{font-family:var(--mb-font-display,'Playfair Display',serif);color:var(--mb-heading-plum,#7A2E45);font-size:1.16rem;margin:0 0 8px}
.mb-tl__card p{font-family:var(--mb-font-body,'Poppins',sans-serif);font-size:.88rem;line-height:1.68;color:color-mix(in srgb,var(--mb-ink,#3D2630) 80%,transparent);margin:0 0 8px}
.mb-tl__card p:last-child{margin-bottom:0}
.mb-tl__card ul{list-style:disc;margin:0 0 8px;padding-left:20px}
.mb-tl__card li{font-family:var(--mb-font-body,'Poppins',sans-serif);font-size:.86rem;line-height:1.6;color:color-mix(in srgb,var(--mb-ink,#3D2630) 78%,transparent)}
.mb-tl__card li::marker{color:var(--mb-rose-gold,#B76E79)}

/* Scroll-driven storytelling: chapters float in, the line lights up.
   Progressive enhancement — browsers without animation-timeline just show
   everything; reduced-motion turns it all off. */
@supports (animation-timeline: view()) {
	.mb-tl__item{animation:mbTlIn 1ms linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
	.mb-tl__item:nth-child(odd){--mb-tl-from:-36px}
	.mb-tl__item:nth-child(even){--mb-tl-from:36px}
}
@keyframes mbTlIn{from{opacity:0;transform:translateX(var(--mb-tl-from,0)) translateY(24px)}to{opacity:1;transform:none}}

@media(max-width:720px){
	.mb-tl::before{left:26px}
	.mb-tl__item,.mb-tl__item:nth-child(even){width:100%;left:0;padding:14px 0 14px 68px}
	.mb-tl__year,.mb-tl__item:nth-child(even) .mb-tl__year{left:-8px;right:auto;width:60px;height:60px;font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){
	.mb-ourstory-hero__cloud{animation:none}
	.mb-ourstory-hero__petals span{animation:none;opacity:0}
	.mb-tl__item{animation:none!important;opacity:1;transform:none}
	.mb-tl__card{transition:none}
}