/* ============ YUNG BZNS RUSSIA — Maison de Luxe ============ */
:root{
  --bg:#120803; --bg2:#160a04;
  --gold:#c5a059; --gold-dim:rgba(197,160,89,.4); --gold-faint:rgba(197,160,89,.14);
  --cream:#f4e6d3; --cream-dim:rgba(244,230,211,.62); --cream-faint:rgba(244,230,211,.34);
  --serif:'Bodoni Moda','Playfair Display',Georgia,serif;
  --serif-cy:'Playfair Display',Georgia,serif;
  --script:'Great Vibes',cursive;
  --sans:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
body{
  background-color:var(--bg);
  background-image:url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%230f0702' fill-opacity='0.5'%3E%3Cpath d='M40 40c0-11.046-8.954-20-20-20S0 28.954 0 40s8.954 20 20 20 20-8.954 20-20zm-2 0c0 9.941-8.059 18-18 18S2 49.941 2 40s8.059-18 18-18 18 8.059 18 18z'/%3E%3Cpath d='M80 40c0-11.046-8.954-20-20-20s-20 8.954-20 20 8.954 20 20 20 20-8.954 20-20zm-2 0c0 9.941-8.059 18-18 18s-18-8.059-18-18 8.059-18 18-18 18 8.059 18 18z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color:var(--cream);font-family:var(--sans);font-weight:300;line-height:1.65;overflow-x:hidden;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--gold);color:var(--bg)}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--gold)}

/* scroll progress */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--gold),#e8cf9a);z-index:120}

/* vignette + side lines */
.vignette{position:fixed;inset:0;background:radial-gradient(circle at center,transparent 0%,rgba(18,8,3,.82) 100%);pointer-events:none;z-index:1}
.sideline{position:fixed;top:0;width:1px;height:100vh;background:var(--gold-dim);opacity:.12;z-index:0}
.sideline.l{left:5%}.sideline.r{right:5%}

/* nav */
nav{position:fixed;top:0;left:0;width:100%;padding:1.9rem 5%;display:flex;justify-content:space-between;align-items:center;z-index:100;mix-blend-mode:difference}
.nav-link{font-size:.62rem;text-transform:uppercase;letter-spacing:.34em;color:var(--cream);opacity:.85;transition:opacity .4s}
.nav-link:hover{opacity:1}
.nav-brand{font-family:var(--serif);font-size:1.05rem;letter-spacing:.5em;color:var(--cream);padding-left:.5em}

/* ============ HERO ============ */
header{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;position:relative;overflow:hidden;z-index:2}
.hero-video{position:absolute;inset:0;z-index:-1}
.hero-video video,.hero-video img{width:100%;height:100%;object-fit:cover;opacity:.34;filter:sepia(14%) brightness(.85)}
.hero-video::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 20%,var(--bg) 96%),linear-gradient(0deg,var(--bg) 2%,transparent 30%)}
.hero-pres{font-size:.6rem;letter-spacing:.55em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:2.6rem}
.main-logo{font-family:var(--serif);font-size:clamp(4rem,13vw,8.5rem);letter-spacing:.4em;padding-left:.4em;text-transform:uppercase;color:var(--gold);font-weight:400;text-shadow:0 4px 24px rgba(0,0,0,.55);line-height:1}
.hero-script{font-family:var(--script);font-size:clamp(1.6rem,3.4vw,2.6rem);color:var(--cream);margin-top:.6rem;opacity:.92}
.invite-text{font-family:var(--serif-cy);font-style:italic;font-size:clamp(1rem,1.6vw,1.25rem);max-width:640px;color:var(--cream-dim);margin-top:2.8rem}
.ornament{width:110px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:3.4rem auto;transform:scaleX(0);transition:transform 1.6s cubic-bezier(.16,1,.3,1) .4s}
.on .ornament,{transform:scaleX(1)}
.hero-date{font-family:var(--serif);font-size:.78rem;letter-spacing:.5em;color:var(--gold);text-transform:uppercase}
.scroll-hint{position:absolute;bottom:2.6rem;font-size:.56rem;text-transform:uppercase;letter-spacing:.5em;color:var(--gold);opacity:.85;animation:hint 3.2s ease-in-out infinite}
@keyframes hint{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(6px);opacity:1}}

