/* Beauty Brands Albania — premium motion layer (v1)
   Additive only: hero campaign stage, text reveals, product reveal/hover.
   Fully disabled by prefers-reduced-motion. */

/* ---------- Hero: ambient light ---------- */
.bb-hero{position:relative;overflow-x:clip}
.bb-hero>.wrap{position:relative;z-index:1}
.bb-aura{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bb-aura i{position:absolute;border-radius:50%;will-change:transform}
.bb-aura i:nth-child(1){width:72vmax;height:72vmax;right:-24vmax;top:-30vmax;background:radial-gradient(closest-side,rgba(201,160,99,.30),rgba(201,160,99,.10) 55%,rgba(201,160,99,0));animation:bbDrift1 18s ease-in-out infinite alternate}
.bb-aura i:nth-child(2){width:56vmax;height:56vmax;left:-22vmax;bottom:-32vmax;background:radial-gradient(closest-side,rgba(255,252,246,.9),rgba(255,252,246,0));animation:bbDrift2 22s ease-in-out infinite alternate}
.bb-aura i:nth-child(3){width:34vmax;height:170%;top:-35%;left:35%;border-radius:0;opacity:0;background:linear-gradient(90deg,rgba(255,250,240,0),rgba(255,250,240,.7),rgba(255,250,240,0));animation:bbBeam 3.2s cubic-bezier(.45,0,.2,1) .4s 1 both}
@keyframes bbDrift1{to{transform:translate3d(-6vmax,5vmax,0) scale(1.08)}}
@keyframes bbDrift2{to{transform:translate3d(5vmax,-4vmax,0) scale(1.12)}}
@keyframes bbBeam{0%{transform:translateX(-90vw) rotate(16deg);opacity:0}20%{opacity:.85}100%{transform:translateX(80vw) rotate(16deg);opacity:0}}

/* ---------- Hero: campaign stage around the medallion ---------- */
.bb-stage{position:relative;justify-self:center;width:min(400px,100%);margin-bottom:-120px;z-index:2;--mx:0;--my:0;--sy:0}
.bb-stage>.hero-logo{display:block;width:100%;margin:0;position:relative;z-index:2}
.bb-halo,.bb-ring,.bb-silk,.bb-sheen{position:absolute;pointer-events:none}
.bb-halo{inset:-30%;border-radius:50%;z-index:0;background:radial-gradient(closest-side,rgba(201,160,99,.45),rgba(201,160,99,.15) 55%,rgba(201,160,99,0));translate:calc(var(--mx)*-8px) calc(var(--my)*-8px);animation:bbBreath 7s ease-in-out infinite alternate}
@keyframes bbBreath{from{scale:.9;opacity:.7}to{scale:1.06;opacity:1}}
.bb-ring{inset:-7%;border-radius:50%;border:1px solid rgba(154,107,47,.38);z-index:1;opacity:0}
.bb-ring::after{content:"";position:absolute;top:50%;left:-4px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#e2c48c;box-shadow:0 0 14px 4px rgba(201,160,99,.7)}
.bb-go .bb-ring{animation:bbRingIn 1.8s cubic-bezier(.16,1,.3,1) .2s forwards,bbSpin 46s linear infinite}
@keyframes bbRingIn{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
@keyframes bbSpin{to{rotate:360deg}}
.bb-silk{left:-22%;top:-38%;width:160%;height:176%;z-index:0;overflow:visible;translate:calc(var(--mx)*12px) calc(var(--my)*12px + var(--sy)*-.06px)}
.bb-silk g{transform-box:view-box;transform-origin:50% 50%;animation:bbSway 16s ease-in-out infinite alternate}
.bb-silk path{fill:none;stroke:url(#bbSilkG);stroke-width:1.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.75}
.bb-go .bb-silk path{animation:bbDraw 3.4s cubic-bezier(.65,0,.35,1) forwards}
.bb-silk path:nth-child(2){animation-delay:.25s!important}
.bb-silk path:nth-child(3){animation-delay:.5s!important;opacity:.5}
.bb-silk path:nth-child(4){animation-delay:.75s!important;opacity:.45}
.bb-silk path:nth-child(5){animation-delay:1s!important;opacity:.6}
@keyframes bbDraw{to{stroke-dashoffset:0}}
@keyframes bbSway{from{rotate:-3deg}to{rotate:4deg}}
.bb-sheen{inset:2.2%;border-radius:50%;overflow:hidden;z-index:3;mix-blend-mode:overlay}
.bb-sheen::before{content:"";position:absolute;inset:-10%;background:linear-gradient(115deg,transparent 36%,rgba(255,236,200,.6) 47%,rgba(255,255,255,.9) 50%,rgba(255,236,200,.6) 53%,transparent 64%);translate:-120% 0;animation:bbGlint 8s cubic-bezier(.5,0,.2,1) 2.4s infinite}
@keyframes bbGlint{0%{translate:-120% 0}26%,100%{translate:120% 0}}

/* floating products (real product photos, background removed in-browser) */
.bb-p{position:absolute;z-index:1;display:block;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent;--d:.6}
.bb-p.bb-front{z-index:4}
.bb-p:not(.bb-ok){visibility:hidden}
.bb-par{display:block;translate:calc(var(--mx)*var(--d)*22px) calc(var(--my)*var(--d)*22px + var(--sy)*var(--d)*-.09px)}
.bb-enter{display:block;position:relative;opacity:0;transform:translate3d(var(--fx,0),var(--fy,40px),0) scale(.86) rotate(var(--fr,0deg))}
.bb-go .bb-ok .bb-enter{animation:bbEnter 2s cubic-bezier(.16,1,.3,1) var(--de,.3s) forwards}
@keyframes bbEnter{to{opacity:1;transform:none}}
.bb-p img{display:block;width:100%;height:auto;will-change:transform;animation:bbFloat var(--ft,7s) ease-in-out var(--fd,0s) infinite alternate;transition:scale .7s cubic-bezier(.16,1,.3,1)}
@keyframes bbFloat{from{transform:translate3d(0,-9px,0) rotate(var(--r0,-1.2deg))}to{transform:translate3d(0,9px,0) rotate(var(--r1,1.2deg))}}
.bb-p.bb-tile img{background:#fff;border-radius:18px;padding:10%;box-sizing:border-box}
.bb-tag{position:absolute;left:50%;bottom:-6px;translate:-50% 8px;white-space:nowrap;font:500 10px/1 var(--sans);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);background:rgba(14,12,10,.88);padding:9px 13px;border-radius:999px;opacity:0;transition:opacity .4s,translate .5s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:5}
.bb-tag::after{content:"  \2192"}
@media (hover:hover) and (pointer:fine){
  .bb-p:hover img{scale:1.06}
  .bb-p:hover .bb-tag{opacity:1;translate:-50% 0}
}
/* composition (percent of the medallion box) */
.bb-p1{left:-21%;top:2%;width:21%;--d:.9;--fx:-70px;--fy:30px;--fr:-7deg;--de:.35s;--ft:7.6s}
.bb-p2{left:83%;top:-16%;width:24%;--d:.55;--fx:70px;--fy:-40px;--fr:9deg;--de:.55s;--ft:8.4s;--fd:-2s}
.bb-p3{left:-21%;top:71%;width:34%;--d:1.25;--fx:-40px;--fy:70px;--fr:-4deg;--de:.75s;--ft:6.6s;--fd:-1s}
.bb-p4{left:83%;top:64%;width:22%;--d:1.6;--fx:60px;--fy:60px;--fr:-10deg;--de:.95s;--ft:6s;--r0:-1.5deg;--r1:1.5deg;--fd:-3s}
@media (max-width:900px){
  .bb-stage{width:min(250px,58%);margin:28px auto -100px}
  .bb-tag{display:none}
}

/* ---------- Text reveals (hero + section titles) ---------- */
.bb-js .hero h1{opacity:0;animation:bbFailsafe .01s 2.5s forwards}
@keyframes bbFailsafe{to{opacity:1}}
.bb-js .hero h1.bb-split{opacity:1;animation:none}
.bb-split .bb-w{display:inline-block;opacity:0;transform:translate3d(0,.42em,0);filter:blur(8px);transition:opacity .9s cubic-bezier(.2,.65,.2,1),transform 1.15s cubic-bezier(.16,1,.3,1),filter .9s ease;transition-delay:calc(var(--i)*75ms + var(--b,0ms))}
.hero h1.bb-split{--b:120ms}
.bb-split.bb-in .bb-w{opacity:1;transform:none;filter:blur(0)}
.bb-split.bb-instant .bb-w{transition:none}
.bb-w.bb-gild{background:linear-gradient(100deg,var(--gold) 0%,var(--gold) 38%,#d9b578 46%,#fff0d2 50%,#d9b578 54%,var(--gold) 62%,var(--gold) 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;padding:.1em .1em .16em 0;margin:-.1em -.1em -.16em 0}
.bb-in .bb-gild{animation:bbGild 8s cubic-bezier(.45,0,.2,1) 1.5s infinite}
@keyframes bbGild{0%{background-position:100% 0}30%,100%{background-position:0 0}}

/* ---------- Primary CTA ---------- */
.bb-cta{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 12px 30px -14px rgba(154,107,47,.75)}
.bb-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);translate:-100% 0;animation:bbBtnShine 6s ease-in-out 2.6s infinite}
.bb-cta::after{content:"\2192";transition:translate .35s cubic-bezier(.16,1,.3,1)}
.bb-cta:hover::after{translate:4px 0}
@keyframes bbBtnShine{0%{translate:-100% 0}22%,100%{translate:100% 0}}

/* ---------- Products: scroll reveal ---------- */
.prod{scroll-margin-top:96px}
.bb-rv{opacity:0;transform:translate3d(0,46px,0) scale(.975);transition:opacity 1s cubic-bezier(.2,.65,.2,1) var(--d,0ms),transform 1.2s cubic-bezier(.16,1,.3,1) var(--d,0ms)!important}
.bb-rv .prod-img img{opacity:0;transform:scale(1.1);filter:blur(10px);transition:opacity 1s ease calc(var(--d,0ms) + 120ms),transform 1.6s cubic-bezier(.16,1,.3,1) calc(var(--d,0ms) + 120ms),filter 1.1s ease calc(var(--d,0ms) + 120ms)!important}
.bb-rv.bb-rv-in{opacity:1;transform:none}
.bb-rv.bb-rv-in .prod-img img{opacity:1;transform:none;filter:blur(0)}

/* ---------- Products: hover ---------- */
.prod-img img{mix-blend-mode:multiply}
@media (hover:hover) and (pointer:fine){
  .prod{transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s ease,border-color .55s ease}
  .prod:hover{transform:translateY(-6px);border-color:rgba(201,160,99,.7);box-shadow:0 30px 60px -32px rgba(14,12,10,.5),0 18px 50px -22px rgba(201,160,99,.5)}
  .prod-img{overflow:hidden}
  .prod-img img{transition:transform .9s cubic-bezier(.16,1,.3,1)}
  .prod:hover .prod-img img{transform:scale(1.06) translateY(-4px)}
  .prod-img::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(closest-side,rgba(201,160,99,.32),rgba(201,160,99,0));opacity:0;scale:.7;transition:opacity .6s ease,scale .9s cubic-bezier(.16,1,.3,1);pointer-events:none}
  .prod:hover .prod-img::before{opacity:1;scale:1}
  .prod-img::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.65) 50%,transparent 62%);translate:-110% 0;pointer-events:none;z-index:1}
  .prod:hover .prod-img::after{translate:110% 0;transition:translate 1.1s cubic-bezier(.45,0,.2,1)}
}
.prod:target{animation:bbTarget 2.8s ease-out .5s 1}
@keyframes bbTarget{0%{box-shadow:0 0 0 0 rgba(201,160,99,0)}18%{box-shadow:0 0 0 3px rgba(201,160,99,.9),0 0 60px 6px rgba(201,160,99,.45)}100%{box-shadow:0 0 0 0 rgba(201,160,99,0)}}

/* pause ambient loops when hero is off-screen */
.bb-off .bb-aura i,.bb-off .bb-stage *,.bb-off .bb-stage *::before,.bb-off .bb-stage *::after{animation-play-state:paused!important}

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .bb-aura i,.bb-halo,.bb-ring,.bb-silk g,.bb-silk path,.bb-p img,.bb-cta::before,.bb-w.bb-gild,.prod:target{animation:none!important}
  .bb-aura i:nth-child(3),.bb-sheen{display:none}
  .bb-ring{opacity:1}
  .bb-silk path{stroke-dashoffset:0}
  .bb-enter{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .bb-par,.bb-silk,.bb-halo{translate:none!important}
  .bb-js .hero h1{opacity:1;animation:none}
  .bb-split .bb-w,.bb-rv,.bb-rv .prod-img img{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
}