:root{--bg:#0d0d0f;--panel:#16161a;--text:#f1ece4;--muted:#8f8b84;--line:#2a2a2f;--gold:#d2ad6e}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--text);font:500 17px/1.6 Manrope,Arial,sans-serif;overflow-x:clip}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
em{font-style:italic;color:var(--gold)}

.bar{position:fixed;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px clamp(16px,4vw,56px);background:linear-gradient(var(--bg) 40%,transparent)}
.logo{font:italic 600 26px 'Cormorant Garamond',serif}
.bar nav{display:flex;gap:28px;font-size:15px;color:var(--muted)}
.bar nav a:hover{color:var(--text)}
.bar-cta{padding:10px 20px;border:1px solid var(--gold);border-radius:99px;color:var(--gold);font-size:14px;font-weight:700;transition:background .2s,color .2s}
.bar-cta:hover{background:var(--gold);color:var(--bg)}

.hero{display:flex;min-height:100svh;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,34px);padding:100px 0 40px}
.hero-text,.hero-foot{padding:0 clamp(16px,4vw,56px)}
.eyebrow{color:var(--muted);font-size:14px;letter-spacing:.14em;text-transform:uppercase}
h1{max-width:16em;margin-top:10px;font:500 clamp(40px,5.6vw,84px)/1.02 'Cormorant Garamond',serif;letter-spacing:-.01em}
.hero-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.lead{max-width:34em;color:var(--muted)}
.shutter{display:inline-flex;align-items:center;gap:12px;min-height:54px;padding:0 26px 0 14px;border:1px solid var(--line);border-radius:99px;background:var(--panel);font-weight:700;transition:border-color .2s}
.shutter::before{content:'';width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,var(--text) 0 38%,transparent 40%);box-shadow:inset 0 0 0 2px var(--text)}
.shutter:hover{border-color:var(--gold)}
.shutter:active::before{transform:scale(.85)}

