/* Cinematic movement and kinetic typography over the approved concept stills. */
.illustrated-story { overflow: hidden; position: relative; border: 0; background: transparent; container-type: inline-size; }
.story-toggle[hidden] { display: none; }
.story-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 91%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 6%, #000 91%, transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.story-scene { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
.story-scene.is-active { opacity: 1; }
.story-scene img { width: 100%; height: 100%; object-fit: cover; will-change: transform; transform-origin: 55% 55%; }
[data-story-scene="2"] img { transform-origin: 40% 55%; }
.story-picture-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #12212e55, transparent 65%), linear-gradient(transparent 45%, #12212e80); }
.story-words { position: absolute; inset: 0; pointer-events: none; }
.story-word { position: absolute; color: #fff; font-family: var(--font-heading); font-size: clamp(24px, 5vw, 60px); font-size: clamp(24px, 7.7cqw, 60px); font-weight: 750; line-height: 1.03; letter-spacing: -.035em; text-shadow: 0 3px 18px #0008, 0 1px 3px #0005; opacity: 0; transform: translateY(14px) scale(.95) rotate(var(--angle, 0deg)); transition: opacity .4s ease, transform .55s cubic-bezier(.16, 1, .3, 1); }
.story-word.is-visible { opacity: 1; transform: translateY(0) scale(1) rotate(var(--angle, 0deg)); }
.work-note { top: 12%; left: 7%; font-size: clamp(14px, 3.2cqw, 25px); font-weight: 550; --angle: -3deg; }
.finally { top: 31%; left: 7%; --angle: -5deg; }
.done { bottom: 13%; left: 16%; --angle: 3deg; }
.wait { bottom: 13%; right: 7%; font-size: clamp(20px, 5.5cqw, 43px); --angle: -3deg; }
.dinner { top: 12%; left: 7%; --angle: -5deg; }
.cook { bottom: 13%; left: 5%; font-size: clamp(22px, 6.2cqw, 48px); --angle: 4deg; }
.have { top: 36%; left: 6%; max-width: 32%; font-size: clamp(16px, 4.2cqw, 33px); --angle: -4deg; }
.shop { top: 47%; left: 7%; font-size: clamp(21px, 5.5cqw, 43px); --angle: -7deg; }
.time { bottom: 8%; right: 5%; font-size: clamp(19px, 4.8cqw, 37px); --angle: -3deg; }
.breathe { top: 13%; right: 7%; font-size: clamp(24px, 6.2cqw, 48px); --angle: 2deg; }
.fits { bottom: 12%; right: 7%; max-width: 58%; font-size: clamp(23px, 5.8cqw, 45px); font-weight: 800; }
.story-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.5cqw, 20px); padding: 8%; background: radial-gradient(ellipse at center, #344456, #203140 75%); }
.story-brand .story-brand-logo { width: 32%; max-width: 240px; height: auto; object-fit: contain; will-change: auto; }
.story-brand-title { color: var(--cream); font-family: var(--font-heading); font-size: clamp(19px, 4.3cqw, 34px); font-weight: 600; letter-spacing: -.03em; line-height: 1.25; margin: 0; text-align: center; }
.story-brand-copy { color: var(--muted); font-size: clamp(12px, 2.1cqw, 17px); line-height: 1.7; margin: 0; text-align: center; }
.quick-shop { bottom: 14%; left: 7%; --angle: -4deg; }
.which-one { top: 13%; left: 6%; --angle: -5deg; }
.need { top: 17%; right: 7%; font-size: clamp(22px, 5.8cqw, 45px); --angle: 5deg; }
.forgot { bottom: 12%; left: 6%; font-size: clamp(23px, 6cqw, 47px); --angle: -3deg; }
.list-ready { bottom: 12%; right: 6%; font-size: clamp(24px, 6.5cqw, 51px); }
.story-shopping-end { flex-direction: row; gap: 7%; padding: 6% 10%; }
.story-shopping-phone { flex: 0 0 22%; border: 2px solid #506274; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 30px #0005; }
.story-shopping-phone img { display: block; width: 100%; height: auto; will-change: auto; }
.story-shopping-message { flex: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(9px, 2cqw, 16px); }
.story-shopping-message .story-brand-logo { width: 60%; }
.story-shopping-message .story-brand-title { font-size: clamp(17px, 3.8cqw, 30px); }
.story-shopping-message .story-brand-copy { font-size: clamp(11px, 1.9cqw, 15px); }
@media (prefers-reduced-motion: reduce) {
  .story-scene, .story-word { transition: none; }
  .story-word, .story-word.is-visible { transform: rotate(var(--angle, 0deg)); }
}