/* /reels-for-clothing-store/ — hook «ویترین ۹:۱۶»
   The shop window, redrawn as a phone. Everything moving here is transform/opacity only. */

/* ---------- the window ---------- */
.win{position:relative;width:100%;max-width:300px;aspect-ratio:9/16;border:2.5px solid currentColor;border-radius:6px;padding:10px;background:transparent}
.win::before{content:"";position:absolute;inset:-14px -14px auto;height:6px;background:currentColor;border-radius:3px}
.win::after{content:"";position:absolute;inset:auto -22px -16px;height:10px;background:currentColor;border-radius:2px;opacity:.85}
.win-glass{position:relative;width:100%;height:100%;overflow:hidden;border-radius:3px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,0) 45%);display:grid;place-items:center}
.win-shine{position:absolute;top:-60%;left:-30%;width:45%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);transform:rotate(14deg) translateX(-60%);animation:winShine 7s var(--ease) infinite}
@keyframes winShine{0%,62%{transform:rotate(14deg) translateX(-60%)}88%,100%{transform:rotate(14deg) translateX(420%)}}

.win--hero{color:#fff;margin-inline:auto}
.win--sm{max-width:132px;aspect-ratio:9/13;color:var(--ink);padding:8px}
.win--sm svg{width:46px;height:46px}
.win--final{max-width:240px;color:var(--ink)}

/* the mannequin and the outfits it keeps changing */
.mq{width:78%;height:auto;color:currentColor;position:relative;z-index:2}
.mq-out{opacity:0;animation:mqWear 12s steps(1,end) infinite}
.mq-out-2{animation-delay:4s}
.mq-out-3{animation-delay:8s}
@keyframes mqWear{0%{opacity:0}2%{opacity:1}31%{opacity:1}33%,100%{opacity:0}}
.mq-body{opacity:.5}

/* people walking past the glass */
.street{position:absolute;inset:auto 0 12%;height:38%;z-index:1;pointer-events:none}
.street i{position:absolute;bottom:0;width:14px;height:34px;background:currentColor;opacity:.16;border-radius:7px 7px 2px 2px;animation:walk 9s linear infinite}
.street i::after{content:"";position:absolute;top:-13px;left:1px;width:12px;height:12px;border-radius:50%;background:currentColor}
.street i:nth-child(2){height:42px;animation-duration:11s;animation-delay:-2s;opacity:.12}
.street i:nth-child(3){height:30px;animation-duration:7.5s;animation-delay:-4s}
.street i:nth-child(4){height:38px;animation-duration:13s;animation-delay:-6s;opacity:.1}
.street i:nth-child(5){height:33px;animation-duration:10s;animation-delay:-8s}
.street i:nth-child(6){height:45px;animation-duration:8.5s;animation-delay:-5s;opacity:.13}
@keyframes walk{from{transform:translateX(-40px)}to{transform:translateX(320px)}}

/* ---------- hero ---------- */
.m-hero{position:relative;background:var(--ink);color:#fff;padding:120px 0 72px!important;overflow:hidden}
.m-hero-bg{position:absolute;inset:0;opacity:.2}
.m-hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.m-hero-grid{position:relative;display:grid;gap:44px;align-items:center}
.m-hero .i-eyebrow{color:var(--muted-d)}
.m-hero .i-lead{color:#d1d1cb}
.m-win-fig{display:grid;gap:14px;justify-items:center}
.m-win-fig figcaption{font-size:13px;color:var(--muted-d)}
.m-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.m-chips li{border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:6px 14px;font-size:13.5px;color:#d1d1cb}

/* ---------- the four DMs ---------- */
.m-dm-grid{display:grid;gap:26px;margin-top:44px}
.m-dm-card{border:1px solid var(--line);background:var(--white);padding:24px 22px;display:grid;justify-items:start}
.m-bubble{position:relative;background:var(--ink);color:#fff;border-radius:16px 16px 16px 4px;padding:10px 16px;font-size:15.5px;line-height:1.7}
.m-arrow{width:2px;height:26px;background:var(--line);margin:14px 0 12px 18px;position:relative}
.m-arrow::after{content:"";position:absolute;bottom:0;left:-4px;width:10px;height:10px;border-inline-start:2px solid var(--line);border-block-end:2px solid var(--line);transform:rotate(-45deg);transform-origin:bottom}
.m-dm-card h3{font-size:19px;margin-bottom:8px}
.m-dm-card p:last-child{color:var(--muted);font-size:15.5px}

/* ---------- fabric in motion ---------- */
.m-motion{background:var(--white)}
.m-motion-grid{display:grid;gap:40px;align-items:start}
.m-motion-pics{display:grid;gap:18px}
.m-motion-pics figure{position:relative}
.m-motion-pics img{width:100%;height:auto;filter:grayscale(1)}
.m-motion-pics figcaption{margin-top:8px;font-size:13.5px;color:var(--muted)}

/* ---------- three ways to shoot ---------- */
.m-ways-grid{display:grid;gap:30px;margin-top:40px}
.m-way{display:grid;justify-items:start;gap:14px}
.m-way h3{font-size:20px}
.m-way p{color:var(--muted);font-size:15.5px}
.m-note{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:15px;max-width:640px}

/* ---------- the shoot day ---------- */
.m-day{background:var(--white)}
.m-day-grid{display:grid;gap:40px;align-items:center}
.m-day-pic img{width:100%;height:auto;filter:grayscale(1)}

/* ---------- final ---------- */
.m-final{background:var(--paper)}
.m-final-grid{display:grid;gap:36px;align-items:center;justify-items:center}
.m-final-q{font-size:20px;font-weight:600;line-height:2;text-align:center;padding:0 14px}

@media (min-width:760px){
	.m-dm-grid{grid-template-columns:repeat(2,1fr)}
	.m-ways-grid{grid-template-columns:repeat(3,1fr)}
	.m-motion-pics{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:960px){
	.m-hero-grid{grid-template-columns:1.15fr .85fr;gap:60px}
	.m-motion-grid{grid-template-columns:1fr 1fr;gap:56px}
	.m-day-grid{grid-template-columns:1.05fr .95fr;gap:56px}
	.m-final-grid{grid-template-columns:auto 1fr;justify-items:start;gap:56px}
	.m-motion-pics{grid-template-columns:1fr;gap:22px}
}
/* the street is a desktop pleasure; phones get a still window */
@media (max-width:759px){
	.street{display:none}
	.win--hero{max-width:250px}
}