@font-face { font-family:'BB Quincy'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/QuincyCF-Thin.woff') format('woff'); }
@font-face { font-family:'BB Interphases'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/TT-Interphases-Pro-Trial-Light.woff') format('woff'); }
@font-face { font-family:'BB Interphases'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/TT-Interphases-Pro-Trial-Regular.woff') format('woff'); }

.bb, .bb *, .bb *::before, .bb *::after { box-sizing:border-box; }
.bb h1, .bb h2, .bb p, .bb ul, .bb ol, .bb li { margin:0; padding:0; }
.bb ul, .bb ol { list-style:none; }
.bb a, .bb a:hover, .bb a:focus, .bb a:active { text-decoration:none; color:inherit; }
.bb button { font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; cursor:pointer; }
.bb button:focus { outline:none; }
.bb svg { vertical-align:baseline; }
.bb { --bb-serif:'BB Quincy',Georgia,serif; --bb-sans:'BB Interphases',Arial,sans-serif; --cream:#f4eee4; --ink:#17120f; --blush:#e9cfc4; font-family: var(--bb-sans), sans-serif; color: var(--ink); background: var(--cream); }
.bb h1, .bb h2, .bb .bb-serif { font-family: var(--bb-serif), serif; color: var(--ink); }
.bb * { box-sizing: border-box; }
.bb img { display:block; max-width:none; }

/* ---------- HERO: фото на весь екран ---------- */
.bb-hero { position:sticky; top:0; z-index:1; transform-origin:50% 0; transform:scale(calc(1 - var(--hp,0)*.08)); filter:brightness(calc(1 - var(--hp,0)*.45)); height:100svh; min-height:560px; overflow:hidden; background:#1a1411; isolation:isolate; color:var(--cream); }
.bb-slides { position:absolute; inset:-1.5%; z-index:0; transform:translate(calc(var(--mx)*-.8%), calc(var(--my)*-.8%)); }
.bb-sl { position:absolute; top:0; bottom:0; width:calc(50% + 1px); overflow:hidden; z-index:1; }
.bb-sl.bb-l { left:0; clip-path:inset(100% 0 0 0); } .bb-sl.bb-r { right:0; clip-path:inset(0 0 100% 0); }
.bb-sl.bb-prev { clip-path:inset(0); }
.bb-sl.bb-on { clip-path:inset(0); z-index:2; transition:clip-path 1.4s cubic-bezier(.76,0,.24,1); }
.bb-sl.bb-r.bb-on { transition-delay:.18s; }
.bb-sl img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.12); }
.bb-sl.bb-on img { animation:bb-kb 8s cubic-bezier(.2,.7,.2,1) forwards; }
.bb-sl.bb-prev img { transform:scale(1); }
@keyframes bb-kb { from { transform:scale(1.12) } to { transform:scale(1) } }
.bb-shade { position:absolute; inset:0; z-index:3; pointer-events:none; background:
  linear-gradient(to bottom, rgba(18,11,9,.5) 0%, rgba(18,11,9,0) 22%),
  linear-gradient(to top, rgba(18,11,9,.78) 0%, rgba(18,11,9,.42) 22%, rgba(18,11,9,.08) 48%, rgba(18,11,9,.05) 100%); }

.bb .bb-hero-title { pointer-events:none; position:absolute; z-index:5; left:0; right:0; text-align:center; top:50%; transform:translateY(-50%); margin:0; font-weight:400; line-height:.84; letter-spacing:-.03em; font-size:clamp(56px,13vw,230px); mix-blend-mode:normal; text-shadow:0 2px 40px rgba(0,0,0,.25); color:var(--cream); }
.bb-hero-title .bb-l1, .bb-hero-title .bb-l2 { display:block; white-space:nowrap; }
.bb-ch { display:inline-block; overflow:hidden; vertical-align:bottom; padding:.06em .01em .14em; margin:-.06em 0 -.14em; }
.bb-ch > span { display:inline-block; transform:translateY(115%); animation: bb-rise 1.1s cubic-bezier(.2,.8,.15,1) forwards; }
@keyframes bb-rise { to { transform:none } }

.bb-hero-side { position:absolute; z-index:6; left:50%; transform:translateX(-50%); bottom:64px; width:min(420px,80vw); display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; opacity:0; animation:bb-fade 1s 1.4s forwards; }
.bb-hero-side p { margin:0; font-weight:400; font-size:15px; line-height:1.55; color:#fff; }
.bb-btn { font-size:13px; border:1px solid currentColor; border-radius:99px; padding:12px 22px; color:inherit; text-decoration:none; transition:.35s; background:transparent; }
.bb-btn:hover { background:var(--cream); color:var(--ink); border-color:var(--cream); }
@keyframes bb-fade { to { opacity:1 } }

.bb-hero-bar { position:absolute; z-index:6; left:clamp(20px,3.5vw,56px); right:clamp(20px,3.5vw,56px); bottom:26px; display:flex; align-items:center; justify-content:space-between; gap:24px; font-size:13px; opacity:0; animation:bb-fade 1s 1.6s forwards; }
.bb-ticks { display:flex; gap:8px; }
.bb-ticks button { all:unset; cursor:pointer; position:relative; width:clamp(28px,4vw,64px); height:14px; }
.bb-ticks button::before { content:""; position:absolute; left:0; right:0; top:6px; height:2px; background:rgba(244,238,228,.3); }
.bb-ticks button.bb-done::before { background:rgba(244,238,228,.9); }
.bb-ticks i { position:absolute; left:0; top:6px; height:2px; width:0; background:var(--cream); animation:bb-fill linear forwards; }
@keyframes bb-fill { to { width:100% } }

@media (max-width:700px){
  .bb-hero-title { font-size:clamp(56px,21vw,130px); bottom:200px; }
  .bb-hero-side { left:20px; right:20px; width:auto; bottom:84px; }
  .bb-hero-side p { font-size:13px; }
  .bb-hero-bar { bottom:22px; }
}
@media (prefers-reduced-motion: reduce){ .bb-sl img { animation:none !important; transform:none; } .bb-ch > span, .bb-hero-side, .bb-hero-bar { animation:none !important; transform:none; opacity:1; } }

/* ---------- BRANDS ---------- */
.bb-brands-track { position:relative; z-index:2; height:calc(100svh + 5 * 80svh); }
.bb-brands {  position:sticky; top:0; height:100svh; overflow:hidden; border-radius:calc((1 - var(--hp,0))*44px) calc((1 - var(--hp,0))*44px) 0 0; box-shadow:0 -30px 60px rgba(0,0,0,.14); background:#1a1411; color:var(--cream); isolation:isolate;
  display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.9fr) minmax(0,.7fr); grid-template-rows:auto minmax(0,1fr); gap:0 clamp(20px,3vw,56px); padding:0 clamp(20px,3.5vw,56px) 40px; }
.bb-brands::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--bb-tint); opacity:.14; transition:background-color 1s ease; }
.bb-brands-head { grid-column:1/-1; display:flex; justify-content:space-between; padding:88px 0 0; font-size:13px; }
.bb-brands-head span:last-child { font-family:var(--bb-serif); font-size:20px; letter-spacing:.05em; }

.bb-b-list { list-style:none; margin:0; padding:0; align-self:center; position:relative; z-index:3; }
.bb-b-list li { position:relative; }
.bb-b-list button { all:unset; cursor:pointer; display:flex; align-items:baseline; gap:14px; padding:.12em 0; width:100%; }
.bb-b-list sup { font-size:12px; letter-spacing:.1em; opacity:.55; font-family:var(--bb-sans); }
.bb-b-list span { font-family:var(--bb-serif); font-size:clamp(28px,2.8vw,56px); line-height:1.04; white-space:nowrap; letter-spacing:-.02em; font-weight:300; opacity:.28; transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.15,1); display:inline-block; }
.bb-b-list button:hover span { opacity:.6; }
.bb-b-list li.bb-on span { opacity:1; transform:translateX(.35em); }
.bb-bar { position:absolute; left:0; bottom:-2px; height:2px; background:currentColor; width:calc(var(--sp,0)*100%); }

