/* ==========================================================================
   KAYAKA STUDIOS — CREATIVE ANIMATION UPGRADE
   Philosophy: 70% Static Design, 30% Motion.
   Rhythm: Movement → Pause → Movement → Pause
   Tone: Slow, Smooth, Cinematic, Organic, Premium
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE LOAD — ART-DIRECTED ENTRANCE (1.2s – 1.5s total)
   -------------------------------------------------------------------------- */
@keyframes loadKayakaRise {
  0% {
    opacity: 0;
    transform: translateY(34px);
    letter-spacing: 0.02em;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: -0.045em;
  }
}

@keyframes loadStudiosRise {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loadCurveEnter {
  0% {
    opacity: 0;
    transform: translate(50px, 50px);
  }
  100% {
    opacity: 0.95;
    transform: translate(0, 0);
  }
}

@keyframes loadBaselineFade {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Applied when page is ready */
.page-ready .intro-headline-kayaka {
  animation: loadKayakaRise 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}

.page-ready .intro-headline-studios {
  animation: loadStudiosRise 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}

.page-ready .curve-intro {
  animation: loadCurveEnter 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.page-ready .intro-baseline {
  animation: loadBaselineFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

/* --------------------------------------------------------------------------
   2. PROGRESSIVE SCROLL REVEALS (ELEGANT UPWARD DEVIATIONS)
   -------------------------------------------------------------------------- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger Delays for Structured Hierarchy */
.delay-1 { transition-delay: 0.18s; }
.delay-2 { transition-delay: 0.32s; }
.delay-3 { transition-delay: 0.46s; }
.delay-4 { transition-delay: 0.60s; }

/* --------------------------------------------------------------------------
   3. BENGALURU SECTION — SCALE & SILHOUETTE MOTION
   -------------------------------------------------------------------------- */
.bengaluru-title-huge {
  transform: scale(0.96);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.bengaluru-title-huge.is-visible {
  transform: scale(1);
}

.bengaluru-abstract-circle {
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.bengaluru-abstract-circle:hover {
  transform: scale(1.03);
}

/* --------------------------------------------------------------------------
   4. DISCIPLINES SECTION — STAGGER & HOVER MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */
.discipline-item {
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.discipline-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 1px;
  background-color: var(--ink-primary);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.discipline-item:hover {
  padding-left: 20px;
}

.discipline-item:hover::before {
  width: 12px;
}

.discipline-item:hover .discipline-title {
  transform: translateX(4px);
}

.discipline-item:hover .discipline-desc {
  color: var(--ink-primary);
}

.discipline-title {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.discipline-desc {
  transition: color 0.3s ease;
}

/* --------------------------------------------------------------------------
   5. STUDIO SECTION — SCULPTURAL FRAME DRAW
   -------------------------------------------------------------------------- */
.studio-sculptural-frame {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease;
}

.studio-sculptural-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.05);
}

.frame-center-shape {
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-sculptural-frame:hover .frame-center-shape {
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   6. COMING SOON — HERO PAUSE & CINEMATIC DRIFT
   -------------------------------------------------------------------------- */
.coming-giant-soon {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.coming-giant-soon.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   7. SOCIAL ICON MICRO-INTERACTIONS (REFINED & SOPHISTICATED)
   -------------------------------------------------------------------------- */
.social-link-item a {
  position: relative;
  transition: color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-link-item a svg {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.social-link-item a span {
  position: relative;
}

.social-link-item a span::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--ink-primary);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.social-link-item a:hover {
  color: var(--ink-primary);
  transform: translateX(4px);
}

.social-link-item a:hover svg {
  transform: translateY(-3px) scale(1.08);
  opacity: 1;
}

.social-link-item a:hover span::after {
  width: 100%;
}

/* --------------------------------------------------------------------------
   8. GET DIRECTIONS BUTTON REFINEMENT
   -------------------------------------------------------------------------- */
.btn-get-directions svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-get-directions:hover svg {
  transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   9. ACCESSIBILITY: PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-on-scroll,
  .bengaluru-title-huge,
  .coming-giant-soon,
  .intro-headline-kayaka,
  .intro-headline-studios,
  .curve-intro,
  .intro-baseline {
    opacity: 1 !important;
    transform: none !important;
  }

  .minimal-cursor {
    display: none !important;
  }
}