/* =========================================================================
   NAYER | EULATE — design tokens, background system & shared components
   Used by every page (index.html, landing.html)
   ========================================================================= */

@property --angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

:root{
  --bg-deep:#09011a;
  --bg-mid:#170830;
  --bg-card:#1c0d38;
  --cyan:#00f0ff;
  --pink:#ff2bd6;
  --purple:#a239ff;
  --yellow:#ffe66d;
  --green:#39ff88;
  --text:#eaf6ff;
  --muted:#a9a9d4;
  --card-bg:rgba(12,3,28,.68);
  --glass-border:rgba(234,246,255,.08);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}

img{ max-width:100%; height:auto; }

html{ scroll-behavior:smooth; }

html,body{
  margin:0;
  padding:0;
  min-height:100%;
  background:var(--bg-deep);
  color:var(--text);
  font-family:'VT323', monospace;
  font-size:20px;
  overflow-x:hidden;
}

body{ position:relative; z-index:4; cursor:default; }

a{ color:inherit; }

::selection{ background:var(--pink); color:var(--bg-deep); }

::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:var(--bg-deep); }
::-webkit-scrollbar-thumb{ background:var(--pink); border:2px solid var(--bg-deep); }

:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

/* Cross-document view transitions between index.html <-> landing.html */
@view-transition{ navigation:auto; }
::view-transition-old(root){ animation-duration:.5s; }
::view-transition-new(root){ animation-duration:.5s; }

/* ================= Background layers ================= */
#bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, #2a0f52 0%, var(--bg-mid) 45%, var(--bg-deep) 100%);
}

.aurora{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  filter:blur(70px) saturate(1.3);
  mix-blend-mode:screen;
  opacity:.55;
}

#bg-canvas{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  width:100%;
  height:100%;
}
.aurora span{
  position:absolute;
  width:42vw;
  height:42vw;
  border-radius:50%;
  animation:auroraDrift 22s var(--ease-out) infinite alternate;
}
.aurora span:nth-child(1){ background:var(--cyan); top:-10%; left:-8%; animation-delay:0s; }
.aurora span:nth-child(2){ background:var(--pink); top:10%; right:-12%; animation-delay:-7s; }
.aurora span:nth-child(3){ background:var(--purple); bottom:-18%; left:20%; animation-delay:-14s; }
@keyframes auroraDrift{
  0%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(6vw,4vh) scale(1.15); }
  100%{ transform:translate(-4vw,-3vh) scale(.95); }
}

.grid-floor{
  position:fixed;
  left:0; right:0; bottom:0;
  height:50vh;
  z-index:1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,43,214,.4) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0,240,255,.32) 2px, transparent 2px);
  background-size:56px 56px;
  transform:perspective(300px) rotateX(65deg);
  transform-origin:bottom;
  animation:floorMove 2.4s linear infinite;
  mask-image:linear-gradient(to top, black 35%, transparent 100%);
  -webkit-mask-image:linear-gradient(to top, black 35%, transparent 100%);
  opacity:.65;
}
@keyframes floorMove{
  from{ background-position:0 0, 0 0; }
  to{ background-position:0 56px, 0 0; }
}

.scanlines{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,.12) 1px, rgba(0,0,0,0) 3px);
  mix-blend-mode:multiply;
}

.vignette{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  box-shadow:inset 0 0 20vw 4vw rgba(0,0,0,.65);
}

.cursor-glow{
  position:fixed;
  z-index:5;
  width:420px;
  height:420px;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(0,240,255,.08) 0%, rgba(255,43,214,.05) 45%, transparent 70%);
  transition:opacity .3s ease;
  opacity:0;
}

/* ================= Icons (sprite in js/icons.js) ================= */
.i{
  width:1.15em;
  height:1.15em;
  flex-shrink:0;
  vertical-align:-.2em;
  overflow:visible;
}
.btn .i{ width:1.4em; height:1.4em; margin:-.2em 0; }

/* Framed icon tile used on cards */
.icon-tile{
  --accent-c:var(--accent, var(--cyan));
  position:relative;
  display:inline-grid;
  place-items:center;
  width:52px;
  height:52px;
  color:var(--accent-c);
  background:color-mix(in srgb, var(--accent-c) 10%, var(--bg-deep));
  border:2px solid var(--accent-c);
  box-shadow:0 0 14px color-mix(in srgb, var(--accent-c) 35%, transparent), inset 0 0 12px color-mix(in srgb, var(--accent-c) 18%, transparent);
  flex-shrink:0;
}
.icon-tile .i{ width:26px; height:26px; filter:drop-shadow(0 0 4px color-mix(in srgb, var(--accent-c) 70%, transparent)); }
/* pixel corner notches */
.icon-tile::before, .icon-tile::after{
  content:"";
  position:absolute;
  width:6px; height:6px;
  background:var(--bg-deep);
}
.icon-tile::before{ top:-2px; left:-2px; }
.icon-tile::after{ bottom:-2px; right:-2px; }
.icon-tile--sm{ width:40px; height:40px; }
.icon-tile--sm .i{ width:20px; height:20px; }

