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

@font-face {
  font-family: "MW";
  src: url("/fonts/mw-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@layer base {
  :root {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 210 20% 98%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 217.2 91.2% 59.8%;
    --radius: 0.5rem;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
    font-feature-settings: "kern" 1, "liga" 1;
    background-color: #0a0d14;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: "MW", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
    @apply bg-primary text-primary-foreground hover:bg-primary/90;
    @apply px-6 py-3;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
    @apply px-5 py-2;
  }

  .search-bar {
    @apply relative flex items-center w-full;
  }

  .search-bar-input {
    @apply w-full pl-12 pr-28 h-14 bg-background border-2 border-primary/20 rounded-lg text-base placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary transition-all;
    color: hsl(var(--foreground));
  }

  .search-bar-input:focus {
    border-color: hsl(var(--primary) / 0.5);
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
  }

  .search-bar-icon {
    @apply absolute left-4 text-muted-foreground;
    pointer-events: none;
  }

  .search-bar-button {
    @apply absolute right-2;
  }

  .movie-card {
    @apply relative rounded-lg overflow-hidden transition-transform duration-300 ease-in-out;
    @apply bg-secondary/30;
    @apply hover:-translate-y-2 cursor-pointer;
  }

  .movie-card:hover {
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
  }

  .chip {
    @apply inline-flex items-center justify-center px-2.5 py-1 rounded-full text-xs font-medium;
    @apply bg-secondary text-secondary-foreground;
  }

  .loading-spinner {
    @apply w-6 h-6 border-2 border-muted-foreground border-t-primary rounded-full;
    animation: spin 1s linear infinite;
  }

  .glass-header {
    @apply bg-background/80 backdrop-blur-lg border-b border-border;
  }

  .bento-box {
    @apply bg-secondary p-4 rounded-lg border border-border;
  }
}

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

  .animate-fade-in {
    animation: fadeIn 0.5s ease-in-out forwards;
  }

  .animate-slide-up {
    animation: slideUp 0.5s ease-out forwards;
  }

  .animate-scale-in {
    animation: scaleIn 0.3s ease-out forwards;
  }

  .animate-subtle-pulse {
    animation: subtlePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

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

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

@keyframes glow-line {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: hsl(var(--secondary));
}

::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted-foreground) / 0.5);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-foreground) / 0.7);
}

/* Selection */
::selection {
  background-color: hsl(var(--primary) / 0.3);
  color: hsl(var(--foreground));
}

/* Focus visible */
:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Hide number input arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* Image loading placeholder */
img {
  background-color: hsl(var(--secondary));
}

/* Prevent text selection on buttons */
button {
  user-select: none;
}

/* Modal backdrop blur support */
@supports not (backdrop-filter: blur(12px)) {
  .glass-header {
    background-color: hsl(var(--background) / 0.95);
  }
}

/* ================================================================
   AUTH MODAL · нео-скевоморфизм
   мягкий объём, световые бевелы, «утопленные» инпуты, «выпуклые» кнопки
   ================================================================ */

body.modal-lock { overflow: hidden; }

#auth-modal {
  perspective: 1200px;
  opacity: 0;
  background:
    radial-gradient(120% 90% at 50% 20%, hsl(var(--primary) / 0.10), transparent 55%),
    hsl(224 71% 2% / 0.62);
}

#auth-modal:not(.hidden):not(.modal-closing) { animation: auth-backdrop-in .32s ease-out forwards; }
#auth-modal.modal-closing                    { animation: auth-backdrop-out .26s ease-in forwards; }

/* панель модалки (прямой потомок подложки) */
#auth-modal > * {
  position: relative;
  transform-origin: 50% 88%;
  will-change: transform, opacity;
  background: linear-gradient(158deg, hsl(220 42% 14%) 0%, hsl(222 46% 9.5%) 52%, hsl(224 52% 7%) 100%);
  border: 1px solid hsl(215 32% 34% / 0.28);
  box-shadow:
    26px 30px 60px -14px hsl(224 85% 2% / 0.85),        /* тёмный объём справа-снизу */
    -18px -20px 46px -18px hsl(217 91% 62% / 0.12),      /* свет слева-сверху */
    inset 0 1px 0 hsl(210 40% 98% / 0.09),               /* бевел верхней кромки */
    inset 0 -16px 30px -20px hsl(224 85% 2% / 0.95),     /* тень «поддона» снизу */
    0 0 46px -8px hsl(var(--primary) / 0.20);            /* софт-глоу */
}

/* глянцевый скос сверху */
#auth-modal > *::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, hsl(210 40% 98% / 0.06), transparent 22%);
}

#auth-modal:not(.hidden):not(.modal-closing) > * {
  animation: auth-panel-in .52s cubic-bezier(.18, .89, .32, 1.12) both;
}
#auth-modal.modal-closing > * {
  animation: auth-panel-out .24s cubic-bezier(.55, .06, .68, .19) both;
}

@keyframes auth-backdrop-in {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(10px); }
}
@keyframes auth-backdrop-out {
  from { opacity: 1; backdrop-filter: blur(10px); }
  to   { opacity: 0; backdrop-filter: blur(0); }
}
@keyframes auth-panel-in {
  0%   { opacity: 0; transform: translateY(48px) scale(.88) rotateX(10deg); filter: brightness(.8); }
  62%  { opacity: 1; transform: translateY(-6px) scale(1.015) rotateX(-1.4deg); }
  82%  { transform: translateY(2px) scale(.997) rotateX(.4deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: brightness(1); }
}
@keyframes auth-panel-out {
  from { opacity: 1; transform: translateY(0) scale(1) rotateX(0); }
  to   { opacity: 0; transform: translateY(36px) scale(.92) rotateX(6deg); filter: brightness(.72); }
}

/* «утопленные» инпуты */
#auth-modal input {
  background: hsl(224 58% 6%);
  border-color: hsl(215 28% 24% / 0.7);
  box-shadow:
    inset 5px 5px 12px hsl(224 85% 2% / 0.8),
    inset -4px -4px 10px hsl(217 42% 20% / 0.16);
  transition: box-shadow .25s ease, border-color .25s ease;
}
#auth-modal input:focus {
  border-color: hsl(var(--primary) / 0.55);
  box-shadow:
    inset 5px 5px 12px hsl(224 85% 2% / 0.9),
    inset -4px -4px 10px hsl(217 42% 22% / 0.2),
    0 0 0 3px hsl(var(--primary) / 0.16);
}

/* «выпуклая» кнопка отправки */
#auth-modal button[type="submit"] {
  background: linear-gradient(145deg, hsl(217 91% 65%), hsl(219 85% 50%));
  box-shadow:
    7px 9px 20px -5px hsl(224 85% 2% / 0.75),
    -5px -6px 16px -7px hsl(217 91% 70% / 0.35),
    inset 0 1px 0 hsl(210 40% 98% / 0.35),
    inset 0 -3px 5px hsl(221 78% 30% / 0.55);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
#auth-modal button[type="submit"]:hover  { filter: brightness(1.09); transform: translateY(-1px); }
#auth-modal button[type="submit"]:active {
  transform: translateY(1px) scale(.99);
  box-shadow:
    inset 4px 4px 10px hsl(221 78% 26% / 0.65),
    inset -2px -2px 6px hsl(217 91% 72% / 0.25);
}

/* табы: мягкий пресс */
#auth-modal .auth-tab { transition: color .2s ease, transform .12s ease; }
#auth-modal .auth-tab:active { transform: scale(.96); }

@media (prefers-reduced-motion: reduce) {
  #auth-modal, #auth-modal > * { animation-duration: .01ms !important; }
}