.bb-b-stage { position:relative; align-self:stretch; margin:18px 0 24px; min-height:0; container-type:size; }
.bb-bp { position:absolute; inset:0; z-index:1; display:grid; grid-template:100% / 100%; place-items:end center; pointer-events:none; }
.bb-bp .bb-fig { display:block; width:min(100cqw,100cqh); height:min(100cqw,100cqh); object-fit:cover; clip-path:inset(100% 0 0 0); box-shadow:0 40px 70px -30px rgba(0,0,0,.6); }
.bb-bp.bb-prev .bb-fig { clip-path:inset(0); }
.bb-bp.bb-on { z-index:2; }
.bb-bp.bb-on .bb-fig { clip-path:inset(0); transition:clip-path 1.4s cubic-bezier(.76,0,.24,1); }
.bb-bp .bb-fig.bb-prod { display:grid; place-items:center; }
.bb-bp .bb-fig.bb-prod img { height:78%; width:auto; max-width:80%; object-fit:contain; filter:drop-shadow(0 30px 26px rgba(0,0,0,.35)); }

.bb-b-info { align-self:center; display:flex; flex-direction:column; gap:20px; align-items:flex-start; animation: bb-infoin .8s cubic-bezier(.2,.8,.15,1) both; }
@keyframes bb-infoin { from { opacity:0; transform:translateY(24px) } }
.bb-meta { display:flex; flex-direction:column; gap:4px; }
.bb-meta b { font-family:var(--bb-serif); font-weight:400; font-size:clamp(28px,2.8vw,44px); line-height:1; }
.bb-meta span { font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.65; }
.bb-b-info p { font-weight:300; margin:0; font-size:14px; line-height:1.6; color:rgba(244,238,228,.88); }
.bb-b-info ul { display:flex; flex-wrap:wrap; gap:4px 0; list-style:none; margin:0; padding:0; }
.bb-b-info li { font-size:12px; letter-spacing:.04em; color:rgba(244,238,228,.6); }
.bb-b-info li + li::before { content:"/"; margin:0 10px; opacity:.5; }


