/* Actual video frames keep the Muse and crystal garden in one moving scene. */
/* Keep the animation's original distance, then briefly hold all five promos. */
.bloom-story { --motion-screens: 3.1; --hold-screens: .5; position: relative; height: calc((var(--motion-screens) + var(--hold-screens)) * 100svh); color: #fff9fc; --intro: 1; --reveal: 0; --progress: 0; }
.bloom-stage { position: sticky; top: var(--header-height,84px); height: calc(100svh - var(--header-height,84px)); min-height: 620px; overflow: clip; isolation: isolate; }
.bloom-scene,.bloom-scene-fallback { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.bloom-scene { opacity: 0; }
.scene-ready .bloom-scene { opacity: 1; }
.scene-ready .bloom-scene-fallback { visibility: hidden; }
.bloom-scene-fallback { --poster: url('assets/hero-motion/first.webp'); background: #dba5bc; }
.bloom-scene-fallback::before { content: ''; position: absolute; inset: 0; background: url('assets/crystal-rose-original.jpg') center top / min(100%,2752px) auto repeat; }
.bloom-scene-fallback img { position: absolute; top: var(--scene-y,0px); left: var(--scene-x,0px); width: var(--scene-width,100%); height: var(--scene-height,100%); max-width: none; object-fit: cover; }
.scene-portrait .bloom-scene-fallback img { mask-image: linear-gradient(to bottom,transparent 0%,#000 8%,#000 100%); }
.bloom-last-frame { display: none; }
.story-static .bloom-scene-fallback { --poster: url('assets/hero-motion/last.webp'); }
.story-static .bloom-first-frame { display: none; }
.story-static .bloom-last-frame { display: block; }
.bloom-atmosphere { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg,#30132680,transparent 28%); }
.bloom-atmosphere::before,.bloom-atmosphere::after { content: ''; position: absolute; inset: 0; }
.bloom-atmosphere::before { background: linear-gradient(90deg,#301326c7 0%,#30132680 28%,#30132626 56%,transparent 80%); }
.bloom-intro { position: absolute; z-index: 3; left: 6%; top: 21%; width: 48%; opacity: var(--intro); transform: translateY(calc((1 - var(--intro))*-25px)); }
.bloom-intro .eyebrow,.bloom-reveal .eyebrow { color: #f6d9e4; font-size: 9px; letter-spacing: 2.8px; }
.bloom-intro h1,.bloom-reveal-heading h2 { font-size: clamp(56px,6.4vw,96px); font-weight: 400; line-height: .99; letter-spacing: -3.6px; margin: 27px 0; text-shadow: 0 2px 30px #30132625; }
.bloom-intro h1 em { color: #f6cadb; }
.bloom-intro h1 em::after { display: none; }
.bloom-intro > p { color: #f8e4ed; font-size: 14px; line-height: 1.85; margin-bottom: 28px; }
.bloom-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.bloom-actions .button-primary { --button: #f1c6d8; color: #381d2d; padding: 18px 24px; border-radius: 4px; }
.bloom-actions .text-link { font-size: 11px; border-color: #f4d6e270; padding-bottom: 8px; }
.bloom-intro-note { display: block; color: #f7e0ea; font-size: 9px; letter-spacing: .4px; margin-top: 28px; }
/* Scroll-only copy sits in the open garden beside the Muse. */
.bloom-interlude { position: absolute; z-index: 3; left: 51%; top: 24%; width: 43%; height: 50%; display: grid; place-items: center; text-align: center; pointer-events: none; }
.bloom-interlude::before { content: ''; position: absolute; inset: -15% -8%; background: radial-gradient(ellipse,#381b324d 0%,#381b3226 43%,transparent 70%); opacity: var(--interlude-glow,0); }
.bloom-interlude-line { position: relative; grid-area: 1 / 1; width: 100%; margin: 0; opacity: var(--whisper,0); transform: translateY(calc((1 - var(--whisper,0))*12px)); }
.bloom-interlude-title { display: block; font-family: var(--serif); font-size: clamp(44px,4.8vw,82px); font-weight: 400; line-height: 1.04; letter-spacing: -.035em; color: #fff9fc; text-shadow: 0 2px 16px #381b3280,0 1px 3px #381b3266; }
.bloom-interlude-title em { color: #ffe0ec; }
.bloom-interlude-note { display: block; margin-top: 24px; color: #fff5fa; font-size: clamp(11px,1vw,14px); line-height: 1.6; letter-spacing: .2px; text-shadow: 0 1px 6px #381b32; }
.story-static .bloom-interlude,.discreet .bloom-interlude,body:not(.story-ready) .bloom-interlude { display: none; }
.bloom-reveal { position: absolute; z-index: 2; inset: 0; opacity: var(--reveal); pointer-events: none; }
.bloom-reveal-heading { position: absolute; left: 6%; bottom: 18%; width: 46%; opacity: var(--reveal-copy,1); }
.bloom-reveal-heading h2 em { color: #f5d4e2; }
.bloom-products { position: absolute; left: 47%; right: 5%; top: 24%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.bloom-product { position: relative; display: flex; flex-direction: column; align-items: stretch; text-align: left; padding: 17px 17px 15px; border: 1px solid #fff1f773; border-radius: 7px; color: #442233; background: linear-gradient(145deg,#fef4f5c9,#e3b5c6b3); box-shadow: 0 20px 60px #2c101e30,inset 0 1px 0 #fff9; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: var(--card,0); transform: translateY(calc((1 - var(--card,0))*55px)); pointer-events: auto; transition: box-shadow .2s,border-color .2s; }
.bloom-product:hover { box-shadow: 0 15px 50px #4b1e3d45,0 0 30px #f8dcea45; border-color: #fff; }
.bloom-product:focus-visible { outline: 2px solid #fff8fc; outline-offset: 5px; }
.bloom-product-index { font-size: 8px; letter-spacing: 1.4px; opacity: .7; }
.bloom-product img { width: 100%; height: clamp(125px,13vw,190px); object-fit: contain; margin: 5px 0; }
.bloom-product-name { font-family: var(--serif); font-size: clamp(18px,1.7vw,27px); letter-spacing: -.6px; white-space: nowrap; }
.bloom-product-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; font-size: 10px; }
.bloom-product-bottom > span:last-child { border-bottom: 1px solid #77485870; padding-bottom: 3px; font-size: 9px; }
.bloom-placeholder-note { position: absolute; bottom: 12%; left: 6%; width: 46%; font-size: 9px; letter-spacing: .3px; color: #fff0f5; }
.bloom-bottom { position: absolute; z-index: 5; bottom: 25px; left: 6%; right: 6%; display: none; align-items: center; justify-content: space-between; gap: 15px; }
.bloom-scroll-cue { display: flex; align-items: center; gap: 15px; font-size: 8px; letter-spacing: 1.4px; }
.bloom-progress { width: 85px; height: 1px; background: #f8e1eb40; overflow: hidden; }
.bloom-progress i { display: block; width: 100%; height: 100%; background: #fff1f7; transform: scaleX(var(--progress)); transform-origin: left; }
#story-hint { font-size: 9px; letter-spacing: .4px; opacity: .75; }
#story-motion { color: #fff4f8d9; border: 1px solid #fff1f747; border-radius: 30px; padding: 9px 14px; font-size: 9px; }
#story-motion:hover { background: #f5d6e51a; }
.bloom-sparks { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; opacity: .6; }
.bloom-sparks i { position: absolute; width: 3px; height: 3px; background: #fff4ef; border-radius: 50%; box-shadow: 0 0 10px 2px #ffc3d8; animation: bloom-drift 7s ease-in-out infinite alternate; }
.bloom-sparks i:nth-child(1) { left: 8%; top: 20%; }
.bloom-sparks i:nth-child(2) { left: 36%; top: 8%; animation-delay: -2s; }
.bloom-sparks i:nth-child(3) { left: 52%; top: 37%; animation-delay: -4s; }
.bloom-sparks i:nth-child(4) { left: 79%; top: 13%; animation-delay: -1s; }
.bloom-sparks i:nth-child(5) { left: 91%; top: 58%; animation-delay: -3s; }
.bloom-sparks i:nth-child(6) { left: 42%; top: 74%; animation-delay: -5s; }
.bloom-sparks i:nth-child(7) { left: 13%; top: 89%; animation-delay: -6s; }
.bloom-sparks i:nth-child(8) { left: 66%; top: 91%; animation-delay: -2s; }
@keyframes bloom-drift { to { transform: translate3d(10px,-24px,0); opacity: .15; } }
.story-static .bloom-story { height: calc(100svh - var(--header-height,84px)); min-height: 620px; }
.story-static .bloom-stage { position: relative; top: 0; }
.story-static .bloom-sparks i { animation: none; }
.discreet .bloom-scene-fallback img,.discreet .bloom-product img { visibility: hidden; }
.discreet .bloom-scene { visibility: hidden; }
.discreet .bloom-scene-fallback { visibility: visible; background: url('assets/crystal-rose-original.jpg') center top / min(100%,2752px) auto repeat; }
.discreet .bloom-scene-fallback::before { display: none; }
@media (max-width: 1100px) {
  .bloom-intro { top: 22%; }
  .bloom-intro h1,.bloom-reveal-heading h2 { font-size: 72px; }
  .bloom-products { left: 42%; right: 5%; gap: 10px; top: 28%; }
}
@media (max-width: 700px) {
  .bloom-story { --motion-screens: 2.8; }
  .bloom-stage { top: var(--header-height,72px); height: calc(100svh - var(--header-height,72px)); min-height: 620px; }
  .bloom-atmosphere { background: linear-gradient(180deg,#381628e0,#38162870 42%,transparent 65%,#38162880); }
  .bloom-atmosphere::before,.bloom-atmosphere::after { display: none; }
  .bloom-intro { left: 6%; top: 6%; width: 88%; }
  .bloom-interlude { left: 7%; top: 5%; width: 86%; height: 29%; }
  .bloom-interlude-title { font-size: clamp(35px,10vw,58px); }
  .bloom-interlude-note { margin-top: 15px; font-size: 11px; }
  .bloom-intro .eyebrow { font-size: 8px; letter-spacing: 2px; }
  .bloom-intro h1,.bloom-reveal-heading h2 { font-size: clamp(46px,12vw,65px); letter-spacing: -2.3px; margin: 17px 0; }
  .bloom-intro > p { font-size: 12px; line-height: 1.7; margin-bottom: 20px; }
  .bloom-intro-note { display: none; }
  .bloom-actions { gap: 18px; }
  .bloom-actions .button-primary { padding: 14px 18px; font-size: 10px; }
  .bloom-actions .text-link { font-size: 10px; }
  .bloom-reveal { display: flex; flex-direction: column; padding: clamp(28px,6svh,54px) 6% 0; }
  .bloom-reveal-heading { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; order: 0; }
  .bloom-products { position: relative; left: auto; right: auto; top: auto; width: 100%; gap: 9px; margin-top: 18px; order: 2; }
  .bloom-product { padding: 12px 9px; border-radius: 5px; }
  .bloom-product-index { font-size: 6px; letter-spacing: .6px; }
  .bloom-product img { height: 110px; margin: 0; }
  .bloom-product-name { font-size: 18px; white-space: normal; min-height: 40px; line-height: 1.08; }
  .bloom-product-bottom { font-size: 9px; margin-top: 8px; }
  .bloom-product-bottom > span:last-child { font-size: 8px; }
  .bloom-placeholder-note { position: relative; top: auto; bottom: auto; left: auto; right: auto; width: auto; font-size: 8px; line-height: 1.6; max-width: none; margin: 0; order: 1; }
  .bloom-bottom { bottom: 20px; }
  .bloom-scroll-cue { gap: 10px; font-size: 7px; letter-spacing: .8px; }
  .bloom-progress { width: 35px; }
  #story-hint { display: none; }
  #story-motion { font-size: 8px; padding: 8px 11px; }
  .story-static .bloom-story { height: calc(100svh - var(--header-height,72px)); min-height: 620px; }
}
@media (max-height: 760px) and (min-width: 701px) {
  .bloom-stage { min-height: 560px; }
  .bloom-intro { top: 15%; }
  .bloom-intro h1,.bloom-reveal-heading h2 { font-size: 72px; }
  .bloom-products { top: 25%; }
  .bloom-product img { height: 135px; }
  .story-static .bloom-story { min-height: 560px; }
}
@media (prefers-reduced-motion: reduce) { .bloom-sparks i { animation: none; } }
@media (min-width: 701px) {
  .bloom-products { left: 51%; right: 4%; top: auto; bottom: calc(100% - var(--palm-y, 48%) + 30px); gap: 12px; }
  .bloom-product { padding: 13px; }
  .bloom-product img { height: clamp(82px,10vh,120px); }
  .bloom-product-name { font-size: clamp(16px,1.6vw,24px); }
}
/* Keep the opening text clear of the crown in the restored horizontal framing. */
@media (min-width: 901px) {
  .bloom-stage { width: 100%; }
  .bloom-intro { left: 4.5%; width: 34%; top: 18%; }
  .bloom-intro h1,.bloom-reveal-heading h2 { font-size: clamp(46px,5.5vw,96px); letter-spacing: -.04em; }
  .bloom-intro h1 { max-width: 24vw; }
}
@media (min-width: 901px) and (max-height: 760px) {
  .bloom-intro { top: 8%; }
  .bloom-intro h1 { margin: 17px 0; }
}
body:not(.story-ready) .bloom-story { height: auto; }
body:not(.story-ready) .bloom-stage { position: relative; top: 0; min-height: 1150px; }
body:not(.story-ready) .bloom-intro { top: 7%; }
body:not(.story-ready) .bloom-reveal { top: 62%; opacity: 1; }
body:not(.story-ready) .bloom-reveal-heading,body:not(.story-ready) .bloom-bottom { display: none; }
body:not(.story-ready) .bloom-products { left: 6%; right: 6%; top: 0; }
body:not(.story-ready) .bloom-product { opacity: 1; transform: none; }
body:not(.story-ready) .bloom-placeholder-note { bottom: 12%; }