/* Design System & Variables */
:root {
  --bg-color: #08080a;
  --text-primary: #f5f5f7;
  --text-secondary: rgba(245, 245, 247, 0.5);
  --accent-color: #dfba6b; /* Warm champagne gold */
  --accent-glow: rgba(223, 186, 107, 0.08);
  --font-serif: 'EB Garamond', serif;
  --font-sans: 'Inter', sans-serif;
  --transition-smooth: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base resets & typography */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: var(--font-serif);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient Animated Backgrounds */
.ambient-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.ambient-glow-1 {
  position: absolute;
  top: -20%;
  left: -10%;
  width: 60vw;
  height: 60vh;
  background: radial-gradient(circle, rgba(223, 186, 107, 0.06) 0%, rgba(8, 8, 10, 0) 70%);
  filter: blur(80px);
  animation: float-glow-1 25s ease-in-out infinite alternate;
}

.ambient-glow-2 {
  position: absolute;
  bottom: -20%;
  right: -10%;
  width: 70vw;
  height: 70vh;
  background: radial-gradient(circle, rgba(140, 100, 255, 0.04) 0%, rgba(8, 8, 10, 0) 70%);
  filter: blur(100px);
  animation: float-glow-2 30s ease-in-out infinite alternate;
}

@keyframes float-glow-1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(8vw, 12vh) scale(1.15); }
}

@keyframes float-glow-2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-10vw, -8vh) scale(1.1); }
}

/* Interactive Cursor Follower */
.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(223, 186, 107, 0.04) 0%, rgba(0,0,0,0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  will-change: transform;
  display: none;
}

@media (hover: hover) {
  .cursor-follower {
    display: block;
  }
}

/* Center Content layout */
.content-wrapper {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Header Text styling */
.studio-title {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(40px);
  animation: revealTitle 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.3s;
}

/* Subtitle paragraph styling */
.studio-status {
  font-family: var(--font-sans);
  font-size: clamp(0.7rem, 2vw, 0.85rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  color: var(--text-secondary);
  margin: 0;
  padding-left: 0.5em; /* Compensate for letter-spacing to center text properly */
  opacity: 0;
  transform: translateY(20px);
  animation: revealSubtitle 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1s;
  position: relative;
}

/* Minimalist glowing line decoration */
.studio-status::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 50px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 1.6s;
}

body.loaded .studio-status::after {
  transform: translateX(-50%) scaleX(1);
}

/* Animations */
@keyframes revealTitle {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes revealSubtitle {
  to {
    opacity: 0.8;
    transform: translateY(0);
  }
}

/* Grain / Texture Overlay */
.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9;
  opacity: 0.025;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}