/* =====================================================
   Surya Thalli — Personal Site
   style.css
   ===================================================== */


/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* --- Design tokens ---
   One place to change the palette. */
:root {
  --black: #0a0a0a;
  --white: #e8e8e8;
  --gold:  #c9a84c;
  --font-display: 'Cormorant Garamond', serif;
  --font-mono:    'IBM Plex Mono', monospace;
}


/* --- Base --- */
html, body {
  height: 100%;
  background: var(--black);
  color: var(--white);
}


/* --- Grain texture overlay ---
   A repeating SVG noise pattern sits on top of everything (z-index 100)
   but pointer-events:none keeps it from blocking any clicks.
   It adds the filmic, painterly texture to match the sun image. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.10;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}


/* --- Hero --- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--black);
}

/* Background image — slightly oversized so the clip-path circle
   can grow without black edges peeking at the border.
   The clip-path origin (55% 43%) maps to the orb's actual position
   inside this element's coordinate space. */
.hero-bg {
  position: absolute;
  inset: -4%;
  background-image: url('sun.jpg');
  background-size: cover;
  background-position: center center;
  animation: eclipseReveal 3.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Eclipse reveal:
   - starts as a single point of light at the orb
   - expands outward like an eye opening / eclipse uncovering
   - blur dissolves as it opens — like a camera pulling focus */
@keyframes eclipseReveal {
  0% {
    clip-path: circle(0% at 55% 43%);
    filter: blur(30px) brightness(8);
  }
  20% {
    filter: blur(14px) brightness(4);
  }
  45% {
    filter: blur(3px) brightness(1.8);
  }
  70% {
    filter: blur(0px) brightness(1.2);
  }
  100% {
    clip-path: circle(150% at 55% 43%);
    filter: blur(0px) brightness(1);
  }
}


/* --- Shared keyframes --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nameReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}


/* --- Name ---
   Drifts up gently from darkness after the orb has opened. */
.name-core {
  animation: nameReveal 1.2s ease-out 1.4s both;
  position: absolute;
  top: 1.2rem;
  left: 1.8rem;
  z-index: 10;
  pointer-events: none;
}

.name-core a {
  text-decoration: none;
  pointer-events: all;
  display: block;
}

.name-img {
  /* Width controls how large the name appears — adjust freely */
  width: clamp(180px, 22vw, 300px);
  height: auto;
  display: block;
  /* Soft shadow helps it sit into the dark/textured background */
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.7));
  transition: opacity 0.3s ease;
}

.name-core a:hover .name-img {
  opacity: 0.8;
}


/* --- SVG Ray Nav ---
   No animation on the container — lines and text animate individually. */
.ray-nav {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
}

/* Remove any browser default underline on SVG anchor text */
.ray-nav a {
  text-decoration: none;
}

.ray-link {
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* Lines: draw themselves outward from the orb.
   dasharray = longer than any line; dashoffset starts full (invisible)
   and animates to 0 (fully drawn). Staggered per ray below. */
.ray-link line {
  stroke: rgba(10, 10, 10, 0.75);
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: drawLine 0.9s ease-out both;
}

.ray-nav a:nth-child(1) line { animation-delay: 1.5s; }
.ray-nav a:nth-child(2) line { animation-delay: 1.65s; }
.ray-nav a:nth-child(3) line { animation-delay: 1.8s; }
.ray-nav a:nth-child(4) line { animation-delay: 1.95s; }
.ray-nav a:nth-child(5) line { animation-delay: 2.1s; }

/* Labels: fade in just after their line finishes drawing */
.ray-link text {
  fill: var(--black);
  font-family: var(--font-mono);
  font-weight: 300;
  user-select: none;
  animation: fadeIn 0.7s ease-out both;
}

.ray-nav a:nth-child(1) text { animation-delay: 2.1s; }
.ray-nav a:nth-child(2) text { animation-delay: 2.2s; }
.ray-nav a:nth-child(3) text { animation-delay: 2.3s; }
.ray-nav a:nth-child(4) text { animation-delay: 2.4s; }
.ray-nav a:nth-child(5) text { animation-delay: 2.5s; }

/* Hover: same simple opacity fade as the name image */
.ray-link:hover,
.ray-link:focus {
  opacity: 0.6;
}


/* --- Mobile nav ---
   On small/touch screens the radial SVG is hidden.
   A simple row of links appears at the bottom instead. */
.mobile-nav {
  display: none;
}

@media (max-width: 767px) {

  .ray-nav {
    display: none;
  }

  /* Shift the sun image right so the bright orb moves away from
     the top-left name and bottom nav, making text easier to read */
  .hero-bg {
    background-position: 32% center;
  }

  .mobile-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.8rem;
    position: fixed;
    bottom: 33vh;
    left: 0;
    right: 0;
    z-index: 20;
    padding: 0 1rem;
    animation: fadeIn 0.7s ease-out 2.1s both;
  }

  .mobile-nav a {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(10, 10, 10, 0.9);
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 0.2rem 0;
  }

  .mobile-nav a:hover,
  .mobile-nav a:focus {
    color: var(--black);
  }

}


/* --- Contact bar --- */
.contact-bar {
  position: fixed;
  bottom: 1.6rem;
  left: 2rem;
  z-index: 101;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  pointer-events: auto;
  white-space: nowrap;
  animation: fadeIn 0.7s ease-out 2.6s both;
  background: rgba(8, 7, 3, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.55rem 0.9rem;
  border-radius: 10px;
}

.contact-bar a {
  color: #c9a84c;
  text-decoration: none;
  display: flex;
  align-items: center;
  line-height: 0;
  transition: color 0.3s ease;
}

.contact-bar a svg {
  width: 24px;
  height: 24px;
}

.contact-bar a:hover,
.contact-bar a:focus {
  color: #e2c96a;
}


/* --- Reduced motion ---
   Respect the OS "reduce motion" setting: skip the eclipse reveal and the
   staggered nav build-up, and just show everything in its final state. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg     { animation: none; }
  .name-core   { animation: none; }
  .ray-link line { animation: none; stroke-dashoffset: 0; }
  .ray-link text { animation: none; opacity: 1; }
}