/* --- pages.css --- */

/* Hero — full viewport, gradient glows, grid bg overlay */
.hero{
  min-height:100svh;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 70% 20%, var(--glow-a), transparent 55%),
    radial-gradient(ellipse at 20% 80%, var(--glow-b), transparent 50%),
    radial-gradient(ellipse at 95% 85%, rgba(168,85,247,.12), transparent 50%),
    radial-gradient(ellipse at 5% 15%, rgba(34,211,238,.10), transparent 45%);
}

/* Animated gradient divider at hero bottom */
.hero::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--clr-accent),var(--clr-accent-4),var(--clr-accent-2),var(--clr-accent-3),transparent);
  opacity:.6;
  animation:hero-divider 4s ease-in-out infinite;
  background-size:200% 100%;
}

@keyframes hero-divider{
  0%,100%{background-position:0% 0}
  50%{background-position:100% 0}
}

/* Hero inner — fade-in up on load */
.hero__inner{
  position:relative;
  z-index:1;
  padding-top:4.5rem;
  width:100%;
  animation:hero-fade-in 1s ease both;
}

@keyframes hero-fade-in{
  from{opacity:0;translate:0 30px}
  to{opacity:1;translate:0 0}
}

/* Hero layout — two-column grid (text + visual) */
.hero__layout{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:clamp(2.5rem,5vw,5rem);
  align-items:center;
  justify-content:center;
  max-width:1200px;
  margin-inline:auto;
  padding:5rem 1.5rem 4rem;
}

@media (max-width:960px){
  .hero__layout{
    grid-template-columns:1fr;
    padding:2rem 1rem 3rem;
  }
}

/* Grid background — dotted pattern behind hero */
.hero__grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(var(--clr-border) 1px,transparent 1px),
    linear-gradient(90deg,var(--clr-border) 1px,transparent 1px);
  background-size:60px 60px;
  opacity:.15;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 20%,transparent 70%);
  mask-image:radial-gradient(ellipse at center,#000 20%,transparent 70%);
  pointer-events:none;
}

/* Coloured dots on grid — animated pulsing */
.hero__grid-bg::after{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 30%,var(--clr-accent) 0,transparent 3px),
    radial-gradient(circle at 80% 50%,var(--clr-accent-2) 0,transparent 2px),
    radial-gradient(circle at 40% 80%,var(--clr-accent-3) 0,transparent 3px),
    radial-gradient(circle at 65% 20%,var(--clr-accent-4) 0,transparent 2px),
    radial-gradient(circle at 15% 65%,var(--clr-accent-5) 0,transparent 2px);
  opacity:.6;
  animation:hero-dots 8s ease-in-out infinite alternate;
}

@keyframes hero-dots{
  0%{opacity:.4}
  100%{opacity:.8}
}

/* Hero tagline — mono, pulsing opacity */
.hero__tag{
  font-family:var(--font-mono);
  color:var(--clr-accent);
  font-size:.9rem;
  margin-bottom:1rem;
  animation:pulse-tag 3s ease-in-out infinite;
}

@keyframes pulse-tag{
  0%,100%{opacity:1}
  50%{opacity:.6}
}

/* Hero heading — responsive, large */
.hero__title{
  font-size:clamp(2.4rem,6vw,4.2rem);
  line-height:1.1;
  margin-bottom:1rem;
  position:relative;
}

/* Gradient accent in title — clipped text */
.hero__title-accent{
  background:linear-gradient(90deg,var(--clr-accent),var(--clr-accent-4),var(--clr-accent-2),var(--clr-accent-3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  position:relative;
}

/* Underline glow under accent text */
.hero__title-accent::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  right:0;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--clr-accent),var(--clr-accent-3),transparent);
  border-radius:3px;
  filter:blur(1px);
}

/* Typing role line — mono, reserved height */
.hero__roles{
  font-family:var(--font-mono);
  font-size:clamp(1rem,2.5vw,1.3rem);
  color:var(--clr-muted);
  margin-bottom:1.4rem;
  min-height:1.8em;
}

.hero__roles-prefix{
  color:var(--clr-accent);
}

/* Blinking cursor in role line */
.hero__cursor{
  display:inline-block;
  color:var(--clr-accent);
  animation:blink 1s steps(1) infinite;
}

@keyframes blink{
  50%{
    opacity:0;
  }
}

/* Hero description — muted, constrained */
.hero__desc{
  max-width:620px;
  color:var(--clr-muted);
  margin-bottom:2.2rem;
}

/* CTA buttons row */
.hero__actions{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

/* About section — two-column grid */
.about__grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:3rem;
  align-items:start;
}

.about__text p{
  color:var(--clr-muted);
  margin-bottom:1rem;
}

.about__text strong{
  color:var(--clr-text);
}

/* Code card — mono, bordered, used in about */
.code-card{
  font-family:var(--font-mono);
  font-size:.85rem;
  line-height:2;
  background:var(--clr-card);
  border:1px solid var(--clr-border);
  border-radius:var(--radius);
  padding:1.5rem;
}

.code-card__key{
  color:var(--clr-accent-2);
}

.code-card__str{
  color:var(--clr-accent);
}

.code-card__comment{
  color:var(--clr-muted);
}

/* CTA section — gradient border, centred */
.cta{
  background:linear-gradient(135deg, var(--glow-b), var(--glow-a));
  border:1px solid var(--clr-border);
  border-radius:16px;
  padding:3.5rem 2rem;
  text-align:center;
}

.cta__title{
  font-size:1.7rem;
  margin-bottom:.6rem;
}

.cta__text{
  color:var(--clr-muted);
  max-width:520px;
  margin:0 auto 1.8rem;
}

/* Contact page — two-column grid */
.contact__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:2rem;
  align-items:start;
}

/* Contact info list — icon + text rows */
.contact-info{
  display:grid;
  gap:1.1rem;
}

.contact-info__row{
  display:flex;
  align-items:center;
  gap:.9rem;
  color:var(--clr-muted);
  font-size:.95rem;
}

.contact-info__row a:hover{
  color:var(--clr-accent);
}

.contact-info__icon{
  font-size:1.2rem;
  width:1.6rem;
  text-align:center;
}

/* Social links — flex row of pill buttons */
.socials{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
  margin-top:1.6rem;
}

.socials a{
  font-family:var(--font-mono);
  font-size:.85rem;
  padding:.6rem 1.2rem;
  border:1px solid var(--clr-border);
  border-radius:var(--radius-sm);
  color:var(--clr-muted);
  transition:color .25s ease,border-color .25s ease;
}

.socials a:hover{
  color:var(--clr-accent);
  border-color:var(--clr-accent);
}

/* 404 — centred full-viewport */
.error404{
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

/* Floating theme toggle for error page */
.theme-toggle--floating{
  position:fixed;
  top:1.2rem;
  right:1.2rem;
  z-index:100;
  background:var(--clr-nav-bg);
  backdrop-filter:blur(12px);
}

/* 404 code — large gradient text */
.error404__code{
  font-family:var(--font-mono);
  font-size:clamp(4rem,15vw,8rem);
  font-weight:800;
  line-height:1;
  background:linear-gradient(90deg,var(--clr-accent),var(--clr-accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.error404__msg{
  font-family:var(--font-mono);
  color:var(--clr-muted);
  margin:.8rem 0 2rem;
}

/* Stack grids on smaller screens */
@media (max-width:860px){
  .about__grid,
  .contact__grid{
    grid-template-columns:1fr;
  }
}