/* ============================================================================
   PREMIUM ANIMATION EFFECTS — vanilla, zero dependency
   Pairs with animations.js. Every effect is transform/opacity only.

   Theme by overriding the --pa-* variables on :root or on any container.
   ========================================================================= */

:root{
  /* motion character */
  --pa-ease:       cubic-bezier(.16,1,.3,1);   /* soft overshoot — the house curve */
  --pa-ease-snap:  cubic-bezier(.22,.61,.36,1);
  --pa-dur:        .9s;                         /* entrances */
  --pa-dur-fast:   .35s;                        /* hover feedback */
  --pa-rise:       28px;                        /* reveal travel distance */

  /* palette */
  --pa-text:       #0b1020;   /* fully-read text */
  --pa-text-dim:   rgba(11,16,32,.17);  /* unread text in a scrub */
  --pa-accent:     #1b4dff;
  --pa-invert:     #ffffff;   /* text colour on a swept surface */
  --pa-sweep:      #0b1020;   /* the colour that sweeps in on hover */
}

/* ============================================================================
   A. SCROLL-DRIVEN — TEXT
   ========================================================================= */

/* --- A1. Text highlight on scroll (scrub) --------------------------------
   Words start dim and light up in proportion to scroll progress. Reserve for
   headlines and pull quotes: on body copy the dim state reads as broken. */
.pa-word{
  color:var(--pa-text-dim);
  transition:color .45s var(--pa-ease);
}
.pa-word.is-lit{ color:var(--pa-text); }
/* optional moving "reading head" — the newest lit words flare accent, then settle */
.pa-word.is-hot{ color:var(--pa-accent); }

/* --- A2. Kinetic word reveal ---------------------------------------------
   Each word rides up out of its own clipping mask with a slight rotate-settle. */
[data-split]{ display:block; }
[data-split] .pa-w{
  display:inline-block; overflow:hidden; vertical-align:top;
  /* clipping mask must not shear descenders — pad and pull back */
  padding-bottom:.08em; margin-bottom:-.08em;
}
[data-split] .pa-w > i{
  display:inline-block; font-style:normal;
  transform:translateY(108%) rotate(4deg);
  transition:transform 1s var(--pa-ease);
  will-change:transform;
}
[data-split].is-in .pa-w > i{ transform:none; }
/* opt-in per-word cascade: data-split="stagger" */
[data-split="stagger"] .pa-w > i{ transition-delay:calc(var(--pa-i,0) * 45ms); }

/* --- A3. Character stagger (wordmarks only) ------------------------------ */
[data-chars] .pa-c{
  display:inline-block;
  opacity:0; transform:translateY(90%) rotate(5deg);
  transition:opacity .6s var(--pa-ease), transform .8s var(--pa-ease);
  transition-delay:calc(var(--pa-i,0) * 28ms);
}
[data-chars].is-in .pa-c{ opacity:1; transform:none; }
[data-chars] .pa-word-group{ display:inline-block; white-space:nowrap; }

/* ============================================================================
   B. SCROLL-DRIVEN — ELEMENTS
   ========================================================================= */

/* --- B1. Reveal on scroll ------------------------------------------------ */
[data-pa-reveal]{
  opacity:0; transform:translateY(var(--pa-rise));
  transition:opacity var(--pa-dur) var(--pa-ease),
             transform var(--pa-dur) var(--pa-ease);
  will-change:opacity,transform;
}
[data-pa-reveal].is-in{ opacity:1; transform:none; }
[data-pa-reveal="fade"]  { transform:none; }
[data-pa-reveal="left"]  { transform:translateX(calc(var(--pa-rise) * -1.2)); }
[data-pa-reveal="right"] { transform:translateX(calc(var(--pa-rise) * 1.2)); }
[data-pa-reveal="scale"] { transform:scale(.94); }

/* manual delay steps */
[data-pa-reveal-delay="1"]{ transition-delay:.08s }
[data-pa-reveal-delay="2"]{ transition-delay:.16s }
[data-pa-reveal-delay="3"]{ transition-delay:.24s }
[data-pa-reveal-delay="4"]{ transition-delay:.32s }
[data-pa-reveal-delay="5"]{ transition-delay:.40s }

