/* =========================================================================
   NAYER | EULATE — Homepage (index.html only)
   Background stack, back to front:
   #bg → spotlight → aurora → starfield canvas → skyline → grid floor (+beams)
   → horizon glow → floating code windows → scanlines → vignette
   The perspective floor's far edge lands ~23vh above the viewport bottom,
   so skyline + horizon are anchored there (--horizon).
   ========================================================================= */

.home{ --horizon:23vh; }

/* ===== Spotlight: light cone from the top (software-hero style) ===== */
.spotlight{
  position:fixed;
  top:-10vh;
  left:50%;
  width:140vw;
  height:95vh;
  transform:translateX(-50%);
  z-index:0;
  pointer-events:none;
  background:
    conic-gradient(from 180deg at 50% 0%,
      transparent 152deg,
      rgba(0,240,255,.10) 166deg,
      rgba(162,57,255,.16) 180deg,
      rgba(255,43,214,.10) 194deg,
      transparent 208deg);
  mask-image:radial-gradient(ellipse 60% 85% at 50% 0%, black 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 60% 85% at 50% 0%, black 30%, transparent 75%);
  filter:blur(6px);
  animation:spotSway 14s ease-in-out infinite alternate;
}
@keyframes spotSway{
  from{ transform:translateX(-50%) rotate(-3deg); }
  to{ transform:translateX(-50%) rotate(3deg); }
}

/* ===== Pixel skyline on the horizon (SVG built in js/home.js) ===== */
.skyline{
  position:fixed;
  left:0; right:0;
  bottom:var(--horizon);
  height:min(20vh, 190px);
  z-index:1;
  pointer-events:none;
  opacity:.95;
}
.skyline svg{ display:block; width:100%; height:100%; }
.skyline .b{ fill:#12052a; }
.skyline .b-far{ fill:#1d0a3d; opacity:.8; }
.skyline .edge{ fill:var(--pink); opacity:.55; }
.skyline .w{ fill:var(--yellow); opacity:.55; }
.skyline .w.c{ fill:var(--cyan); opacity:.5; }
.skyline .w-blink{ animation:winBlink 4s steps(1) infinite; }
.skyline .antenna{ fill:var(--pink); animation:winBlink 1.6s steps(1) infinite; }
@keyframes winBlink{ 50%{ opacity:.08; } }

/* glow line where the floor meets the sky */
.horizon{
  position:fixed;
  left:0; right:0;
  bottom:var(--horizon);
  height:2px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--pink) 20%, var(--cyan) 50%, var(--pink) 80%, transparent);
  box-shadow:0 0 18px 4px rgba(255,43,214,.45), 0 0 60px 12px rgba(162,57,255,.25);
  opacity:.8;
}

/* ===== Light beams travelling along the grid lines ===== */
.grid-floor .beam{
  position:absolute;
  top:0;
  width:2px;
  height:22%;
  background:linear-gradient(to bottom, transparent, var(--beam, var(--cyan)));
  box-shadow:0 0 12px var(--beam, var(--cyan));
  animation:beamRun var(--dur, 3.2s) linear infinite;
  animation-delay:var(--delay, 0s);
  opacity:0;
}
@keyframes beamRun{
  0%{ transform:translateY(-100%); opacity:0; }
  10%{ opacity:1; }
  85%{ opacity:1; }
  100%{ transform:translateY(460%); opacity:0; }
}

