/* ========== FONT DECLARATIONS ========== */
@font-face {
  font-family: "LatoRegular";
  src: url("fonts/Lato/Lato-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "LatoItalic";
  src: url("fonts/Lato/Lato-Italic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "LatoLight";
  src: url("fonts/Lato/Lato-Light.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "LatoLightItalic";
  src: url("fonts/Lato/Lato-LightItalic.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "LatoBoldItalic";
  src: url("fonts/Lato/Lato-BoldItalic.ttf") format("truetype");
  font-display: swap;
}

/* ========== CSS VARIABLES ========== */
:root {
  /* Typography scale - REM-based for consistent scaling */
  --landing-text-size: 3rem;
  --h1-size: 2.5rem;
  --h2-size: 1.75rem;
  --h3-size: 1.25rem;
  --body-size: 1rem;

  /* Colors */
  --bg-color: #020931;
  --text-color-primary: white;
  --text-color-secondary: rgb(255, 255, 230);
  --line-color: rgb(182, 216, 255);
  --star-glow-primary: #faf394;
  --star-glow-secondary: #ffffff;

  /* Text readability */
  --category-text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.9);

  /* Animation durations */
  --loading-star-animation-duration: 1.5s;
}

/* ========== GLOBAL RESET ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  width: 100vw;
  overflow-x: hidden; /* Prevent horizontal scroll */
  overflow-y: auto;
}

/* ========== BACKGROUND ========== */
.starfield {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for mobile */
  background-color: var(--bg-color);
  z-index: -1;
  overflow: hidden;
}

/* ========== MAIN LAYOUT ========== */
.main-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
  /* gap removed to handle spacing via padding/separators */
}

.section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding-bottom: 4rem; /* Space for separator */
}

/* ========== HERO SECTION ========== */
.hero-section {
  min-height: 100vh;
  min-height: 100dvh;
  justify-content: center;
  text-align: center;
  padding-bottom: 0; /* Hero handles its own separator placement */
}

.hero-content {
  margin-bottom: 2rem;
}

.greeting {
  font-size: var(--landing-text-size);
  color: var(--text-color-primary);
  font-family: "LatoLight", sans-serif;
  margin-bottom: 1rem;
  min-height: 1.5em;
}

.landing-text {
  font-size: var(--landing-text-size);
  color: var(--text-color-primary) !important;
  font-family: "LatoItalic", italic, sans-serif;
}

/* ========== ABOUT SECTION ========== */
.about-section {
  padding: 4rem 0;
}

.profile-card {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
  width: 100%;
}

.pfp {
  display: flex;
  justify-content: center;
  width: 100%;
  /* max-width: 300px; Removed to allow flex layout to work properly */
}

.pfp-image-container img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.1);
  display: block; /* Removes bottom space in some browsers */
}

.intro-content {
  width: 100%;
  text-align: center;
  color: var(--text-color-primary);
}

.intro-content h2 {
  font-size: var(--h1-size);
  font-family: "LatoItalic", bold, italic, sans-serif;
  margin-bottom: 1.5rem;
}

.intro-content p {
  font-size: var(--body-size);
  font-family: "LatoLightItalic", sans-serif;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.intro-content a {
  color: var(--text-color-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--line-color);
  transition:
    color 0.3s ease,
    border-color 0.3s ease;
}

.intro-content a:hover {
  color: white;
  border-color: white;
}

/* ========== CREATIONS & PLAYGROUND GRID ========== */
.creations-section,
.playground-section {
  padding: 4rem 0;
}

.section-header {
  margin-bottom: 3rem;
  text-align: center;
}

.section-header h2 {
  font-size: var(--h2-size);
  color: var(--text-color-primary);
  font-family: "LatoBoldItalic", bold, italic, sans-serif;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 3rem;
}

.grid-item {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: var(--text-color-primary);
  text-decoration: none;
  text-align: center;
  font-size: var(--h3-size);
  font-family: "LatoRegular", sans-serif;
  text-shadow: var(--category-text-shadow);
  cursor: pointer;
  transition:
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
  min-height: 160px;
  animation: float3D 10s ease-in-out infinite;
}

/* Position text above the background */
.grid-item span {
  position: relative;
  z-index: 2;
}

.grid-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  animation: panBackground 20s ease-in-out infinite alternate;
}

/* Stagger floating delays to look organic */
.grid-item:nth-child(1) { animation-delay: 0s; }
.grid-item:nth-child(1)::before { animation-delay: 0s; }
.grid-item:nth-child(2) { animation-delay: -1.5s; }
.grid-item:nth-child(2)::before { animation-delay: -3s; }
.grid-item:nth-child(3) { animation-delay: -3s; }
.grid-item:nth-child(3)::before { animation-delay: -6s; }
.grid-item:nth-child(4) { animation-delay: -4.5s; }
.grid-item:nth-child(4)::before { animation-delay: -9s; }
.grid-item:nth-child(5) { animation-delay: -6s; }
.grid-item:nth-child(5)::before { animation-delay: -12s; }
.grid-item:nth-child(6) { animation-delay: -7.5s; }
.grid-item:nth-child(6)::before { animation-delay: -15s; }

