<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>SCENORA — одежда с вайбом любимой истории</title>

<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,900;1,9..144,400;1,9..144,700&family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&family=Caveat:wght@600&display=swap" rel="stylesheet">

<style>

*{margin:0;padding:0;box-sizing:border-box}

:root{

  --pink:#FFB6D0;

  --pink-hot:#FF4D87;

  --pink-deep:#E22A6A;

  --cream:#FFF6EF;

  --cream-2:#FFE8DE;

  --ink:#180810;

  --plum:#3B0A28;

  --lilac:#DDA9DC;

  --butter:#FFE4A3;

  --mint:#A8E6CF;

}

html{scroll-behavior:smooth}

body{

  background:var(--cream);color:var(--ink);

  font-family:'Space Grotesk',sans-serif;

  overflow-x:hidden;font-size:15px;line-height:1.6;

  cursor:none;

}

@media (max-width:900px){ body{cursor:auto} }

a{text-decoration:none;color:inherit}

button{font-family:inherit;cursor:none;border:none;background:none;color:inherit}

@media (max-width:900px){ button{cursor:pointer} }

/* ЗАГРУЗОЧНЫЙ ЗАНАВЕС */

.curtain{

  position:fixed;inset:0;z-index:9999;

  display:grid;grid-template-columns:1fr 1fr;

  pointer-events:none;

  cursor:pointer;

}

.curtain-side{

  background:var(--pink-hot);position:relative;overflow:hidden;

  transition:transform 1.4s cubic-bezier(.87,0,.13,1)

}

.curtain-side::after{

  content:'';position:absolute;inset:0;

  background:repeating-linear-gradient(

    90deg,

    rgba(255,255,255,.12) 0,

    rgba(255,255,255,.12) 2px,

    transparent 2px,

    transparent 40px

  )

}

.curtain-left{transform-origin:left}

.curtain-right{transform-origin:right}

.curtain.open .curtain-left{transform:translateX(-100%)}

.curtain.open .curtain-right{transform:translateX(100%)}

.curtain-brand{

  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);

  z-index:10000;

  font-family:'Archivo Black',sans-serif;

  font-size:clamp(2rem,7vw,5rem);

  color:var(--cream);letter-spacing:6px;

  transition:opacity .5s, transform .8s;

  text-align:center;pointer-events:none

}

.curtain-brand small{

  display:block;font-family:'Fraunces',serif;font-style:italic;

  font-size:clamp(.85rem,1.5vw,1.1rem);letter-spacing:4px;

  margin-top:14px;font-weight:300;opacity:.85

}

.curtain.open .curtain-brand{

  opacity:0;transform:translate(-50%,-50%) scale(.8)

}

/* КУРСОР */

.cursor-dot{

  position:fixed;top:0;left:0;width:10px;height:10px;

  background:var(--ink);border-radius:50%;

  pointer-events:none;z-index:9998;

  transform:translate(-50%,-50%);

  transition:width .25s,height .25s,background .25s;

  mix-blend-mode:difference

}

.cursor-ring{

  position:fixed;top:0;left:0;width:48px;height:48px;

  border:1.5px solid var(--pink-hot);border-radius:50%;

  pointer-events:none;z-index:9997;

  transform:translate(-50%,-50%);

  transition:width .3s,height .3s,border-color .3s

}

.cursor-ring.hover{

  width:70px;height:70px;border-color:var(--ink);

  background:rgba(255,77,135,.12)

}

@media (max-width:900px){ .cursor-dot,.cursor-ring{display:none} }

/* ФОН — МЯГКИЕ ПЯТНА */

.blob{

  position:fixed;border-radius:50%;filter:blur(80px);opacity:.55;

  pointer-events:none;z-index:0;mix-blend-mode:multiply

}

.blob-1{

  width:520px;height:520px;background:var(--pink);

  top:-100px;left:-100px;animation:blobFloat 22s ease-in-out infinite

}

.blob-2{

  width:460px;height:460px;background:var(--lilac);

  top:40%;right:-140px;animation:blobFloat 26s ease-in-out infinite reverse

}

.blob-3{

  width:400px;height:400px;background:var(--butter);

  bottom:-100px;left:30%;animation:blobFloat 30s ease-in-out infinite

}

@keyframes blobFloat{

  0%,100%{transform:translate(0,0) scale(1)}

  33%{transform:translate(60px,-40px) scale(1.08)}

  66%{transform:translate(-40px,60px) scale(.95)}

}

.wrap{position:relative;z-index:2}

/* ВЕРХНЯЯ ТОНКАЯ ПОЛОСА */

.ticker{

  background:var(--ink);color:var(--pink);

  padding:12px 0;overflow:hidden;

  font-family:'Archivo Black',sans-serif;

  font-size:13px;letter-spacing:4px;

  position:relative;z-index:5

}

.ticker-track{

  display:flex;gap:40px;white-space:nowrap;

  animation:marq 35s linear infinite

}

@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.ticker-track span{display:flex;align-items:center;gap:40px}

.ticker-track span::after{

  content:'★';color:var(--pink-hot);font-size:14px

}

/* ШАПКА */

.nav{

  position:sticky;top:0;z-index:50;

  padding:20px 4%;

  display:flex;justify-content:space-between;align-items:center;

  background:rgba(255,246,239,.7);

  backdrop-filter:blur(20px);

  border-bottom:1.5px solid var(--ink)

}

.nav-left,.nav-right{display:flex;gap:26px;align-items:center}

.nav a.nlink{

  font-size:12px;font-weight:700;letter-spacing:2px;

  text-transform:uppercase;position:relative;padding:4px 0

}

.nav a.nlink::before{

  content:'';position:absolute;bottom:-2px;left:0;right:0;

  height:2px;background:var(--pink-hot);

  transform:scaleX(0);transform-origin:right;

  transition:.35s cubic-bezier(.87,0,.13,1)

}

.nav a.nlink:hover::before{transform:scaleX(1);transform-origin:left}

.brand{

  font-family:'Archivo Black',sans-serif;

  font-size:26px;letter-spacing:6px;

  position:absolute;left:50%;transform:translateX(-50%);

  color:var(--ink)

}

.brand span{color:var(--pink-hot)}

.cart-pill{

  display:flex;align-items:center;gap:10px;

  background:var(--ink);color:var(--cream);

  padding:10px 18px;border-radius:100px;

  font-size:12px;font-weight:700;letter-spacing:2px;

  transition:.3s;border:2px solid var(--ink)

}

.cart-pill:hover{background:var(--pink-hot);border-color:var(--pink-hot);transform:scale(1.05)}

.cart-pill b{

  background:var(--pink);color:var(--ink);

  min-width:22px;height:22px;border-radius:50%;

  display:inline-flex;align-items:center;justify-content:center;

  font-size:11px;font-weight:900

}

@media(max-width:900px){

  .nav-left,.nav-right a{display:none}

  .brand{font-size:20px;letter-spacing:4px;position:static;transform:none}

  .nav{padding:14px 4%}

}

/* ГЕРОЙ */

.hero{

  min-height:92vh;position:relative;

  padding:60px 4% 80px;

  display:flex;flex-direction:column;justify-content:center;

  overflow:hidden

}

.hero-bg-text{

  position:absolute;top:50%;left:50%;

  transform:translate(-50%,-50%);

  font-family:'Archivo Black',sans-serif;

  font-size:clamp(200px,36vw,620px);

  color:transparent;

  -webkit-text-stroke:2px rgba(255,77,135,.18);

  white-space:nowrap;pointer-events:none;

  animation:bgSlide 30s linear infinite;

  z-index:0;letter-spacing:-8px

}

@keyframes bgSlide{

  from{transform:translate(-52%,-50%)}

  to{transform:translate(-48%,-50%)}

}

.hero-inner{

  position:relative;z-index:2;

  max-width:1500px;margin:0 auto;width:100%;

  display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center

}

.hero-tag{

  display:inline-flex;align-items:center;gap:12px;

  background:var(--pink);color:var(--ink);

  padding:8px 18px;border-radius:100px;

  font-family:'Archivo Black',sans-serif;

  font-size:11px;letter-spacing:3px;

  transform:rotate(-3deg);

  margin-bottom:26px;

  animation:tagWiggle 5s ease-in-out infinite

}

@keyframes tagWiggle{

  0%,100%{transform:rotate(-3deg)}

  50%{transform:rotate(2deg)}

}

