/* ===========================================================
   Profiúčtuj — motion layer
   Principles: Emil Kowalski "Animations on the Web"
   (ease-out enter, exits faster, transform/opacity only,
    200–300ms sweet spot, respect prefers-reduced-motion)
   =========================================================== */
:root{
  --ease-out-quint:cubic-bezier(.23,1,.32,1);
  --ease-in-out-cubic:cubic-bezier(.645,.045,.355,1);
  --ease-out-cubic:cubic-bezier(.33,1,.68,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- BRAND LOGO ---------- */
.brand{display:flex;align-items:center}
.brand-logo{height:30px;width:auto;display:block;
  /* white source → ink, so it's visible on the light header */
  filter:brightness(0) saturate(100%);
  transition:opacity .2s ease}
.brand:hover .brand-logo{opacity:.78}
.foot-brand{align-items:center}
.foot-logo{height:34px;width:auto;display:block}   /* white logo stays white on dark footer */
@media(max-width:560px){.brand-logo{height:26px}}

/* ---------- MOVING GRADIENT (aurora) ---------- */
.aurora{position:fixed;inset:-20% -10% auto -10%;height:140vh;z-index:-2;pointer-events:none;
  filter:blur(70px);opacity:.55;overflow:hidden}
.aurora span{position:absolute;border-radius:50%;mix-blend-mode:multiply;will-change:transform}
.aurora .a1{width:46vw;height:46vw;left:-6vw;top:-4vw;background:radial-gradient(circle at 30% 30%,#35e4fd,transparent 62%);animation:drift1 22s var(--ease-in-out-cubic) infinite alternate}
.aurora .a2{width:42vw;height:42vw;right:-6vw;top:6vw;background:radial-gradient(circle at 60% 40%,#96f1fe,transparent 60%);animation:drift2 26s var(--ease-in-out-cubic) infinite alternate}
.aurora .a3{width:38vw;height:38vw;left:28vw;top:30vw;background:radial-gradient(circle at 50% 50%,#029fb6,transparent 60%);animation:drift3 30s var(--ease-in-out-cubic) infinite alternate}
@keyframes drift1{to{transform:translate3d(12vw,8vh,0) scale(1.15)}}
@keyframes drift2{to{transform:translate3d(-10vw,10vh,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(8vw,-8vh,0) scale(1.2)}}
body{background:linear-gradient(180deg,var(--paper),#eafaff 40%,var(--paper))}

/* moving gradient on dark bands */
.about,.mission,.cta-band,.detail-aside{position:relative;overflow:hidden}
.cta-band{background:linear-gradient(120deg,#05141a,#0c3340,#05141a);background-size:220% 220%;
  animation:bandShift 14s var(--ease-in-out-cubic) infinite}
.about{background:linear-gradient(125deg,#05141a,#0a2630,#05141a);background-size:220% 220%;
  animation:bandShift 18s var(--ease-in-out-cubic) infinite}
@keyframes bandShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* gradient shimmer accent under section eyebrows headings */
.shine{background:linear-gradient(100deg,var(--ink) 40%,var(--teal) 50%,var(--ink) 60%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-220% 0}}

/* ---------- SCROLL REVEAL ---------- */
[data-reveal]{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .6s var(--ease-out-quint),transform .6s var(--ease-out-quint);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="left"]{transform:translate3d(-34px,0,0)}
[data-reveal="right"]{transform:translate3d(34px,0,0)}
[data-reveal="zoom"]{transform:scale(.92)}
[data-reveal].in{transform:none}

/* ---------- 3D TILT WRAPPERS ---------- */
.tilt{transform-style:preserve-3d;transition:transform .4s var(--ease-out-quint);will-change:transform}
.tilt-inner{position:relative;z-index:0}
.hero-stage .hero-badge{z-index:6}
.scene{perspective:1200px}

/* ---------- HERO 3D FINANCE CHIPS ---------- */
.hero-visual{perspective:1400px}
.hero-stage{position:relative;transform-style:preserve-3d;transition:transform .4s var(--ease-out-quint)}
.chip{position:absolute;z-index:6;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);border-radius:18px;
  box-shadow:0 24px 50px -18px rgba(5,20,26,.32);padding:14px 16px;
  will-change:transform;transform-style:preserve-3d}
.chip .ttl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600}
.chip-balance{left:-34px;top:30px;animation:float1 7s var(--ease-in-out-cubic) infinite}
.chip-balance .val{font-family:var(--serif);font-size:30px;color:var(--teal-deep);line-height:1}
.chip-balance .val small{font-size:15px}
.chip-growth{right:-26px;top:120px;display:flex;align-items:center;gap:10px;animation:float2 8s var(--ease-in-out-cubic) infinite}
.chip-growth .pct{font-family:var(--serif);font-size:26px;color:#0fae62;line-height:1}
.chip-growth .arrow{width:34px;height:34px;border-radius:10px;background:#e7fbef;color:#0fae62;display:grid;place-items:center}
.chip-chart{right:-20px;bottom:18px;animation:float3 9s var(--ease-in-out-cubic) infinite}
.chip-chart .bars{display:flex;align-items:flex-end;gap:6px;height:48px;margin-top:8px}
.chip-chart .bars i{width:9px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--cyan),var(--teal));
  transform-origin:bottom;transform:scaleY(.15);transition:transform .9s var(--ease-out-quint)}
.chip-chart.grew .bars i{transform:scaleY(1)}
.coin{position:absolute;z-index:6;left:-46px;bottom:64px;width:84px;height:84px;
  perspective:600px;animation:coinFloat 6s var(--ease-in-out-cubic) infinite}
.coin::after{content:"";position:absolute;left:50%;bottom:-16px;width:62px;height:14px;
  transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(150,110,15,.5),transparent 70%);
  filter:blur(3px);z-index:-1}
.coin3d{position:absolute;inset:0;transform-style:preserve-3d;animation:spin 7s linear infinite;will-change:transform}
.coin3d .cface{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-size:40px;color:#8a6a1e;backface-visibility:hidden;
  background:radial-gradient(circle at 35% 30%,#ffe79a,#e9b949 55%,#c8951f);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.4),inset 0 0 14px rgba(140,100,20,.5)}
.coin3d .cfront{transform:translateZ(6px)}
.coin3d .cback{transform:rotateY(180deg) translateZ(6px)}
.coin3d i{position:absolute;inset:0;border-radius:50%;
  transform:translateZ(var(--z)) scale(.985);
  background:linear-gradient(90deg,#a9781a,#f0d98a 50%,#a9781a)}
@keyframes spin{to{transform:rotateY(360deg)}}
@keyframes coinFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes float1{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes float2{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@keyframes float3{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- MAGNETIC / PRESS BUTTONS ---------- */
.btn{will-change:transform}
.btn:active{transform:scale(.97)}
.btn-magnetic{transition:transform .25s var(--ease-out-quint),box-shadow .25s var(--ease-out-quint)}

/* ---------- CARD HOVER GLOW (extends base hover-lift) ---------- */
.svc-card,.case,.value,.tcard,.stat,.ccard{transition:transform .3s var(--ease-out-quint),
  box-shadow .3s var(--ease-out-quint),border-color .3s ease}
.svc-card:hover,.value:hover,.tcard:hover,.ccard:hover{border-color:rgba(53,228,253,.55)}
.stat{position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;inset:0;background:radial-gradient(220px 120px at var(--mx,50%) var(--my,0%),rgba(53,228,253,.18),transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.stat:hover::after{opacity:1}

/* counter pop */
.num.counting{animation:pop .5s var(--ease-spring)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}

/* marquee pause on hover */
.marquee:hover .marquee-track{animation-play-state:paused}

/* nav link underline grow */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;
  background:var(--cyan);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-out-quint)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}

/* page hero gradient drift */
.page-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--paper-2),#dff7fd,var(--paper-2));
  background-size:200% 200%;animation:bandShift 16s var(--ease-in-out-cubic) infinite}

/* checklist + case list item reveal stagger handled by JS via data-reveal */
.checklist li,.case-block ul li{transition:transform .5s var(--ease-out-quint),opacity .5s var(--ease-out-quint)}

/* smooth anchor */
html{scroll-behavior:smooth}

/* declutter floating chips on small screens */
@media(max-width:600px){
  .coin,.chip-chart{display:none}
  .chip-balance{left:-10px}
  .chip-growth{right:-8px}
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  .aurora{display:none}
  .coin,.chip{animation:none !important}
}