/* =========================================================
   BASE — design tokens, reset, page-wide layers
   Change colours / fonts / spacing here and they update everywhere.
   ========================================================= */
:root{
  --bg:#0A0A0A; --card:#12100e; --card2:#17130f;
  --line:rgba(255,241,220,0.09); --line2:rgba(255,241,220,0.18);
  --grey:#8C8A86; --grey2:#BDB8B0; --white:#FFFBFA; --cream:#FFF1DC;
  --orange:#FF9920; --yolk:#FFD199; --deep:#B8690A; --glow:rgba(255,153,32,0.35);
  --violet:#5603ad; --violet-soft:rgba(86,3,173,0.45);
  --display:'Space Grotesk',sans-serif; --body:'Inter',sans-serif; --mono:'JetBrains Mono',monospace;
  --pad:clamp(20px,4vw,48px); --section:clamp(56px,10vh,132px); --cut:22px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--bg);-webkit-text-size-adjust:100%;transition:background-color .6s ease;}
body{position:relative;background:var(--bg);transition:background-color .6s ease;color:var(--white);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
img,video,canvas,svg{display:block;}
button,input,select,textarea{font:inherit;color:inherit;}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-0.03em;color:var(--white);line-height:1;}
p{color:var(--grey2);}
::selection{background:var(--orange);color:#0A0A0A;}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;}

.yk-wrap{max-width:1320px;margin:0 auto;padding:0 var(--pad);}
.yk-content{position:relative;}
.yk-accent{color:var(--orange) !important;}

/* custom cursor replaces the system one on mouse devices (class set by JS) */
.yk-fine,.yk-fine *{cursor:none;}
.yk-fine input,.yk-fine textarea{cursor:text;}
.yk-fine select{cursor:pointer;}

/* ---------- fixed background layers ---------- */
#yk-bg{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:0;pointer-events:none;}
.yk-aura,.yk-halo{position:fixed;left:0;top:0;z-index:0;pointer-events:none;border-radius:50%;will-change:transform,opacity;}
.yk-aura{width:1000px;height:1000px;background:radial-gradient(circle,rgba(86,3,173,0.24) 0,rgba(86,3,173,0.08) 40%,rgba(86,3,173,0) 70%);}
.yk-halo{width:200px;height:200px;background:radial-gradient(circle,rgba(255,153,32,0.14) 0,rgba(255,153,32,0.04) 45%,rgba(255,153,32,0) 70%);}

/* the work section is on screen: everything behind the page goes fully black (class set by assets/js/ui/reveal.js) */
#yk-bg,.yk-aura,.yk-halo{transition:opacity .6s ease;}
.yk-dark,.yk-dark body{background-color:#000;}
.yk-dark #yk-bg,.yk-dark .yk-aura,.yk-dark .yk-halo{opacity:0 !important;}

/* ---------- cursor ---------- */
.yk-cursor,.yk-dot{position:fixed;top:0;left:0;z-index:1002;pointer-events:none;display:none;will-change:transform;transform:translate3d(-100px,-100px,0);}
.yk-fine .yk-cursor,.yk-fine .yk-dot{display:block;}
.yk-cursor{width:0;height:0;}
.yk-cursor i{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border:1px solid var(--orange);border-radius:50%;transition:transform .25s ease,border-radius .3s,background .25s,opacity .2s;}
.yk-cursor span{position:absolute;left:24px;top:-26px;font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--orange);white-space:nowrap;}
.yk-cursor.yk-hot i{transform:scale(1.9) rotate(45deg);border-radius:6px;background:rgba(255,153,32,0.12);}
.yk-cursor.yk-hide i,.yk-cursor.yk-hide span{opacity:0;}
.yk-dot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:var(--cream);border-radius:50%;mix-blend-mode:difference;}

/* ---------- scroll reveal (only when JS runs) ---------- */
.yk-js .yk-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
.yk-js .yk-reveal.yk-in-view{opacity:1;transform:none;}

/* ---------- shared keyframes ---------- */
@keyframes ykMorph{0%,100%{border-radius:42% 58% 63% 37%/41% 44% 56% 59%}33%{border-radius:63% 37% 38% 62%/55% 61% 39% 45%}66%{border-radius:36% 64% 52% 48%/63% 36% 64% 37%}}
@keyframes ykSpin{to{transform:rotate(360deg)}}
@keyframes ykSpinR{to{transform:rotate(-360deg)}}
@keyframes ykPulse{50%{opacity:.25;transform:rotate(45deg) scale(.6)}}

/* pause decorative CSS animations in sections that are off screen (class set by JS) */
.yk-paused *,.yk-paused *::before,.yk-paused *::after{animation-play-state:paused !important;}

/* visually hidden, still in the page (spam honeypot) */
.yk-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}