.hero-tag::before{

  content:'';width:8px;height:8px;border-radius:50%;

  background:var(--ink);animation:blink 1.4s infinite

}

@keyframes blink{50%{opacity:.2}}

.hero h1{

  font-family:'Fraunces',serif;

  font-weight:300;font-size:clamp(2.6rem,7vw,6rem);

  line-height:.95;letter-spacing:-3px;

  margin-bottom:26px;color:var(--ink)

}

.hero h1 em{

  font-style:italic;font-weight:700;

  color:var(--pink-hot);position:relative;

  display:inline-block

}

.hero h1 em::after{

  content:'';position:absolute;

  bottom:6px;left:0;right:0;height:12px;

  background:var(--butter);z-index:-1;

  transform:scaleX(0);transform-origin:left;

  animation:underlineReveal 1.4s 1.6s forwards cubic-bezier(.87,0,.13,1)

}

@keyframes underlineReveal{to{transform:scaleX(1)}}

.hero p{

  font-size:17px;line-height:1.65;

  color:var(--plum);max-width:520px;margin-bottom:36px

}

.hero-cta{

  display:inline-flex;align-items:center;gap:16px;

  background:var(--ink);color:var(--cream);

  padding:22px 42px;border-radius:100px;

  font-family:'Archivo Black',sans-serif;

  font-size:14px;letter-spacing:3px;

  transition:.4s;border:2px solid var(--ink);

  position:relative;overflow:hidden

}

.hero-cta::before{

  content:'';position:absolute;inset:0;

  background:var(--pink-hot);

  border-radius:100px;

  transform:translateY(101%);

  transition:.5s cubic-bezier(.87,0,.13,1)

}

.hero-cta span,.hero-cta svg{position:relative;z-index:1}

.hero-cta:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(255,77,135,.3)}

.hero-cta:hover::before{transform:translateY(0)}

.hero-cta svg{transition:.4s}

.hero-cta:hover svg{transform:translateX(8px)}

.hero-visual{

  position:relative;height:560px

}

.hero-photo{

  position:absolute;inset:0;

  background:url('https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?q=80&w=1200&auto=format&fit=crop') center/cover;

  border-radius:20px;overflow:hidden;

  box-shadow:20px 20px 0 var(--ink);

  transition:.6s cubic-bezier(.34,1.56,.64,1)

}

.hero-photo::after{

  content:'';position:absolute;inset:0;

  background:linear-gradient(180deg,transparent 55%,rgba(24,8,16,.4));

  mix-blend-mode:multiply

}

.hero-photo:hover{

  transform:translate(-8px,-8px);

  box-shadow:28px 28px 0 var(--pink-hot)

}

.hero-badge{

  position:absolute;top:-20px;right:-20px;

  width:130px;height:130px;border-radius:50%;

  background:var(--butter);

  display:flex;align-items:center;justify-content:center;

  text-align:center;

  font-family:'Archivo Black',sans-serif;

  font-size:11px;letter-spacing:2px;line-height:1.3;

  animation:spin 16s linear infinite;

  z-index:3;padding:16px

}

@keyframes spin{to{transform:rotate(360deg)}}

.hero-badge-inner{

  animation:spin 16s linear infinite reverse

}

.hero-sticker{

  position:absolute;bottom:30px;left:-30px;

  background:var(--pink);color:var(--ink);

  padding:14px 22px;border-radius:100px;

  font-family:'Caveat',cursive;font-size:22px;

  transform:rotate(-6deg);

  z-index:4;box-shadow:6px 6px 0 var(--ink);

  transition:.3s

}

.hero-sticker:hover{transform:rotate(2deg) scale(1.08)}

@media(max-width:1000px){

  .hero-inner{grid-template-columns:1fr;gap:50px}

  .hero-visual{height:420px}

  .hero-bg-text{font-size:40vw}

}

@media(max-width:600px){

  .hero{padding:40px 5% 60px;min-height:auto}

  .hero h1{letter-spacing:-1.5px}

  .hero p{font-size:15px}

  .hero-cta{padding:18px 32px;font-size:12px}

  .hero-visual{height:360px}

  .hero-photo{box-shadow:12px 12px 0 var(--ink)}

  .hero-badge{width:100px;height:100px;font-size:9px;top:-14px;right:-14px}

  .hero-sticker{font-size:18px;padding:10px 16px;bottom:16px;left:-10px}

}

/* БЕГУЩИЕ СТРОКИ */

.marquee{

  padding:26px 0;overflow:hidden;

  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);

  position:relative;z-index:3

}

.marquee.pink{background:var(--pink)}

.marquee.lilac{background:var(--lilac)}

.marquee.ink{background:var(--ink);color:var(--cream)}

.marquee.mint{background:var(--mint)}

.marquee-track{

  display:flex;gap:50px;white-space:nowrap;

  animation:marq 30s linear infinite;

  font-family:'Fraunces',serif;

  font-style:italic;

  font-size:clamp(1.6rem,4vw,3rem);

  font-weight:400;letter-spacing:-1px

}

.marquee-track span{display:flex;align-items:center;gap:50px}

.marquee-track span::after{

  content:'✿';font-size:.6em;

  transform:rotate(0deg);

  animation:spin 6s linear infinite

}

/* СЕКЦИИ */

section.sec{padding:110px 4%;position:relative;z-index:2}

.container{max-width:1500px;margin:0 auto}

.sec-head{

  display:grid;grid-template-columns:auto 1fr auto;

  gap:40px;align-items:end;

  padding-bottom:24px;margin-bottom:64px;

  border-bottom:2px solid var(--ink)

}

.sec-num{

  font-family:'Archivo Black',sans-serif;

  font-size:13px;letter-spacing:4px;

  background:var(--ink);color:var(--cream);

  padding:8px 14px;border-radius:100px

}

.sec-title{

  font-family:'Fraunces',serif;font-weight:400;

  font-size:clamp(2rem,5vw,4rem);

  line-height:1;letter-spacing:-2px;text-align:center

}

.sec-title em{font-style:italic;font-weight:700;color:var(--pink-hot)}

.sec-tag{

  font-family:'Archivo Black',sans-serif;

  font-size:11px;letter-spacing:3px;

  text-align:right;line-height:1.7;color:var(--plum)

}

@media(max-width:700px){

  section.sec{padding:70px 5%}

  .sec-head{grid-template-columns:1fr;text-align:left;gap:16px}

  .sec-title{text-align:left;font-size:2rem}

  .sec-tag{text-align:left}

}

/* О ПРОЕКТЕ */

.about-grid{

  display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center

}

.about-text .label{

  font-family:'Caveat',cursive;font-size:26px;

  color:var(--pink-hot);margin-bottom:14px

}

.about-text h3{

  font-family:'Fraunces',serif;font-weight:400;

  font-size:clamp(1.8rem,3vw,2.6rem);

  line-height:1.08;letter-spacing:-1px;

  margin-bottom:26px

}

.about-text h3 em{

  font-style:italic;font-weight:700;

  background:linear-gradient(180deg,transparent 60%,var(--pink) 60%);

  padding:0 4px

}

.about-text p{

  color:var(--plum);margin-bottom:18px;

  font-size:15.5px;line-height:1.75;max-width:520px

}

.about-stats{

  display:grid;grid-template-columns:1fr 1fr;gap:20px;

  margin-top:36px;padding-top:30px;border-top:1.5px solid var(--ink)

}

.stat b{

  display:block;font-family:'Fraunces',serif;

  font-style:italic;font-weight:700;

  font-size:44px;line-height:1;color:var(--pink-hot);

  margin-bottom:6px

}

.stat span{

  font-family:'Archivo Black',sans-serif;

  font-size:11px;letter-spacing:2px;color:var(--plum)

}

.about-visual{

  position:relative;height:600px

}

.about-photo{

  position:absolute;inset:0;

  background:url('https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=1200&auto=format&fit=crop') center/cover;

  border-radius:24px 24px 24px 0;

  box-shadow:-20px 20px 0 var(--ink)

}

.about-photo::before{

  content:'';position:absolute;top:-16px;right:-16px;

  width:110px;height:110px;

  background:var(--pink);border-radius:50%;

  z-index:-1

}

