/* Preview-only layout for scene 02. */
.approved-story #possibilities{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:4vw;min-height:calc(100svh - 76px);padding:60px 6% 80px}
.approved-story #possibilities .possibility-copy{grid-column:2;grid-row:1;align-self:center;position:relative;z-index:1}
.approved-story #possibilities h2{width:100%;max-width:none;margin:0;text-align:left;transform:none;font-size:clamp(38px,4.3vw,66px);line-height:1.1}
.approved-story #possibilities .possibility-subtitle{font-size:clamp(17px,1.5vw,22px);line-height:1.55;color:#b7b7c2;max-width:480px;margin:24px 0 0}
.approved-story #possibilities figure{grid-column:1;grid-row:1;position:relative;inset:auto;max-width:720px;width:100%;margin:0;align-self:center}
.approved-story #possibilities img{width:100%;height:auto;max-height:62svh;object-fit:contain}
@media(max-width:760px){.approved-story #possibilities{grid-template-columns:1fr;gap:28px;padding:45px 6% 75px;min-height:calc(100svh - 66px)}.approved-story #possibilities .possibility-copy{grid-column:1;grid-row:2}.approved-story #possibilities figure{grid-column:1;grid-row:1;max-width:520px;justify-self:center}.approved-story #possibilities img{max-height:45svh}.approved-story #possibilities h2{font-size:clamp(34px,8vw,48px)}.approved-story #possibilities .possibility-subtitle{margin-top:18px}}

@media(min-width:761px){
.approved-story #possibilities{grid-template-columns:56% 44%;gap:0;min-height:calc(100svh - 76px)}
.approved-story #possibilities figure{position:absolute;left:0;right:auto;top:50%;bottom:auto;transform:translateY(-50%);width:75%;max-width:none;z-index:0}
.approved-story #possibilities img{display:block;width:100%;height:auto;max-height:none;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 62%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 62%,transparent 100%)}
.approved-story #possibilities .possibility-copy{grid-column:2;z-index:2}
}

/* Animate only the main garment panel; the founder and customers stay still. */
.approved-story #possibilities .apparel-loop{position:absolute;left:35.8%;top:19.7%;width:16.54%;height:30.27%;overflow:hidden;background:#0b0b09;isolation:isolate}
.approved-story #possibilities .apparel-frame{position:absolute;inset:0;width:100%;height:100%;background:#0b0b09;opacity:0;animation:apparel-cycle 12s linear infinite}
.approved-story #possibilities .apparel-frame:nth-child(1){animation-delay:-.8s}
.approved-story #possibilities .apparel-frame:nth-child(2){animation-delay:3.2s}
.approved-story #possibilities .apparel-frame:nth-child(3){animation-delay:7.2s}
@keyframes apparel-cycle{0%{opacity:0}7%,33.333%{opacity:1}40%,100%{opacity:0}}
.approved-story #possibilities .apparel-pause{position:absolute;left:6%;bottom:24px;color:#b7b7c2;background:transparent;border:1px solid #ffffff30;border-radius:20px;padding:7px 12px;font:inherit;font-size:12px;cursor:pointer;z-index:3}
.approved-story #possibilities.apparel-paused .apparel-frame{animation-play-state:paused}
@media(min-width:761px){.approved-story #possibilities figure{width:68%}}
@media(prefers-reduced-motion:reduce){.approved-story #possibilities .apparel-frame{animation:none}.approved-story #possibilities .apparel-frame:first-child{opacity:1}.approved-story #possibilities .apparel-pause{display:none}}

/* Product-carousel indicators, synchronized with the three garment views. */
.approved-story #possibilities .apparel-dots{position:absolute;left:40.8%;top:50%;width:6.8%;height:3%;display:flex;align-items:center;justify-content:center;gap:9%;background:#0b0b09;border-radius:12px}
.approved-story #possibilities .apparel-dots i{display:block;position:relative;width:10%;aspect-ratio:1;border-radius:50%;background:#494036}
.approved-story #possibilities .apparel-dots i:after{content:'';position:absolute;inset:0;border-radius:50%;background:#f5cd7e;box-shadow:0 0 5px #f5cd7e66;opacity:0;animation:apparel-cycle 12s linear infinite}
.approved-story #possibilities .apparel-dots i:nth-child(1):after{animation-delay:-.8s}
.approved-story #possibilities .apparel-dots i:nth-child(2):after{animation-delay:3.2s}
.approved-story #possibilities .apparel-dots i:nth-child(3):after{animation-delay:7.2s}
.approved-story #possibilities.apparel-paused .apparel-dots i:after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.approved-story #possibilities .apparel-dots i:after{animation:none}.approved-story #possibilities .apparel-dots i:first-child:after{opacity:1}}

@media(min-width:761px){.approved-story #possibilities .possibility-copy{margin-left:clamp(24px,4vw,65px);margin-right:-3vw}}

/* Place the copy in the open right-hand area on large displays. */
@media(min-width:1200px){.approved-story #possibilities .possibility-copy{position:absolute;left:auto;right:3%;top:50%;transform:translateY(-50%);width:32%;max-width:680px;margin:0}}

@media(min-width:1200px){.approved-story #possibilities .possibility-copy{grid-column:auto;grid-row:auto}}

/* Keep overlay coordinates attached to the artwork, without crossfade ghosting. */
@media(min-width:851px){
.approved-story .story-frames #possibilities figure{width:min(68vw,calc(var(--story-frame-height)*1.5 - 60px));height:auto!important;aspect-ratio:3/2}
.approved-story #possibilities figure>picture{display:block;width:100%;height:100%}
.approved-story #possibilities .apparel-frame{animation-name:apparel-clean-cycle;animation-timing-function:steps(1,end)}
.approved-story #possibilities .apparel-dots i:after{animation-name:apparel-clean-cycle;animation-timing-function:steps(1,end)}
}
@keyframes apparel-clean-cycle{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}