/* automatic cascade for a list/grid: put data-pa-reveal-stagger on the parent */
[data-pa-reveal-stagger] > *{ transition-delay:calc(var(--pa-i,0) * 70ms); }

/* --- B2. Count-up: no CSS needed, JS writes textContent ------------------ */

/* --- B3. Parallax -------------------------------------------------------- */
[data-pa-parallax]{ will-change:transform; }

/* --- B4. Scroll-velocity reactive marquee -------------------------------- */
.pa-marquee{ overflow:hidden; white-space:nowrap; display:block; }
.pa-marquee-track{
  display:inline-flex; gap:var(--pa-marquee-gap,2.5rem);
  will-change:transform;
}

/* ============================================================================
   C. HOVER / POINTER  (desktop only — see the @media guard at the bottom)
   ========================================================================= */

/* --- C1. Button: lift + fill sweep --------------------------------------- */
.pa-btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  transition:transform var(--pa-dur-fast) var(--pa-ease),
             color var(--pa-dur-fast) var(--pa-ease);
  will-change:transform;
}
.pa-btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--pa-btn-sweep, var(--pa-invert));
  transform:translateY(101%);
  transition:transform .5s var(--pa-ease);
}
.pa-btn:hover{ transform:scale(1.04); color:var(--pa-btn-hover-fg, var(--pa-sweep)); }
.pa-btn:hover::before{ transform:none; }
.pa-btn:active{ transform:scale(.98); }

/* --- C2. Image zoom + desaturate → colour -------------------------------- */
.pa-zoom{ display:block; overflow:hidden; position:relative; }
.pa-zoom img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:grayscale(var(--pa-zoom-gray,.85)) contrast(1.04);
  transition:transform 1s var(--pa-ease), filter .7s var(--pa-ease);
  will-change:transform;
}
.pa-zoom:hover img{ transform:scale(var(--pa-zoom-scale,1.06)); filter:none; }

/* --- C3. Magnetic: JS writes the transform ------------------------------- */
[data-magnetic]{
  transition:transform .4s var(--pa-ease);
  will-change:transform;
}

/* --- C4. Custom cursor --------------------------------------------------- */
.pa-cursor{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:12px; height:12px; border-radius:50%;
  background:#fff; mix-blend-mode:difference;
  transform:translate3d(-50%,-50%,0);
  transition:width .3s var(--pa-ease), height .3s var(--pa-ease);
  will-change:transform;
}
.pa-cursor.is-big{ width:72px; height:72px; }
.pa-cursor::after{
  content:attr(data-label); position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:#000;
  opacity:0; transition:opacity .25s var(--pa-ease);
}
.pa-cursor.is-big::after{ opacity:1; }
/* only hide the native cursor once JS confirms the custom one is running */
html.pa-has-cursor, html.pa-has-cursor *{ cursor:none !important; }

/* --- C5. Row sweep ------------------------------------------------------- */
.pa-row{
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .5s var(--pa-ease);
}
.pa-row::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--pa-sweep);
  transform:translateY(101%);
  transition:transform .6s var(--pa-ease);
}
.pa-row:hover{ color:var(--pa-invert); }
.pa-row:hover::before{ transform:none; }

/* --- C6. Underline draw -------------------------------------------------- */
.pa-link{ position:relative; text-decoration:none; }
.pa-link::after{
  content:''; position:absolute; left:0; bottom:-.12em;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--pa-ease);
}
.pa-link:hover::after,
.pa-link.is-active::after{ transform:scaleX(1); transform-origin:left; }

/* ============================================================================
   D. STATE TRANSITIONS
   ========================================================================= */

