/* ============================================================
   TINY WORLDS — кинематографические эффекты (стили)
   ============================================================ */

/* ---------- прелоадер-диафрагма ---------- */
body.pre-lock{overflow:hidden}
.aperture-pre{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:#05080a;overflow:hidden}
.aperture-pre .ap-iris{position:absolute;inset:0;display:block}
.aperture-pre .ap-blade{position:absolute;top:50%;left:50%;width:160vmax;height:160vmax;background:#05080a;transform-origin:0 0}
/* 8 лепестков расходятся из центра */
.ap-blade{--a:0deg;transform:translate(-50%,-50%) rotate(var(--a)) translateY(0)}
.ap-blade.b0{--a:0deg}.ap-blade.b1{--a:45deg}.ap-blade.b2{--a:90deg}.ap-blade.b3{--a:135deg}
.ap-blade.b4{--a:180deg}.ap-blade.b5{--a:225deg}.ap-blade.b6{--a:270deg}.ap-blade.b7{--a:315deg}
.aperture-pre .ap-label{position:relative;z-index:2;font-family:var(--serif);font-size:clamp(28px,5vw,56px);letter-spacing:.04em;color:var(--ink);opacity:.92;transition:opacity .5s ease}
.aperture-pre .ap-label .mk{font-family:var(--script);font-size:1.7em;color:var(--accent-ink);padding-right:.06em}
/* раскрытие: лепестки уезжают наружу как ирисовая диафрагма */
.aperture-pre.open .ap-blade{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-46vmax) rotate(28deg);transition:transform .9s cubic-bezier(.7,0,.3,1)}
.aperture-pre.open .ap-label{opacity:0;transition:opacity .4s ease}
.aperture-pre.open{pointer-events:none;transition:background .9s ease;background:transparent}
@media (prefers-reduced-motion:reduce){.aperture-pre{display:none}}

/* ---------- переход-затвор (горизонтальные ламели) ---------- */
.shutter-wipe{position:fixed;inset:0;z-index:290;pointer-events:none;display:flex;flex-direction:column}
.shutter-wipe span{flex:1;background:#06090b;transform:scaleY(0);transform-origin:top;border-bottom:1px solid rgba(0,0,0,.5)}
.shutter-wipe.go span{transform:scaleY(1);transition:transform .42s cubic-bezier(.7,0,.3,1)}
.shutter-wipe.go span:nth-child(1){transition-delay:0s}
.shutter-wipe.go span:nth-child(2){transition-delay:.04s}
.shutter-wipe.go span:nth-child(3){transition-delay:.08s}
.shutter-wipe.go span:nth-child(4){transition-delay:.12s}
.shutter-wipe.go span:nth-child(5){transition-delay:.16s}

/* ---------- курсор-лупа ---------- */
.loupe{position:fixed;z-index:210;width:190px;height:190px;border-radius:50%;transform:translate(-50%,-50%) scale(.6);pointer-events:none;opacity:0;transition:opacity .25s var(--ease),transform .25s var(--ease);background-repeat:no-repeat;border:1px solid color-mix(in oklab,var(--glow) 60%,white);box-shadow:0 0 0 6px color-mix(in oklab,var(--bg) 60%,transparent),0 18px 50px -10px #000, inset 0 0 22px rgba(0,0,0,.4)}
.loupe.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
body.loupe-on{cursor:none}
@media (hover:none),(pointer:coarse){.loupe{display:none}}

/* ---------- 3D-наклон ---------- */
.tilt{transition:transform .4s var(--ease);transform-style:preserve-3d;will-change:transform}

/* ---------- эффект «проявки» фото ---------- */
.develop img{filter:brightness(.4) contrast(.7) saturate(.4) blur(6px);transform:scale(1.04);transition:filter 1.3s var(--ease),transform 1.3s var(--ease)}
.develop.in img,.develop.dev img{filter:none;transform:none}
@media (prefers-reduced-motion:reduce){.develop img{filter:none;transform:none}}

/* ---------- EXIF-карточка в лайтбоксе ---------- */
.lb-exif{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lb-exif span{display:inline-flex;align-items:center;gap:7px}
.lb-exif span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.7}
.lb-exif .frame{color:var(--accent)}

/* кнопка «случайный кадр» */
.rand-btn{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:100px;padding:12px 22px;cursor:none;transition:.35s var(--ease)}
.rand-btn:hover{border-color:var(--accent);color:var(--accent)}
.rand-btn svg{transition:transform .5s var(--ease)}
.rand-btn:hover svg{transform:rotate(180deg)}
.filters-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:40px}
.filters-row .filters{margin-bottom:0}

/* ============================================================
   ТАЙМЛАЙН цифра → плёнка
   ============================================================ */
.timeline{margin-top:70px;position:relative}
.timeline::before{content:"";position:absolute;left:18px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--accent),var(--accent-2),transparent)}
.tl-item{position:relative;padding:0 0 38px 56px}
.tl-item::before{content:"";position:absolute;left:11px;top:5px;width:15px;height:15px;border-radius:50%;border:2px solid var(--accent);background:var(--bg);box-shadow:0 0 14px color-mix(in oklab,var(--accent) 60%,transparent)}
.tl-item .yr{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase}
.tl-item h3{font-size:clamp(24px,3vw,38px);margin:6px 0 8px}
.tl-item p{color:var(--ink-soft);max-width:52ch}
@media (max-width:680px){.tl-item{padding-left:46px}.timeline::before{left:14px}.tl-item::before{left:7px}}

