@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Courier+Prime:wght@400;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    color-scheme: dark;
    color: rgba(255, 255, 255, 0.87);
    background-color: #000;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html, body {
    @apply bg-black text-white m-0 p-0;
  }

  html {
    scroll-behavior: smooth;
  }

  #root {
    @apply w-full min-h-screen;
  }

  ::selection {
    background-color: rgba(0, 168, 107, 0.3);
    color: #fff;
  }
}

@layer components {
  /* ── Header ── */
  .header-bar {
    @apply fixed top-0 left-0 right-0 z-50;
    height: 52px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: env(safe-area-inset-top);
  }

  .header-download-btn {
    @apply inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full text-[12px] font-medium text-white/70 transition-all duration-200;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .header-download-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
  }

  /* ── MiniPlayer ── */
  .miniplayer {
    @apply fixed bottom-0 left-0 right-0 z-50;
    height: 52px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .miniplayer-btn {
    @apply flex items-center justify-center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.15s;
    cursor: pointer;
  }

  .miniplayer-btn:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  /* ── Sections ── */
  .section-container {
    @apply w-full max-w-5xl mx-auto px-8 md:px-6 py-20 md:py-28;
  }

  .section-heading {
    @apply text-2xl md:text-[2rem] font-medium text-white tracking-[-0.02em] mb-2;
  }

  .section-body {
    @apply text-[15px] md:text-base text-white/55 leading-[1.7];
  }

  .section-two-col {
    @apply grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-16 items-center;
  }

  @media (min-width: 768px) {
    .section-two-col-reverse > :first-child {
      order: 2;
    }
    .section-two-col-reverse > :last-child {
      order: 1;
    }
  }


  /* ── App Preview ── */
  .app-preview {
    @apply w-full overflow-hidden relative;
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
  }

  .app-preview-placeholder {
    background: rgba(255, 255, 255, 0.02);
  }

  /* ── App Store button ── */
  .app-store-btn {
    @apply inline-flex items-center gap-3 px-6 py-3 rounded-full font-medium transition-all duration-300;
    background: linear-gradient(135deg, #fff 0%, #e8e8e8 100%);
    color: #000;
  }

  .app-store-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, #fff 0%, #fff 100%);
  }

  /* ── Control button (active state: pause, mute, stop) ── */
  .control-btn {
    @apply flex items-center justify-center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.03),
      0 2px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    outline: none;
    transition: background 0.15s;
  }

  .control-btn:hover {
    background: rgba(255, 255, 255, 0.13);
  }

  /* ── Play button (idle state, large) ── */
  .play-button {
    @apply relative flex items-center justify-center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.04),
      0 4px 24px rgba(0, 0, 0, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
    cursor: pointer;
    outline: none;
    transition: background 0.2s, box-shadow 0.2s;
  }

  .play-button:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 4px 30px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }

  /* ── Timer display ── */
  .timer-display {
    font-family: 'Courier Prime', ui-monospace, monospace;
    font-weight: 700;
    font-size: clamp(48px, 12vw, 80px);
    color: white;
    letter-spacing: 0.05em;
    text-shadow:
      0 2px 20px rgba(0, 0, 0, 0.6),
      0 0 60px rgba(0, 0, 0, 0.3);
    line-height: 1;
    user-select: none;
  }

  /* ── Sound bar ── */
  .sound-bar {
    @apply inline-flex items-center gap-2 px-4 py-2 rounded-full transition-all duration-200;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    outline: none;
  }

  .sound-bar:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
  }

  /* ── Sound picker bottom sheet ── */
  .sound-picker-sheet {
    @apply fixed bottom-0 z-[60];
    left: max(0px, calc(50% - 300px));
    width: min(600px, 100%);
    background: rgba(20, 20, 20, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 1px solid rgba(255, 255, 255, 0.06);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px 16px 0 0;
    max-height: 85vh;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* ── Player page ── */
  .player-page {
    @apply fixed inset-0 w-screen h-screen overflow-hidden bg-black;
  }

  /* ── Phone frame ── */
  .phone-frame {
    @apply relative;
    aspect-ratio: 9 / 19.5;
    border-radius: 40px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    background: #000;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    overflow: hidden;
  }

  /* ── Duration wheel ── */
  .duration-wheel-wrapper {
    @apply relative;
    width: 140px;
  }

  .duration-wheel-highlight {
    @apply absolute left-0 right-0 pointer-events-none z-10;
    top: calc(50% - 28px);
    height: 56px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .duration-wheel-scroll {
    @apply overflow-y-auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 30%,
      black 70%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0%,
      black 30%,
      black 70%,
      transparent 100%
    );
  }

  .duration-wheel-scroll::-webkit-scrollbar {
    display: none;
  }

  .duration-wheel-item {
    @apply flex items-center justify-center gap-1.5 cursor-pointer select-none;
    scroll-snap-align: center;
    transition: opacity 0.2s, transform 0.2s;
    opacity: 0.25;
  }

  .duration-wheel-item.selected {
    opacity: 1;
  }

  .duration-wheel-number {
    font-family: 'Courier Prime', ui-monospace, monospace;
    font-weight: 700;
    font-size: 32px;
    color: white;
    letter-spacing: 0.02em;
  }

  .duration-wheel-unit {
    font-family: 'Courier Prime', ui-monospace, monospace;
    font-weight: 400;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.05em;
  }

  /* ── Legal pages ── */
  .legal-page {
    @apply min-h-screen bg-black text-white;
  }

  .legal-page a {
    @apply text-green-400 hover:text-green-300 transition-colors underline underline-offset-2;
  }

  .legal-section {
    @apply mb-8;
  }

  .legal-section h2 {
    @apply text-lg font-semibold text-white mb-3;
  }

  .legal-section p {
    @apply text-white/60 leading-relaxed;
  }
}

@layer utilities {
  .text-shadow {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }

  .font-courier {
    font-family: 'Courier Prime', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }

  .tabular-nums {
    font-variant-numeric: tabular-nums;
  }

  .typing-cursor {
    animation: blink 1s step-end infinite;
  }

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