/* ==========================================================================
   THE ROYAL™ — Automotive & EV Mobility Strategy Practice
   Art Direction: Dark Electrified Navy × Electric Cyan × Cobalt Blue × High-Gloss Platinum
   
   PALETTE:
   - Base Obsidian Navy:  #060B14 (Deep electrified mobility canvas)
   - Surface:            #0A1120 (Elevated EV cockpit surface)
   - Card:               #0E1A30 (High-contrast structural card)
   - Card Alt:           #132444 (Elevated card variant)
   - Electric Cyan:      #00E5FF (Primary energy flow & typography)
   - Cobalt Blue:        #2563EB (Battery & powertrain highlight)
   - Sky Blue:           #38BDF8 (Connected car & telemetry accent)
   - High-Gloss Text:    #F8FAFC (Tactile typography)
   - Muted Slate:        #94A3B8 (Metadata & captions)
   ========================================================================== */

:root {
  --ev-bg: #060B14;
  --ev-surface: #0A1120;
  --ev-card: #0E1A30;
  --ev-card-alt: #132444;
  --ev-cyan: #00E5FF;
  --ev-cyan-glow: rgba(0, 229, 255, 0.35);
  --ev-blue: #38BDF8;
  --ev-cobalt: #2563EB;
  --ev-text: #F8FAFC;
  --ev-muted: #94A3B8;
  --ev-border: rgba(0, 229, 255, 0.28);
  --ev-border-subtle: rgba(255, 255, 255, 0.09);
  --ev-transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.ev-body {
  background-color: var(--ev-bg);
  color: var(--ev-text);
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.6;
  background-image: 
    radial-gradient(ellipse at 50% 0%, rgba(0, 229, 255, 0.12) 0%, transparent 65%),
    radial-gradient(circle at 90% 20%, rgba(37, 99, 235, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 10% 75%, rgba(0, 229, 255, 0.05) 0%, transparent 50%);
}

/* ==========================================================================
   01 — VIEW TRANSITIONS API (Interactive Persona Switcher)
   ========================================================================== */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   02 — NATIVE CSS SCROLL-DRIVEN ANIMATIONS (Sleek Horizontal Slide & Glow)
   ========================================================================== */
@supports (animation-timeline: view()) {
  .funnel-item,
  .persona-box,
  .eq-card,
  .matrix-card,
  .chan-card {
    animation: autoSlideGlow linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 25%;
  }

  @keyframes autoSlideGlow {
    from {
      opacity: 0.6;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ==========================================================================
   03 — ADVANCED CSS / CONTAINER QUERIES / AERODYNAMIC POLYGON MASKS
   ========================================================================== */
.persona-grid,
.eq-grid,
.matrix-grid,
.chan-grid,
.funnel-list {
  container-type: inline-size;
  container-name: auto-grid;
}

@container auto-grid (min-width: 650px) {
  .persona-box,
  .eq-card,
  .matrix-card,
  .chan-card {
    padding: 34px;
  }
}

/* Sleek Aerodynamic Geometric Polygon Masks */
.auto-aerodynamic-box,
.eq-card,
.matrix-card,
.chan-card {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
  transition: var(--ev-transition);
}

.eq-card:hover,
.matrix-card:hover {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
}

/* ==========================================================================
   04 — CINEMATIC AMBIENT BACKGROUNDS & CURSOR BLOOM (Zero WebGL)
   ========================================================================== */
.ev-hero {
  padding: 140px 60px 70px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.auto-hero-bg-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.auto-hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.38) contrast(1.2) saturate(1.1);
}

.auto-hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(6, 11, 20, 0.4) 0%, rgba(6, 11, 20, 0.95) 85%),
              linear-gradient(to bottom, rgba(6, 11, 20, 0.75) 0%, rgba(6, 11, 20, 0.98) 100%);
}

.auto-hero-cursor-bloom {
  position: absolute;
  top: var(--mouse-y, 40%);
  left: var(--mouse-x, 50%);
  width: 580px;
  height: 580px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 229, 255, 0.25) 0%, rgba(37, 99, 235, 0.1) 45%, transparent 75%);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  transition: opacity 0.3s ease;
  will-change: left, top;
}

.ev-hero > *:not(.auto-hero-bg-media):not(.auto-hero-cursor-bloom):not(.auto-energy-flow-layer) {
  position: relative;
  z-index: 3;
}

/* ==========================================================================
   05 — LIGHTWEIGHT AMBIENT ENERGY FLOW LAYER (No WebGPU)
   ========================================================================== */
.auto-energy-flow-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at 25% 25%, rgba(0, 229, 255, 0.12) 0%, transparent 60%),
              radial-gradient(ellipse at 75% 75%, rgba(37, 99, 235, 0.1) 0%, transparent 60%);
  opacity: 0.8;
  animation: autoEnergyPulse 6s ease-in-out infinite alternate;
}

@keyframes autoEnergyPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.04); opacity: 0.95; }
}

/* GSAP Hero Title Word Spans */
.auto-hero-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* ==========================================================================
   07 — CORE WEB VITALS SKELETON SHIMMER & INTERACTIVE MEDIA MOCKUPS
   ========================================================================== */
.auto-skeleton-shimmer {
  position: relative;
  overflow: hidden;
  background-color: rgba(14, 26, 48, 0.85) !important;
}

.auto-skeleton-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.18), transparent);
  animation: autoShimmer 2.2s infinite ease-in-out;
}

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

.auto-media-mockup {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--ev-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: var(--ev-transition);
  margin-bottom: 20px;
}

.auto-media-mockup:hover {
  border-color: var(--ev-cyan);
  transform: translateY(-4px);
  box-shadow: 0 16px 45px rgba(0, 229, 255, 0.3);
}

.auto-media-mockup video,
.auto-media-mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.auto-media-mockup:hover video,
.auto-media-mockup:hover img {
  transform: scale(1.04);
}

.auto-media-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(10, 17, 32, 0.85);
  border: 1px solid var(--ev-cyan);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ev-cyan);
  font-size: 16px;
  backdrop-filter: blur(8px);
  transition: var(--ev-transition);
  pointer-events: none;
}

.auto-media-mockup:hover .auto-media-play-icon {
  background: var(--ev-cyan);
  color: #060B14;
  border-color: #FFFFFF;
  transform: translate(-50%, -50%) scale(1.12);
}