@media (max-width:1000px){
  .bb-brands { grid-template-columns:1fr; grid-template-rows:auto auto minmax(0,1fr) auto; gap:14px; padding-bottom:24px; }
  .bb-brands-head { padding-top:78px; }
  .bb-b-list li:not(.bb-on) { display:none; }
  .bb-b-list span { font-size:clamp(40px,12vw,64px); opacity:1; transform:none; }
  .bb-b-stage { min-height:0; }
  .bb-b-info { gap:10px; }
  .bb-b-info p { font-size:13px; line-height:1.5; }
  .bb-b-info ul { display:none; }
  .bb-meta b { font-size:24px; }
}

/* ---------- SHELL: smooth scroll, nav, menu, preloader, cursor ---------- */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }
.bb-shell { --tb:#f4eee4; position:relative; }
.bb-ui { font-family:var(--bb-sans), sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:-.02em; }
.bb-shell:not(.bb-ready) .bb-hero * { animation-play-state:paused !important; }

.bb-topbar { position:fixed; z-index:90; top:0; left:0; right:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:22px clamp(20px,3.5vw,56px); color:var(--tb); transition:color .6s ease; pointer-events:none; }
.bb-topbar > * { pointer-events:auto; }

.bb-tb-left { display:flex; gap:clamp(20px,4vw,64px); align-items:center; }
.bb-topbar button { all:unset; cursor:pointer; font-size:14px; }
.bb-topbar .bb-ui { font-size:14px; }
.bb-plus { font-weight:400; margin-right:2px; display:inline-block; transition:transform .5s cubic-bezier(.2,.8,.15,1); }
.bb-topbar button:hover .bb-plus { transform:rotate(90deg); }
.bb-wordmark { display:block; width:150px; height:39px; background:currentColor; -webkit-mask:url(/bb/logo.png) center/contain no-repeat; mask:url(/bb/logo.png) center/contain no-repeat; transition:background-color .6s; }
.bb-tb-right { justify-self:end; color:inherit; text-decoration:none; position:relative; }
.bb-tb-right::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:1.5px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .5s cubic-bezier(.2,.8,.15,1); }
.bb-tb-right:hover::after { transform:scaleX(1); transform-origin:left; }
@media (max-width:700px){ .bb-lang{display:none} .bb-wordmark{width:112px;height:29px} .bb-topbar{padding:18px 20px} }

.bb-menu { position:fixed; inset:0; z-index:80; background:var(--ink); color:var(--cream); clip-path:circle(0 at 4% 5%); transition:clip-path 1.1s cubic-bezier(.76,0,.24,1); display:flex; flex-direction:column; justify-content:center; padding:0 clamp(20px,3.5vw,56px); visibility:hidden; }
.bb-menu.bb-open { clip-path:circle(150% at 4% 5%); visibility:visible; }
.bb-menu ol { list-style:none; margin:0; padding:0; }
.bb-menu li { overflow:hidden; border-top:1px solid rgba(244,238,228,.16); }
.bb-menu li:last-child { border-bottom:1px solid rgba(244,238,228,.16); }
.bb-menu li a { display:flex; align-items:baseline; gap:24px; padding:.08em 0; font-family:var(--bb-serif); font-size:clamp(34px,min(7.2vw,10.5svh),112px); line-height:1.05; letter-spacing:-.02em; color:inherit; text-decoration:none; transform:translateY(100%); transition:transform .9s cubic-bezier(.2,.8,.15,1), font-style .2s, padding .5s; }
.bb-menu.bb-open li a { transform:none; }
.bb-menu li:hover a { padding-left:.4em; }
.bb-menu li sup { font-size:14px; opacity:.5; }
.bb-menu-foot { position:absolute; left:clamp(20px,3.5vw,56px); right:clamp(20px,3.5vw,56px); bottom:28px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; opacity:.6; }