/* ============ intro line ============ */
.intro{max-width:760px;margin:0 auto;text-align:center;padding:9rem 2rem 3rem;position:relative;z-index:2}
.intro .kicker{font-family:var(--serif);font-size:.66rem;letter-spacing:.8em;text-transform:uppercase;color:var(--gold);margin-bottom:2.4rem}
.intro p{font-family:var(--serif-cy);font-style:italic;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.45;color:var(--cream)}

/* ============ product sections ============ */
.piece{padding:7rem 10% 4rem;position:relative;z-index:2}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,7vw,8rem);align-items:center}
.piece:nth-child(even) .grid .ph{order:2}
@media(max-width:1024px){.grid{grid-template-columns:1fr;gap:3rem}.piece{padding:4rem 6%}.piece:nth-child(even) .grid .ph{order:0}}
.ph{position:relative;box-shadow:0 30px 60px rgba(0,0,0,.8);border:1px solid var(--gold-faint);overflow:hidden}
.ph img{width:100%;height:auto;filter:sepia(18%) contrast(1.08) brightness(.92);transition:filter 1s ease,opacity .7s ease,transform 1.2s cubic-bezier(.16,1,.3,1)}
.ph img.back{position:absolute;inset:0;opacity:0}
.ph:hover img{filter:sepia(0%) contrast(1.04) brightness(1);transform:scale(1.02)}
.ph:hover img.front{opacity:0}
.ph:hover img.back{opacity:1}
.ph .num{position:absolute;top:14px;right:16px;font-family:var(--serif);font-style:italic;color:var(--gold);font-size:.85rem;letter-spacing:.2em;background:rgba(18,8,3,.55);padding:.3rem .7rem;backdrop-filter:blur(2px)}
.info .meta{font-size:.62rem;text-transform:uppercase;letter-spacing:.32em;color:var(--gold);margin-bottom:1.2rem;display:block}
.info h2{font-family:var(--serif);font-size:clamp(2rem,3.4vw,3rem);font-weight:400;color:var(--cream);line-height:1.12;margin-bottom:1.4rem}
.info h2 .cy{font-family:var(--serif-cy)}
.info .desc{font-size:.93rem;color:var(--cream-dim);max-width:420px;margin-bottom:2.6rem}
.price{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--gold);border-top:.5px solid var(--gold-dim);border-bottom:.5px solid var(--gold-dim);padding:1.3rem 0;display:inline-block;min-width:220px;margin-bottom:2.6rem;letter-spacing:.06em}
.cta{display:block;color:var(--cream);text-transform:uppercase;font-size:.7rem;letter-spacing:.4em;border:1px solid var(--gold);padding:1.2rem 2.4rem;width:fit-content;transition:all .45s ease}
.cta:hover{background:var(--gold);color:var(--bg)}
.info .lace-note{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cream-faint);margin-top:1.6rem}