.about-photo::after{

  content:'';position:absolute;bottom:-16px;left:-16px;

  width:80px;height:80px;

  background:var(--butter);

  border-radius:50% 0 0 0;

  z-index:-1

}

@media(max-width:1000px){

  .about-grid{grid-template-columns:1fr;gap:40px}

  .about-visual{height:420px}

}

/* КАРУСЕЛЬ */

.carousel-sec{

  background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);

  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)

}

.carousel-wrap{

  position:relative;max-width:1200px;margin:0 auto;

  height:580px;perspective:2000px;

  touch-action:pan-y

}

.carousel-stage{

  position:absolute;top:0;left:50%;width:250px;height:100%;

  transform-style:preserve-3d;

  transition:transform 1.1s cubic-bezier(.25,1,.5,1);

  transform:translateX(-50%) rotateY(0)

}

.mannequin{

  position:absolute;top:20px;left:0;width:250px;height:500px;

  transform-style:preserve-3d;cursor:pointer;transition:.5s

}

.mq-body{

  position:relative;width:100%;height:420px;

  background:var(--pink);overflow:hidden;

  border:2px solid var(--ink);border-radius:20px;

  transition:.5s;box-shadow:0 0 0 var(--pink-hot)

}

.mq-body img{

  width:100%;height:100%;object-fit:cover;

  transition:.6s

}

.mq-vibe{

  position:absolute;top:14px;left:14px;

  background:var(--ink);color:var(--cream);

  padding:6px 12px;border-radius:100px;

  font-family:'Archivo Black',sans-serif;

  font-size:9px;letter-spacing:2px;z-index:2

}

.mq-year{

  position:absolute;top:14px;right:14px;

  font-family:'Archivo Black',sans-serif;

  font-size:11px;letter-spacing:2px;

  background:var(--butter);color:var(--ink);

  padding:6px 10px;border-radius:100px;z-index:2

}

.mannequin .mq-pole{

  width:2px;height:44px;background:var(--ink);

  margin:0 auto;opacity:.4

}

.mannequin .mq-base{

  width:110px;height:2px;background:var(--ink);

  margin:0 auto;opacity:.3

}

.mannequin .mq-label{

  text-align:center;margin-top:14px;

  font-family:'Fraunces',serif;font-style:italic;

  font-size:17px;color:rgba(24,8,16,.55);transition:.4s

}

.mannequin.active .mq-body{

  border-color:var(--pink-hot);

  box-shadow:12px 12px 0 var(--pink-hot);

  transform:translate(-6px,-6px)

}

.mannequin.active .mq-body img{transform:scale(1.05)}

.mannequin.active .mq-label{color:var(--ink);font-size:19px;font-weight:700}

.mannequin.active .mq-pole{opacity:1;height:54px;background:var(--pink-hot)}

.carousel-controls{

  position:absolute;top:44%;transform:translateY(-50%);

  width:64px;height:64px;border-radius:50%;

  background:var(--ink);color:var(--cream);

  display:flex;align-items:center;justify-content:center;

  font-size:24px;transition:.35s;z-index:10;

  border:2px solid var(--ink)

}

.carousel-controls:hover{

  background:var(--pink-hot);border-color:var(--pink-hot);

  transform:translateY(-50%) scale(1.12)

}

.nav-prev{left:2%}

.nav-next{right:2%}

.carousel-dots{

  display:flex;gap:12px;justify-content:center;margin-top:44px

}

.dot-btn{

  width:36px;height:6px;border-radius:100px;

  background:rgba(24,8,16,.15);transition:.4s;padding:0

}

.dot-btn.active{background:var(--pink-hot);width:56px}

/* ДЕТАЛЬ ПАНЕЛЬ */

.detail-panel{

  max-width:1180px;margin:70px auto 0;

  background:var(--cream);border:2px solid var(--ink);

  border-radius:20px;overflow:hidden;

  display:grid;grid-template-columns:.9fr 1.1fr;

  box-shadow:14px 14px 0 var(--ink)

}

.detail-img{

  background:var(--pink);position:relative;min-height:520px

}

.detail-img img{

  width:100%;height:100%;object-fit:cover;position:absolute;inset:0

}

.detail-info{padding:48px 44px;display:flex;flex-direction:column}

.detail-info .vibe{

  font-family:'Archivo Black',sans-serif;

  font-size:11px;letter-spacing:3px;color:var(--pink-hot);

  margin-bottom:14px

}

.detail-info h3{

  font-family:'Fraunces',serif;font-weight:400;

  font-size:clamp(1.8rem,3vw,2.6rem);

  line-height:1.05;letter-spacing:-1px;margin-bottom:18px

}

.detail-info h3 em{font-style:italic;font-weight:700}

.detail-info .desc{

  color:var(--plum);font-size:14.5px;line-height:1.75;

  margin-bottom:28px;max-width:500px

}

.detail-info .price-row{

  display:flex;align-items:baseline;gap:16px;

  padding-bottom:26px;margin-bottom:28px;

  border-bottom:1.5px dashed rgba(24,8,16,.2)

}

.detail-info .price{

  font-family:'Fraunces',serif;font-style:italic;font-weight:700;

  font-size:44px;line-height:1;color:var(--ink);letter-spacing:-1px

}

.detail-info .price-old{

  text-decoration:line-through;color:var(--plum);

  opacity:.4;font-size:16px

}

.size-block{margin-bottom:26px}

.size-label{

  font-family:'Archivo Black',sans-serif;

  font-size:11px;letter-spacing:3px;

  margin-bottom:14px;display:flex;

  justify-content:space-between;align-items:center

}

.size-label .hint{

  font-family:'Caveat',cursive;font-size:20px;

  color:var(--pink-hot);letter-spacing:0

}

.sizes{display:flex;gap:10px;flex-wrap:wrap}

.size-btn{

  min-width:54px;height:54px;padding:0 12px;

  background:transparent;border:2px solid var(--ink);

  border-radius:100px;font-family:'Archivo Black',sans-serif;

  font-size:13px;letter-spacing:1px;

  transition:.3s;display:flex;align-items:center;justify-content:center

}

.size-btn:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--pink-hot);border-color:var(--pink-hot)}

.size-btn.selected{

  background:var(--ink);color:var(--cream);

  transform:translateY(-3px);

  box-shadow:0 6px 0 var(--pink-hot)

}

.add-to-cart-btn{

  width:100%;padding:22px;border-radius:100px;

  background:var(--pink-hot);color:var(--cream);

  font-family:'Archivo Black',sans-serif;

  font-size:14px;letter-spacing:3px;

  border:2px solid var(--pink-hot);

  transition:.3s;position:relative;overflow:hidden

}

.add-to-cart-btn:hover:not(:disabled){

  transform:translateY(-3px);

  box-shadow:0 10px 0 var(--ink);

  background:var(--ink);border-color:var(--ink)

}

.add-to-cart-btn:disabled{

  opacity:.35;cursor:not-allowed;

  background:transparent;color:var(--plum);border-color:var(--plum)

}

@media(max-width:1000px){

  .carousel-wrap{height:500px}

  .mannequin{width:200px;height:420px}

  .mq-body{height:340px}

  .detail-panel{grid-template-columns:1fr}

  .detail-img{min-height:380px}

}

@media(max-width:600px){

  .carousel-wrap{height:440px}

  .mannequin{width:170px;height:360px}

  .mq-body{height:280px}

  .carousel-controls{width:48px;height:48px;font-size:18px}

  .detail-info{padding:32px 22px}

  .detail-info .price{font-size:34px}

  .size-btn{min-width:46px;height:46px;font-size:11px}

}

/* КОРЗИНА */

.cart-sec{

  background:var(--pink);border-top:2px solid var(--ink)

}

#cart-items{max-width:860px;margin:0 auto 44px}

.cart-item{

  display:flex;justify-content:space-between;align-items:center;

  padding:22px 26px;margin-bottom:14px;

  background:var(--cream);border:2px solid var(--ink);

  border-radius:16px;transition:.35s

}

.cart-item:hover{

  transform:translate(-4px,-4px);box-shadow:6px 6px 0 var(--ink)

}

.cart-item h4{

  font-family:'Fraunces',serif;font-style:italic;

  font-size:20px;font-weight:600;margin-bottom:6px

}

.cart-item small{

  color:var(--plum);font-size:12px;

  font-family:'Archivo Black',sans-serif;letter-spacing:1px

}

