.sheep-story { position:relative; background:#10100f; color:#fff7e9; border-block:1px solid #ffffff0f; }
.sheep-story-stage { min-height:660px; padding:58px 20px 32px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; overflow:hidden; }
.sheep-story-heading { position:relative; z-index:2; text-align:center; }
.sheep-story-heading h2 { margin:0; font-size:clamp(2.4rem,5.6vw,5rem); font-weight:850; letter-spacing:-.045em; line-height:1.02; }
.sheep-story-heading h2>span { display:block; margin-top:8px; color:#f4bd48; font-size:.59em; letter-spacing:-.025em; }
.sheep-story-heading>p { margin:18px 0 0; color:#b9b1a6; font-size:.9375rem; }
.sheep-story-canvas { position:relative; width:min(920px,100%); aspect-ratio:1.32; flex:none; overflow:hidden; }
.sheep-story-backdrop { position:absolute; bottom:0; left:0; width:100%; max-width:none; height:auto; }
.sheep-story-sheep { position:absolute; left:20%; bottom:10%; width:36%; aspect-ratio:1; will-change:transform; }
.sheep-story-pose { position:absolute; inset:0; background-image:url('/assets/product/sheep-walk-sprite-v1.png'); background-size:200% 200%; background-repeat:no-repeat; }
.sheep-story-walk { background-position:0 0; }
.sheep-story-hug { background-position:100% 100%; opacity:0; transform:translateY(2.87%); }
.sheep-story-footer { display:flex; justify-content:space-between; align-items:center; gap:24px; width:min(760px,100%); min-height:48px; }
.sheep-story-caption { margin:0; color:#d7cec0; font-size:1rem; line-height:1.4; }
.sheep-story-next { flex:none; padding:12px 0 12px 14px; color:#f4bd48; font-size:.9375rem; font-weight:700; }
.sheep-story-next:focus-visible { outline:2px solid #f4bd48; outline-offset:5px; }
.sheep-story-line { width:min(760px,100%); height:2px; background:#ffffff1c; overflow:hidden; }
.sheep-story-line>span { display:block; width:100%; height:100%; background:#f4bd48; transform:scaleX(0); transform-origin:left; }
.sheep-story[data-ready="true"] { height:195svh; }
.sheep-story[data-ready="true"] .sheep-story-stage { position:sticky; top:0; height:100svh; min-height:520px; padding-block:28px; gap:12px; }
.sheep-story[data-ready="true"] .sheep-story-canvas { width:min(920px,calc((100svh - 330px)*1.32),100%); }
.sheep-story[data-finished="true"] .sheep-story-caption { color:#f4bd48; }
/* Until both illustration layers load, keep a complete, meaningful poster. */
.sheep-story-poster { display:block; width:min(730px,100%); height:auto; }
.sheep-story:not([data-ready="true"]) .sheep-story-canvas,
.sheep-story:not([data-ready="true"]) .sheep-story-heading,
.sheep-story:not([data-ready="true"]) .sheep-story-line { display:none; }
.sheep-story[data-ready="true"] .sheep-story-poster { display:none; }
@media (max-width:680px) {
  .sheep-story-stage { min-height:540px; padding-inline:12px; }
  .sheep-story[data-ready="true"] .sheep-story-stage { padding-inline:12px; gap:24px; }
  .sheep-story-heading h2 { font-size:clamp(2.2rem,9.4vw,3.2rem); }
  .sheep-story-heading h2>span { font-size:.63em; }
  .sheep-story-heading>p { max-width:270px; margin:16px auto 0; line-height:1.5; }
  .sheep-story[data-ready="true"] .sheep-story-canvas { width:100%; }
  .sheep-story-footer { flex-direction:column; gap:4px; text-align:center; min-height:84px; }
  .sheep-story-caption { font-size:.9375rem; }
  .sheep-story-next { padding:12px; }
  .sheep-story-line { width:80%; }
}
@media (prefers-reduced-motion:reduce) {
  .sheep-story[data-ready="true"] { height:auto; }
  .sheep-story[data-ready="true"] .sheep-story-stage { position:relative; height:auto; padding-block:56px; }
  .sheep-story[data-ready="true"] .sheep-story-canvas { width:min(760px,100%); }
  .sheep-story-sheep { will-change:auto; }
  .sheep-story-line { display:none; }
}