/* Плёнка едет через весь экран: снаружи тусклая, в видоискателе резкая */
.camera{position:relative;height:clamp(230px,38vh,400px)}
.strip{position:absolute;top:0;bottom:0;left:0;width:100vw;overflow:hidden}
.strip.dim{filter:blur(2px) brightness(.38) sepia(.5)}
.run{display:flex;gap:14px;width:max-content;height:100%;animation:film 36s linear infinite}
@keyframes film{to{transform:translateX(-50%)}}
.shot{position:relative;flex:none;height:100%;aspect-ratio:3/2;overflow:hidden;border-radius:4px}
.finder{position:absolute;top:0;bottom:0;left:50%;aspect-ratio:3/2;transform:translateX(-50%);overflow:hidden;box-shadow:0 0 0 1px rgb(255 255 255 / .18),0 30px 60px -20px #000}
.finder .strip{left:calc(50% - 50vw)}
.corner{position:absolute;z-index:2;width:28px;height:28px;border:2px solid var(--text)}
.tl{top:14px;left:14px;border-width:2px 0 0 2px}.tr{top:14px;right:14px;border-width:2px 2px 0 0}.bl{bottom:14px;left:14px;border-width:0 0 2px 2px}.br{bottom:14px;right:14px;border-width:0 2px 2px 0}
.focus{position:absolute;z-index:2;left:50%;top:50%;width:64px;height:48px;border:2px solid var(--gold);transform:translate(-50%,-50%);animation:focus 3s ease-in-out infinite}
@keyframes focus{0%,100%{transform:translate(-50%,-50%) scale(1.25);opacity:.4}30%,70%{transform:translate(-50%,-50%) scale(1);opacity:1}}
.hud{position:absolute;z-index:2;font:600 12px Manrope,sans-serif;letter-spacing:.12em;text-shadow:0 1px 4px #000}
.top-left{top:22px;left:52px}.top-right{top:22px;right:52px}.bottom-left{bottom:22px;left:52px;display:flex;align-items:center;gap:6px}.bottom-right{bottom:22px;right:52px}
.dot{width:8px;height:8px;border-radius:50%;background:#ff4d3d;animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.flash{position:absolute;inset:0;z-index:3;background:#fff;opacity:0;pointer-events:none}
.finder.shot-now .flash{animation:flash .45s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}

/* Нарисованные кадры */
.s1{background:radial-gradient(circle at 62% 58%,#ffe2a8 0 7%,#ffb36b 8%,transparent 22%),linear-gradient(#2c3e73,#d9677b 52%,#ffad6b 58%,#1c2c4f 59%,#0e1a33)}
.s2{background:radial-gradient(ellipse 22% 18% at 50% 38%,#2b1b16 0 98%,transparent),radial-gradient(ellipse 42% 40% at 50% 100%,#3a2620 0 98%,transparent),radial-gradient(circle at 30% 30%,#f6d9b8,#c9905f)}
.s3{background:linear-gradient(transparent 55%,#28354a 55%),linear-gradient(#9fb8d0,#e8eef2)}
.s3::before,.s3::after{content:'';position:absolute;inset:0}
.s3::before{background:#5d7088;clip-path:polygon(0 70%,22% 34%,38% 56%,58% 22%,80% 50%,100% 36%,100% 100%,0 100%)}
.s3::after{background:#33445c;clip-path:polygon(0 86%,18% 60%,34% 78%,52% 52%,74% 74%,100% 58%,100% 100%,0 100%)}
.s4{background:linear-gradient(#0b1020,#2a2f5a 70%,#3d3560)}
.s4::before{content:'';position:absolute;inset:0;background:radial-gradient(circle,#ffd580 0 1.6px,transparent 2.2px) 3px 4px/12px 14px,#141b30;clip-path:polygon(0 100%,0 46%,10% 46%,10% 30%,22% 30%,22% 52%,30% 52%,30% 18%,40% 18%,40% 40%,50% 40%,50% 26%,62% 26%,62% 50%,70% 50%,70% 34%,82% 34%,82% 56%,90% 56%,90% 40%,100% 40%,100% 100%)}
.s5{background:radial-gradient(circle at 20% 30%,rgb(255 180 90 / .85) 0 3%,rgb(255 180 90 / .35) 6%,transparent 9%),radial-gradient(circle at 44% 60%,rgb(255 120 140 / .8) 0 5%,rgb(255 120 140 / .3) 8%,transparent 12%),radial-gradient(circle at 70% 36%,rgb(130 190 255 / .8) 0 4%,rgb(130 190 255 / .3) 7%,transparent 10%),radial-gradient(circle at 84% 70%,rgb(255 230 140 / .8) 0 2%,rgb(255 230 140 / .3) 5%,transparent 8%),radial-gradient(circle at 32% 78%,rgb(200 150 255 / .5) 0 3%,transparent 7%),#141018}
.s6{background:radial-gradient(circle at 74% 40%,#2f5a2c 0 14%,transparent 15%),linear-gradient(90deg,transparent 73.4%,#3b2a1a 73.4% 75%,transparent 75%) 0 50%/100% 50% no-repeat,linear-gradient(transparent 62%,#d6a83c 62%,#b8862a),linear-gradient(#8ec5e8,#e7f3f9)}
.s7{background:radial-gradient(ellipse 7% 10% at 43% 46%,#1a1012 0 98%,transparent),radial-gradient(ellipse 12% 30% at 43% 82%,#1a1012 0 98%,transparent),radial-gradient(ellipse 7% 10% at 57% 44%,#1a1012 0 98%,transparent),radial-gradient(ellipse 12% 32% at 57% 82%,#1a1012 0 98%,transparent),linear-gradient(#ffcf8a,#ff8c6b 60%,#7a3b55)}
.s8{background:radial-gradient(circle at 30% 50%,#fff 0 3%,#ff8fb1 4% 14%,transparent 15%),radial-gradient(circle at 62% 40%,#fff4 0 3%,#ffb3c9 4% 12%,transparent 13%),radial-gradient(circle at 78% 70%,#ff6f9a 0 9%,transparent 10%),linear-gradient(135deg,#f8d7e2,#e9a7bf)}

.shoots,.how,.dates{padding:clamp(70px,10vw,140px) clamp(16px,4vw,56px)}
h2{font:500 clamp(44px,6.4vw,96px)/1 'Cormorant Garamond',serif}
.rows{margin-top:40px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:1fr 1fr auto;align-items:baseline;gap:8px 24px;padding:clamp(18px,2.4vw,30px) 4px;border-bottom:1px solid var(--line);transition:color .3s,padding .3s}
.name{font:500 clamp(28px,3.4vw,48px)/1.1 'Cormorant Garamond',serif}
.note{color:var(--muted)}
.row b{font:600 clamp(20px,2vw,28px) 'Cormorant Garamond',serif;color:var(--gold);white-space:nowrap}
@media(hover:hover){.row:hover{padding-left:20px}.rows:hover .row:not(:hover){color:#5b5953}}
.preview{position:fixed;z-index:4;left:0;top:0;width:280px;aspect-ratio:3/2;border-radius:6px;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.8) rotate(-3deg);transition:opacity .3s,transform .3s;box-shadow:0 20px 40px #000}
.preview.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-3deg)}

.how ol{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.how li{padding-top:22px;border-top:1px solid var(--gold)}
.how li span{font:italic 500 40px 'Cormorant Garamond',serif;color:var(--gold)}
.how h3{margin-top:10px;font-size:20px}
.how li p{margin-top:6px;color:var(--muted)}

.dates-box{padding:clamp(30px,5vw,70px);border:1px solid var(--line);border-radius:28px;background:radial-gradient(80% 120% at 100% 0,rgb(210 173 110 / .16),transparent 60%),var(--panel);text-align:center}
.dates-box p{margin-top:12px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:30px}
.chips a{padding:14px 22px;border:1px solid var(--line);border-radius:99px;font-weight:700;transition:background .2s,color .2s,border-color .2s}
.chips a:hover{background:var(--gold);border-color:var(--gold);color:var(--bg)}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:24px clamp(16px,4vw,56px);border-top:1px solid var(--line);color:var(--muted);font-size:14px}

.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  .bar nav{display:none}
  .row{grid-template-columns:1fr auto}
  .note{grid-column:1/-1;grid-row:2}
  .how ol{grid-template-columns:1fr 1fr}
  .hud{font-size:10px}.top-left,.bottom-left{left:44px}.top-right,.bottom-right{right:44px}
}
@media(max-width:560px){.how ol{grid-template-columns:1fr}.camera{height:200px}.top-right,.bottom-left{display:none}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .run,.focus,.dot{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
}