/* ============================================================
   nongky — UI Motion Layer (additive, non-destructive)
   Enhances base.html without touching existing tokens/styles.
   Loaded AFTER base styles so these only ADD behaviour.
   ============================================================ */
:root{
  --nky-ease: cubic-bezier(.22,.61,.36,1);
  --nky-ease-out: cubic-bezier(.16,1,.3,1);
  --nky-dur: .6s;
  --nky-glow: 0 0 0 1px var(--border), 0 18px 50px -24px rgba(227,183,120,.45);
}

/* ---------- SCROLL REVEAL ---------- */
[data-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity var(--nky-dur) var(--nky-ease-out),
             transform var(--nky-dur) var(--nky-ease-out);
  will-change:opacity, transform;
}
[data-reveal].in{opacity:1; transform:none;}
[data-reveal="left"]{transform:translateX(-28px);}
[data-reveal="right"]{transform:translateX(28px);}
[data-reveal="scale"]{transform:scale(.96);}
[data-reveal].in{transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important; transform:none !important; transition:none;}
}

/* ---------- HOVER GLOW (cards / buttons / links) ---------- */
.glow, .card, .modal, .foot-social a, .dropdown a, .nav-link, .row a{
  transition:transform .2s var(--nky-ease), box-shadow .3s var(--nky-ease),
             border-color .25s var(--nky-ease), background .25s var(--nky-ease);
}
.glow:hover, .card:hover, .modal:hover{
  box-shadow:var(--nky-glow); transform:translateY(-3px);
}
.btn-amber{position:relative; overflow:hidden;}
.btn-amber::after{ /* sheen sweep */
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .7s var(--nky-ease);
}
.btn-amber:hover::after{transform:translateX(120%);}
.brand .logo, .foot-brand .logo{transition:transform .4s var(--nky-ease-out), box-shadow .4s var(--nky-ease);}
.brand:hover .logo{transform:rotate(-6deg) scale(1.06); box-shadow:0 6px 18px -6px rgba(227,183,120,.7);}

/* ---------- NAV LINK underline grow ---------- */
.nav-link{position:relative;}
.nav-link::after{
  content:""; position:absolute; left:13px; right:13px; bottom:6px; height:2px;
  background:linear-gradient(90deg,var(--amber),var(--amber2));
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--nky-ease);
  border-radius:2px;
}
.nav-link:hover::after{transform:scaleX(1);}

/* ---------- PAGE TRANSITION ---------- */
#nky-veil{
  position:fixed; inset:0; z-index:200; pointer-events:none;
  background:var(--bg);
  opacity:0; transition:opacity .35s var(--nky-ease);
}
#nky-veil.show{opacity:1; pointer-events:all;}
body.nky-fade-in{opacity:0; animation:nkyFade .5s var(--nky-ease-out) forwards;}
@keyframes nkyFade{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ---------- THEME TOGGLE (dark default; respects brand rule) ---------- */
#nky-theme-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; cursor:pointer;
  background:var(--bg2); border:1px solid var(--border-soft); color:var(--muted);
  font-size:16px; transition:border-color .2s, color .2s, transform .3s var(--nky-ease);
}
#nky-theme-btn:hover{border-color:var(--amber); color:var(--amber); transform:rotate(18deg);}
/* light theme overrides (only color tokens; keeps layout) */
body.theme-light{
  --bg:#faf7f2; --bg2:#f1ece3; --surface:#ffffff; --surface2:#f6f1e9;
  --border:rgba(120,84,30,.18); --border-soft:rgba(120,84,30,.10);
  --text:#241c12; --muted:#6b5d49; --muted2:#9a8b73;
  --shadow:0 24px 60px -28px rgba(120,84,30,.35);
}
body.theme-light header.nav{background:rgba(250,247,242,.85);}
body.theme-light .overlay{background:rgba(40,30,15,.45);}

/* ---------- TOAST ---------- */
#nky-toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px);
  z-index:210; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:12px 18px;
  font-size:14px; box-shadow:var(--shadow); opacity:0; pointer-events:none;
  transition:opacity .3s var(--nky-ease), transform .3s var(--nky-ease);
  max-width:90vw;
}
#nky-toast.show{opacity:1; transform:translate(-50%,0);}
#nky-toast.ok{border-color:var(--neon);}
#nky-toast.err{border-color:#ff9b9b;}