.bb-preloader { position:fixed; inset:0; z-index:100; background:var(--ink); color:var(--cream); overflow:hidden; transition:transform 1.2s cubic-bezier(.76,0,.24,1), border-radius 1.2s cubic-bezier(.76,0,.24,1); }
.bb-preloader.bb-out { transform:translateY(-101%); border-radius:0 0 50% 50% / 0 0 14vh 14vh; }
.bb-pl-top { position:absolute; top:26px; left:clamp(20px,3.5vw,56px); font-size:13px; }
.bb-pl-top.bb-r { left:auto; right:clamp(20px,3.5vw,56px); opacity:.55; }
.bb-pl-num { position:absolute; left:clamp(14px,3vw,48px); bottom:6vh; font-family:var(--bb-serif); font-weight:300; font-size:clamp(120px,28vw,460px); line-height:.78; letter-spacing:-.04em; font-variant-numeric:lining-nums tabular-nums; transition:transform 1s cubic-bezier(.76,0,.24,1), opacity .8s; }
.bb-pl-num small { font-size:.28em; vertical-align:top; margin-left:.06em; }
.bb-preloader.bb-out .bb-pl-num { transform:translateY(-30vh); opacity:0; }
.bb-pl-bar { position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--cream); transform-origin:left; transform:scaleX(0); }

.bb-cursor { position:fixed; z-index:95; top:0; left:0; width:10px; height:10px; margin:-5px 0 0 -5px; pointer-events:none; mix-blend-mode:difference; }
.bb-cursor::after { content:""; position:absolute; inset:0; border-radius:50%; background:#fff; transition:transform .45s cubic-bezier(.2,.8,.15,1); }
.bb-cursor.bb-hot::after { transform:scale(4.5); }
@media (pointer:coarse){ .bb-cursor{display:none} }


.bb-arr { display:inline-block; width:.8em; height:.8em; vertical-align:-.05em; margin-left:.3em; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:square; }
.bb-marquee em { display:inline-block; width:7px; height:7px; background:#e9b9a6; transform:rotate(45deg); font-size:0; margin:0 34px; }

.bb-pl-logo { position:absolute; top:20px; left:clamp(20px,3.5vw,56px); }


/* підписи брендів на фото */
.bb-caps { position:absolute; z-index:6; top:86px; left:clamp(20px,3.5vw,56px); right:clamp(20px,3.5vw,56px); display:flex; justify-content:space-between; pointer-events:none; }
.bb-caps button { all:unset; pointer-events:auto; cursor:pointer; display:inline-flex; align-items:center; gap:2px; font-size:13px; padding:9px 16px; border:1px solid rgba(244,238,228,.55); border-radius:99px; color:var(--cream); backdrop-filter:blur(8px); background:rgba(20,12,10,.18); transition:.35s; animation:bb-capin .9s .5s cubic-bezier(.2,.8,.15,1) both; }
.bb-caps button:hover { background:var(--cream); color:var(--ink); }
@keyframes bb-capin { from { opacity:0; transform:translateY(12px) } }
.bb-hero-bar { justify-content:space-between; }
.bb-hero-bar .bb-num { opacity:.7; }
@media (max-width:700px){
  .bb-sl { width:100%; height:calc(50% + 1px); top:auto; bottom:auto; }
  .bb-sl.bb-l { top:0; left:0; } .bb-sl.bb-r { top:50%; bottom:auto; right:0; }
  .bb-hero-title { font-size:clamp(52px,19vw,120px); }
  .bb-caps { top:72px; flex-direction:column; gap:calc(50svh - 100px); align-items:flex-start; }
  .bb-hero-side { bottom:60px; }
}


.bb-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- інтеграція з темою магазину ---------- */
.bb { width:100vw; margin-left:calc(50% - 50vw); position:relative; overflow-x:clip; line-height:1.2; }
.bb-wordmark { -webkit-mask:var(--bb-logo) center/contain no-repeat; mask:var(--bb-logo) center/contain no-repeat; }
.bb-shell.bb-menu-open .bb-topbar { color:var(--cream); }
.bb-caps-group { display:none; width:100%; justify-content:space-between; }
.bb-caps-group.bb-on { display:flex; }
.bb-b-infos { align-self:center; }
.bb-b-info { display:none; flex-direction:column; gap:20px; align-items:flex-start; }
.bb-b-info.bb-on { display:flex; animation:bb-infoin .8s cubic-bezier(.2,.8,.15,1) both; }
.bb-bp:not(.bb-on):not(.bb-prev) .bb-fig { clip-path:inset(100% 0 0 0); }
.bb-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (max-width:1000px){ .bb-b-info { gap:10px; } .bb-b-info ul { display:none; } .bb-b-info p { font-size:13px; line-height:1.5; } }