/* ==========================================================
   Bina Fox — motion layer (animations, transitions, scroll)
   Loaded after the original styles; safe to remove.
   ========================================================== */
:root{--bf-ease:cubic-bezier(.2,.75,.15,1);--bf-spring:cubic-bezier(.34,1.56,.64,1)}

/* ---------- Intro curtain ---------- */
#bfIntro{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;background:var(--wine,#651725);color:#fff;
  clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.77,0,.18,1)}
#bfIntro .bf-intro-inner{display:flex;flex-direction:column;align-items:center;gap:14px}
#bfIntro .bf-intro-word{font:400 clamp(54px,9vw,120px)/.9 Georgia,'Times New Roman',serif;letter-spacing:-.06em;display:flex;gap:.18em;overflow:hidden;padding:.08em .1em}
#bfIntro .bf-intro-word span{display:inline-block;transform:translateY(110%);animation:bfIntroUp .9s var(--bf-ease) forwards}
#bfIntro .bf-intro-word em{display:inline-block;font-style:italic;color:var(--sky,#bcd4e4);transform:translateY(110%);animation:bfIntroUp .9s .12s var(--bf-ease) forwards}
#bfIntro .bf-intro-sub{font:800 11px/1 'Helvetica Neue',Arial,sans-serif;letter-spacing:.32em;text-transform:uppercase;opacity:0;animation:bfFade .6s .45s forwards}
#bfIntro .bf-intro-paws{display:flex;gap:10px;height:18px}
#bfIntro .bf-intro-paws i{width:12px;height:12px;border-radius:50% 50% 45% 45%;background:var(--sky,#bcd4e4);opacity:0;animation:bfPaw 1.2s infinite}
#bfIntro .bf-intro-paws i:nth-child(2){animation-delay:.18s;translate:0 5px}
#bfIntro .bf-intro-paws i:nth-child(3){animation-delay:.36s}
#bfIntro.bf-out{clip-path:inset(0 0 100% 0)}
@keyframes bfIntroUp{to{transform:translateY(0)}}
@keyframes bfFade{to{opacity:1}}
@keyframes bfPaw{0%,100%{opacity:.15;scale:.8}40%{opacity:1;scale:1}}
html.bf-intro-lock,html.bf-intro-lock body{overflow:hidden}

/* ---------- Scroll progress ---------- */
#bfProgress{position:fixed;left:0;top:0;height:4px;width:100%;z-index:8000;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--sky,#bcd4e4),var(--wine,#651725) 70%,#be692f)}

/* ---------- Section dots nav ---------- */
#bfDots{position:fixed;right:18px;top:50%;translate:0 -50%;z-index:7000;display:flex;flex-direction:column;gap:12px;padding:12px 8px;border-radius:99px;
  background:#fffaf3cc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px #3d141c1f;opacity:0;transition:opacity .5s}
#bfDots.show{opacity:1}
#bfDots a{position:relative;display:block;width:10px;height:10px;border-radius:50%;background:#d9c6c0;transition:background .3s,scale .4s var(--bf-spring)}
#bfDots a:hover{scale:1.35;background:var(--sky,#bcd4e4)}
#bfDots a.active{background:var(--wine,#651725);scale:1.3}
#bfDots a span{position:absolute;right:22px;top:50%;translate:6px -50%;white-space:nowrap;font:700 11px/1 'Helvetica Neue',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--wine,#651725);padding:6px 9px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .25s,translate .35s var(--bf-ease)}
#bfDots a:hover span{opacity:1;translate:0 -50%}
@media(max-width:900px){#bfDots{display:none}}

/* ---------- Page transition (anchor jumps) ---------- */
#bfWipe{position:fixed;inset:0;z-index:8500;pointer-events:none;background:var(--wine,#651725);clip-path:circle(0px at var(--wx,50%) var(--wy,50%));display:grid;place-items:center}
#bfWipe.in{transition:clip-path .55s cubic-bezier(.7,0,.3,1);clip-path:circle(150vmax at var(--wx,50%) var(--wy,50%))}
#bfWipe.out{transition:clip-path .6s cubic-bezier(.7,0,.3,1);clip-path:circle(0px at 50% 50%)}
#bfWipe .bf-wipe-label{font:italic 400 clamp(36px,6vw,80px)/1 Georgia,serif;color:#fff;letter-spacing:-.04em;opacity:0;translate:0 20px;transition:opacity .3s,translate .4s var(--bf-ease)}
#bfWipe.in .bf-wipe-label{opacity:1;translate:0 0;transition-delay:.2s}

/* ---------- Reveal on scroll ---------- */
.bf-rv{opacity:0;translate:0 42px;filter:blur(6px);transition:opacity .9s var(--bf-ease),translate 1s var(--bf-ease),filter .9s var(--bf-ease);transition-delay:var(--rd,0ms)}
.bf-rv.bf-in{opacity:1;translate:0 0;filter:blur(0)}
.bf-rv-left{translate:-60px 0}.bf-rv-right{translate:60px 0}
.bf-rv-pop{translate:0 0;scale:.86}.bf-rv-pop.bf-in{scale:1;transition:opacity .7s var(--bf-ease),scale .8s var(--bf-spring),filter .7s;transition-delay:var(--rd,0ms)}

/* Words of headings rise from a mask */
.bf-words .bf-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .08em;margin-bottom:-.08em}
.bf-words .bf-w>i{font-style:inherit;display:inline-block;transform:translateY(105%) rotate(4deg);transition:transform 1s var(--bf-ease);transition-delay:calc(var(--i)*70ms + 80ms)}
.bf-words.bf-in .bf-w>i{transform:none}