/* ===== Floating code windows ===== */
.float-layer{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  --px:0; --py:0;
}
.float-win{
  --ry:0deg;
  position:absolute;
  font-family:'VT323', monospace;
  font-size:16px;
  line-height:1.35;
  color:#c7c7e6;
  background:rgba(12,3,28,.62);
  border:2px solid rgba(0,240,255,.35);
  box-shadow:6px 6px 0 0 rgba(255,43,214,.3), 0 20px 50px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:.82;
  translate:calc(var(--px) * var(--depth) * 34px) calc(var(--py) * var(--depth) * 22px);
  transform:perspective(900px) rotateY(var(--ry));
  animation:winFloat 7s ease-in-out infinite;
  transition:translate .4s var(--ease-out);
}
@keyframes winFloat{
  0%,100%{ transform:perspective(900px) rotateY(var(--ry)) translateY(0); }
  50%{ transform:perspective(900px) rotateY(var(--ry)) translateY(-12px); }
}
.win-bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-bottom:2px solid rgba(0,240,255,.2);
  background:rgba(9,1,26,.6);
}
.win-bar i{ width:9px; height:9px; background:var(--pink); }
.win-bar i:nth-child(2){ background:var(--yellow); }
.win-bar i:nth-child(3){ background:var(--green); }
.win-bar span{ margin-left:8px; font-size:14px; color:var(--muted); }
.win-body{ margin:0; padding:12px 14px; white-space:pre; overflow:hidden; font:inherit; }
.win-body .k{ color:var(--pink); }
.win-body .t{ color:var(--yellow); }
.win-body .f{ color:var(--cyan); }
.win-body .s{ color:var(--green); }
.win-body .n{ color:#c9a8ff; }
.win-body .p{ color:var(--green); }
.win-body .m{ color:var(--muted); }

.float-win--code{ --ry:14deg; left:2.5vw; top:15vh; width:340px; animation-delay:-1s; }
.float-win--kotlin{ --ry:18deg; left:5vw; top:55vh; width:270px; animation-delay:-3.5s; opacity:.62; }
.float-win--term{ --ry:-14deg; right:2.5vw; top:13vh; width:300px; animation-delay:-2s; }
.float-win--term .win-body{ height:178px; }
.float-win--term .cur{ display:inline-block; width:8px; height:14px; background:var(--green); vertical-align:-2px; animation:blink 1s steps(1) infinite; }
.float-win--deploy{ --ry:-18deg; right:5vw; top:54vh; width:250px; animation-delay:-5s; opacity:.7; border-color:rgba(57,255,136,.35); }

.deploy-steps{ list-style:none; margin:0; padding:10px 14px 4px; display:flex; flex-direction:column; gap:6px; }
.deploy-steps li{ display:flex; align-items:center; gap:8px; font-size:16px; }
.deploy-steps li .i{ width:14px; height:14px; }
.deploy-steps li.ok .i{ color:var(--green); }
.deploy-steps li.run .i{ color:var(--yellow); animation:pulse 1.2s ease-in-out infinite; }
.deploy-steps em{ margin-left:auto; font-style:normal; color:var(--muted); font-size:14px; }
.deploy-bar{ margin:8px 14px 14px; height:8px; border:1px solid rgba(57,255,136,.4); }
.deploy-bar span{ display:block; height:100%; background:var(--green); box-shadow:0 0 8px var(--green); animation:deployLoad 4.5s ease-in-out infinite; }
@keyframes deployLoad{
  0%{ width:0; }
  70%,100%{ width:100%; }
}

.home main{ position:relative; z-index:4; }
.home .hero{ margin-top:max(9vh, 60px); margin-bottom:6vh; }

/* synthwave sun behind the avatar — wrap auto-sizes to whatever size
   .hero-avatar's fluid clamp() resolves to, no fixed width to keep in sync */
.avatar-wrap{
  position:relative;
  width:fit-content;
  margin:0 auto 18px;
}
.sun{
  position:absolute;
  top:clamp(-90px, -9vw, -50px);
  left:50%;
  transform:translateX(-50%);
  width:clamp(112px, 13vw, 220px);
  height:clamp(112px, 13vw, 220px);
  border-radius:50%;
  background:linear-gradient(180deg, var(--yellow) 0%, var(--pink) 55%, var(--purple) 100%);
  box-shadow:0 0 60px rgba(255,43,214,.6);
  z-index:-1;
  overflow:hidden;
  animation:sunPulse 4s ease-in-out infinite;
}
.sun::before{
  content:"";
  position:absolute;
  inset:0;
  top:55%;
  background:repeating-linear-gradient(to bottom, transparent 0 8px, var(--bg-deep) 8px 12px);
  opacity:.55;
}
@keyframes sunPulse{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.15); }
}

