/* Minimal cyxup landing styles */
/* Reset */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; min-height:100vh; color:#fff; background:#000; overflow-x:hidden; text-rendering:optimizeLegibility; }
/* Legacy fade classes (still supported) */
body.preload * { transition:none !important; }
body.preload { opacity:0; }
body.faded-in { animation: bodyFade .9s cubic-bezier(.4,.18,.2,1) forwards; }
@keyframes bodyFade { 0%{opacity:0; filter:blur(14px) saturate(130%);} 55%{filter:blur(3px) saturate(115%);} 100%{opacity:1; filter:blur(0) saturate(100%);} }

/* New simpler fade approach */
body.fade-init { opacity:0; filter:blur(10px); transition: opacity .7s ease, filter .85s ease; }
body.fade-show { opacity:1; filter:blur(0); }
/* No long forced animation: if JS fails entirely, we can opt to show after ~400ms via inline script. */
@media (prefers-reduced-motion: reduce) {
  body.fade-init { filter:none; }
  body.fade-show { transition:none; }
}

/* Animated gradient background (fixed) */
body::before, body::after {
  content:""; position:fixed; inset:0; z-index:-2; background:radial-gradient(circle at 20% 30%,rgba(255,0,128,.45),transparent 60%),radial-gradient(circle at 80% 70%,rgba(0,200,255,.35),transparent 65%),radial-gradient(circle at 60% 20%,rgba(160,100,255,.28),transparent 60%),linear-gradient(125deg,#05060a,#090c17,#06040f);
  filter:blur(34px) saturate(120%);
  animation:bgFlow 36s linear infinite;
  will-change: transform;
}
body::after { z-index:-3; filter:blur(80px) saturate(140%) brightness(.9); opacity:.6; animation-direction:reverse; }
@keyframes bgFlow { 0%{transform:translate3d(0,0,0);} 50%{transform:translate3d(0,-2%,0) scale(1.01);} 100%{transform:translate3d(0,0,0);} }

/* Hero */
.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:2rem 1.25rem; position:relative; }
.logo-word { font-size: clamp(4.2rem,13vw,13rem); font-weight:900; font-style:italic; letter-spacing:-.035em; line-height:.85; position:relative; display:inline-block; padding:.2em .15em .25em; background:linear-gradient(90deg,#ff0080,#ff8c00,#ffe600,#3ddc97,#00c6ff,#7f00ff,#ff0080); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: shine 10s ease-in-out infinite alternate; text-shadow:0 10px 28px rgba(0,0,0,.6); overflow:visible; }
@keyframes shine { 0%{background-position:0% 50%;} 100%{background-position:100% 50%;} }

/* Logo click effects: glitch + pulse (lightweight) */
@keyframes glitchShift {
  0%   { transform: translate3d(0,0,0) skewX(0deg); text-shadow: 0 10px 28px rgba(0,0,0,.6), -1px 0 rgba(0,255,255,.35), 1px 0 rgba(255,0,120,.35); }
  10%  { transform: translate3d(-1px,0,0) skewX(1deg); text-shadow: 0 10px 28px rgba(0,0,0,.6), -2px 0 rgba(0,255,255,.35), 2px 0 rgba(255,0,120,.35); }
  20%  { transform: translate3d(1px,0,0) skewX(-1deg); text-shadow: 0 10px 28px rgba(0,0,0,.6), -1px 0 rgba(0,255,255,.35), 1px 0 rgba(255,0,120,.35); }
  30%  { transform: translate3d(0,0,0) skewX(2deg); }
  40%  { transform: translate3d(-2px,0,0) skewX(-2deg); }
  50%  { transform: translate3d(2px,0,0) skewX(1deg); }
  60%  { transform: translate3d(-1px,0,0) skewX(-1deg); }
  70%  { transform: translate3d(1px,0,0) skewX(1.5deg); }
  80%  { transform: translate3d(0,0,0) skewX(0deg); }
  100% { transform: translate3d(0,0,0) skewX(0deg); text-shadow: 0 10px 28px rgba(0,0,0,.6); }
}
@keyframes pulseBeat {
  0%   { transform: scale(1); filter: none; }
  50%  { transform: scale(1.02); text-shadow: 0 14px 36px rgba(0,0,0,.65); }
  100% { transform: scale(1); }
}
.logo-word.logo-click {
  /* keep shine and add transient effects */
  animation: shine 10s ease-in-out infinite alternate, glitchShift .42s steps(10) 1, pulseBeat .62s ease-out 1;
}
@media (prefers-reduced-motion: reduce) {
  .logo-word.logo-click { animation: shine .001ms 1; }
}

/* Chromatic fringe on hover/focus (lightweight) */
.logo-word { --fringe: 0px; transition: text-shadow .22s ease; }
.logo-word:hover, .logo-word:focus-visible { --fringe: 1.2px; }
.logo-word { text-shadow:
  0 10px 28px rgba(0,0,0,.6),
  calc(var(--fringe) * -1) 0 0 rgba(0,255,255,.33),
  var(--fringe) 0 0 rgba(255,0,120,.33);
}

/* Sparkle sweep on hover/focus */
.logo-word::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Narrow bright band centered in the background, moved via background-position */
  background: linear-gradient(90deg, transparent 46%, rgba(255,255,255,.9) 50%, transparent 54%);
  background-size: 200% 100%;
  background-position: -50% 0;
  mix-blend-mode: screen;
  opacity: 0;
}
@keyframes sparkleSweep { 0%{opacity:0; background-position:-50% 0;} 12%{opacity:.9;} 60%{opacity:.55;} 100%{opacity:0; background-position:150% 0;} }
.logo-word:hover::after, .logo-word:focus-visible::after { animation: sparkleSweep .9s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .logo-word { transition: none; }
  .logo-word::after { display:none; }
}

/* Disable extras in perf-low modes */
html.perf-low .logo-word::after { display:none; }
html.perf-low-hard .logo-word { text-shadow: 0 10px 28px rgba(0,0,0,.6); }

.scroll-cue { position:absolute; bottom:28px; left:50%; transform:translateX(-50%); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.55); display:flex; flex-direction:column; align-items:center; gap:6px; font-weight:500; }
.scroll-cue span { width:2px; height:42px; background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent); border-radius:2px; position:relative; overflow:hidden; }
.scroll-cue span::before { content:""; position:absolute; top:-10px; left:0; right:0; height:14px; background:#fff; border-radius:2px; animation: scrollBar 2.6s cubic-bezier(.65,.05,.36,1) infinite; }
@keyframes scrollBar { 0%{transform:translateY(0); opacity:0;} 15%{opacity:1;} 70%{transform:translateY(34px); opacity:1;} 100%{transform:translateY(34px); opacity:0;} }

/* Social section */
.socials { padding:5rem 1rem 6rem; max-width:900px; margin:0 auto; }
.socials h2 { margin:0 0 2.5rem; font-size: clamp(1.8rem,4vw,3rem); text-align:center; font-weight:800; letter-spacing:-.02em; background:linear-gradient(90deg,#fff,#ddd); -webkit-background-clip:text; background-clip:text; color:transparent; }
.social-grid { list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); }
.social-grid a { --h: 230; --s:80%; --l:60%; display:flex; align-items:center; gap:.55rem; justify-content:center; position:relative; text-decoration:none; font-weight:600; font-size:.95rem; letter-spacing:.03em; padding:.9rem .85rem; border-radius:18px; background:linear-gradient(135deg,hsla(var(--h),var(--s),var(--l),.18),hsla(var(--h),var(--s),calc(var(--l) - 18%),.28)); backdrop-filter: blur(6px) saturate(160%); color:#fff; border:1px solid hsla(var(--h),var(--s),var(--l),.35); box-shadow:0 3px 14px -5px hsla(var(--h),var(--s),var(--l),.55),inset 0 0 0 1px rgba(255,255,255,.05); overflow:hidden; transition:.5s cubic-bezier(.4,.25,.3,1); }
.social-grid a svg { flex:0 0 auto; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.social-grid a::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),hsla(var(--h),var(--s),var(--l),.75),transparent 55%); mix-blend-mode:screen; opacity:0; transition:inherit; }
.social-grid a:hover, .social-grid a:focus-visible { transform:translateY(-5px); box-shadow:0 8px 28px -10px hsla(var(--h),var(--s),var(--l),.75); }
.social-grid a:hover::before, .social-grid a:focus-visible::before { opacity:1; }
.social-grid a:active { transform:translateY(-2px); }
.social-grid a[data-platform="github"] { --h:260; }
.social-grid a[data-platform="discord"] { --h:250; }
.social-grid a[data-platform="email"] { --h:35; }

/* Footer */
.site-footer { padding:1.2rem 1rem 2.2rem; text-align:center; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75; display:flex; justify-content:center; }
.site-footer small { display:inline-flex; gap:.5rem; align-items:center; font-weight:600; background:rgba(255,255,255,.06); padding:.6rem .9rem; border-radius:999px; border:1px solid rgba(255,255,255,.1); backdrop-filter: blur(6px) saturate(140%); box-shadow:0 4px 18px -6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05); }

/* Interaction spotlight for socials */
/* Remove stray invalid rule (previous accidental) */

/* Utility */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; }
}

/* Performance degradation classes */
html.perf-low body::before, html.perf-low body::after { animation:none; filter:blur(30px) saturate(110%); }
html.perf-low .logo-word { animation:none; background-size:100% 100%; }
html.perf-low-hard body::before, html.perf-low-hard body::after { display:none; }
html.perf-low-hard .logo-word { text-shadow:none; }