/* Hero letters */
.hero-title-v20 .bf-ch{display:inline-block;transform:translateY(.9em) rotate(8deg);opacity:0;transition:transform 1.1s var(--bf-spring),opacity .6s;transition-delay:calc(var(--i)*60ms + 250ms)}
.bf-ready .hero-title-v20 .bf-ch{transform:none;opacity:1}
.hero-title-v20 .bf-ch:hover{animation:bfJelly .6s}
@keyframes bfJelly{30%{transform:scale(1.18,.82)}50%{transform:scale(.9,1.12) translateY(-.06em)}70%{transform:scale(1.05,.95)}100%{transform:none}}
.bf-hero-fade{opacity:0;translate:0 18px;transition:opacity .9s var(--bf-ease),translate 1s var(--bf-ease);transition-delay:var(--rd,0ms)}
.bf-ready .bf-hero-fade{opacity:1;translate:0 0}
.hero-v20-portfolio:before{transition:scale 1s var(--bf-spring) 1s}
html:not(.bf-ready) .hero-v20-portfolio:before{scale:0}

/* Sections that grow from a rounded card into full width while scrolling */
.bf-grow{clip-path:inset(0 calc(var(--g,0)*5%) 0 calc(var(--g,0)*5%) round calc(var(--g,0)*48px));will-change:clip-path}

/* Interactive niceties */
.phone{transition:transform .5s var(--bf-ease),box-shadow .5s;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
.work-card:hover .phone{--ty:-6px;box-shadow:0 26px 40px #1712123d,0 0 0 1px #66656d}
.bf-magnet{transition:translate .35s var(--bf-ease)}
.about-fact{transition:box-shadow .3s}
.about-layout.revealed .about-fact:hover{box-shadow:0 14px 30px #481c2622}
.metric,.info-box{transition:translate .45s var(--bf-ease),box-shadow .45s,opacity .9s var(--bf-ease),scale .8s var(--bf-spring),filter .7s}
.metric:hover,.info-box:hover{box-shadow:0 14px 26px #481c2617}
.contact-card>div{transition:padding-left .35s var(--bf-ease),opacity .8s var(--bf-ease),translate .9s var(--bf-ease),filter .8s}
.contact-card>div:hover{padding-left:8px}
.category{transition:box-shadow .5s}
.category:hover{box-shadow:0 20px 50px #1f060c40}

/* Ticker band between sections */
.bf-ticker{background:var(--cream,#fffaf3);overflow:hidden;border-block:1px solid var(--stroke,#e6d8d1);padding:18px 0;position:relative}
.bf-ticker-track{display:flex;width:max-content;gap:0;will-change:transform}
.bf-ticker-track span{font:400 clamp(30px,4.2vw,58px)/1 Georgia,serif;letter-spacing:-.04em;color:var(--wine,#651725);white-space:nowrap;padding-right:.6em}
.bf-ticker-track span em{color:#6592ad}
.bf-ticker-track span b{font:400 .6em/1 Georgia,serif;color:#be692f;vertical-align:.25em;padding:0 .35em}

/* Cursor follower (desktop) */
#bfCursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid var(--wine,#651725);z-index:9500;pointer-events:none;
  display:grid;place-items:center;transition:width .3s var(--bf-ease),height .3s var(--bf-ease),margin .3s var(--bf-ease),background .3s,border-color .3s,opacity .3s;opacity:0;mix-blend-mode:multiply}
#bfCursor.on{opacity:.7}
#bfCursor.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:#bcd4e455;border-color:transparent}
#bfCursor.label{width:74px;height:74px;margin:-37px 0 0 -37px;background:var(--wine,#651725);border-color:transparent;mix-blend-mode:normal;opacity:.92}
#bfCursor b{font:800 10px/1 'Helvetica Neue',Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s}
#bfCursor.label b{opacity:1}
@media(pointer:coarse){#bfCursor{display:none}}

/* Back to top */
#bfTop{position:fixed;right:18px;bottom:18px;z-index:7000;width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;background:var(--wine,#651725);color:#fff;font-size:20px;
  box-shadow:0 10px 24px #3d141c40;opacity:0;scale:.6;pointer-events:none;transition:opacity .4s,scale .5s var(--bf-spring),translate .3s}
#bfTop.show{opacity:1;scale:1;pointer-events:auto}
#bfTop:hover{translate:0 -3px}
#bfTop svg{width:22px;height:22px}

@media(prefers-reduced-motion:reduce){
  .bf-rv,.bf-words .bf-w>i,.hero-title-v20 .bf-ch,.bf-hero-fade{transition:none!important;opacity:1!important;translate:none!important;transform:none!important;filter:none!important;scale:none!important}
  .bf-grow{clip-path:none!important}
  #bfIntro{display:none}
}

/* Small video cards glide in: Beauty & Skincare from the right, Hair & Other from the left */
.work-card.bf-rv{transition:opacity .9s var(--bf-ease),translate 1.05s var(--bf-ease),filter .9s var(--bf-ease);transition-delay:var(--rd,0ms)}
.work-card.bf-card-right{translate:140px 0}
.work-card.bf-card-left{translate:-140px 0}
.work-card.bf-rv.bf-in{translate:0 0}
@media(max-width:720px){.work-card.bf-card-right{translate:70px 0}.work-card.bf-card-left{translate:-70px 0}}
@media(prefers-reduced-motion:reduce){.work-card.bf-rv{translate:none!important;opacity:1!important;filter:none!important}}