/* ========================================
   GLOBAL STYLES
   ======================================== */

* {
  box-sizing: border-box;
}

html {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  transition: background-color 0.8s ease;
}

/* Beautiful animated gradient background for hero section */
#hero {
  background: linear-gradient(-45deg, #1e90ff, #00bfff, #1e90ff, #4da6ff);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ========================================
   SECTION LAYOUT
   ======================================== */

.wrapper {
  width: 100%;
}

.section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  position: relative;
  background: transparent;
}

.section.short {
  min-height: 60vh;
}

.inner {
  max-width: 900px;
  width: 100%;
}

/* Section Colors - removed since background is on body now */
.section.light {
  color: #fff;
}

.section.dark {
  color: #000;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1 {
  font-size: 10rem;
  font-weight: 900;
  margin: 0 0 1rem 0;
  line-height: 0.9;
  position: relative;
  display: inline-block;
}

h2 {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 2rem 0;
  line-height: 1.4;
}

p {
  font-size: 1.25rem;
  line-height: 1.7;
  margin: 0 0 1.5rem 0;
}

a {
  color: inherit;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.7;
}

strong {
  font-weight: 700;
}

/* ========================================
   ANIMATED DOTS & DROPPING DOT
   ======================================== */

/* Dropping dot animation */
.dropping-dot {
  display: inline-block;
  position: relative;
  opacity: 0;
  animation: dropIn 1.5s ease-out 2s forwards;
}

@keyframes dropIn {
  0% {
    opacity: 0;
    transform: translateY(-100vh) rotate(0deg);
  }
  60% {
    opacity: 1;
    transform: translateY(10px) rotate(360deg);
  }
  80% {
    transform: translateY(-5px) rotate(380deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(360deg);
  }
}

/* Footer dots */
.dot1, .dot2, .dot3 {
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}

.dot1 {
  animation-delay: 0s;
}

.dot2 {
  animation-delay: 0.3s;
}

.dot3 {
  animation-delay: 0.6s;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

/* ========================================
   HERO SECTION - HOVER EFFECTS
   ======================================== */

/* Location, Song, Game, and Book hover styling - Apple style */
.location-hover,
.song-hover,
.game-hover,
.book-hover,
.instagram-hover {
  cursor: pointer;
  position: relative;
  z-index: 0;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle hint underline - hidden until content is visible */
.location-hover::before,
.song-hover::before,
.game-hover::before,
.book-hover::before,
.instagram-hover::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show hint underlines only when content is visible */
#stat-content.visible .location-hover::before,
#stat-content.visible .song-hover::before,
#stat-content.visible .game-hover::before,
#stat-content.visible .book-hover::before {
  opacity: 0.3;
}

/* Animated underline that draws in on hover */
.location-hover::after,
.song-hover::after,
.game-hover::after,
.book-hover::after,
.instagram-hover::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: currentColor;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.location-hover:hover,
.song-hover:hover,
.game-hover:hover,
.book-hover:hover,
.instagram-hover:hover {
  transform: scale(1.02);
}

/* On hover: hide hint, show full underline */
.location-hover:hover::before,
.song-hover:hover::before,
.game-hover:hover::before,
.book-hover:hover::before,
.instagram-hover:hover::before {
  opacity: 0;
}

.location-hover:hover::after,
.song-hover:hover::after,
.game-hover:hover::after,
.book-hover:hover::after,
.instagram-hover:hover::after {
  width: 100%;
}

/* ========================================
   CITY OVERLAY (Location Hover)
   ======================================== */

/* City Overlay - Hidden by default */
.city-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s 0.4s;
}

.city-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s 0s;
}

/* Shaking City Name - REMOVED */
.city-name-shake {
  display: none;
}

/* City GIF - Uses same scale animation as media overlays */
.city-gif {
  width: 100vw;
  height: 100vh;
  background-image: url('../img/Hyderabad.gif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.city-overlay.active .city-gif {
  opacity: 1;
  transform: scale(1);
}

/* ========================================
   SONG & GAME OVERLAY (Media Hover)
   ======================================== */

.media-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s 0.4s;
}

.media-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s 0s;
}

.media-gif {
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.song-gif {
  background-image: url('../img/gintamaBreakDancing.gif');
}

.game-gif {
  background-image: url('../img/counterStrike2.gif');
}

.media-video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* Instagram overlay - use img tag for better quality */
.instagram-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.95);
}

.instagram-gif {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.5s ease;

  /* High quality rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: high-quality;
  -ms-interpolation-mode: bicubic;

  /* Disable any smoothing/anti-aliasing that might blur */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.instagram-overlay.active .instagram-gif {
  opacity: 1;
}

.media-overlay.active .media-gif,
.media-overlay.active .media-video {
  opacity: 1;
  transform: scale(1);
}

/* ========================================
   LOADING STATE
   ======================================== */

#loading {
  opacity: 1;
  transition: opacity 0.5s ease;
}

#loading.hidden {
  opacity: 0;
  display: none;
}

#stat-content {
  opacity: 0;
  display: none;
  transition: opacity 0.5s ease;
}

#stat-content.hidden {
  display: none;
}

#stat-content.visible {
  opacity: 1;
  display: block;
}

/* ========================================
   SOCIAL LINKS
   ======================================== */

.social-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

#social-arrow {
  font-size: 2rem;
  font-weight: 700;
}

