/* =================== v2: детали и анимации =================== */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.demo-bar button svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}

/* прелоадер */
.loader{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.loader.done{pointer-events:none}
.ld-bottle{width:64px;height:auto}
.ld-num{font-family:var(--serif);font-size:44px;color:var(--gold2);line-height:1;font-variant-numeric:tabular-nums}
.ld-cap{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.no-js .loader{display:none}

/* зерно плёнки */
.grain{position:fixed;inset:-50%;z-index:150;pointer-events:none;opacity:.07;background-image:url(../img/grain.svg);animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* курсор */
.cursor{position:fixed;left:0;top:0;z-index:180;pointer-events:none;width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(242,207,122,.55);border-radius:50%;
  transition:width .25s,height .25s,margin .25s,background .25s,border-color .25s;display:none}
.cursor i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--gold2)}
.cursor.big{width:70px;height:70px;margin:-35px 0 0 -35px;background:rgba(214,173,92,.12);border-color:rgba(242,207,122,.8)}
@media(pointer:fine){.cursor{display:block}}

/* золотая фольга в тексте */
.foil{background:linear-gradient(100deg,#a8823a 0%,#f6d98d 25%,#fff3cf 32%,#d6ad5c 45%,#a8823a 60%,#f2cf7a 80%,#a8823a 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 6s ease-in-out infinite}
@keyframes foil{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* разбивка заголовков */
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.sw>span{display:inline-block;will-change:transform}
.sc{display:inline-block;will-change:transform,opacity,filter}

/* hero детали */
.kicker{display:flex;align-items:center;gap:10px}
.kicker .line{width:36px;height:1px;background:var(--gold)}
.kicker .idx{font-family:var(--serif);font-size:15px;letter-spacing:.06em;color:var(--gold2);padding-right:10px;border-right:1px solid var(--line2)}
.hero-bgword{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:0;font-family:var(--serif);font-weight:700;font-size:26vw;letter-spacing:.06em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(214,173,92,.09);pointer-events:none;white-space:nowrap}
.hero-side{position:absolute;right:22px;top:50%;z-index:3;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;display:none;gap:16px;font-size:11px;letter-spacing:.3em;color:var(--muted2);text-transform:uppercase}
@media(min-width:960px){.hero-side{display:flex}}

/* бегущая строка */
.marquee{position:relative;overflow:hidden;padding:18px 0 14px;border-top:1px solid var(--line);background:var(--bg)}
.mq-track{display:flex;width:max-content;white-space:nowrap;font-family:var(--serif);font-size:clamp(34px,6vw,64px);line-height:1.15;font-weight:600;will-change:transform}
.mq-track span{padding:0 26px;display:inline-flex;align-items:center;gap:52px}
.mq-track span::after{content:"";width:11px;height:11px;transform:rotate(45deg);background:var(--gold);flex:none}
.mq-track.rev{color:transparent;-webkit-text-stroke:1px rgba(214,173,92,.5);font-style:italic}

/* сцена «Анатомия аромата» */
.story{height:420vh;padding:0;background:#0b0a08}
.story-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.story-pin canvas{position:absolute;inset:0;width:100%;height:100%}
.story-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(11,10,8,.7) 100%),linear-gradient(180deg,rgba(11,10,8,.85),transparent 22%,transparent 60%,rgba(11,10,8,.95))}
.story-ui{position:relative;height:100%;display:flex;flex-direction:column;justify-content:space-between;padding-top:calc(var(--head) + 18px);padding-bottom:38px;pointer-events:none}
.story-ui a{pointer-events:auto}
.steps{position:relative;min-height:200px;max-width:420px}
.st{position:absolute;left:0;bottom:0;opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.st.on{opacity:1;transform:none;pointer-events:auto}
.st .n{font-family:var(--serif);font-size:15px;color:var(--gold2);letter-spacing:.1em}
.st h3{font-family:var(--serif);font-weight:600;font-size:clamp(34px,6vw,54px);line-height:1;margin:6px 0 10px}
.st p{color:#d4cab5;max-width:360px}
.st .btn{margin-top:16px}
.callouts .co{position:absolute;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:12px;background:rgba(17,15,11,.72);backdrop-filter:blur(8px);border:1px solid var(--line2);
  opacity:0;transform:translateY(12px) scale(.96);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1);max-width:190px}
.callouts .co b{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:700}
.callouts .co span{font-family:var(--serif);font-size:19px;line-height:1.15}
.callouts .co i{position:absolute;width:44px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);top:50%}
.callouts.on .co{opacity:1;transform:none}
.callouts.on .c2{transition-delay:.12s}.callouts.on .c3{transition-delay:.24s}
.co.c1{left:7%;top:24%}.co.c1 i{left:100%}
.co.c2{right:7%;top:40%}.co.c2 i{right:100%;transform:scaleX(-1)}
.co.c3{left:9%;top:58%}.co.c3 i{left:100%}
@media(max-width:700px){.co.c1{left:16px;top:18%}.co.c2{right:16px;top:31%}.co.c3{left:16px;top:44%}.callouts .co span{font-size:16px}.callouts .co i{display:none}}
.story-prog{position:absolute;right:22px;top:50%;transform:translateY(-50%);width:2px;height:120px;background:var(--line2);border-radius:2px;overflow:hidden}
.story-prog i{display:block;width:100%;height:0;background:var(--gold2)}

/* коллекции */
.collections{padding:0}
.col-pin{padding:84px 0}
.col-head h2{font-weight:600;font-size:clamp(36px,7vw,58px);line-height:1.02;margin:10px 0 30px}
.col-track{display:flex;gap:16px;padding:0 var(--gut) 10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.col-track::-webkit-scrollbar{display:none}
.coll{flex:0 0 min(82vw,440px);height:min(118vw,540px);scroll-snap-align:center;border-radius:var(--r2);border:1px solid var(--line);position:relative;overflow:hidden;padding:26px;display:flex;flex-direction:column;
  background:radial-gradient(80% 60% at 70% 30%,var(--c),transparent 70%),linear-gradient(170deg,#1c1710,#0e0c09)}
.coll .num{font-family:var(--serif);font-size:15px;color:var(--gold2)}
.coll h3{font-family:var(--serif);font-weight:600;font-size:clamp(48px,9vw,72px);line-height:.95;margin-top:auto;position:relative;z-index:2}
.coll p{color:#d4cab5;max-width:280px;margin:10px 0 18px;position:relative;z-index:2}
.coll .art{position:absolute;right:-4%;top:6%;height:66%;width:auto;filter:drop-shadow(0 30px 30px rgba(0,0,0,.6));transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.coll:hover .art{transform:translateY(-10px) rotate(-4deg)}
.coll .btn{align-self:flex-start;position:relative;z-index:2}
@media(min-width:960px){
  .collections{height:300vh}
  .col-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:0}
  .col-track{overflow:visible;padding-left:max(var(--gut),calc((100vw - var(--wrap)) / 2 + var(--gut)));will-change:transform;scroll-snap-type:none}
  .coll{flex-basis:440px;height:520px}
}

/* цифры */
.stats{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats div{padding:30px 18px;text-align:center;border-right:1px solid var(--line)}
.stats div:nth-child(2n){border-right:0}
.stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
.stats b{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(46px,9vw,76px);line-height:1;color:var(--gold2);font-variant-numeric:tabular-nums}
.stats span{font-size:13px;color:var(--muted)}
@media(min-width:960px){.stats{grid-template-columns:repeat(4,1fr)}.stats div{border-bottom:0!important;border-right:1px solid var(--line)!important}.stats div:last-child{border-right:0!important}}

/* орнамент-разделитель */
.orn{height:22px;opacity:.55;background:url(../img/meander.svg) repeat-x center}

/* переливающаяся рамка */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.glow-border{position:relative}
.glow-border::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0deg,rgba(242,207,122,.9) 40deg,transparent 90deg,transparent 180deg,rgba(214,173,92,.6) 230deg,transparent 280deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ang 6s linear infinite}
@keyframes ang{to{--ang:360deg}}

/* карточки: наклон и блик */
.card{transform-style:preserve-3d;will-change:transform}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,30%),rgba(255,236,190,.14),transparent 60%)}
.card:hover::after{opacity:1}
.card .vis{overflow:hidden}
.card .vis::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,240,200,.12) 45%,transparent 60%);transform:translateX(-120%);transition:transform .9s ease}
.card:hover .vis::before{transform:translateX(120%)}
.b-stage .frame{position:absolute;inset:14px;border:1px solid var(--line);border-radius:18px;pointer-events:none}
.b-stage .frame::before,.b-stage .frame::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--gold)}
.b-stage .frame::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.b-stage .frame::after{right:-1px;bottom:-1px;border-left:0;border-top:0}

.big-h{font-size:clamp(36px,7vw,58px);line-height:1.02;margin-top:10px;font-weight:600}
.wheel-sec{overflow:hidden}
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.foot{position:relative;overflow:hidden}
.foot-word{font-family:var(--serif);font-weight:700;font-size:22vw;line-height:.8;text-align:center;color:transparent;-webkit-text-stroke:1px rgba(214,173,92,.14);margin:0 0 30px;letter-spacing:.04em;user-select:none}
.arrow{display:inline-block;width:14px;height:10px;margin-left:6px;vertical-align:middle;background:currentColor;-webkit-mask:url(../img/arrow.svg) center/contain no-repeat;mask:url(../img/arrow.svg) center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.grain{animation:none}.foil{animation:none}.glow-border::before{animation:none}.st{transition:none}}