.cart-item .size-tag{

  display:inline-block;margin-left:10px;

  padding:3px 12px;background:var(--ink);color:var(--cream);

  border-radius:100px;font-family:'Archivo Black',sans-serif;

  font-size:10px;letter-spacing:2px

}

.cart-remove{

  color:var(--ink);font-size:22px;padding:8px 14px;

  transition:.35s;font-weight:900

}

.cart-remove:hover{color:var(--pink-hot);transform:rotate(90deg) scale(1.2)}

.cart-total{

  text-align:center;padding:30px 0;

  font-family:'Fraunces',serif;font-style:italic;font-weight:700;

  font-size:clamp(28px,4vw,44px);margin-bottom:26px

}

.cart-total b{color:var(--ink)}

.cart-empty{

  text-align:center;padding:60px 20px;

  background:var(--cream);border:2px dashed var(--ink);

  border-radius:16px;font-family:'Caveat',cursive;

  font-size:28px;color:var(--plum)

}

.cart-actions{text-align:center}

.btn-main{

  display:inline-flex;align-items:center;gap:14px;

  padding:22px 44px;border-radius:100px;

  background:var(--ink);color:var(--cream);

  font-family:'Archivo Black',sans-serif;

  font-size:14px;letter-spacing:3px;

  transition:.35s;border:2px solid var(--ink)

}

.btn-main:hover{

  background:var(--pink-hot);border-color:var(--pink-hot);

  transform:translateY(-4px);

  box-shadow:0 12px 0 rgba(24,8,16,.2)

}

.btn-main svg{transition:.35s}

.btn-main:hover svg{transform:translateX(8px)}

/* ОПЛАТА */

#checkout{

  max-width:680px;margin:34px auto 0;

  background:var(--cream);padding:50px 46px;

  border:2px solid var(--ink);border-radius:20px;

  display:none;box-shadow:14px 14px 0 var(--ink)

}

#checkout h3{

  font-family:'Fraunces',serif;font-weight:400;

  font-style:italic;font-size:36px;

  text-align:center;margin-bottom:8px

}

#checkout .sub{

  text-align:center;font-family:'Caveat',cursive;

  font-size:22px;color:var(--plum);margin-bottom:36px

}

.form-group{margin-bottom:22px}

.form-group label{

  display:block;font-family:'Archivo Black',sans-serif;

  font-size:11px;letter-spacing:2.5px;color:var(--plum);

  margin-bottom:8px

}

.form-group input,.form-group textarea,.form-group select{

  width:100%;padding:15px 20px;

  border:2px solid var(--ink);border-radius:100px;

  background:var(--cream);color:var(--ink);

  font-family:inherit;font-size:15px;transition:.3s

}

.form-group textarea{border-radius:20px;resize:vertical;min-height:90px}

.form-group select{border-radius:20px}

.form-group input:focus,.form-group textarea:focus,.form-group select:focus{

  outline:none;border-color:var(--pink-hot);

  box-shadow:0 0 0 4px rgba(255,77,135,.15)

}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}

.pay-note{

  font-family:'Caveat',cursive;font-size:18px;

  text-align:center;color:var(--plum);

  margin-top:18px;opacity:.7

}

.btn-submit{

  width:100%;padding:22px;border-radius:100px;

  background:var(--pink-hot);color:var(--cream);

  font-family:'Archivo Black',sans-serif;

  font-size:14px;letter-spacing:3px;

  transition:.35s;margin-top:10px;

  border:2px solid var(--pink-hot)

}

.btn-submit:hover{

  background:var(--ink);border-color:var(--ink);

  transform:translateY(-3px);

  box-shadow:0 8px 0 rgba(255,77,135,.3)

}

.success-msg{

  display:none;text-align:center;padding:70px 40px;

  background:var(--cream);border:2px solid var(--ink);

  border-radius:20px;max-width:680px;margin:0 auto;

  box-shadow:14px 14px 0 var(--ink)

}

.success-msg h3{

  font-family:'Fraunces',serif;font-style:italic;

  font-weight:700;font-size:42px;

  color:var(--pink-hot);margin-bottom:18px

}

.success-msg p{

  font-family:'Caveat',cursive;font-size:22px;

  color:var(--plum);margin-bottom:32px;line-height:1.5

}

@media(max-width:600px){

  #checkout{padding:34px 22px;box-shadow:8px 8px 0 var(--ink)}

  .form-row{grid-template-columns:1fr}

}

/* ДИЗАЙНЕРЫ */

.designers-sec{

  background:linear-gradient(180deg,var(--cream) 0%,var(--lilac) 150%)

}

.designers-grid{

  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));

  gap:32px

}

.designer-card{

  background:var(--cream);border:2px solid var(--ink);

  border-radius:20px;overflow:hidden;

  display:flex;flex-direction:column;

  transition:.4s cubic-bezier(.34,1.56,.64,1);

  position:relative

}

.designer-card:hover{

  transform:translate(-6px,-6px);

  box-shadow:12px 12px 0 var(--pink-hot)

}

.designer-photo{

  height:340px;background-size:cover;background-position:center;

  position:relative;background-color:var(--pink);

  border-bottom:2px solid var(--ink)

}

.designer-num{

  position:absolute;top:16px;left:16px;

  background:var(--butter);color:var(--ink);

  padding:6px 14px;border-radius:100px;

  font-family:'Archivo Black',sans-serif;

  font-size:11px;letter-spacing:2px;z-index:3

}

.designer-coll{

  position:absolute;bottom:16px;left:16px;right:16px;z-index:3

}

.designer-coll small{

  display:inline-block;

  background:var(--ink);color:var(--cream);

  padding:5px 12px;border-radius:100px;

  font-family:'Archivo Black',sans-serif;

  font-size:9px;letter-spacing:2px;margin-bottom:6px

}

.designer-coll b{

  display:block;font-family:'Fraunces',serif;font-style:italic;

  font-size:17px;font-weight:600;color:var(--cream);

  text-shadow:0 2px 8px rgba(0,0,0,.6)

}

.designer-info{

  padding:26px 24px;flex:1;display:flex;flex-direction:column

}

.designer-info h3{

  font-family:'Fraunces',serif;font-weight:400;

  font-size:26px;line-height:1.1;

  letter-spacing:-.3px;margin-bottom:6px

}

.designer-info h3 em{font-style:italic;font-weight:700}

.designer-info .role{

  font-family:'Archivo Black',sans-serif;

  font-size:10px;letter-spacing:2px;

  color:var(--pink-hot);margin-bottom:16px

}

.designer-info .bio{

  font-size:13.5px;color:var(--plum);

  line-height:1.7;margin-bottom:22px;flex:1

}

.designer-info .btn-outline{

  display:flex;align-items:center;justify-content:center;gap:10px;

  padding:16px 20px;border:2px solid var(--ink);

  border-radius:100px;color:var(--ink);

  font-family:'Archivo Black',sans-serif;

  font-size:12px;letter-spacing:2px;

  transition:.35s;background:transparent;width:100%

}

.designer-info .btn-outline:hover{

  background:var(--ink);color:var(--cream);

  transform:translateY(-3px);

  box-shadow:0 8px 0 var(--pink-hot)

}

/* МОДАЛКА */

.modal-backdrop{

  position:fixed;inset:0;background:rgba(24,8,16,.75);

  backdrop-filter:blur(8px);z-index:1000;

  display:none;align-items:center;justify-content:center;

  padding:20px;overflow-y:auto

}

.modal-backdrop.open{display:flex}

.modal{

  background:var(--cream);max-width:700px;width:100%;

  padding:52px 46px;border-radius:24px;

  border:2px solid var(--ink);

  box-shadow:16px 16px 0 var(--pink-hot);

  position:relative;max-height:92vh;overflow-y:auto

}

.modal-close{

  position:absolute;top:18px;right:22px;

  width:40px;height:40px;

  display:flex;align-items:center;justify-content:center;

  font-size:22px;color:var(--ink);transition:.3s;

  background:var(--pink);border-radius:50%

}

.modal-close:hover{background:var(--pink-hot);color:var(--cream);transform:rotate(90deg)}

.modal h3{

  font-family:'Fraunces',serif;font-weight:400;

  font-style:italic;font-size:38px;text-align:center;

  margin-bottom:10px;letter-spacing:-1px

}

