/* 
 * Style updates to match Radiate Studio app
 * Based on HomeLandingPage.dart design tokens
 */

:root {
  /* App-specific accent colors found in HomeLandingPage.dart */
  --color-image: #2ea3ff; /* Primary */
  --color-video: #9c27b0; /* Colors.purple */
  --color-audio: #4caf50; /* Colors.green */
  --color-script: #3f51b5; /* Colors.indigo */
  --color-content: #6366F1; /* Custom Indigo */
  --color-3d: #ff5722; /* Colors.deepOrange */
  
  --radius-card: 18px; /* Matches _HomeActionTile borderRadius */
  --shadow-card: 0 6px 12px rgba(0, 0, 0, 0.05); /* Matches BoxShadow(blur: 12, offset: 6) */
}

/* 1. Button Updates */
.btn {
  border-radius: 12px !important; /* Standard app button radius */
  gap: 8px;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.5px;
}

.btn::before {
  display: none;
}

.btn-primary {
  background: #1976d2;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary:hover {
  background: #1565c0;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-secondary, .btn-outline {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
}

.btn-secondary:hover, .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #1976d2;
  transform: translateY(-1px);
}

/* 2. Card Styling - Matching App Look */
/* Target specific static HTML classes */
.vision-card,
.waitlist-card,
.feature-card, 
.feature-card-enhanced {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card); /* 18px */
  padding: 24px;
  transition: all 200ms ease;
  box-shadow: var(--shadow-card);
}

.vision-card:hover,
.feature-card:hover, 
.feature-card-enhanced:hover,
.waitlist-card:hover {
  transform: translateY(-2px);
  border-color: rgba(46, 163, 255, 0.5);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.feature-card-enhanced.hovered {
  background: rgba(255, 255, 255, 0.08);
}

/* 3. Feature Icons */
.feature-icon {
  width: 52px;
  height: 52px;
  font-size: 26px;
  border-radius: 50%; /* Circle shape from App */
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 163, 255, 0.15);
  color: var(--color-image);
  margin-bottom: 16px;
  animation: none;
}

/* Apply specific accent colors to icons based on context */
.vision-card:nth-child(1) { border-top: 3px solid var(--color-image); }
.vision-card:nth-child(2) { border-top: 3px solid var(--color-video); }
.vision-card:nth-child(3) { border-top: 3px solid var(--color-audio); }

/* 4. Background Gradient - Matching App */
body {
  /* Fallback */
  background-color: #05060d; 
}

/* Overlay gradient to match app's subtle feel */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  /* Dark mode gradient from HomeLandingPage */
  background: linear-gradient(
    to bottom right,
    rgba(20, 23, 43, 0.65) 0%, /* surfaceContainerHighest approx */
    #05060d 50%, /* scaffoldBackgroundColor */
    rgba(20, 23, 43, 0.55) 100% /* surface approx */
  );
  opacity: 1;
  animation: none; /* Disable shift animation for app-like stability */
}

/* 5. Typography - Targeting index.html classes */
.hero-heading, .hero h1 {
  font-size: clamp(32px, 5vw, 48px); /* Slightly smaller, more app-like */
  font-weight: 700;
  letter-spacing: -0.5px;
}

.hero-lede, .hero-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7); /* Matching app bodyMedium alpha 0.7 */
  line-height: 1.6;
}

/* 6. Tool-specific overrides */
.tool-color-image { background-color: var(--color-image) !important; border-color: var(--color-image) !important; }
.tool-color-video { background-color: var(--color-video) !important; border-color: var(--color-video) !important; }
.tool-color-sound { background-color: var(--color-audio) !important; border-color: var(--color-audio) !important; }
.tool-color-3d { background-color: var(--color-3d) !important; border-color: var(--color-3d) !important; }
.tool-color-ai { background-color: var(--color-script) !important; border-color: var(--color-script) !important; }
.tool-color-creative { background-color: var(--color-content) !important; border-color: var(--color-content) !important; }

/* 8. Hero Video */
.hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  /* Opaque on left, fade out to right */
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 90%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 90%);
}

.hero-experience__video-shell {
  position: absolute !important;
  inset: auto !important; 
  left: -8% !important; /* Move to left side */
  top: 10% !important;  /* Move up */
  transform: rotate(-1deg) !important; /* Slight tilt for style */
  width: 70% !important;
  max-width: 1280px !important; 
  aspect-ratio: 16 / 9 !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  background: transparent !important;
  filter: none !important;
  overflow: visible !important;
}

/* Ensure content stays above video */
.hero-experience__content {
  position: relative;
  z-index: 5;
}

/* Reduce the heavy gradient overlay so the video shines through */
.hero-experience__gradient {
  opacity: 0.2 !important;
  z-index: 0 !important;
}