/* ================= Typography ================= */
.glitch{
  font-family:'Press Start 2P', monospace;
  font-size:clamp(13px, 4vw, 15px);
  line-height:1.6;
  text-align:center;
  color:var(--text);
  margin:10px 0 14px;
  position:relative;
  text-shadow:2px 2px 0 var(--pink), -2px -2px 0 var(--cyan);
}
.glitch::before,
.glitch::after{
  content:attr(data-text);
  position:absolute;
  left:0; right:0; top:0;
  opacity:.8;
}
.glitch::before{
  color:var(--cyan);
  animation:glitchTop 3.5s infinite linear alternate-reverse;
  clip-path:inset(0 0 60% 0);
}
.glitch::after{
  color:var(--pink);
  animation:glitchBottom 2.8s infinite linear alternate-reverse;
  clip-path:inset(60% 0 0 0);
}
.glitch:hover::before{ animation-duration:.5s; }
.glitch:hover::after{ animation-duration:.4s; }
@keyframes glitchTop{
  0%{ transform:translate(0,0); } 20%{ transform:translate(-2px,-1px); }
  40%{ transform:translate(2px,1px); } 60%{ transform:translate(-1px,1px); }
  80%{ transform:translate(1px,-1px); } 100%{ transform:translate(0,0); }
}
@keyframes glitchBottom{
  0%{ transform:translate(0,0); } 20%{ transform:translate(2px,1px); }
  40%{ transform:translate(-2px,-1px); } 60%{ transform:translate(1px,-1px); }
  80%{ transform:translate(-1px,1px); } 100%{ transform:translate(0,0); }
}

/* ================= Badges ================= */
.badges{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.badge{
  font-family:'Press Start 2P', monospace;
  font-size:clamp(8px, 0.55vw, 12px);
  padding:clamp(6px, 0.5vw, 9px) clamp(8px, 0.6vw, 12px);
  border:2px solid;
  background:var(--bg-deep);
  letter-spacing:1px;
  transition:transform .2s var(--ease-out);
}
.badge:hover{ transform:translateY(-2px); }
.badge-cyan{ color:var(--cyan); border-color:var(--cyan); box-shadow:0 0 8px rgba(0,240,255,.5); }
.badge-pink{ color:var(--pink); border-color:var(--pink); box-shadow:0 0 8px rgba(255,43,214,.5); }
.badge-yellow{ color:var(--yellow); border-color:var(--yellow); box-shadow:0 0 8px rgba(255,230,109,.5); }

/* ================= Shared pixel button ================= */
.btn{
  --mx:50%; --my:50%;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:clamp(11px, 1.2vw, 16px) clamp(14px, 1.7vw, 20px);
  font-family:'Press Start 2P', monospace;
  font-size:clamp(9px, 0.75vw, 13px);
  text-decoration:none;
  border:3px solid var(--text);
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
  will-change:transform;
}
.btn-solid{ background:var(--pink); color:var(--bg-deep); border-color:var(--pink); box-shadow:4px 4px 0 0 var(--cyan); }
.btn-outline{ background:transparent; color:var(--text); box-shadow:4px 4px 0 0 var(--purple); }
.btn:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 0 var(--cyan); }
.btn-outline:hover{ box-shadow:2px 2px 0 0 var(--purple); }
.btn:active{ transform:translate(4px,4px); box-shadow:0 0 0 0; }
.btn-big{ font-size:clamp(11px, 0.85vw, 15px); padding:clamp(14px, 1.6vw, 20px) clamp(18px, 2.2vw, 28px); }

@keyframes pixelRipple{
  to{ transform:scale(9); opacity:0; }
}

/* ================= Hero shell (shared) ================= */
.hero{
  position:relative;
  z-index:4;
  max-width:clamp(320px, 66vw, 1200px);
  margin:9vh auto 8vh;
  padding:0 24px;
  text-align:center;
}
.hero .glitch{ font-size:clamp(14px, 1.7vw, 30px); }
.hero-sub{
  font-size:clamp(16px, 1.3vw, 26px);
  color:var(--cyan);
  max-width:52ch;
  margin:0 auto 28px;
  text-wrap:balance;
}
.hero-cta{ display:flex; justify-content:center; gap:clamp(10px, 1vw, 20px); flex-wrap:wrap; }

/* ================= Avatar (shared) ================= */
.hero-avatar{
  width:clamp(84px, 9.5vw, 170px);
  height:clamp(84px, 9.5vw, 170px);
  margin:0 auto 18px;
}
.avatar-frame{
  position:relative;
  background:var(--bg-deep);
  border:4px solid var(--yellow);
  box-shadow:0 0 0 4px var(--bg-deep), 0 0 0 8px var(--cyan), 0 0 26px rgba(0,240,255,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  image-rendering:pixelated;
  animation:floaty 3s ease-in-out infinite;
}
.avatar-frame img{ width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
@keyframes floaty{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
.status-dot{
  position:absolute;
  bottom:-4px;
  right:-4px;
  width:18px;
  height:18px;
  background:var(--green);
  border:3px solid var(--bg-deep);
  box-shadow:0 0 10px var(--green);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.6; transform:scale(1.15); }
}

/* ================= Shared footer ================= */
.site-footer{ position:relative; z-index:4; text-align:center; padding:32px 24px 48px; font-size:13px; color:var(--muted); letter-spacing:.5px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition:none !important; }
}