.modal .subtitle{

  text-align:center;font-family:'Caveat',cursive;

  font-size:22px;color:var(--plum);margin-bottom:32px

}

.modal .designer-tag{

  display:block;text-align:center;

  background:var(--pink);padding:10px 20px;

  border-radius:100px;font-family:'Archivo Black',sans-serif;

  font-size:12px;letter-spacing:2px;

  margin:0 auto 34px;width:fit-content;max-width:100%

}

@media(max-width:600px){

  .modal{padding:38px 22px;box-shadow:8px 8px 0 var(--pink-hot)}

  .modal h3{font-size:28px}

}

/* ЛИЦЕНЗИЯ */

.license-sec{background:var(--ink);color:var(--cream)}

.license-sec .sec-title{color:var(--cream)}

.license-sec .sec-title em{color:var(--pink)}

.license-sec .sec-num{background:var(--pink);color:var(--ink)}

.license-sec .sec-head{border-bottom-color:var(--pink)}

.license-sec .sec-tag{color:var(--pink)}

.license-grid{

  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

  gap:20px

}

.license-card{

  background:rgba(255,246,239,.05);

  padding:34px 28px;border-radius:20px;

  border:1.5px solid rgba(255,182,208,.25);

  transition:.35s

}

.license-card:hover{

  background:rgba(255,182,208,.1);

  transform:translateY(-6px);

  border-color:var(--pink)

}

.license-card h4{

  font-family:'Archivo Black',sans-serif;

  font-size:12px;letter-spacing:3px;

  color:var(--pink);margin-bottom:18px;

  display:flex;align-items:center;gap:12px

}

.license-card h4::before{

  content:'✦';color:var(--pink-hot);font-size:14px

}

.license-card p,.license-card li{

  font-size:13.5px;line-height:1.8;

  color:rgba(255,246,239,.7)

}

.license-card ul{padding-left:20px;margin-top:12px}

.license-card li{margin-bottom:8px}

.license-card li::marker{color:var(--pink-hot)}

/* ПОДВАЛ */

footer{

  padding:70px 4% 40px;background:var(--pink);

  text-align:center;position:relative;z-index:2;

  border-top:2px solid var(--ink)

}

.footer-brand{

  font-family:'Archivo Black',sans-serif;

  font-size:clamp(48px,10vw,120px);

  letter-spacing:-2px;line-height:.9;

  color:var(--ink);margin-bottom:24px;

  position:relative;display:inline-block

}

.footer-brand span{color:var(--cream)}

.footer-brand::after{

  content:'';position:absolute;bottom:-8px;left:5%;right:5%;

  height:6px;background:var(--butter);border-radius:100px

}

footer p{

  font-family:'Archivo Black',sans-serif;

  font-size:11px;letter-spacing:3px;

  color:var(--ink);opacity:.7;margin-bottom:8px

}

footer .legal{

  font-family:'Caveat',cursive;font-size:20px;

  opacity:.6;margin-top:20px;letter-spacing:0

}

/* ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ */

.reveal{opacity:0;transform:translateY(50px);transition:1s cubic-bezier(.87,0,.13,1)}

.reveal.in{opacity:1;transform:translateY(0)}

.no-js .reveal{opacity:1;transform:none}

</style>

</head>

<body class="no-js">

<div class="curtain" id="curtain">

  <div class="curtain-side curtain-left"></div>

  <div class="curtain-side curtain-right"></div>

</div>

<div class="curtain-brand" id="curtainBrand">

  SCENORA

  <small>SCENE × AURA</small>

</div>

<div class="cursor-dot" id="cursorDot"></div>

<div class="cursor-ring" id="cursorRing"></div>

<div class="blob blob-1"></div>

<div class="blob blob-2"></div>

<div class="blob blob-3"></div>

