/* Shared effects for every Skelxternal page. Everything animates transform/opacity only, so it stays smooth. */
@property --a { syntax:"<angle>"; initial-value:0deg; inherits:false; }
@property --h { syntax:"<angle>"; initial-value:0deg; inherits:true; }

/* smooth fade between pages (Chrome/Edge; other browsers just switch pages normally) */
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:fx-out .3s ease both; }
::view-transition-new(root) { animation:fx-in .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fx-out { to { opacity:0; transform:scale(.985); } }
@keyframes fx-in { from { opacity:0; transform:scale(1.015); } }

/* scrollbar + selection */
html { scrollbar-color:#2a2a2a #000; scrollbar-width:thin; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:#000; }
::-webkit-scrollbar-thumb { background:#2a2a2a; border-radius:8px; }
::-webkit-scrollbar-thumb:hover { background:#444; }
::selection { background:#fff; color:#000; }

/* film grain */
body::after { content:""; position:fixed; inset:-50%; pointer-events:none; z-index:100; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:fx-grain 1s steps(6) infinite; }
@keyframes fx-grain { 0%{transform:translate(0,0)} 20%{transform:translate(-5%,3%)} 40%{transform:translate(4%,-6%)} 60%{transform:translate(-3%,5%)} 80%{transform:translate(6%,2%)} }

/* scroll progress bar */
#fx-progress { position:fixed; top:0; left:0; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0); z-index:90; pointer-events:none;
  background:linear-gradient(90deg, #fff, #9ec5ff); box-shadow:0 0 12px #9ec5ff; }

/* glowing dot cursor: the real cursor is the dot, so there's no lag */
@media (pointer: fine) {
  html, body { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='white' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='12' fill='url(%23g)' opacity='.55'/%3E%3Ccircle cx='12' cy='12' r='3.5' fill='white'/%3E%3C/svg%3E") 12 12, auto; }
  a, button, select, label, summary, [role=button], .card, .fx-mark { cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%239ec5ff' stop-opacity='.9'/%3E%3Cstop offset='1' stop-color='%239ec5ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='14' cy='14' r='14' fill='url(%23g)' opacity='.7'/%3E%3Ccircle cx='14' cy='14' r='5' fill='white'/%3E%3C/svg%3E") 14 14, pointer; }
  input, textarea { cursor:text; }
}
/* sparkles left behind by the cursor */
.fx-spark { position:fixed; left:0; top:0; margin:-.5em 0 0 -.5em; transform:translate(var(--x), var(--y)); pointer-events:none; z-index:299; color:#fff; font-size:var(--s, 10px); line-height:1; text-shadow:0 0 6px #9ec5ff;
  animation:fx-spark .8s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes fx-spark { from { opacity:1; } to { opacity:0; transform:translate(var(--x), var(--y)) translate(var(--dx), var(--dy)) scale(.2) rotate(var(--r)); } }

/* logo in the top bar: the file is a black $ with a white edge, so flip it to white for the dark bar */
.logo-mark { height:30px; width:auto; flex:none; filter:invert(1) drop-shadow(0 0 6px #ffffff40); transition:transform .4s cubic-bezier(.3,1.6,.5,1), filter .3s; }
.logo:hover .logo-mark { transform:rotate(-10deg) scale(1.12); filter:invert(1) drop-shadow(0 0 10px #9ec5ffaa); }

/* music mute button (pages with background music) */
#mute { position:fixed; left:20px; bottom:20px; z-index:60; width:44px; height:44px; border-radius:50%; border:1px solid #333; background:#000a; backdrop-filter:blur(10px);
  color:#fff; font-size:18px; transition:opacity .6s, transform .2s, border-color .2s; }
#mute:hover { transform:scale(1.08); border-color:#777; }

/* buttons: light sweep + magnetic pull (pull is set from fx.js) */
.btn { position:relative; overflow:hidden; isolation:isolate; }
.btn::before { content:""; position:absolute; top:0; left:0; width:60%; height:100%; z-index:-1; pointer-events:none; transform:translateX(-180%) skewX(-20deg);
  background:linear-gradient(90deg, transparent, #fff5, transparent); transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.btn.solid::before { background:linear-gradient(90deg, transparent, #0003, transparent); }
.btn:hover::before { transform:translateX(260%) skewX(-20deg); }
.btn.magnet { transition:transform .15s ease-out, border-color .25s, box-shadow .25s; }

/* cards: spotlight, spinning light border, glossy sweep, 3D tilt (tilt set from fx.js) */
.card { position:relative; overflow:hidden; isolation:isolate; --mx:50%; --my:50%;
  transition:border-color .3s, box-shadow .4s, transform .6s cubic-bezier(.2,1.2,.3,1); }
.card.tilting { transition:border-color .3s, box-shadow .4s, transform .12s ease-out; }
.card::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .3s; z-index:-1;
  background:radial-gradient(340px circle at var(--mx) var(--my), #ffffff18, transparent 45%); }
.card::after { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .4s;
  background:conic-gradient(from var(--a), transparent 0 60%, #fff 75%, #9ec5ff 85%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:fx-rot 2.5s linear infinite paused; }
.card:hover::before, .card:hover::after { opacity:1; }
.card:hover::after { animation-play-state:running; }
.card:hover { box-shadow:0 24px 60px -24px #000, 0 0 40px -12px #ffffff26; }
@keyframes fx-rot { to { --a:360deg; } }
.card > * { position:relative; }
.card > .sweep { position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit; }
.card > .sweep::before { content:""; position:absolute; top:0; left:0; width:40%; height:100%; transform:translateX(-150%) skewX(-20deg);
  background:linear-gradient(90deg, transparent, #ffffff14, transparent); transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.card:hover > .sweep::before { transform:translateX(330%) skewX(-20deg); }

/* cards flip up into place as you scroll */
.js .card.reveal { transform:perspective(900px) translateY(50px) rotateX(25deg) scale(.94);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,1.2,.3,1), filter .9s, border-color .3s, box-shadow .4s; transition-delay:var(--d, 0s); }
.js .card.reveal.in { transform:none; }
.js .card.reveal.in.done { transition:border-color .3s, box-shadow .4s, transform .6s cubic-bezier(.2,1.2,.3,1); }
.js .card.reveal.in.done.tilting { transition:border-color .3s, box-shadow .4s, transform .12s ease-out; }

/* section headings wipe up into view */
.js .reveal h2, .js h2.reveal { clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) .1s, opacity .9s, transform .9s, filter .9s; }
.js .reveal.in h2, .js h2.reveal.in { clip-path:inset(-30% -10% -30% -10%); }

/* giant footer wordmark that lights up under the mouse */
.fx-mark { font:clamp(64px, 19.5vw, 300px)/.8 "Bebas Neue", Impact, sans-serif; letter-spacing:.02em; text-align:center; white-space:nowrap; overflow:hidden;
  user-select:none; padding-top:24px; --mx:50%; --my:50%;
  background:radial-gradient(500px circle at var(--mx) var(--my), #ffffff55, transparent 45%), linear-gradient(180deg, #1d1d1d 0%, #070707 90%);
  -webkit-background-clip:text; background-clip:text; color:transparent; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation:none; }
  .js .reveal h2, .js h2.reveal { clip-path:none; }
  .js .card.reveal { transform:none; }
}