/* ==========================================================================
   KRAAM.cc — FX system (depth · glass · motion · glow)
   Senior-grade motion design. Loaded on every page. Respects reduced-motion.
   ========================================================================== */

/* ---- custom cursor glow (desktop) ---- */
.kfx-cursor{position:fixed;top:0;left:0;width:360px;height:360px;margin:-180px 0 0 -180px;border-radius:50%;
  pointer-events:none;z-index:9998;mix-blend-mode:screen;opacity:.6;transition:opacity .3s;
  background:radial-gradient(circle,rgba(232,200,119,.12),transparent 60%);will-change:transform}

/* ---- ambient particle canvas ---- */
.kfx-particles{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ---- glassmorphism ---- */
.glass{position:relative;background:linear-gradient(180deg,rgba(26,20,12,.62),rgba(12,10,7,.52));
  border:1px solid rgba(199,154,63,.28);border-radius:18px;
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(232,200,119,.18),inset 0 0 40px rgba(0,0,0,.25);
  overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 80% at 10% -10%,rgba(232,200,119,.10),transparent 50%)}
/* animated gold rim sweep */
.glass.rim::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),transparent,rgba(232,200,119,.5),transparent 30%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:rimspin 6s linear infinite;opacity:.5}
@keyframes rimspin{to{--a:360deg}}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---- 3D tilt (set by JS) ---- */
.tilt{transform-style:preserve-3d;transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s;will-change:transform}
.tilt .tilt-deep{transform:translateZ(40px)}

/* ---- magnetic / ripple buttons ---- */
.mag{position:relative;overflow:hidden;transition:transform .18s cubic-bezier(.2,.7,.3,1)}
.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.35);pointer-events:none;animation:ripple .6s ease-out forwards}
@keyframes ripple{to{transform:scale(2.4);opacity:0}}

/* ---- entrance / scroll reveal ---- */
.reveal{opacity:0;transform:translateY(22px) scale(.98);transition:opacity .6s cubic-bezier(.2,.7,.3,1),transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(18px);animation:staggerIn .55s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes staggerIn{to{opacity:1;transform:none}}

/* ---- shimmer skeleton ---- */
.skeleton{background:linear-gradient(90deg,rgba(255,255,255,.03),rgba(232,200,119,.08),rgba(255,255,255,.03));
  background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:8px}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---- page transition ---- */
.page-swap{animation:pageSwap .5s cubic-bezier(.2,.7,.3,1)}
@keyframes pageSwap{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* ---- glow pulse + float utilities ---- */
.glow-pulse{animation:glowPulse 3s ease-in-out infinite}
@keyframes glowPulse{50%{filter:drop-shadow(0 0 18px rgba(232,200,119,.6))}}
.float{animation:floaty 6s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-8px)}}
.breathe{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.04)}}

/* ---- animated gradient aura (section backdrops) ---- */
.aura{position:relative}
.aura::before{content:"";position:absolute;inset:-40% -10%;z-index:-1;pointer-events:none;opacity:.5;
  background:radial-gradient(40% 50% at 20% 30%,rgba(199,154,63,.18),transparent 60%),radial-gradient(40% 50% at 80% 70%,rgba(138,106,44,.14),transparent 60%);
  animation:auraDrift 18s ease-in-out infinite alternate;filter:blur(30px)}
@keyframes auraDrift{to{transform:translate(40px,-30px) scale(1.1)}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.08s!important}
  .kfx-particles,.kfx-cursor{display:none}
}