/* ===== Tagline (typing effect) ===== */
.tagline{
  text-align:center;
  font-size:clamp(14px, 1.3vw, 24px);
  color:var(--cyan);
  min-height:1.4em;
  margin:0 0 16px;
}
.cursor{ animation:blink 1s steps(1) infinite; color:var(--pink); }
@keyframes blink{ 50%{ opacity:0; } }

/* ===== Tech marquee ===== */
.marquee{
  position:relative;
  z-index:4;
  overflow:hidden;
  padding:14px 0;
  border-top:2px solid rgba(255,43,214,.35);
  border-bottom:2px solid rgba(0,240,255,.25);
  background:rgba(9,1,26,.72);
  mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee__track{
  display:flex;
  width:max-content;
  margin:0;
  padding:0;
  list-style:none;
  animation:marquee 45s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 26px;
  font-family:'Press Start 2P', monospace;
  font-size:10px;
  letter-spacing:1px;
  color:#c7c7e6;
  white-space:nowrap;
}
.marquee__track li .i{ color:var(--pink); width:14px; height:14px; }
.marquee__track li:nth-child(3n+2) .i{ color:var(--cyan); }
.marquee__track li:nth-child(3n) .i{ color:var(--yellow); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ===== Footer ===== */
.home .site-footer{ background:rgba(9,1,26,.72); }
.site-footer a{ color:var(--cyan); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

/* ===== Light mode extras ===== */
.fx-off .skyline .w-blink, .fx-off .skyline .antenna, .fx-off .spotlight{ animation:none; }

/* ===== Gate: two doors (same component for both experiences) ===== */
.tagline{ margin-bottom:22px; }
.gate__prompt{
  margin:0 0 22px;
  font-family:'Press Start 2P', monospace;
  font-size:clamp(9px, .7vw, 12px);
  letter-spacing:2px;
  color:var(--yellow);
  text-shadow:0 0 10px rgba(255,230,109,.5);
  animation:blink 1.6s steps(1) infinite;
}
.doors{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(16px, 2vw, 28px);
  max-width:760px;
  margin:0 auto;
}
.door{
  --c:var(--cyan);
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:28px 22px 24px;
  background:rgba(23,8,48,.82);
  border:3px solid var(--text);
  box-shadow:6px 6px 0 0 var(--pink);
  color:var(--text);
  text-decoration:none;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out), background .2s ease;
}
.door:hover, .door:focus-visible{ transform:translate(3px,3px); box-shadow:3px 3px 0 0 var(--pink); background:rgba(36,18,66,.9); }
.door:active{ transform:translate(6px,6px); box-shadow:0 0 0 0 var(--pink); }
.door__kicker{ font-family:'Press Start 2P', monospace; font-size:8px; letter-spacing:1.5px; color:var(--muted); }
.door__icon{ width:64px; height:64px; }
.door__icon .i{ width:32px; height:32px; }
.door__title{ font-family:'Press Start 2P', monospace; font-size:clamp(13px, 1.2vw, 17px); line-height:1.4; text-shadow:2px 2px 0 var(--pink), -1px -1px 0 var(--cyan); }
.door__list{ list-style:none; margin:2px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
.door__list li{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:19px; color:#dfe6ff; }
.door__list .i{ color:var(--cyan); width:16px; height:16px; }
.door__go{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:6px;
  padding:9px 14px;
  font-family:'Press Start 2P', monospace;
  font-size:9px;
  color:var(--bg-deep);
  background:var(--yellow);
}
.door:hover .door__go{ background:var(--cyan); }

/* ===== Responsive ===== */
@media (max-width:1280px){
  .float-win--kotlin, .float-win--deploy{ display:none; }
  .float-win{ opacity:.5; }
}
@media (max-width:1100px){
  .float-layer{ display:none; }
}
@media (max-width:640px){
  .doors{ grid-template-columns:1fr; max-width:360px; }
  .door{ padding:22px 18px 20px; }
  .door__list{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:6px 14px; }
  .door__list li{ font-size:17px; }
  .skyline{ height:12vh; }
}
@media (max-height:600px) and (orientation:landscape){
  .sun{ display:none; }
  .hero-avatar{ width:72px; height:72px; }
}