/* ClickBurst dynamic layer v1 — additive motion on top of the existing site. */
:root{--cbd-ease:cubic-bezier(.16,1,.3,1)}

/* 1. HERO — aurora glow + split headline */
.cbd-aurora{position:absolute;inset:-20% -10% -10% -10%;z-index:0;pointer-events:none;overflow:hidden}
.cbd-aurora span{position:absolute;border-radius:50%;opacity:.75}
.cbd-aurora .a1{width:62vmax;height:62vmax;left:-18vmax;top:-10vmax;background:radial-gradient(circle at center,rgba(216,255,62,.55) 0,rgba(216,255,62,.18) 35%,rgba(216,255,62,0) 68%);animation:cbdDrift1 18s ease-in-out infinite alternate}
.cbd-aurora .a2{width:55vmax;height:55vmax;right:-16vmax;top:6vmax;background:radial-gradient(circle at center,rgba(36,87,255,.32) 0,rgba(36,87,255,.10) 38%,rgba(36,87,255,0) 68%);animation:cbdDrift2 22s ease-in-out infinite alternate}
.cbd-aurora .a3{width:40vmax;height:40vmax;left:30%;bottom:-18vmax;background:radial-gradient(circle at center,rgba(255,77,61,.22) 0,rgba(255,77,61,.06) 40%,rgba(255,77,61,0) 68%);animation:cbdDrift3 26s ease-in-out infinite alternate}
.cbd-aurora:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 120%,rgba(244,241,234,0) 40%,rgba(244,241,234,.35) 100%)}
@keyframes cbdDrift1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(8vmax,6vmax,0) scale(1.12)}100%{transform:translate3d(14vmax,-2vmax,0) scale(.95)}}
@keyframes cbdDrift2{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-10vmax,8vmax,0) scale(1.08)}100%{transform:translate3d(-4vmax,-6vmax,0) scale(1.15)}}
@keyframes cbdDrift3{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-12vmax,-8vmax,0) scale(1.2)}}
.hero>.wrap{position:relative;z-index:1}
.hero-section .cbd-aurora{z-index:0;opacity:.55;mix-blend-mode:screen}

.cbd-split .cbd-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .12em;margin:0 -.02em -.12em}
.cbd-split .cbd-wi{display:inline-block;transform:translate3d(0,108%,0) rotate(6deg);opacity:0;transform-origin:0 100%;transition:transform 1s var(--cbd-ease),opacity .6s ease;transition-delay:calc(var(--i) * 70ms)}
.cbd-split.cbd-go .cbd-wi{transform:none;opacity:1}
.hero h1.cbd-split .accent{overflow:visible}
.hero h1.cbd-split .accent:after{transform:skew(-14deg) scaleX(0);transform-origin:left;transition:transform .9s var(--cbd-ease) .75s}
.hero h1.cbd-split.cbd-go .accent:after{transform:skew(-14deg) scaleX(1)}
.hero h1.cbd-split .accent .cbd-w{overflow:hidden}

/* 2. COUNT-UP */
.cbd-counting{font-variant-numeric:tabular-nums}

/* 3. TILT + GLOW */
.cbd-tilt{position:relative;transform-style:preserve-3d;--mx:50%;--my:50%;transition:rotate .5s var(--cbd-ease),translate .45s var(--cbd-ease),box-shadow .45s ease}
.cbd-tilt-parent{perspective:1200px}
.cbd-glow{position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;opacity:0;transition:opacity .35s ease;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(216,255,62,.26),rgba(36,87,255,.10) 38%,transparent 62%)}
.cbd-tilt:hover .cbd-glow{opacity:1}
.cbd-tilt.cbd-tilting{box-shadow:0 22px 50px -24px rgba(17,17,17,.45)}
.service-row.cbd-tilt>*:not(.cbd-glow){position:relative;z-index:2}
.service-row.cbd-tilt .arrow{transition:transform .45s var(--cbd-ease),color .25s ease}
.service-row.cbd-tilt:hover .arrow{transform:translate3d(4px,-4px,0) rotate(0deg) scale(1.15)}
@media (hover:none),(pointer:coarse){
  .cbd-tilt:active{translate:0 -4px;box-shadow:0 18px 36px -22px rgba(17,17,17,.5)}
  .cbd-tilt:active .cbd-glow{opacity:.7}
}