/* ============================================================
   КВИЗ «Плёнка или цифра?»
   ============================================================ */
.quiz{margin-top:64px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(120deg,var(--panel),var(--bg-2));padding:clamp(28px,4vw,52px);max-width:760px}
.quiz-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.quiz-head h3{font-size:clamp(26px,3vw,40px)}
.quiz-score{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.quiz-score b{color:var(--accent);font-weight:500}
.quiz-stage{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:var(--panel)}
.quiz-stage img{width:100%;height:100%;object-fit:cover;display:block}
.quiz-grain{position:absolute;inset:0;pointer-events:none;opacity:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay;transition:opacity .4s}
.quiz-choices{display:flex;gap:12px;margin-top:18px}
.quiz-choices button{flex:1;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:100px;padding:16px;cursor:none;transition:.3s}
.quiz-choices button:hover{border-color:var(--accent);color:var(--accent)}
.quiz-feedback{margin-top:16px;min-height:48px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-soft);display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .35s}
.quiz-feedback.show{opacity:1}
.quiz-feedback.ok{color:var(--accent-2)}
.quiz-feedback.no{color:#d98a8a}
.quiz-feedback .next{margin-left:auto}
.quiz-next{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:var(--accent);border:0;border-radius:100px;padding:11px 20px;cursor:none}

/* ============================================================
   КАРТА МЕСТ — стилизованный атлас
   ============================================================ */
.atlas{margin-top:64px;position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:radial-gradient(120% 120% at 30% 20%,var(--panel),var(--bg-2));aspect-ratio:16/9}
.atlas svg{position:absolute;inset:0;width:100%;height:100%}
.atlas .grid-ln{stroke:var(--line-soft);stroke-width:1;fill:none}
.atlas .coast{stroke:color-mix(in oklab,var(--accent-2) 70%,transparent);stroke-width:1.4;fill:color-mix(in oklab,var(--accent-2) 8%,transparent)}
.atlas-pt{position:absolute;transform:translate(-50%,-50%);cursor:none;z-index:2}
.atlas-pt .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--accent) 25%,transparent),0 0 14px var(--accent);transition:.3s}
.atlas-pt .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--accent);opacity:.5;animation:atlasping 2.4s ease-out infinite}
@keyframes atlasping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}}
.atlas-pt .lbl{position:absolute;left:50%;top:18px;transform:translateX(-50%);white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);background:color-mix(in oklab,var(--bg) 65%,transparent);padding:3px 9px;border-radius:100px;border:1px solid var(--line);opacity:0;transition:.3s;pointer-events:none}
.atlas-pt:hover .lbl{opacity:1}
.atlas-pt:hover .dot{transform:scale(1.25)}
.atlas-pop{position:absolute;width:180px;height:130px;border-radius:8px;overflow:hidden;border:1px solid var(--accent);box-shadow:0 20px 50px -16px #000;pointer-events:none;opacity:0;transform:translate(-50%,-112%) scale(.9);transition:.3s var(--ease);z-index:3}
.atlas-pop.show{opacity:1;transform:translate(-50%,-118%) scale(1)}
.atlas-pop img{width:100%;height:100%;object-fit:cover}
.atlas-cap{position:absolute;left:18px;bottom:14px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
@media (max-width:680px){.atlas{aspect-ratio:4/5}.atlas-pt .lbl{display:none}}