@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,700;9..144,900&family=Geist:wght@300;400;500;600;700&display=swap');

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

:root {
  --kino-bg: #050505;
  --kino-surface: #0F0F0F;
  --kino-surface-2: #1A1A1A;
  --kino-accent: #D9381E;
  --kino-accent-hover: #ED4B32;
  --kino-text: #F2F2F2;
  --kino-muted: #8A8A8A;
  --kino-border: #222222;
}

@layer base {
  :root {
    --background: 0 0% 2%;
    --foreground: 0 0% 95%;
    --card: 0 0% 6%;
    --card-foreground: 0 0% 95%;
    --popover: 0 0% 6%;
    --popover-foreground: 0 0% 95%;
    --primary: 9 75% 48%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 10%;
    --secondary-foreground: 0 0% 95%;
    --muted: 0 0% 10%;
    --muted-foreground: 0 0% 54%;
    --accent: 0 0% 13%;
    --accent-foreground: 0 0% 95%;
    --destructive: 0 75% 50%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 13%;
    --input: 0 0% 13%;
    --ring: 9 75% 48%;
    --radius: 0.25rem;
  }
}

* {
  border-color: hsl(var(--border));
}

html, body, #root {
  background-color: var(--kino-bg);
  color: var(--kino-text);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

.font-display {
  font-family: 'Fraunces', serif;
  font-feature-settings: "ss01", "ss02";
}

/* Hide scrollbars on row carousels but keep scrolling */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Selection */
::selection {
  background: var(--kino-accent);
  color: white;
}

/* Grain overlay */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
  mix-blend-mode: overlay;
}

.glass {
  background-color: rgba(15, 15, 15, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-color: rgba(242, 242, 242, 0.08);
}

/* Smooth fade for hero gradient */
.hero-fade {
  background: linear-gradient(180deg, rgba(5,5,5,0) 0%, rgba(5,5,5,0.4) 50%, rgba(5,5,5,1) 100%);
}
.hero-side-fade {
  background: linear-gradient(90deg, rgba(5,5,5,0.95) 0%, rgba(5,5,5,0.6) 40%, rgba(5,5,5,0) 100%);
}

/* Page enter animation */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-up { animation: fade-up 600ms ease-out both; }

/* Custom video controls */
video::-webkit-media-controls-panel { background-color: rgba(0,0,0,0.7); }