:root {
  --radius: 0.5rem;
  --background: oklch(0.16 0.012 60);
  --foreground: oklch(0.96 0.01 80);
  --card: oklch(0.20 0.014 60);
  --card-foreground: oklch(0.96 0.01 80);
  --primary: oklch(0.78 0.16 60);
  --primary-foreground: oklch(0.15 0.01 60);
  --secondary: oklch(0.24 0.018 60);
  --secondary-foreground: oklch(0.96 0.01 80);
  --muted: oklch(0.22 0.014 60);
  --muted-foreground: oklch(0.68 0.02 70);
  --accent: oklch(0.68 0.18 45);
  --accent-foreground: oklch(0.15 0.01 60);
  --border: oklch(1 0 0 / 8%);
  --input: oklch(0.28 0.015 60);
  --ring: oklch(0.78 0.16 60);

  --gradient-sun: linear-gradient(135deg, oklch(0.78 0.16 60), oklch(0.68 0.18 45));
  --gradient-radial: radial-gradient(ellipse at top, oklch(0.78 0.16 60 / 18%), transparent 60%);
  --gradient-fade-bottom: linear-gradient(180deg, transparent 0%, oklch(0.16 0.012 60) 95%);
  --shadow-glow: 0 20px 60px -20px oklch(0.78 0.16 60 / 45%);
  --shadow-elegant: 0 30px 80px -30px oklch(0 0 0 / 80%);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-cinema: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  margin: 0;
}

::selection {
  background: oklch(0.78 0.16 60 / 30%);
  color: var(--foreground);
}

.font-display {
  font-family: "Space Grotesk", "Inter", sans-serif;
  letter-spacing: -0.02em;
}

.text-gradient-sun {
  background: var(--gradient-sun);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bg-gradient-sun { background: var(--gradient-sun); }
.bg-radial-glow { background: var(--gradient-radial); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-elegant { box-shadow: var(--shadow-elegant); }

.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mask-fade-x {
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

@keyframes fade-up   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes scale-in  { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes slow-pan  { 0% { transform: scale(1.08) translate3d(0, 0, 0); } 100% { transform: scale(1.16) translate3d(-2%, -1%, 0); } }
@keyframes shimmer   { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes drift-y   { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(0, -3%, 0); } }
@keyframes mask-reveal { 0% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0% 0); } }
@keyframes float-slow { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -1.5%, 0) scale(1.02); } }
@keyframes marquee   { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } }
@keyframes pulse-glow { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

.reveal {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  filter: blur(6px);
  transition:
    opacity 1.4s var(--ease-cinema),
    transform 1.4s var(--ease-cinema),
    filter 1.4s var(--ease-cinema);
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.34s; }
.reveal-delay-4 { transition-delay: 0.46s; }
.reveal-delay-5 { transition-delay: 0.58s; }

.vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, oklch(0.16 0.012 60 / 50%) 0%, transparent 18%, transparent 78%, oklch(0.16 0.012 60 / 70%) 100%);
}

.animate-float-slow { animation: float-slow 14s ease-in-out infinite; }
.animate-marquee    { animation: marquee 40s linear infinite; }
.animate-pulse-glow { animation: pulse-glow 4s ease-in-out infinite; }

.cinematic-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 120ms linear;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none !important; opacity: 1; transform: none; filter: none; }
  .animate-float-slow, .animate-marquee, .animate-pulse-glow { animation: none; }
  .cinematic-img { transition: none; }
}