<div class="wrap">

  <div class="ticker">

    <div class="ticker-track">

      <span>SCENORA STUDIO PRESENTS</span>

      <span>SEASON 01 · LIMITED EDITION</span>

      <span>Одежда с вайбом любимой истории</span>

      <span>SCENORA STUDIO PRESENTS</span>

      <span>SEASON 01 · LIMITED EDITION</span>

      <span>Одежда с вайбом любимой истории</span>

    </div>

  </div>

  <nav class="nav">

    <div class="nav-left">

      <a href="#about" class="nlink">О проекте</a>

      <a href="#capsule" class="nlink">Капсула</a>

    </div>

    <a href="#top" class="brand">SCEN<span>O</span>RA</a>

    <div class="nav-right">

      <a href="#designers" class="nlink">Дизайнеры</a>

      <a href="#license" class="nlink">Лицензия</a>

      <button class="cart-pill" onclick="scrollToCart()">

        Корзина <b id="cartCount">0</b>

      </button>

    </div>

  </nav>

  <section class="hero" id="top">

    <div class="hero-bg-text">SCENORA</div>

    <div class="hero-inner">

      <div>

        <div class="hero-tag">SCENE × AURA</div>

        <h1>Одежда с вайбом<br><em>любимой истории</em></h1>

        <p>Капсульные коллекции по мотивам атмосферы кино и сериалов. Настроение, цвет и силуэт — без копирования костюмов и логотипов.</p>

        <a href="#capsule" class="hero-cta">

          <span>СМОТРЕТЬ КАПСУЛУ</span>

          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg>

        </a>

      </div>

      <div class="hero-visual">

        <div class="hero-photo"></div>

        <div class="hero-badge">

          <div class="hero-badge-inner">SCENORA · SEASON 01 · LIMITED ·</div>

        </div>

        <div class="hero-sticker">вайб любимого кино ✨</div>

      </div>

    </div>

  </section>

  <div class="marquee pink">

    <div class="marquee-track">

      <span>Twin Peaks</span>

      <span>Alice in Wonderland</span>

      <span>Twilight</span>

      <span>Devil Wears Prada</span>

      <span>Twin Peaks</span>

      <span>Alice in Wonderland</span>

      <span>Twilight</span>

      <span>Devil Wears Prada</span>

    </div>

  </div>

  <section class="sec" id="about">

    <div class="container">

      <div class="sec-head">

        <div class="sec-num">01 / О ПРОЕКТЕ</div>

        <h2 class="sec-title">Больше, чем <em>мерч</em></h2>

        <div class="sec-tag">MANIFESTO<br>BEHIND SCENES</div>

      </div>

      <div class="about-grid">

        <div class="about-text">

          <div class="label">— наш манифест —</div>

          <h3>Мы не копируем костюмы.<br>Мы создаём <em>настроение</em>.</h3>

          <p>SCENORA — от английских <em>scene</em> («сцена») и <em>aura</em> («атмосфера»). Мы переводим визуальный референс из кино в удобную одежду для повседневной носки.</p>

          <p>Дизайнерская капсула среднего ограниченного тиража. Продуманные силуэты, качественные ткани, понятная цена.</p>

          <div class="about-stats">

            <div class="stat"><b>04</b><span>КАПСУЛЫ В СЕЗОНЕ</span></div>

            <div class="stat"><b>100%</b><span>АВТОРСКИЙ ДИЗАЙН</span></div>

          </div>

        </div>

        <div class="about-visual">

          <div class="about-photo"></div>

        </div>

      </div>

    </div>

  </section>

  <div class="marquee lilac">

    <div class="marquee-track">

      <span>Дизайнерская капсула</span>

      <span>Ограниченный тираж</span>

      <span>Средний ценовой сегмент</span>

      <span>Индивидуальный пошив</span>

      <span>Дизайнерская капсула</span>

      <span>Ограниченный тираж</span>

      <span>Средний ценовой сегмент</span>

      <span>Индивидуальный пошив</span>

    </div>

  </div>

  <section class="sec carousel-sec" id="capsule">

    <div class="container">

      <div class="sec-head">

        <div class="sec-num">02 / КАПСУЛА</div>

        <h2 class="sec-title">Крутите <em>манекены</em></h2>

        <div class="sec-tag">NOW SHOWING<br>SEASON 01</div>

      </div>

      <div class="carousel-wrap">

        <button class="carousel-controls nav-prev" onclick="rotate(-1)" aria-label="Назад">‹</button>

        <div class="carousel-stage" id="stage"></div>

        <button class="carousel-controls nav-next" onclick="rotate(1)" aria-label="Вперёд">›</button>

      </div>

      <div class="carousel-dots" id="dots"></div>

      <div class="detail-panel" id="detailPanel"></div>

    </div>

  </section>

  <div class="marquee mint">

    <div class="marquee-track">

      <span>Выбери историю</span>

      <span>Выбери настроение</span>

      <span>Выбери размер</span>

      <span>Выбери себя</span>

      <span>Выбери историю</span>

      <span>Выбери настроение</span>

      <span>Выбери размер</span>

      <span>Выбери себя</span>

    </div>

  </div>

  <section class="sec cart-sec" id="cart">

    <div class="container">

      <div class="sec-head">

        <div class="sec-num">03 / КОРЗИНА</div>

        <h2 class="sec-title">Ваш <em>заказ</em></h2>

        <div class="sec-tag">BOX OFFICE<br>ORDER SUMMARY</div>

      </div>

      <div id="cart-items"></div>

      <div class="cart-total" id="cartTotal" style="display:none;"></div>

      <div class="cart-actions">

        <button class="btn-main" id="checkoutBtn" onclick="showCheckout()" style="display:none;">

          <span>К ОПЛАТЕ</span>

          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg>

        </button>

      </div>

      <div id="checkout">

        <h3>Оформление заказа</h3>

        <p class="sub">доставка по всей России</p>

        <form onsubmit="processPayment(event)">

          <div class="form-group"><label>ИМЯ И ФАМИЛИЯ</label><input type="text" required placeholder="Иван Иванов"></div>

          <div class="form-group"><label>EMAIL</label><input type="email" required placeholder="ivan@example.com"></div>

          <div class="form-group"><label>АДРЕС ДОСТАВКИ</label><input type="text" required placeholder="г. Москва, ул. Примерная, д. 1"></div>

          <div class="form-group"><label>НОМЕР КАРТЫ</label><input type="text" required placeholder="0000 0000 0000 0000" maxlength="19"></div>

          <div class="form-row">

            <div class="form-group"><label>СРОК</label><input type="text" required placeholder="MM/ГГ" maxlength="5"></div>

            <div class="form-group"><label>CVV</label><input type="text" required placeholder="000" maxlength="3"></div>

          </div>

          <button type="submit" class="btn-submit">ОПЛАТИТЬ · ДЕМО</button>

          <p class="pay-note">учебный проект · оплата не производится</p>

        </form>

      </div>

      <div class="success-msg" id="successMsg">

        <h3>Заказ оформлен ✨</h3>

        <p>Спасибо за демонстрацию работы сайта.<br>Это учебный проект — реальная оплата не была произведена.</p>

        <button class="btn-main" onclick="resetAll()">

          <span>ВЕРНУТЬСЯ В МАГАЗИН</span>

          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M13 6l6 6-6 6"/></svg>

        </button>

      </div>

    </div>

  </section>

  <div class="marquee ink">

    <div class="marquee-track">

      <span>Featured Collaborators</span>

      <span>Camille Laurent</span>

      <span>Renata Silva</span>

      <span>Astrid Holm</span>

      <span>Marco Bellini</span>

      <span>Featured Collaborators</span>

      <span>Camille Laurent</span>

      <span>Renata Silva</span>

      <span>Astrid Holm</span>

      <span>Marco Bellini</span>

    </div>

  </div>

  <section class="sec designers-sec" id="designers">

    <div class="container">

      <div class="sec-head">

        <div class="sec-num">04 / ДИЗАЙНЕРЫ</div>

        <h2 class="sec-title">Дизайнеры <em>капсулы</em></h2>

        <div class="sec-tag">FEATURED<br>COLLABORATORS</div>

      </div>

      <div class="designers-grid" id="designersGrid"></div>

    </div>

  </section>

  <section class="sec license-sec" id="license">

    <div class="container">

      <div class="sec-head">

        <div class="sec-num">05 / ЛИЦЕНЗИЯ</div>

        <h2 class="sec-title">Правовая <em>информация</em></h2>

        <div class="sec-tag">LEGAL<br>DISCLAIMER</div>

      </div>

      <div class="license-grid">

        <div class="license-card">

          <h4>О БРЕНДЕ</h4>

          <p>SCENORA — учебный проект. Название образовано от английских слов <em>Scene</em> («сцена») и <em>Aura</em> («атмосфера»).</p>

        </div>

        <div class="license-card">

          <h4>ИНТЕЛЛЕКТУАЛЬНАЯ СОБСТВЕННОСТЬ</h4>

          <p>Дизайн одежды SCENORA — авторский. Мы не копируем костюмы, логотипы и охраняемые элементы.</p>

          <ul>

            <li>Названия фильмов принадлежат правообладателям</li>

            <li>Референсы используются в учебных целях</li>

            <li>Продукция — авторский дизайн</li>

          </ul>

        </div>

        <div class="license-card">

          <h4>ЮРИДИЧЕСКАЯ ФОРМА</h4>

          <p>ООО, УСН «Доходы» — 6%. Участники команды официально закрепляют доли и роли.</p>

        </div>

        <div class="license-card">

          <h4>ОПЛАТА И ДАННЫЕ</h4>

          <p>Оплата имитируется в учебных целях. В реальном проекте — через ЮKassa или Тинькофф с соблюдением ФЗ-152.</p>

        </div>

      </div>

    </div>

  </section>

  <footer>

    <div class="footer-brand">SCEN<span>O</span>RA</div>

    <p>STUDIO · 2026 · УЧЕБНЫЙ ПРОЕКТ</p>

    <p class="legal">Дизайн не копирует костюмы и логотипы. Авторские вещи по мотивам атмосферы.</p>

  </footer>

</div>

<div class="modal-backdrop" id="modalBackdrop" onclick="if(event.target===this)closeModal()">

  <div class="modal">

    <button class="modal-close" onclick="closeModal()">✕</button>

    <h3>Индивидуальный заказ</h3>

    <p class="subtitle">Обсудим вашу идею и сошьём вещь один на один</p>

    <span class="designer-tag" id="modalDesignerName">—</span>

    <form onsubmit="submitCustomOrder(event)">

      <div class="form-group"><label>КАК ВАС ЗОВУТ?</label><input type="text" required placeholder="Имя и фамилия"></div>

      <div class="form-row">

        <div class="form-group"><label>EMAIL</label><input type="email" required placeholder="you@mail.ru"></div>

        <div class="form-group"><label>TELEGRAM</label><input type="text" required placeholder="@nickname"></div>

      </div>

      <div class="form-group">

        <label>ЧТО ХОТИТЕ СШИТЬ?</label>

        <select required>

          <option value="">— выберите категорию —</option>

          <option>Пальто / тренч</option>

          <option>Платье</option>

          <option>Куртка / бомбер</option>

          <option>Костюм / комплект</option>

          <option>Свитер / трикотаж</option>

          <option>Другое</option>

        </select>

      </div>

      <div class="form-group">

        <label>ОПИШИТЕ ИДЕЮ</label>

        <textarea required placeholder="Какой фильм или атмосфера вдохновляет? Какие цвета, силуэт, детали?"></textarea>

      </div>

      <div class="form-row">

        <div class="form-group"><label>БЮДЖЕТ, ₽</label><input type="text" required placeholder="от 15 000"></div>

        <div class="form-group"><label>СРОК</label><input type="text" required placeholder="3–4 недели"></div>

      </div>

      <button type="submit" class="btn-submit">ОТПРАВИТЬ ЗАЯВКУ</button>

      <p class="pay-note">учебный проект · заявка никуда не отправляется</p>

    </form>

  </div>

</div>

<script>

/* ЗАНАВЕС */

(function openCurtain(){

  const curtain = document.getElementById('curtain');

  const brand = document.getElementById('curtainBrand');

  if (!curtain) return;

  let opened = false;

  function open(){

    if (opened) return;

    opened = true;

    curtain.classList.add('open');

    if (brand) brand.style.opacity = '0';

    setTimeout(() => {

      curtain.style.display = 'none';

      if (brand) brand.style.display = 'none';

    }, 1400);

  }

  curtain.addEventListener('click', open);

  document.addEventListener('DOMContentLoaded', () => setTimeout(open, 500));

  setTimeout(open, 1500);

  setTimeout(open, 4000);

})();

document.body.classList.remove('no-js');

/* КУРСОР */