.grid-item:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--line-color);
  box-shadow: 0 12px 30px rgba(182, 216, 255, 0.2);
  transform: perspective(800px) scale(1.03) translateY(-8px) rotateX(1deg) rotateY(1deg);
  animation-play-state: paused;
}

.grid-item:hover::before {
  transform: scale(1.15); /* Slight zoom on hover */
  animation-play-state: paused;
}

.grid-item.digital-art-card::before {
  background-image: url("../images/icons/brush.png");
}

.grid-item.music-card::before {
  background-image: url("../images/icons/music.png");
}

.grid-item.writings-card::before {
  background-image: url("PLACEHOLDER_PATH_Writings");
}

.grid-item.photography-card::before {
  background-image: url("PLACEHOLDER_PATH_Photography");
}

.grid-item.threed-card::before {
  background-image: url("PLACEHOLDER_PATH_3D");
}

.grid-item.blogs-card::before {
  background-image: url("PLACEHOLDER_PATH_Blogs");
}

/* ========== FOOTER ========== */
.footer-section {
  margin-top: 2rem;
  padding-bottom: 4rem;
}

.footer-content {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-line {
  height: 1px;
  border: none;
  border-top: 1px solid var(--line-color);
  width: 35%; /* Adjust width as needed */
  margin: 0;
}

.footer-line.left {
  margin-right: 1rem;
}

.footer-line.right {
  margin-left: 1rem;
}

#svgstar {
  width: 60px;
  height: 60px;
  min-width: 40px;
  min-height: 40px;
  z-index: 2;
  overflow: visible;
}

/* Footer Star glow animation */
@keyframes footer-glow {
  0% {
    fill-opacity: 1;
    filter: drop-shadow(0 0 0.8em #faf394) drop-shadow(0 0 1.5em #faf394)
      drop-shadow(0 0 4em #ffffff);
  }
  50% {
    fill-opacity: 0.35;
    filter: drop-shadow(0 0 1em #faf394) drop-shadow(0 0 3em #faf394)
      drop-shadow(0 0 5em #ffffff);
  }
  100% {
    fill-opacity: 1;
    filter: drop-shadow(0 0 0.8em #faf394) drop-shadow(0 0 1.5em #faf394)
      drop-shadow(0 0 4em #ffffff);
  }
}

.cls1 {
  animation-name: footer-glow;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: filter, fill-opacity;
  backface-visibility: hidden;
  fill: #faf394;
}

/* ========== SHARED STYLES ========== */
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.separator {
  width: 60%;
  height: 1px;
  border: none;
  border-top: 1px solid var(--line-color);
  opacity: 0.5;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */

/* Tablet (768px+) */
@media (min-width: 768px) {
  .profile-card {
    flex-direction: row;
    padding: 4rem;
    gap: 4rem;
  }

  .pfp {
    width: 40%;
    max-width: none;
    justify-content: flex-end;
  }

  .intro-content {
    width: 60%;
    text-align: left;
  }

  .grid-container {
    grid-template-columns: repeat(3, 1fr); /* 3 columns on tablet/desktop */
    gap: 2rem;
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .main-container {
    gap: 6rem;
  }

  .grid-container {
    grid-template-columns: repeat(3, 1fr); /* Keep 3 columns but wider */
    gap: 3rem;
  }
}

/* ========== 3D Floaty Pan Keyframes ========== */
@keyframes float3D {
  0% {
    transform: perspective(800px) translateY(0) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: perspective(800px) translateY(-4px) rotateX(2deg) rotateY(-2deg);
  }
  50% {
    transform: perspective(800px) translateY(0) rotateX(0deg) rotateY(2deg);
  }
  75% {
    transform: perspective(800px) translateY(-3px) rotateX(-2deg) rotateY(-1deg);
  }
  100% {
    transform: perspective(800px) translateY(0) rotateX(0deg) rotateY(0deg);
  }
}

@keyframes panBackground {
  0% {
    transform: scale(1.1) translate(0, 0) rotate(0deg);
  }
  25% {
    transform: scale(1.15) translate(-1.5%, 1%) rotate(0.2deg);
  }
  50% {
    transform: scale(1.1) translate(0, 1.5%) rotate(-0.2deg);
  }
  75% {
    transform: scale(1.15) translate(1.5%, -1%) rotate(0.1deg);
  }
  100% {
    transform: scale(1.1) translate(0, 0) rotate(0deg);
  }
}