/* --- D1. Preloader wipe -------------------------------------------------- */
.pa-preloader{
  position:fixed; inset:0; z-index:9500;
  display:grid; place-items:center;
  background:var(--pa-preloader-bg,#06101f); color:var(--pa-invert);
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s var(--pa-ease);
}
.pa-preloader.is-done{ clip-path:inset(0 0 100% 0); pointer-events:none; }
.pa-preloader-bar{
  position:relative; overflow:hidden;
  width:min(46vw,420px); height:1px; margin-top:1.6rem;
  background:rgba(255,255,255,.2);
}
.pa-preloader-bar > i{
  position:absolute; inset:0 100% 0 0;
  background:var(--pa-accent);
  transition:right .2s linear;
}

/* --- D2. Modal / lightbox ------------------------------------------------
   Keep this element OUTSIDE any transformed wrapper. A CSS transform on an
   ancestor becomes the containing block for position:fixed, which pins the
   overlay to the scrolled page instead of the viewport. */
.pa-modal{
  position:fixed; inset:0; z-index:9000;
  display:grid; place-items:center;
  padding:clamp(1.2rem,5vw,4rem);
  background:var(--pa-modal-bg, rgba(6,10,25,.94));
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--pa-ease), visibility .35s;
}
.pa-modal.is-open{ opacity:1; visibility:visible; }
.pa-modal > *{
  opacity:0; transform:scale(.96);
  transition:opacity .4s var(--pa-ease), transform .4s var(--pa-ease);
}
.pa-modal.is-open > *{ opacity:1; transform:none; }
body.pa-modal-open{ overflow:hidden; }

/* --- D3. Filter re-layout ------------------------------------------------ */
.pa-filter-item{
  transition:opacity .4s var(--pa-ease), transform .4s var(--pa-ease);
}
.pa-filter-item.is-hidden{ display:none; }
.pa-filter-item.is-entering{ opacity:0; transform:translateY(14px); }

/* ============================================================================
   E. AMBIENT
   ========================================================================= */
.pa-drift{
  background-size:200% 200%;
  animation:pa-drift 18s ease-in-out infinite;
}
@keyframes pa-drift{
  0%,100%{ background-position:0% 50% }
  50%    { background-position:100% 50% }
}

/* ============================================================================
   GUARDS — these are the difference between "premium" and "annoying"
   ========================================================================= */

/* Hover effects are meaningless on touch and can leave sticky states.
   Neutralise them rather than letting a tap latch the hover style. */
@media (hover:none){
  .pa-cursor{ display:none; }
  html.pa-has-cursor, html.pa-has-cursor *{ cursor:auto !important; }
  .pa-btn:hover{ transform:none; }
  .pa-btn:hover::before{ transform:translateY(101%); }
  .pa-zoom:hover img{ transform:none; filter:grayscale(var(--pa-zoom-gray,.85)); }
  .pa-row:hover{ color:inherit; }
  .pa-row:hover::before{ transform:translateY(101%); }
}

/* Respect the OS setting. Everything snaps to its final, readable state —
   nothing is left mid-transition or invisible. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-pa-reveal]{ opacity:1 !important; transform:none !important; }
  [data-split] .pa-w > i{ transform:none !important; }
  [data-chars] .pa-c{ opacity:1 !important; transform:none !important; }
  .pa-word{ color:var(--pa-text) !important; }
  .pa-marquee-track{ transform:none !important; }
  [data-pa-parallax]{ transform:none !important; }
}


/* ============================================================================
   VAAKRASA THEME + GLOBAL LINK TREATMENT
   ========================================================================= */
:root{
  --pa-accent:   #4FCD61;
  --pa-text:     #FFFFFF;                 /* fully-read scrub word */
  --pa-text-dim: rgba(255,255,255,.22);   /* unread scrub word */
  --pa-invert:   #0D0D0D;
  --pa-sweep:    #4FCD61;
}

/* Underline-draw on prose links and nav items without needing the class on
   each one. Buttons are excluded - they carry their own hover treatment. */
p a:not([class*="vk-btn"]),
.vk-nav-desktop a:not([class*="vk-btn"]),
.vk-nav-mobile a:not([class*="vk-btn"]){
  position:relative; text-decoration:none;
}
p a:not([class*="vk-btn"])::after,
.vk-nav-desktop a:not([class*="vk-btn"])::after,
.vk-nav-mobile a:not([class*="vk-btn"])::after{
  content:''; position:absolute; left:0; bottom:-.12em;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--pa-ease);
}
p a:not([class*="vk-btn"]):hover::after,
.vk-nav-desktop a:not([class*="vk-btn"]):hover::after,
.vk-nav-mobile a:not([class*="vk-btn"]):hover::after{
  transform:scaleX(1); transform-origin:left;
}
@media (hover:none){
  p a::after,
  .vk-nav-desktop a::after,
  .vk-nav-mobile a::after{ display:none; }
}