(function initCursor(){

  const dot = document.getElementById('cursorDot');

  const ring = document.getElementById('cursorRing');

  if (!dot || !ring) return;

  if ('ontouchstart' in window || window.innerWidth < 900) {

    dot.style.display = 'none';

    ring.style.display = 'none';

    document.body.style.cursor = 'auto';

    return;

  }

  let mouseX = window.innerWidth / 2;

  let mouseY = window.innerHeight / 2;

  let ringX = mouseX, ringY = mouseY;

  window.addEventListener('mousemove', e => {

    mouseX = e.clientX;

    mouseY = e.clientY;

    dot.style.transform = `translate(${mouseX}px, ${mouseY}px) translate(-50%,-50%)`;

  }, { passive: true });

  function animateRing(){

    ringX += (mouseX - ringX) * 0.16;

    ringY += (mouseY - ringY) * 0.16;

    ring.style.transform = `translate(${ringX}px, ${ringY}px) translate(-50%,-50%)`;

    requestAnimationFrame(animateRing);

  }

  animateRing();

  document.addEventListener('mouseover', e => {

    if (e.target.closest('a, button, .mannequin, .designer-card, .hero-photo')) {

      ring.classList.add('hover');

    }

  });

  document.addEventListener('mouseout', e => {

    if (e.target.closest('a, button, .mannequin, .designer-card, .hero-photo')) {

      ring.classList.remove('hover');

    }

  });

})();

/* ПОЯВЛЕНИЕ */

(function initReveal(){

  const targets = document.querySelectorAll(

    '.sec-head, .about-grid, .carousel-wrap, .detail-panel, .designers-grid, .license-grid'

  );

  if (!targets.length) return;

  targets.forEach(el => el.classList.add('reveal'));

  if (!('IntersectionObserver' in window)) {

    targets.forEach(el => el.classList.add('in'));

    return;

  }

  const observer = new IntersectionObserver(entries => {

    entries.forEach(e => {

      if (e.isIntersecting) {

        e.target.classList.add('in');

        observer.unobserve(e.target);

      }

    });

  }, { threshold: 0.08, rootMargin: '0px 0px -50px 0px' });

  targets.forEach(el => observer.observe(el));

  setTimeout(() => {

    targets.forEach(el => {

      const r = el.getBoundingClientRect();

      if (r.top < window.innerHeight && r.bottom > 0) {

        el.classList.add('in');

      }

    });

  }, 2500);

})();

/* 3D-НАКЛОН */

function attachTilt(){

  if (window.innerWidth < 900) return;

  document.querySelectorAll('.designer-card').forEach(card => {

    card.addEventListener('mousemove', e => {

      const r = card.getBoundingClientRect();

      const x = (e.clientX - r.left) / r.width - 0.5;

      const y = (e.clientY - r.top) / r.height - 0.5;

      card.style.transform = `translate(-6px,-6px) rotateY(${x*8}deg) rotateX(${-y*8}deg)`;

      card.style.transformStyle = 'preserve-3d';

    });

    card.addEventListener('mouseleave', () => { card.style.transform = ''; });

  });

}

/* ДАННЫЕ */

const products = [

  { id:1, name:'Тренч', title:'«Северный лес»', vibe:'TWIN PEAKS', year:'1990', price:14500, oldPrice:18000,

    desc:'Двубортный тренч из плотной шерсти. Приглушённый зелёный, свободный крой, потайная застёжка. Атмосфера тихого городка и соснового леса.',

    sizes:['XS','S','M','L','XL'],

    img:'https://images.unsplash.com/photo-1591047139829-d91aecb6caea?q=80&w=1000&auto=format&fit=crop' },

  { id:2, name:'Платье', title:'«Сон в лесу»', vibe:'ALICE IN WONDERLAND', year:'2010', price:9800, oldPrice:12500,

    desc:'Платье-миди с многослойной юбкой и мягким силуэтом. Пудрово-голубой оттенок, кружевные вставки. Сказочная лёгкость на каждый день.',

    sizes:['XS','S','M','L'],

    img:'https://images.unsplash.com/photo-1515347619252-60a6bf4fffce?q=80&w=1000&auto=format&fit=crop' },

  { id:3, name:'Куртка', title:'«Офисный шик»', vibe:'DEVIL WEARS PRADA', year:'2006', price:12200, oldPrice:15000,

    desc:'Строгая куртка-бомбер с чёткой линией плеча. Графичный силуэт, матовая фурнитура. Для тех, кто одевается как на обложку.',

    sizes:['S','M','L','XL'],

    img:'https://images.unsplash.com/photo-1551028719-00167b16eac5?q=80&w=1000&auto=format&fit=crop' },

  { id:4, name:'Свитер', title:'«Полночный сад»', vibe:'TWILIGHT', year:'2008', price:7600, oldPrice:9500,

    desc:'Объёмный свитер крупной вязки. Цвет мокрого асфальта, oversize-посадка, спущенное плечо. Атмосфера туманного тихого утра.',

    sizes:['S','M','L','XL','XXL'],

    img:'https://images.unsplash.com/photo-1576566588028-4147f3842f27?q=80&w=1000&auto=format&fit=crop' },

];

const designers = [

  { id:'d1', name:'Camille', lastName:'Laurent', role:'ВНЕШНИЙ ДИЗАЙНЕР',

    collection:'Twin Peaks · S01',

    bio:'Парижский дизайнер верхней одежды. Плотные пальтовые ткани, строгие архитектурные силуэты. Работала с домами моды в Милане и Копенгагене.',

    photo:'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=700&auto=format&fit=crop' },

  { id:'d2', name:'Renata', lastName:'Silva', role:'ВНЕШНИЙ ДИЗАЙНЕР',

    collection:'Alice in Wonderland · S01',

    bio:'Бразильская художница и дизайнер костюма. Кружево, мягкие женственные формы, пастельная палитра.',

    photo:'https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=700&auto=format&fit=crop' },

  { id:'d3', name:'Astrid', lastName:'Holm', role:'ВНЕШНИЙ ДИЗАЙНЕР',

    collection:'Twilight · S01',

    bio:'Скандинавский дизайнер трикотажа. Крупная вязка, объёмные формы, сложные оттенки серого.',

    photo:'https://images.unsplash.com/photo-1531123897727-8f129e1688ce?q=80&w=700&auto=format&fit=crop' },

  { id:'d4', name:'Marco', lastName:'Bellini', role:'ВНЕШНИЙ ДИЗАЙНЕР',

    collection:'Devil Wears Prada · S01',

    bio:'Миланский дизайнер и стилист. Строгая архитектурная мода — чёткие линии, графичные формы.',

    photo:'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=700&auto=format&fit=crop' },

];

let cart = [];

try { cart = JSON.parse(localStorage.getItem('scenoraCart') || '[]'); } catch(e){ cart = []; }

let currentIndex = 0;

let selectedSizes = {};

const N = products.length;

const ANGLE = 360 / N;

const RADIUS = 400;

/* КАРУСЕЛЬ */

function renderCarousel(){

  const stage = document.getElementById('stage');

  const dots = document.getElementById('dots');

  if (!stage || !dots) return;

  stage.innerHTML = ''; dots.innerHTML = '';

  products.forEach((p, i) => {

    const el = document.createElement('div');

    el.className = 'mannequin';

    el.style.transform = `rotateY(${i * ANGLE}deg) translateZ(${RADIUS}px)`;

    el.innerHTML = `

      <div class="mq-body">

        <span class="mq-vibe">${p.vibe}</span>

        <span class="mq-year">${p.year}</span>

        <img src="${p.img}" alt="${p.title}" loading="lazy" onerror="this.src='data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22420%22><rect fill=%22%23FFB6D0%22 width=%22300%22 height=%22420%22/><text x=%2250%25%22 y=%2250%25%22 font-family=%22serif%22 font-size=%2230%22 fill=%22%23180810%22 text-anchor=%22middle%22 font-style=%22italic%22>Scenora</text></svg>'">

      </div>

      <div class="mq-pole"></div>

      <div class="mq-base"></div>

      <div class="mq-label">${p.name} ${p.title}</div>

    `;

    el.addEventListener('click', () => {

      if (i === currentIndex) return;

      const diff = i - currentIndex;

      rotate(diff > 0 ? 1 : -1, Math.abs(diff));

    });

    stage.appendChild(el);

    const d = document.createElement('button');

    d.className = 'dot-btn';

    d.onclick = () => {

      const diff = i - currentIndex;

      if (diff === 0) return;

      rotate(diff > 0 ? 1 : -1, Math.abs(diff));

    };

    dots.appendChild(d);

  });

  updateCarousel();

}

