/* ===================================================================
   KAPA ART — Cinematic layer (lusion-inspired motion)
   Brand-locked: uses existing --ink / --accent / --bone tokens only.
   Everything is gated behind body.cin-on so toggling the tweak off
   restores the original site exactly.
   =================================================================== */

/* ---- shared motion easing tokens -------------------------------- */
body.cin-on{
  --cin-ease:cubic-bezier(.16,1,.3,1);        /* expressive settle (easeOutExpo-ish) */
  --cin-ease-soft:cubic-bezier(.22,.61,.36,1);/* gentle push-in / release */
}

/* ---- branded preloader ------------------------------------------ */
.cin-loader{
  position:fixed; inset:0; z-index:100001;
  background:#16140F; /* fixed ink so the bone wordmark reads on every theme */
  display:flex; align-items:center; justify-content:center;
  transition:transform 1s cubic-bezier(.76,0,.24,1);
  will-change:transform;
}
body.cin-loading{ overflow:hidden; }
.cin-loader.is-done{ transform:translateY(-101%); }
.cin-loader-core{
  display:flex; flex-direction:column; align-items:center; gap:26px;
  transition:opacity .45s ease, transform .45s ease;
}
.cin-loader.is-done .cin-loader-core{ opacity:0; transform:translateY(-22px); }
.cin-loader-mark{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.cin-loader-mark img{
  height:clamp(110px, 26vw, 210px); width:auto; display:block;
  animation:cinLoaderMark 1.1s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes cinLoaderMark{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to{ opacity:1; transform:none; }
}
.cin-loader-dots{ display:flex; gap:10px; }
.cin-loader-dots i{
  width:11px; height:11px; border-radius:50%; display:block;
  mix-blend-mode:screen;
  animation:cinLoaderDot 1.15s ease-in-out infinite;
}
.cin-loader-dots i.c{ background:#00AEEF; }
.cin-loader-dots i.m{ background:#EC008C; animation-delay:.14s; }
.cin-loader-dots i.y{ background:#FFF200; animation-delay:.28s; }
@keyframes cinLoaderDot{
  0%,100%{ transform:translateY(0); opacity:.7; }
  46%{ transform:translateY(-7px); opacity:1; }
}
.cin-loader-meta{
  display:flex; align-items:baseline; gap:18px;
  font-family:var(--mono, "IBM Plex Mono", monospace);
  color:#F4F0E7;
}
.cin-loader-tag{ font-size:10.5px; letter-spacing:.34em; opacity:.55; }
.cin-loader-pct{ font-size:13px; letter-spacing:.1em; min-width:3.2ch; text-align:right; }
.cin-loader-pct::after{ content:"%"; opacity:.55; margin-left:1px; }
.cin-loader-bar{
  width:min(280px, 56vw); height:1px; display:block;
  background:color-mix(in srgb, #F4F0E7 18%, transparent);
  overflow:hidden;
}
.cin-loader-bar i{
  display:block; height:100%; background:var(--accent, #E5431D);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .25s linear;
  box-shadow:0 0 12px color-mix(in srgb, var(--accent, #E5431D) 70%, transparent);
}
@media (prefers-reduced-motion: reduce){
  .cin-loader{ transition:opacity .3s ease; }
  .cin-loader.is-done{ transform:none; opacity:0; }
  .cin-loader-mark img, .cin-loader-dots i{ animation:none; }
}

/* ---- interactive WebGL backdrop -------------------------------- */
/* mounted INSIDE the page's dark hero stage (position/opacity set by JS);
   sits above the hero's own background, below grid + content */
.cin-bg-canvas{
  position:absolute; left:0; top:0; z-index:1;
  pointer-events:none;
}

/* force instant scroll while inertia smoothing drives window.scrollTo */
html.cin-smooth-on{ scroll-behavior:auto !important; }

/* ---- custom magnetic cursor ------------------------------------ */
.cin-cursor{
  position:fixed; top:0; left:0; z-index:100000; pointer-events:none;
  opacity:0; transition:opacity .3s ease;
  mix-blend-mode:normal;
}
body.cin-cursor-on .cin-cursor{ opacity:1; }
.cin-cursor.is-hidden{ opacity:0 !important; }

.cin-ring{
  position:absolute; left:0; top:0;
  width:34px; height:34px; margin:-17px 0 0 -17px;
  border-radius:50%;
  border:1.5px solid color-mix(in srgb, var(--ink) 48%, transparent);
  background:transparent;
  display:flex; align-items:center; justify-content:center;
  transition:width .28s cubic-bezier(.2,.7,.2,1),
             height .28s cubic-bezier(.2,.7,.2,1),
             margin .28s cubic-bezier(.2,.7,.2,1),
             border-color .28s ease, background .28s ease, transform .18s ease;
  will-change:transform;
}
.cin-dot{
  position:absolute; left:0; top:0;
  width:6px; height:6px; margin:-3px 0 0 -3px;
  border-radius:50%; background:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  will-change:transform;
}
.cin-label{
  font-family:var(--mono); font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); opacity:0; transform:translateY(2px);
  transition:opacity .2s ease, transform .2s ease; white-space:nowrap;
}

/* link / button hover — ring widens, dot hides into ring */
.cin-cursor.is-link .cin-ring{
  width:48px; height:48px; margin:-24px 0 0 -24px;
  border-color:color-mix(in srgb, var(--accent) 70%, transparent);
}
.cin-cursor.is-link .cin-dot{ opacity:0; }

/* card hover — big ring + label, accent wash */
.cin-cursor.is-card .cin-ring{
  width:84px; height:84px; margin:-42px 0 0 -42px;
  border-color:color-mix(in srgb, var(--accent) 75%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
  backdrop-filter:blur(1px);
}
.cin-cursor.is-card .cin-dot{ opacity:0; }
.cin-cursor.is-card .cin-label{ opacity:1; transform:translateY(0); }

.cin-cursor.is-down .cin-ring{ transform:scale(.78); }

/* hide native cursor while custom cursor is live (fine pointers only) */
@media (pointer:fine){
  body.cin-cursor-on,
  body.cin-cursor-on a,
  body.cin-cursor-on button,
  body.cin-cursor-on .kcard,
  body.cin-cursor-on .aud-cat-card,
  body.cin-cursor-on [role="button"]{ cursor:none; }
  body.cin-cursor-on input,
  body.cin-cursor-on textarea,
  body.cin-cursor-on select{ cursor:auto; }
}

/* magnetic elements get a smooth return when released */
body.cin-on [data-cin-mag]{
  transition:transform .55s var(--cin-ease-soft, cubic-bezier(.22,.61,.36,1));
}
body.cin-cursor-on .aud-cat-card[data-cin-card-motion]{
  transition:box-shadow .5s cubic-bezier(.2,.7,.2,1),background .45s ease,border-color .45s ease;
}

/* ---- scroll reveals (kinetic type & cards) --------------------- */
body.cin-reveal-on [data-cin-reveal]{
  opacity:0; transform:translateY(34px);
  transition:opacity 1s var(--cin-ease, cubic-bezier(.16,1,.3,1)),
             transform 1.05s var(--cin-ease, cubic-bezier(.16,1,.3,1));
  transition-delay:var(--cin-d, 0s);
  will-change:opacity, transform;
}
body.cin-reveal-on [data-cin-reveal].cin-in{
  opacity:1; transform:none;
}
/* clip-style reveal for big display headings */
body.cin-reveal-on [data-cin-reveal="head"]{
  transform:translateY(48px);
  clip-path:inset(0 0 100% 0);
  transition:opacity 1.1s var(--cin-ease, cubic-bezier(.16,1,.3,1)),
             transform 1.15s var(--cin-ease, cubic-bezier(.16,1,.3,1)),
             clip-path 1.15s var(--cin-ease, cubic-bezier(.16,1,.3,1));
}
body.cin-reveal-on [data-cin-reveal="head"].cin-in{
  clip-path:inset(0 0 -10% 0);
}

/* ---- image hover distortion (cards & category tiles) ----------- */
body.cin-on .kcard-media{ position:relative; overflow:hidden; }
body.cin-on .kcard-cover,
body.cin-on .kcard-media image-slot{
  transition:transform .85s var(--cin-ease-soft, cubic-bezier(.22,.61,.36,1)), filter .85s ease;
}
body.cin-on .kcard:hover .kcard-cover,
body.cin-on .kcard:hover .kcard-media image-slot{
  transform:scale(1.08);
  filter:contrast(1.06) saturate(1.06);
}
/* diagonal light sweep on hover */
body.cin-on .kcard-media::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%,
    color-mix(in srgb, #fff 26%, transparent) 48%, transparent 66%);
  transform:translateX(-120%); transition:transform .9s var(--cin-ease, cubic-bezier(.16,1,.3,1));
  mix-blend-mode:soft-light;
}
body.cin-on .kcard:hover .kcard-media::after{ transform:translateX(120%); }

body.cin-on .aud-cat-media img{
  transition:transform .9s var(--cin-ease-soft, cubic-bezier(.22,.61,.36,1)), filter .9s ease;
}
body.cin-on .aud-cat-card:hover .aud-cat-media img{
  transform:scale(1.07); filter:contrast(1.05);
}

/* ---- section / route transition wipe --------------------------- */
.cin-wipe{
  position:fixed; inset:0; z-index:99990; pointer-events:none;
  background:var(--ink);
  transform:scaleX(0); transform-origin:left center;
  display:flex; align-items:center; justify-content:center;
}
.cin-wipe.is-cover{
  animation:cinWipeCover var(--cin-wipe-dur, .9s) cubic-bezier(.7,0,.3,1) forwards;
}
.cin-wipe-mark{
  opacity:0;
  transform:scale(.96);
  display:flex; align-items:center; justify-content:center;
}
.cin-wipe-mark img{
  height:clamp(140px, 32vw, 280px);
  width:auto;
  display:block;
}
body[data-theme="dark"] .cin-wipe-mark img{ filter:invert(1); }
@keyframes cinWipeCover{
  0%   { transform:scaleX(0); transform-origin:left center; }
  42%  { transform:scaleX(1); transform-origin:left center; }
  43%  { transform:scaleX(1); transform-origin:right center; }
  100% { transform:scaleX(0); transform-origin:right center; }
}
.cin-wipe.is-cover .cin-wipe-mark{ animation:cinWipeMarkLogo var(--cin-wipe-dur, .9s) ease forwards; }
@keyframes cinWipeMarkLogo{
  0%,18%  { opacity:0; transform:scale(.96); }
  30%,40% { opacity:1; transform:scale(1); }
  52%,100%{ opacity:0; transform:scale(1.02); }
}

/* ---- reduced motion: show everything, kill heavy motion -------- */
@media (prefers-reduced-motion: reduce){
  body.cin-reveal-on [data-cin-reveal]{
    opacity:1 !important; transform:none !important; clip-path:none !important;
  }
  .cin-wipe.is-cover{ animation:none; }
}

/* ---- horizontal scroll drift (scroll-drift.js) ----------------- */
[data-drift], [data-drift-line] { will-change: transform; }
@media (prefers-reduced-motion: reduce), (max-width: 860px) {
  [data-drift], [data-drift-line], [data-drift-group] * { transform: none !important; }
  .ahero-line-wrap{overflow:visible;}
}