/* ============ full-bleed film ============ */
.film{position:relative;margin:9rem 0;z-index:2;overflow:hidden}
.film .frame{position:relative;height:min(86vh,900px)}
.film video,.film img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.film::before,.film::after{content:"";position:absolute;left:0;right:0;height:26%;z-index:2;pointer-events:none}
.film::before{top:0;background:linear-gradient(180deg,var(--bg),transparent)}
.film::after{bottom:0;background:linear-gradient(0deg,var(--bg),transparent)}
.film .cap{position:absolute;z-index:3;left:50%;bottom:9%;transform:translateX(-50%);text-align:center}
.film .cap .t1{font-family:var(--serif);font-size:.66rem;letter-spacing:.7em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.film .cap .t2{font-family:var(--serif-cy);font-style:italic;font-size:clamp(1.4rem,2.6vw,2.2rem);color:var(--cream)}

/* ============ dentelle (women) ============ */
.dent{padding:8rem 10%;z-index:2;position:relative}
.dent-head{text-align:center;margin-bottom:4.5rem}
.dent-head .fr{font-family:var(--script);font-size:clamp(2.2rem,4.4vw,3.4rem);color:var(--gold)}
.dent-head .ru{font-family:var(--serif);font-size:.66rem;letter-spacing:.7em;text-transform:uppercase;color:var(--cream-dim);margin-top:1rem}
.dent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem}
@media(max-width:900px){.dent-grid{grid-template-columns:1fr}}
.dent-card{position:relative;border:1px solid var(--gold-faint);box-shadow:0 24px 50px rgba(0,0,0,.7);overflow:hidden}
.dent-card img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:sepia(14%) brightness(.9);transition:filter 1s,transform 1.2s cubic-bezier(.16,1,.3,1)}
.dent-card:hover img{filter:none;transform:scale(1.03)}
.dent-card .lb{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.4rem 1.2rem;background:linear-gradient(0deg,rgba(18,8,3,.85),transparent);font-family:var(--serif);font-style:italic;font-size:.85rem;color:var(--cream);letter-spacing:.14em;text-align:center}
.dent .note{text-align:center;max-width:560px;margin:3.4rem auto 0;font-size:.9rem;color:var(--cream-dim)}

/* ============ story / manifesto ============ */
.story{text-align:center;max-width:820px;margin:10rem auto;border-top:.5px solid var(--gold-dim);padding:6rem 2rem 0;position:relative;z-index:2}
.story .t{font-family:var(--serif);font-size:.66rem;text-transform:uppercase;letter-spacing:.8em;color:var(--gold);margin-bottom:2.8rem}
.story .q{font-family:var(--serif-cy);font-size:clamp(1.5rem,2.8vw,2.1rem);line-height:1.45;color:var(--cream);font-style:italic}
.story .q b{color:var(--gold);font-weight:400}

/* ============ campaign triptych ============ */
.trip{padding:4rem 7% 8rem;position:relative;z-index:2}
.trip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem}
@media(max-width:900px){.trip-grid{grid-template-columns:1fr}}
.trip-card{position:relative;border:1px solid var(--gold-faint);box-shadow:0 24px 50px rgba(0,0,0,.7);overflow:hidden}
.trip-card img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:sepia(16%) brightness(.9);transition:filter 1s,transform 1.2s cubic-bezier(.16,1,.3,1)}
.trip-card:hover img{filter:none;transform:scale(1.03)}
.trip-card .lb{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.4rem 1.2rem;background:linear-gradient(0deg,rgba(18,8,3,.85),transparent);font-size:.6rem;letter-spacing:.4em;text-transform:uppercase;color:var(--cream-dim);text-align:center}

/* ============ finale ============ */
.finale{text-align:center;padding:9rem 2rem 10rem;position:relative;z-index:2}
.finale .fr{font-family:var(--script);font-size:clamp(2rem,4vw,3rem);color:var(--gold);margin-bottom:2rem}
.finale h3{font-family:var(--serif-cy);font-style:italic;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:400;color:var(--cream);max-width:700px;margin:0 auto 2.6rem}
.finale .cta{margin:0 auto}
.finale .tg{margin-top:2rem;font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:var(--cream-faint)}

footer{padding:3.4rem 10%;border-top:.5px solid var(--gold-dim);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.58rem;text-transform:uppercase;letter-spacing:.22em;color:var(--gold-dim);position:relative;z-index:2}

/* ============ reveal ============ */
.rv{opacity:0;transform:translateY(48px);transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1)}
.rv.on{opacity:1;transform:none}
.rv.on .ornament{transform:scaleX(1)}
.dly1{transition-delay:.12s}.dly2{transition-delay:.24s}.dly3{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.ornament{transform:scaleX(1)}}