/* ============================================
   PWA FULLSCREEN — Native App Feel
   ============================================ */

/* Prevent white overscroll (rubber-band) on iOS */
html,
body {
  overscroll-behavior: none;
  -webkit-overscroll-behavior: none;
  overflow-x: hidden;
  max-width: 100vw;
}

html {
  /* Ensure the entire visible area is covered */
  height: 100%;
  background-color: #570df8;
}

body {
  min-height: 100%;
  min-height: 100dvh;
}

/* Safe area padding utilities for notch / status bar / home indicator */
.pt-safe {
  padding-top: env(safe-area-inset-top, 0px);
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pl-safe {
  padding-left: env(safe-area-inset-left, 0px);
}

.pr-safe {
  padding-right: env(safe-area-inset-right, 0px);
}

/* Full-height including safe areas */
.min-h-screen-safe {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Standalone PWA mode specific adjustments */
@media all and (display-mode: standalone) {
  html {
    /* When running as PWA, use dynamic viewport height */
    height: -webkit-fill-available;
  }

  body {
    min-height: -webkit-fill-available;
  }

  /* Add safe area padding to all fixed/sticky navbars */
  nav {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
}

/* ============================================
   CRITICAL: Fix blurry text rendering
   ============================================ */

/* Enable font smoothing globally */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent transform-induced blur on buttons and interactive elements */
.btn, button, a, [class*="hover:scale"] {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Ensure backdrop-blur doesn't bleed into child text */
[class*="backdrop-blur"] {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Force crisp text on elements that use transforms */
[class*="translate"], [class*="scale"] {
  will-change: auto;
  -webkit-font-smoothing: subpixel-antialiased;
}

/* Only trigger GPU layer on actual hover, not idle */
.btn:hover, .card-lift:hover {
  will-change: transform;
}

/* Navbar text crispness */
.nav-text-crisp {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ============================================
   INFINITY SYMBOL — Core app motif
   ============================================ */

/* Gentle breathing pulse (login page) */
@keyframes infinityPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }

  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

.infinity-pulse {
  animation: infinityPulse 2.5s ease-in-out infinite;
}

/* Slow rotation (loading/transition states) */
@keyframes infinitySpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.infinity-spin {
  animation: infinitySpin 2s linear infinite;
}

/* Fade in + scale up (page entrance) */
@keyframes infinityReveal {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.infinity-reveal {
  animation: infinityReveal 0.8s ease-out forwards;
}

/* ============================================
   LOGIN PAGE
   ============================================ */

/* Floating hearts rising from bottom */
@keyframes floatHeart {
  0% {
    transform: translateY(100vh) rotate(0deg) scale(0.4);
    opacity: 0;
  }

  8% {
    opacity: 0.35;
  }

  85% {
    opacity: 0.35;
  }

  100% {
    transform: translateY(-10vh) rotate(40deg) scale(0.9);
    opacity: 0;
  }
}

.floating-heart {
  position: absolute;
  color: white;
  pointer-events: none;
  animation: floatHeart var(--duration, 12s) var(--delay, 0s) linear infinite;
  font-size: var(--size, 16px);
  left: var(--left, 50%);
  opacity: 0;
}

/* Login card shake on error */
@keyframes cardShake {

  0%,
  100% {
    transform: translateX(0);
  }

  15%,
  55%,
  85% {
    transform: translateX(-6px);
  }

  35%,
  70% {
    transform: translateX(6px);
  }
}

.shake {
  animation: cardShake 0.5s ease-out;
}

/* ============================================
   WELCOME TRANSITION (Ceylin only)
   ============================================ */

@keyframes welcomeFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.welcome-text {
  animation: welcomeFadeIn 1s ease-out forwards;
}

@keyframes welcomeFadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* ============================================
   LANDING PAGE
   ============================================ */

/* Count-up number animation marker */
@keyframes countPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* Stat number highlight after count-up completes */
.stat-done {
  animation: countPulse 0.3s ease-out;
}

/* Step connector line draw */
@keyframes drawLine {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* ============================================
   GLOBAL TRANSITIONS
   ============================================ */

/* Smooth page/content transitions */
.page-enter {
  animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card hover lift (applied globally) */
.card-lift {
  transition: all 0.3s ease;
}

.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* Navbar glass scroll state */
.nav-scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Dark mode nav scrolled */
[data-theme="akisdark"] .nav-scrolled {
  background: rgba(10, 10, 10, 0.92) !important;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

/* Dark mode gradient text utility */
.gradient-text-dark {
  background: linear-gradient(135deg, #b10a0a, #fcd214);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   HOW IT WORKS — Step connector
   ============================================ */

.step-connector {
  position: relative;
}

.step-connector::after {
  content: '';
  position: absolute;
  top: 2rem;
  left: 100%;
  width: 100%;
  height: 0;
  border-top: 2px dashed;
  border-color: inherit;
  opacity: 0.15;
}

@media (max-width: 768px) {
  .step-connector::after {
    display: none;
  }
}

/* ============================================
   MOBILE MENU
   ============================================ */

.mobile-menu-enter {
  animation: fadeIn 0.2s ease-out forwards;
}

/* ============================================
   APP SHELL — Tab Navigation
   ============================================ */

/* Bottom tab bar */
.bottom-tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="akisdark"] .bottom-tab-bar {
  background: rgba(10, 10, 10, 0.95);
  border-top-color: rgba(255, 255, 255, 0.06);
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 8px 4px;
  gap: 2px;
  color: rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.tab-item.active {
  color: var(--p, #b10a0a);
}

.tab-item:hover {
  color: var(--p, #b10a0a);
}

.tab-item span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Tab content sections */
.tab-section {
  display: none;
}

.tab-section.active {
  display: block;
  animation: fadeIn 0.3s ease-out;
}

/* ============================================
   ŞANS ÇARKI — Wheel Animations
   ============================================ */

.wheel-container {
  transition: transform 4.5s cubic-bezier(0.15, 0.85, 0.25, 1);
}

.wheel-pointer {
  width: 0;
  height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 24px solid var(--p, #b10a0a);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* ============================================
   CONFETTI Animation
   ============================================ */

@keyframes confettiFall {
  0% {
    transform: translateY(-100px) rotate(0deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg) scale(0.3);
    opacity: 0;
  }
}

.confetti-piece {
  position: fixed;
  top: -10px;
  z-index: 200;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confettiFall var(--duration, 3s) var(--delay, 0s) linear forwards;
  pointer-events: none;
}

/* ============================================
   TOAST Notifications
   ============================================ */

.toast-notification {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border: 1px solid;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s ease;
  transform: translateX(120%);
}

/* ============================================
   STAR Rating
   ============================================ */

.star-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  transition: all 0.15s ease;
}

.star-btn.editable {
  cursor: pointer;
}

.star-btn.editable:hover {
  transform: scale(1.3);
}

.star-btn.readonly {
  cursor: default;
}

/* ============================================
   INPUT shake animation
   ============================================ */

@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.input-shake {
  animation: inputShake 0.4s ease-out;
}

/* ============================================
   LIVE COUNTER — Digit tick animation
   ============================================ */

@keyframes digitTick {
  0% { opacity: 0.4; transform: translateY(-2px); }
  100% { opacity: 1; transform: translateY(0); }
}

.digit-tick {
  animation: digitTick 0.25s ease-out;
}

.music-card iframe {
  border-radius: 12px;
}

/* ============================================
   SHUFFLE RANDOMIZER
   ============================================ */

#shuffle-box.shuffling {
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow:
    0 0 20px rgba(124, 58, 237, 0.08),
    0 0 40px rgba(124, 58, 237, 0.04);
  transition: border-color 0.3s, box-shadow 0.3s;
}

#shuffle-text {
  transition: transform 0.06s ease-out;
}

#shuffle-result {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-out;
}

.infinity-spin {
  display: inline-block;
  animation: infinitySpin 1.5s linear infinite;
}

@keyframes infinitySpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.infinity-pulse {
  animation: infinityPulse 2.5s ease-in-out infinite;
}

@keyframes infinityPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.06); opacity: 0.9; }
}