.social-links a {
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-links a:hover {
  transform: scale(1.2);
  opacity: 0.7;
}

.social-links svg {
  width: 32px;
  height: 32px;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
  h1 {
    font-size: 5rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  p {
    font-size: 1rem;
  }

  .section {
    padding: 3rem 1.5rem;
  }

  .city-name-shake {
    font-size: 4rem;
  }

  .social-links {
    flex-wrap: wrap;
  }

  .loader,
  .welcome {
    font-size: 6.5rem;
  }

  .loaderWrapper {
    height: 160px;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 3.5rem;
  }

  h2 {
    font-size: 1.2rem;
  }

  p {
    font-size: 0.9rem;
  }

  .city-name-shake {
    font-size: 2.5rem;
  }

  .loader,
  .welcome {
    font-size: 16vw !important;
    text-align: center;
    white-space: nowrap;
    max-width: 100%;
  }

  .loaderWrapper {
    height: 28vw;
    margin: 0 0 1rem 0;
    overflow: visible;
  }

  .section {
    padding: 2rem 0.5rem;
  }

  /* Adjust dot drop animation for mobile */
  .loader .dropping-dot {
    animation: dotDropMobile 12s ease-in-out infinite;
  }
}

@keyframes dotDropMobile {
  0%, 3% {
    opacity: 0;
    transform: translateY(-20vh) rotate(0deg);
  }
  8% {
    opacity: 1;
    transform: translateY(3px) rotate(360deg);
  }
  10% {
    transform: translateY(-1px) rotate(380deg);
  }
  12%, 87% {
    opacity: 1;
    transform: translateY(0) rotate(360deg);
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(0) rotate(360deg);
  }
}

/* ========================================
   SCROLL FADE-IN ANIMATIONS
   ======================================== */

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   LOADING ANIMATION - Apple Style
   ======================================== */

.loaderWrapper {
  height: 260px;
  overflow: visible;
  margin: 0 0 1rem 0;
}

.loaderInner {
  position: relative;
}

.loader,
.welcome {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13rem;
  font-weight: 900;
  line-height: 1.2;
  color: white; /* Back to white for blue background */
  margin: 0;
  padding: 10px 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  /* Better text rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.loader {
  animation: helloAnimation 12s ease-in-out infinite;
  position: relative;
}

.loader .dropping-dot {
  display: inline-block;
  animation: dotDrop 12s ease-in-out infinite;
}

.welcome {
  opacity: 0;
}

/* Marathi - starts at 2.5s */
.welcome:nth-child(2) {
  animation: languageFade 12s ease-in-out 2.5s infinite;
}

/* Hindi - starts at 4.5s */
.welcome:nth-child(3) {
  animation: languageFade 12s ease-in-out 4.5s infinite;
}

/* Telugu - starts at 6.5s */
.welcome:nth-child(4) {
  animation: languageFade 12s ease-in-out 6.5s infinite;
}

/* Kannada - starts at 8.5s */
.welcome:nth-child(5) {
  animation: languageFade 12s ease-in-out 8.5s infinite;
}

/* Animation keyframes */
@keyframes helloAnimation {
  0%, 18% {
    opacity: 1;
  }
  21%, 86% {
    opacity: 0;
  }
  88%, 100% {
    opacity: 1;
  }
}

@keyframes dotDrop {
  0%, 3% {
    opacity: 0;
    transform: translateY(-60vh) rotate(0deg);
  }
  8% {
    opacity: 1;
    transform: translateY(8px) rotate(360deg);
  }
  10% {
    transform: translateY(-3px) rotate(380deg);
  }
  12%, 87% {
    opacity: 1;
    transform: translateY(0) rotate(360deg);
  }
  88%, 100% {
    opacity: 0;
    transform: translateY(0) rotate(360deg);
  }
}

@keyframes languageFade {
  0% {
    opacity: 0;
  }
  4% {
    opacity: 1;
  }
  14% {
    opacity: 1;
  }
  16.67% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* ========================================
   LOADING SKELETON (DEPRECATED)
   ======================================== */

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.1) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  display: inline-block;
}

.skeleton-text {
  height: 1.8rem;
  width: 80%;
  margin-bottom: 0.5rem;
}

.skeleton-text-short {
  height: 1.8rem;
  width: 50%;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ========================================
   RESUME DOWNLOAD BUTTON
   ======================================== */

.resume-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.resume-link:hover {
  transform: scale(1.1);
  opacity: 0.7;
}

/* ========================================
   MOBILE TOUCH SUPPORT
   ======================================== */

@media (hover: none) and (pointer: coarse) {
  .location-hover,
  .song-hover,
  .game-hover,
  .book-hover {
    cursor: pointer;
  }

  /* Remove underlines on mobile - they don't work well with wrapped text */
  .location-hover::before,
  .song-hover::before,
  .game-hover::before,
  .book-hover::before {
    display: none !important;
  }

  .location-hover::after,
  .song-hover::after,
  .game-hover::after,
  .book-hover::after {
    display: none !important;
  }

  /* Add visual hint with brightness on mobile - Apple style */
  .location-hover,
  .song-hover,
  .game-hover,
  .book-hover {
    font-weight: 700;
    color: rgba(255, 255, 255, 1);
    animation: subtlePulse 3s ease-in-out infinite;
  }
}

/* Very subtle pulse animation for mobile hints */
@keyframes subtlePulse {
  0%, 100% {
    opacity: 1;
    color: rgba(255, 255, 255, 1);
  }
  50% {
    opacity: 0.85;
    color: rgba(200, 230, 255, 1);
  }
}

/* ========================================
   PATENT HOVER EFFECT
   ======================================== */

.patent-hover {
  text-decoration: underline;
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: inline-block;
}

.patent-hover:hover {
  transform: scale(1.02);
  opacity: 0.8;
}

/* ========================================
   RICKROLL MESSAGE
   ======================================== */

.rickroll-message {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #0b24fb;
  color: white;
  padding: 1rem 2rem;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 600;
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 9999;
}

.rickroll-message.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}