function rotate(direction, steps = 1){

  currentIndex = (currentIndex + direction * steps + N * 10) % N;

  updateCarousel();

}

function updateCarousel(){

  const stage = document.getElementById('stage');

  if (!stage) return;

  stage.style.transform = `translateX(-50%) rotateY(${-currentIndex * ANGLE}deg)`;

  document.querySelectorAll('.mannequin').forEach((el, i) => {

    const isActive = i === currentIndex;

    el.classList.toggle('active', isActive);

    el.style.filter = isActive ? 'none' : 'brightness(.7) saturate(.5)';

  });

  document.querySelectorAll('.dot-btn').forEach((d, i) => d.classList.toggle('active', i === currentIndex));

  renderDetail(products[currentIndex]);

}

function renderDetail(p){

  const panel = document.getElementById('detailPanel');

  if (!panel) return;

  const currentSize = selectedSizes[p.id];

  panel.innerHTML = `

    <div class="detail-img"><img src="${p.img}" alt="${p.title}"></div>

    <div class="detail-info">

      <div class="vibe">${p.vibe} · ${p.year}</div>

      <h3>${p.name} <em>${p.title}</em></h3>

      <p class="desc">${p.desc}</p>

      <div class="price-row">

        <span class="price">${p.price.toLocaleString('ru-RU')} ₽</span>

        <span class="price-old">${p.oldPrice.toLocaleString('ru-RU')} ₽</span>

      </div>

      <div class="size-block">

        <div class="size-label">

          <span>ВЫБЕРИТЕ РАЗМЕР</span>

          ${currentSize ? '<span class="hint">выбран · ' + currentSize + '</span>' : '<span class="hint">обязательно</span>'}

        </div>

        <div class="sizes">

          ${p.sizes.map(s => `

            <button class="size-btn ${currentSize === s ? 'selected' : ''}" onclick="pickSize(${p.id}, '${s}')">${s}</button>

          `).join('')}

        </div>

      </div>

      <button class="add-to-cart-btn" onclick="addToCart(${p.id})" ${!currentSize ? 'disabled' : ''}>

        ${currentSize ? 'ДОБАВИТЬ · ' + currentSize : 'СНАЧАЛА ВЫБЕРИТЕ РАЗМЕР'}

      </button>

    </div>

  `;

}

function pickSize(productId, size){

  selectedSizes[productId] = size;

  renderDetail(products.find(p => p.id === productId));

}

/* КОРЗИНА */

function addToCart(productId){

  const size = selectedSizes[productId];

  if(!size) return;

  const key = productId + '_' + size;

  const ex = cart.find(i => i.key === key);

  if(ex) ex.qty++;

  else cart.push({ key, id:productId, size, qty:1 });

  saveCart(); updateCartUI();

  const cartSec = document.getElementById('cart');

  if (cartSec) cartSec.scrollIntoView({behavior:'smooth'});

}

function removeFromCart(key){

  cart = cart.filter(i => i.key !== key);

  saveCart(); updateCartUI();

}

function saveCart(){

  try { localStorage.setItem('scenoraCart', JSON.stringify(cart)); } catch(e){}

}

function updateCartUI(){

  const countEl = document.getElementById('cartCount');

  const box = document.getElementById('cart-items');

  const totalEl = document.getElementById('cartTotal');

  const checkoutBtn = document.getElementById('checkoutBtn');

  if (!countEl || !box) return;

  const count = cart.reduce((s,i)=>s+i.qty,0);

  countEl.textContent = count;

  if(cart.length === 0){

    box.innerHTML = '<div class="cart-empty">Пока пусто — выберите вещи из капсулы ✨</div>';

    if (totalEl) totalEl.style.display = 'none';

    if (checkoutBtn) checkoutBtn.style.display = 'none';

    return;

  }

  let total = 0;

  box.innerHTML = cart.map(item => {

    const p = products.find(x => x.id === item.id);

    total += p.price * item.qty;

    return `

      <div class="cart-item">

        <div>

          <h4>${p.name} ${p.title} <span class="size-tag">${item.size}</span></h4>

          <small>${item.qty} × ${p.price.toLocaleString('ru-RU')} ₽ · ${p.vibe}</small>

        </div>

        <button class="cart-remove" onclick="removeFromCart('${item.key}')">✕</button>

      </div>

    `;

  }).join('');

  if (totalEl) {

    totalEl.innerHTML = 'ИТОГО · <b>' + total.toLocaleString('ru-RU') + ' ₽</b>';

    totalEl.style.display = 'block';

  }

  if (checkoutBtn) checkoutBtn.style.display = 'inline-flex';

}

function scrollToCart(){

  const c = document.getElementById('cart');

  if (c) c.scrollIntoView({behavior:'smooth'});

}

function showCheckout(){

  const co = document.getElementById('checkout');

  const btn = document.getElementById('checkoutBtn');

  if (co) co.style.display = 'block';

  if (btn) btn.style.display = 'none';

  if (co) co.scrollIntoView({behavior:'smooth'});

}

function processPayment(e){

  e.preventDefault();

  const co = document.getElementById('checkout');

  const success = document.getElementById('successMsg');

  if (co) co.style.display = 'none';

  document.querySelectorAll('#cart-items, #cartTotal, .cart-actions').forEach(el => el.style.display = 'none');

  if (success) {

    success.style.display = 'block';

    success.scrollIntoView({behavior:'smooth'});

  }

}

function resetAll(){

  cart = [];

  saveCart();

  const success = document.getElementById('successMsg');

  if (success) success.style.display = 'none';

  const items = document.getElementById('cart-items');

  const total = document.getElementById('cartTotal');

  const actions = document.querySelector('.cart-actions');

  if (items) items.style.display = 'block';

  if (total) total.style.display = 'block';

  if (actions) actions.style.display = 'block';

  updateCartUI();

  window.scrollTo({top:0, behavior:'smooth'});

}

/* ДИЗАЙНЕРЫ */

function renderDesigners(){

  const grid = document.getElementById('designersGrid');

  if (!grid) return;

  grid.innerHTML = designers.map((d, i) => `

    <div class="designer-card">

      <div class="designer-photo" style="background-image:url('${d.photo}')">

        <div class="designer-num">0${i+1}</div>

        <div class="designer-coll">

          <small>РАБОТА НАД КАПСУЛОЙ</small>

          <b>${d.collection}</b>

        </div>

      </div>

      <div class="designer-info">

        <h3>${d.name} <em>${d.lastName}</em></h3>

        <div class="role">${d.role}</div>

        <p class="bio">${d.bio}</p>

        <button class="btn-outline" onclick="openModal('${d.id}')">

          ИНДИВИДУАЛЬНЫЙ ЗАКАЗ

        </button>

      </div>

    </div>

  `).join('');

  attachTilt();

}

/* МОДАЛКА */

function openModal(designerId){

  const d = designers.find(x => x.id === designerId);

  const nameEl = document.getElementById('modalDesignerName');

  const backdrop = document.getElementById('modalBackdrop');

  if (nameEl) nameEl.textContent = d.name + ' ' + d.lastName + ' · ' + d.collection;

  if (backdrop) backdrop.classList.add('open');

  document.body.style.overflow = 'hidden';

}

function closeModal(){

  const backdrop = document.getElementById('modalBackdrop');

  if (backdrop) backdrop.classList.remove('open');

  document.body.style.overflow = '';

}

function submitCustomOrder(e){

  e.preventDefault();

  closeModal();

  alert('✨ Заявка отправлена дизайнеру!\n\n(демо учебного проекта — заявка никуда не уходит)');

  e.target.reset();

}

document.addEventListener('keydown', e => { if(e.key === 'Escape') closeModal(); });

/* СТАРТ */

function start(){

  try {

    renderCarousel();

    renderDesigners();

    updateCartUI();

  } catch(err) {

    console.error('Ошибка инициализации:', err);

    document.querySelectorAll('.reveal').forEach(el => el.classList.add('in'));

  }

}

if (document.readyState === 'loading') {

  document.addEventListener('DOMContentLoaded', start);

} else {

  start();

}

setTimeout(start, 300);

</script>

</body>

</html>