/* 4. PAGE TRANSITIONS */
.cbd-curtain{position:fixed;inset:0;z-index:2147483000;pointer-events:none;background:#111;display:grid;place-items:center;transform:translate3d(0,101%,0);transition:transform .22s cubic-bezier(.76,0,.24,1);will-change:transform}
.cbd-curtain:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:#D8FF3E}
.cbd-curtain img{width:64px;height:64px;opacity:0;transform:scale(.8);transition:opacity .3s ease .15s,transform .4s var(--cbd-ease) .15s}
.cbd-curtain.cbd-in{transform:translate3d(0,0,0);pointer-events:auto}
.cbd-curtain.cbd-in img{opacity:1;transform:none}
/* arrival shutter (html.cbd-pt-in::after) lives inline in each page <head> so it is painted before any stylesheet loads and lifts only when the page is ready */
html.cbd-pt-in .intro{display:none!important}
html.cbd-pt-in .nav-shell{opacity:1!important;visibility:visible!important;transform:none!important}

/* 4b. PORTFOLIO hover-to-play hint (desktop) */
.cbd-hoverplay .portfolio-card .cbd-hint{position:absolute;left:14px;bottom:14px;z-index:3;font:700 10px/1 "Inter",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#111;background:#D8FF3E;padding:8px 10px;border-radius:999px;opacity:.92;transition:opacity .3s ease,transform .3s var(--cbd-ease);pointer-events:none}
.cbd-hoverplay .portfolio-card:hover .cbd-hint,.cbd-hoverplay .portfolio-card.cbd-playing .cbd-hint{opacity:0;transform:translateY(6px)}
.cbd-hoverplay .portfolio-card .portfolio-card-video{transition:transform .8s var(--cbd-ease),filter .5s ease;filter:saturate(.85) brightness(.92)}
.cbd-hoverplay .portfolio-card:hover .portfolio-card-video{transform:scale(1.05);filter:none}

/* 5. TESTIMONIALS MARQUEE (component ready; hidden until real quotes are added) */
.cbd-testimonials[hidden]{display:none!important}
.cbd-testimonials{padding:90px 0;overflow:hidden;border-top:1px solid var(--line,#D4D0C7)}
.cbd-t-viewport{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cbd-t-track{display:flex;gap:16px;width:max-content;animation:cbdMarquee 48s linear infinite}
.cbd-t-track:hover{animation-play-state:paused}
.cbd-t-card{width:min(360px,80vw);flex:none;background:#FFFDF8;border:1px solid #D4D0C7;border-radius:16px;padding:22px;font-size:14px;line-height:1.55}
.cbd-t-card footer{margin-top:14px;font:700 12px/1.3 "Space Grotesk",sans-serif;background:none;color:inherit;padding:0}
@keyframes cbdMarquee{to{transform:translate3d(-50%,0,0)}}

/* 6. CURSOR LABEL + MAGNETIC */
.cbd-cursor-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);font:700 9px/1 "Inter",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#111;opacity:0;transition:opacity .2s ease,transform .3s var(--cbd-ease);white-space:nowrap;pointer-events:none}
.cursor-follower.cbd-labelled{width:78px!important;height:78px!important}
.cursor-follower.cbd-labelled .cursor-follower-orbit{background:#D8FF3E!important;border-color:#D8FF3E!important;transform:none!important}
.cursor-follower.cbd-labelled .cursor-follower-dot{opacity:0}
.cursor-follower.cbd-labelled .cbd-cursor-label{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor-ring .cbd-cursor-label{color:#111}
body.cbd-ring-labelled .cursor-ring{width:76px!important;height:76px!important;background:rgba(216,255,62,.92)!important;border-color:transparent!important}
body.cbd-ring-labelled .cursor-ring .cbd-cursor-label{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cbd-magnetic{transition:translate .35s var(--cbd-ease)}
.cbd-magnetic.cbd-pulled{transition:translate .12s linear}

/* 7. FLOATING BOOK-A-CALL */
.cbd-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:9000;display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 18px 0 8px;border-radius:999px;background:#111;color:#FFFDF8;font:700 12px/1 "Inter",system-ui,sans-serif;letter-spacing:.01em;text-decoration:none;box-shadow:0 14px 34px -14px rgba(17,17,17,.6),0 0 0 1px rgba(255,255,255,.06) inset;transform:translate3d(0,24px,0) scale(.9);opacity:0;pointer-events:none;transition:opacity .4s ease,transform .5s var(--cbd-ease),background .25s ease}
.cbd-fab.cbd-show{opacity:1;transform:none;pointer-events:auto}
.cbd-fab:hover{background:#2457FF}
.cbd-fab:focus-visible{outline:3px solid #D8FF3E;outline-offset:3px}
.cbd-fab-ico{width:36px;height:36px;border-radius:50%;background:#D8FF3E;color:#111;display:grid;place-items:center;position:relative;flex:none}
.cbd-fab-ico svg{width:19px;height:19px}
.cbd-fab-ico:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(216,255,62,.55);animation:cbdPing 2.4s cubic-bezier(0,0,.2,1) infinite}
@keyframes cbdPing{0%{transform:scale(.9);opacity:.9}80%,100%{transform:scale(1.5);opacity:0}}
@media(max-width:760px){
  .cbd-fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));height:50px;width:50px;padding:0;justify-content:center}
  .cbd-fab-ico{width:50px;height:50px}
  .cbd-fab-ico svg{width:23px;height:23px}
  .cbd-fab-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* SCROLL REVEAL for blocks that had none */
.cbd-reveal{opacity:0;transform:translate3d(0,34px,0);transition:opacity .8s ease,transform .9s var(--cbd-ease);transition-delay:var(--cbd-d,0s)}
.cbd-reveal.cbd-in{opacity:1;transform:none}
.cbd-h2line{position:relative}
.cbd-h2line:after{content:"";display:block;width:56px;height:4px;margin-top:18px;background:#D8FF3E;border-radius:4px;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--cbd-ease) .25s}
.cbd-h2line.cbd-in:after{transform:scaleX(1)}
.section-header .cbd-h2line:after{margin-left:auto;margin-right:auto;transform-origin:center}

/* REDUCED MOTION: everything static, no custom cursor, no magnet */
@media (prefers-reduced-motion:reduce){
  .cbd-aurora span{animation:none!important}
  .cbd-split .cbd-wi{transform:none!important;opacity:1!important;transition:none!important}
  .hero h1.cbd-split .accent:after{transform:skew(-14deg)!important;transition:none!important}
  .cbd-tilt,.cbd-magnetic{rotate:none!important;translate:none!important;transition:none!important}
  .cbd-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .cbd-h2line:after{transform:none!important}
  .cbd-t-track{animation:none!important;flex-wrap:wrap;width:auto}
  .cbd-fab{transition:none}.cbd-fab-ico:after{animation:none;display:none}
  .cursor-follower,.cursor-dot,.cursor-ring{display:none!important}
  *{cursor:auto!important}a,button,[role=button],label,select,summary{cursor:pointer!important}
  html.cbd-pt-in::after{display:none}
}