/* =========================================================
   HERO SECTION CSS - AIceberg Mind
   Hero section with iceberg canvas, animations and editorial design
   ========================================================= */

/* =======================
   1) HERO CONTAINER & LAYOUT
   ======================= */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-primary);
  /* Ensure no top spacing */
  margin-top: 0;
  padding-top: 0;
  /* Make it stick to top */
  top: 0;
}

.hero-editorial {
  background: #0a0a0a;
}

/* Hero content container */
.hero-content-editorial {
  position: relative;
  z-index: var(--z-content);
  text-align: center;
  max-width: 900px;
  padding: 0 var(--space-lg);
  animation: heroFadeIn 1.5s ease-out;
}

/* =======================
   2) HERO CANVAS & BACKGROUND
   ======================= */
.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  pointer-events: none;
}

#iceberg {
  opacity: var(--iceberg-opacity-base);
  filter: blur(var(--iceberg-blur-canvas));
  animation: icebergFloat var(--iceberg-duration-float) var(--iceberg-easing) infinite;
}



/* =======================
   3) HERO TYPOGRAPHY
   ======================= */
.hero-title-editorial {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 12vw, 8rem);
  font-weight: 100;
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--text-primary);
  margin: -2.5rem 0 1rem 0;
  text-transform: uppercase;
  position: relative;
}

.hero-title-editorial strong {
  font-weight: 300;
  background: linear-gradient(135deg, var(--brand-mint), var(--brand-cyan));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleGlow 3s ease-in-out infinite alternate;
}

.hero-subtitle-editorial {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 300;
  line-height: 1.4;
  color: var(--text-secondary);
  margin-bottom: 2.5rem;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: subtitleSlideUp 1.2s ease-out 0.5s forwards;
}

.subtitle-break {
  display: block;
  margin: 0.3rem 0;
}

/* =======================
   4) HERO LOGO
   ======================= */
.hero-logo-scroll {
  width: clamp(200px, 35vw, 350px);
  height: auto;
  margin-top: clamp(60px, 8vh, 120px);
  margin-bottom: 1rem;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  animation: logoAppear 1s ease-out 0.3s forwards, logoCinematic 8s ease-in-out;
  filter: drop-shadow(0 15px 40px rgba(0, 212, 255, 0.4)) brightness(1.2) contrast(1.1);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  mix-blend-mode: normal;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  border-radius: 50%;
  padding: 25px;
  backdrop-filter: blur(2px);
}

.hero-logo-scroll::before {
  content: '';
  position: absolute;
  top: -80px;
  left: -80px;
  right: -80px;
  bottom: -80px;
  background: 
    radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.8) 0%, transparent 60%),
    radial-gradient(circle at 30% 70%, rgba(94, 228, 195, 0.6) 0%, transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(0, 212, 255, 0.4) 0%, transparent 40%);
  border-radius: 50%;
  animation: cinematicBackground 8s ease-in-out;
  z-index: -2;
  filter: blur(50px);
}

.hero-logo-scroll::after {
  content: '';
  position: absolute;
  top: -40px;
  left: -40px;
  right: -40px;
  bottom: -40px;
  background: conic-gradient(from 0deg, rgba(0, 212, 255, 0.3), rgba(94, 228, 195, 0.3), rgba(0, 212, 255, 0.3));
  border-radius: 50%;
  animation: rotate 10s linear infinite;
  z-index: -1;
  filter: blur(20px);
  opacity: 0.7;
}

.hero-logo-scroll:hover {
  transform: translateY(-8px) scale(1.05);
  filter: drop-shadow(0 20px 50px rgba(0, 212, 255, 0.5)) brightness(1.3) contrast(1.2);
}

/* =======================
   5) EDITORIAL CAPTION
   ======================= */
/* Editorial caption styles moved to editorial-astro.css for global animation system */

/* =======================
   6) HORIZON LINE & SCROLL ARROW
   ======================= */
.horizon-line {
  position: absolute;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-cyan), transparent);
  opacity: 0.7;
  animation: horizonPulse 3s ease-in-out infinite;
}

.scroll-down-arrow {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  color: var(--text-tertiary);
  cursor: pointer;
  animation: arrowBounce 2s ease-in-out infinite;
  transition: all 0.3s ease;
}

.scroll-down-arrow:hover {
  color: var(--brand-cyan);
  transform: translateX(-50%) scale(1.1);
}

/* =======================
   7) ANIMATIONS
   ======================= */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes icebergFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

@keyframes titleGlow {
  from { filter: brightness(1) drop-shadow(0 0 10px rgba(0, 212, 255, 0.3)); }
  to { filter: brightness(1.1) drop-shadow(0 0 20px rgba(0, 212, 255, 0.5)); }
}

@keyframes subtitleSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes logoAppear {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    filter: brightness(0.8) contrast(0.8);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-5px) scale(1.02);
    filter: brightness(1.3) contrast(1.2);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: brightness(1.2) contrast(1.1);
  }
}

@keyframes captionFade {
  from { opacity: 0; }
  to { opacity: 0.6; }
}

@keyframes horizonPulse {
  0%, 100% { opacity: 0.4; width: 80px; }
  50% { opacity: 0.8; width: 120px; }
}

@keyframes arrowBounce {
  0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
  40% { transform: translateX(-50%) translateY(-8px); }
  60% { transform: translateX(-50%) translateY(-4px); }
}

@keyframes logoCinematic {
  0% { 
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.3)) drop-shadow(0 0 40px rgba(94, 228, 195, 0.2));
    transform: scale(1) rotate(0deg);
  }
  15% { 
    filter: drop-shadow(0 0 60px rgba(0, 212, 255, 1)) drop-shadow(0 0 100px rgba(94, 228, 195, 0.8)) brightness(1.5) contrast(1.2);
    transform: scale(1.1) rotate(2deg);
  }
  30% { 
    filter: drop-shadow(0 0 40px rgba(0, 212, 255, 0.6)) drop-shadow(0 0 80px rgba(94, 228, 195, 0.4));
    transform: scale(1.05) rotate(-1deg);
  }
  50% { 
    filter: drop-shadow(0 0 80px rgba(0, 212, 255, 1.2)) drop-shadow(0 0 120px rgba(94, 228, 195, 1)) brightness(1.8) contrast(1.4) saturate(1.3);
    transform: scale(1.15) rotate(1deg);
  }
  70% { 
    filter: drop-shadow(0 0 50px rgba(0, 212, 255, 0.7)) drop-shadow(0 0 90px rgba(94, 228, 195, 0.5));
    transform: scale(1.08) rotate(-0.5deg);
  }
  100% { 
    filter: drop-shadow(0 0 30px rgba(0, 212, 255, 0.5)) drop-shadow(0 0 60px rgba(94, 228, 195, 0.3)) brightness(1.1);
    transform: scale(1.02) rotate(0deg);
  }
}

@keyframes cinematicBackground {
  0% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
  20% { opacity: 0.9; transform: scale(2.5) rotate(45deg); }
  40% { opacity: 0.5; transform: scale(1.8) rotate(90deg); }
  60% { opacity: 1; transform: scale(3.5) rotate(180deg); }
  80% { opacity: 0.6; transform: scale(2.2) rotate(270deg); }
  100% { opacity: 0.4; transform: scale(1.5) rotate(360deg); }
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* =======================
   8) RESPONSIVE HERO
   ======================= */
@media (max-width: 768px) {
  .hero {
    min-height: 100vh;
    padding: 2rem 0;
  }
  
  .hero-content-editorial {
    padding: 0 1.5rem;
  }
  
  .hero-title-editorial {
    font-size: clamp(3.5rem, 14vw, 6rem);
    margin: -3rem 0 0.8rem 0;
  }
  
  .hero-subtitle-editorial {
    font-size: clamp(1rem, 3vw, 1.2rem);
    margin-bottom: 2rem;
  }
  
  .hero-logo-scroll {
    width: clamp(280px, 50vw, 400px);
    margin-top: clamp(80px, 12vh, 140px);
    filter: drop-shadow(0 10px 30px rgba(0, 212, 255, 0.5)) brightness(1.3) contrast(1.2);
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
  }
  
  .horizon-line {
    bottom: 100px;
    width: 80px;
  }
  
  .scroll-down-arrow {
    bottom: 30px;
    width: 28px;
    height: 28px;
  }
  
  .iceberg-1, .iceberg-2, .iceberg-3 {
    transform: scale(0.6);
    opacity: 0.1;
  }
  
  .geo-triangle-1, .geo-triangle-2 {
    transform: scale(0.5);
    opacity: 0.06;
  }
  
  .geo-circle-1, .geo-circle-2 {
    transform: scale(0.4);
    opacity: 0.04;
  }
  
  .geo-line-1, .geo-line-2 {
    width: 300px;
    opacity: 0.04;
  }
  
  .geo-diamond {
    transform: scale(0.3) rotate(45deg);
    opacity: 0.04;
  }
}

@media (max-width: 480px) {
  .hero-title-editorial {
    font-size: clamp(3rem, 12vw, 5rem);
  }
  
  .hero-subtitle-editorial {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  }
  
  .subtitle-break {
    margin: 0.2rem 0;
  }
}

/* =======================
   9) ACCESSIBILITY & REDUCED MOTION
   ======================= */
@media (prefers-reduced-motion: reduce) {
  .hero-canvas,
  .hero-logo-scroll,
  .hero-title-editorial,
  .hero-subtitle-editorial,
  .editorial-caption,
  .horizon-line,
  .scroll-down-arrow {
    animation: none;
  }
  
  .hero-content-editorial {
    opacity: 1;
  }
  
  .hero-subtitle-editorial,
  .hero-logo-scroll,
  .editorial-caption {
    opacity: 1;
    transform: none;
  }
}

/* =======================
   10) HERO PERFORMANCE
   ======================= */
.hero *,
.iceberg-animation * {
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}

/* ========================================
   ZOOM ENTRANCE EFFECT - ULTRA SMOOTH
   ======================================== */
.zoom-entrance {
  animation: zoomEntranceUltraSmooth 6s ease-out forwards !important;
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

@keyframes zoomEntranceUltraSmooth {
  0% {
    transform: scale3d(0.2, 0.2, 1) translateZ(0);
    opacity: 0;
  }
  
  5% {
    transform: scale3d(0.3, 0.3, 1) translateZ(0);
    opacity: 0.1;
  }
  
  10% {
    transform: scale3d(0.5, 0.5, 1) translateZ(0);
    opacity: 0.2;
  }
  
  20% {
    transform: scale3d(1.2, 1.2, 1) translateZ(0);
    opacity: 0.4;
  }
  
  30% {
    transform: scale3d(2.0, 2.0, 1) translateZ(0);
    opacity: 0.6;
  }
  
  40% {
    transform: scale3d(3.5, 3.5, 1) translateZ(0);
    opacity: 0.7;
  }
  
  50% {
    transform: scale3d(6.0, 6.0, 1) translateZ(0);
    opacity: 0.5;
  }
  
  60% {
    transform: scale3d(9.0, 9.0, 1) translateZ(0);
    opacity: 0.3;
  }
  
  70% {
    transform: scale3d(13.0, 13.0, 1) translateZ(0);
    opacity: 0.15;
  }
  
  80% {
    transform: scale3d(17.0, 17.0, 1) translateZ(0);
    opacity: 0.05;
  }
  
  85% {
    transform: scale3d(20.0, 20.0, 1) translateZ(0);
    opacity: 0;
  }
  
  90% {
    transform: scale3d(1.05, 1.05, 1) translateZ(0);
    opacity: 0.5;
  }
  
  95% {
    transform: scale3d(1.02, 1.02, 1) translateZ(0);
    opacity: 0.8;
  }
  
  100% {
    transform: scale3d(1.0, 1.0, 1) translateZ(0);
    opacity: 1;
  }
}

/* ========================================
   LOGO ZOOM ENTRANCE EFFECT - 200%
   ======================================== */
.logo-zoom-entrance {
  animation: logoZoomEntrance 4s ease-out 0.5s forwards !important;
  transform-origin: center center;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

@keyframes logoZoomEntrance {
  0% {
    transform: scale3d(0.3, 0.3, 1) translateZ(0);
    opacity: 0;
  }
  
  15% {
    transform: scale3d(1.0, 1.0, 1) translateZ(0);
    opacity: 0.3;
  }
  
  30% {
    transform: scale3d(2.5, 2.5, 1) translateZ(0);
    opacity: 0.6;
  }
  
  45% {
    transform: scale3d(4.0, 4.0, 1) translateZ(0);
    opacity: 0.8;
  }
  
  60% {
    transform: scale3d(6.0, 6.0, 1) translateZ(0);
    opacity: 1;
  }
  
  75% {
    transform: scale3d(5.0, 5.0, 1) translateZ(0);
    opacity: 0.9;
  }
  
  90% {
    transform: scale3d(1.1, 1.1, 1) translateZ(0);
    opacity: 1;
  }
  
  100% {
    transform: scale3d(1.0, 1.0, 1) translateZ(0);
    opacity: 1;
  }
}

/* ========================================
   ICEBERG ANIMATION SYSTEM - HERO HOME
   ======================================== */

.iceberg-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* Iceberg Shapes - Large floating iceberg forms */
.iceberg-shape {
  position: absolute;
  opacity: var(--iceberg-opacity-shape);
  filter: blur(var(--iceberg-blur-shape));
}

.iceberg-1 {
  width: 400px;
  height: 300px;
  background: var(--gradient-iceberg-1);
  clip-path: polygon(20% 0%, 80% 0%, 100% 40%, 85% 100%, 15% 100%, 0% 40%);
  top: 10%;
  left: -10%;
  animation: icebergDrift1 var(--iceberg-duration-drift) var(--iceberg-easing) infinite;
}

.iceberg-2 {
  width: 500px;
  height: 400px;
  background: var(--gradient-iceberg-2);
  clip-path: polygon(10% 20%, 90% 10%, 95% 60%, 70% 100%, 30% 95%, 5% 50%);
  top: 40%;
  right: -15%;
  animation: icebergDrift2 var(--iceberg-duration-drift-alt) var(--iceberg-easing) infinite reverse;
}

.iceberg-3 {
  width: 350px;
  height: 280px;
  background: var(--gradient-iceberg-3);
  clip-path: polygon(25% 0%, 75% 5%, 100% 50%, 80% 100%, 20% 95%, 0% 45%);
  bottom: 5%;
  left: 20%;
  animation: icebergDrift3 16s var(--iceberg-easing) infinite;
}

/* Geometric Shapes - Large crossing elements */
.geometric-shape {
  position: absolute;
  opacity: var(--geo-opacity-subtle);
}

.geo-triangle-1 {
  width: 0;
  height: 0;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-bottom: 350px solid rgba(0, 212, 255, 0.4);
  top: 15%;
  right: 10%;
  animation: triangleCross1 var(--geo-duration-fast) var(--iceberg-easing) infinite;
  filter: blur(var(--geo-blur-medium));
}

.geo-triangle-2 {
  width: 0;
  height: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
  border-top: 280px solid rgba(94, 228, 195, 0.35);
  bottom: 20%;
  left: 15%;
  animation: triangleCross2 19s ease-in-out infinite reverse;
  filter: blur(1.5px);
}

.geo-circle-1 {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(0, 212, 255, 0.25) 0%,
    rgba(94, 228, 195, 0.15) 40%,
    transparent 70%
  );
  top: -10%;
  left: 60%;
  animation: circleFloat1 20s ease-in-out infinite;
  filter: blur(3px);
}

.geo-circle-2 {
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 70% 70%,
    rgba(94, 228, 195, 0.3) 0%,
    rgba(0, 212, 255, 0.12) 50%,
    transparent 80%
  );
  bottom: -5%;
  right: 50%;
  animation: circleFloat2 25s ease-in-out infinite reverse;
  filter: blur(2.5px);
}

.geo-line-1 {
  width: 600px;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 212, 255, 0.4) 30%,
    rgba(94, 228, 195, 0.6) 50%,
    rgba(0, 212, 255, 0.4) 70%,
    transparent 100%
  );
  top: 30%;
  left: -20%;
  transform-origin: center;
  animation: lineSweep1 16s ease-in-out infinite;
  filter: blur(1px);
}

.geo-line-2 {
  width: 500px;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(94, 228, 195, 0.35) 25%,
    rgba(0, 212, 255, 0.5) 50%,
    rgba(94, 228, 195, 0.35) 75%,
    transparent 100%
  );
  bottom: 35%;
  right: -15%;
  transform-origin: center;
  animation: lineSweep2 21s ease-in-out infinite reverse;
  filter: blur(1.2px);
}

.geo-diamond {
  width: 280px;
  height: 280px;
  background: linear-gradient(
    45deg,
    rgba(0, 212, 255, 0.2) 0%,
    rgba(94, 228, 195, 0.25) 50%,
    transparent 100%
  );
  transform: rotate(45deg);
  top: 50%;
  left: 5%;
  animation: diamondRotate 24s linear infinite;
  filter: blur(2px);
  opacity: 0.06;
}

/* Iceberg Animation Keyframes */
@keyframes icebergDrift1 {
  0% { 
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    opacity: 0.15;
  }
  25% { 
    transform: translateX(150px) translateY(-30px) rotate(2deg) scale(1.1);
    opacity: 0.25;
  }
  50% { 
    transform: translateX(300px) translateY(-10px) rotate(1deg) scale(1.2);
    opacity: 0.2;
  }
  75% { 
    transform: translateX(200px) translateY(20px) rotate(-1deg) scale(1.05);
    opacity: 0.18;
  }
  100% { 
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    opacity: 0.15;
  }
}

@keyframes icebergDrift2 {
  0% { 
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    opacity: 0.12;
  }
  30% { 
    transform: translateX(-180px) translateY(40px) rotate(-3deg) scale(1.15);
    opacity: 0.22;
  }
  60% { 
    transform: translateX(-320px) translateY(-20px) rotate(-1deg) scale(1.3);
    opacity: 0.18;
  }
  100% { 
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    opacity: 0.12;
  }
}

@keyframes icebergDrift3 {
  0% { 
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    opacity: 0.18;
  }
  40% { 
    transform: translateX(120px) translateY(-50px) rotate(3deg) scale(1.25);
    opacity: 0.28;
  }
  80% { 
    transform: translateX(250px) translateY(-25px) rotate(1deg) scale(1.1);
    opacity: 0.22;
  }
  100% { 
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    opacity: 0.18;
  }
}

/* Geometric Animation Keyframes */
@keyframes triangleCross1 {
  0% { 
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    opacity: 0.08;
  }
  25% { 
    transform: translateX(-200px) translateY(100px) rotate(45deg) scale(1.3);
    opacity: 0.15;
  }
  50% { 
    transform: translateX(-400px) translateY(50px) rotate(90deg) scale(1.1);
    opacity: 0.12;
  }
  75% { 
    transform: translateX(-250px) translateY(-30px) rotate(135deg) scale(1.2);
    opacity: 0.1;
  }
  100% { 
    transform: translateX(0) translateY(0) rotate(180deg) scale(1);
    opacity: 0.08;
  }
}

@keyframes triangleCross2 {
  0% { 
    transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    opacity: 0.1;
  }
  35% { 
    transform: translateX(180px) translateY(-80px) rotate(-60deg) scale(1.4);
    opacity: 0.18;
  }
  70% { 
    transform: translateX(350px) translateY(-40px) rotate(-120deg) scale(1.2);
    opacity: 0.14;
  }
  100% { 
    transform: translateX(0) translateY(0) rotate(-180deg) scale(1);
    opacity: 0.1;
  }
}

@keyframes circleFloat1 {
  0% { 
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.06;
  }
  30% { 
    transform: translateX(-300px) translateY(150px) scale(1.5);
    opacity: 0.15;
  }
  60% { 
    transform: translateX(-500px) translateY(80px) scale(1.8);
    opacity: 0.12;
  }
  100% { 
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.06;
  }
}

@keyframes circleFloat2 {
  0% { 
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.08;
  }
  40% { 
    transform: translateX(250px) translateY(-120px) scale(1.6);
    opacity: 0.16;
  }
  80% { 
    transform: translateX(400px) translateY(-60px) scale(1.3);
    opacity: 0.11;
  }
  100% { 
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.08;
  }
}

@keyframes lineSweep1 {
  0% { 
    transform: translateX(0) rotate(0deg);
    opacity: 0.05;
  }
  25% { 
    transform: translateX(300px) rotate(15deg);
    opacity: 0.12;
  }
  50% { 
    transform: translateX(600px) rotate(30deg);
    opacity: 0.18;
  }
  75% { 
    transform: translateX(400px) rotate(45deg);
    opacity: 0.1;
  }
  100% { 
    transform: translateX(0) rotate(60deg);
    opacity: 0.05;
  }
}

@keyframes lineSweep2 {
  0% { 
    transform: translateX(0) rotate(0deg);
    opacity: 0.07;
  }
  30% { 
    transform: translateX(-250px) rotate(-20deg);
    opacity: 0.14;
  }
  60% { 
    transform: translateX(-450px) rotate(-40deg);
    opacity: 0.2;
  }
  100% { 
    transform: translateX(0) rotate(-60deg);
    opacity: 0.07;
  }
}

@keyframes diamondRotate {
  0% { 
    transform: rotate(45deg) scale(1);
    opacity: 0.06;
  }
  25% { 
    transform: rotate(135deg) scale(1.2);
    opacity: 0.12;
  }
  50% { 
    transform: rotate(225deg) scale(1.5);
    opacity: 0.15;
  }
  75% { 
    transform: rotate(315deg) scale(1.3);
    opacity: 0.1;
  }
  100% { 
    transform: rotate(405deg) scale(1);
    opacity: 0.06;
  }
}

/* =======================
   LETTER EXPLOSION ANIMATION
   ======================= */
.letter-explosion .letter {
  display: inline-block;
  opacity: 0;
  transform: translate3d(
    calc(var(--random-x, 0) * 200px), 
    calc(var(--random-y, 0) * 200px), 
    calc(var(--random-z, 0) * 100px)
  ) 
  rotate3d(1, 1, 1, calc(var(--random-rotation, 0) * 720deg)) 
  scale3d(0.1, 0.1, 0.1);
  animation: letterExplode 3s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  animation-delay: calc(var(--delay, 0) * 0.1s + 1s);
  will-change: transform, opacity, color, font-weight;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.letter-explosion .letter:nth-child(1) { --random-x: -2; --random-y: -1.5; --random-z: 0.8; --random-rotation: 2.2; }
.letter-explosion .letter:nth-child(2) { --random-x: 1.8; --random-y: -2.1; --random-z: -0.5; --random-rotation: -1.8; }
.letter-explosion .letter:nth-child(3) { --random-x: -1.2; --random-y: 2.3; --random-z: 1.2; --random-rotation: 3.1; }
.letter-explosion .letter:nth-child(4) { --random-x: 2.5; --random-y: 1.1; --random-z: -0.8; --random-rotation: -2.5; }
.letter-explosion .letter:nth-child(5) { --random-x: -3.1; --random-y: -0.8; --random-z: 0.6; --random-rotation: 1.9; }
.letter-explosion .letter:nth-child(6) { --random-x: 1.4; --random-y: 2.8; --random-z: -1.1; --random-rotation: -3.2; }
.letter-explosion .letter:nth-child(7) { --random-x: -0.9; --random-y: -2.6; --random-z: 0.9; --random-rotation: 2.7; }
.letter-explosion .letter:nth-child(8) { --random-x: 2.8; --random-y: 0.4; --random-z: -0.3; --random-rotation: -1.6; }
.letter-explosion .letter:nth-child(9) { --random-x: -2.3; --random-y: 1.9; --random-z: 1.4; --random-rotation: 3.4; }
.letter-explosion .letter:nth-child(10) { --random-x: 1.1; --random-y: -1.3; --random-z: -0.7; --random-rotation: -2.1; }
.letter-explosion .letter:nth-child(11) { --random-x: 0.7; --random-y: 2.2; --random-z: 0.5; --random-rotation: 1.7; }
.letter-explosion .letter:nth-child(12) { --random-x: -1.6; --random-y: -0.5; --random-z: -1.3; --random-rotation: -2.9; }

@keyframes letterExplode {
  0% {
    opacity: 0;
    transform: translate3d(
      calc(var(--random-x, 0) * 200px), 
      calc(var(--random-y, 0) * 200px), 
      calc(var(--random-z, 0) * 100px)
    ) 
    rotate3d(1, 1, 1, calc(var(--random-rotation, 0) * 720deg)) 
    scale3d(0.1, 0.1, 0.1);
    filter: blur(3px) brightness(1.4);
  }
  
  15% {
    opacity: 0.4;
    transform: translate3d(
      calc(var(--random-x, 0) * 120px), 
      calc(var(--random-y, 0) * 120px), 
      calc(var(--random-z, 0) * 60px)
    ) 
    rotate3d(1, 1, 1, calc(var(--random-rotation, 0) * 540deg)) 
    scale3d(0.3, 0.3, 0.3);
    filter: blur(2px) brightness(1.3);
  }
  
  30% {
    opacity: 0.8;
    transform: translate3d(
      calc(var(--random-x, 0) * 80px), 
      calc(var(--random-y, 0) * 80px), 
      calc(var(--random-z, 0) * 40px)
    ) 
    rotate3d(1, 1, 1, calc(var(--random-rotation, 0) * 360deg)) 
    scale3d(0.75, 0.75, 0.75);
    filter: blur(1px) brightness(1.15);
  }
  
  50% {
    opacity: 0.95;
    transform: translate3d(
      calc(var(--random-x, 0) * 40px), 
      calc(var(--random-y, 0) * 40px), 
      calc(var(--random-z, 0) * 20px)
    ) 
    rotate3d(1, 1, 1, calc(var(--random-rotation, 0) * 270deg)) 
    scale3d(1.1, 1.1, 1.1);
    filter: blur(0.5px) brightness(1.1);
  }
  
  75% {
    opacity: 1;
    transform: translate3d(
      calc(var(--random-x, 0) * 10px), 
      calc(var(--random-y, 0) * 10px), 
      calc(var(--random-z, 0) * 5px)
    ) 
    rotate3d(1, 1, 1, calc(var(--random-rotation, 0) * 90deg)) 
    scale3d(1.08, 1.08, 1.08);
    filter: blur(0px) brightness(1.05);
  }
  
  90% {
    opacity: 1;
    transform: translate3d(0, 0, 0) 
    rotate3d(1, 1, 1, calc(var(--random-rotation, 0) * 15deg)) 
    scale3d(1.03, 1.03, 1.03);
    filter: none;
  }
  
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) 
    rotate3d(0, 0, 0, 0deg) 
    scale3d(1, 1, 1);
    filter: none;
  }
}

/* =======================
   AI LETTERS ACCENT EFFECT
   ======================= */
.letter-explosion .ai-letter.activated {
  font-weight: 900 !important;
  color: var(--brand-cyan) !important;
  text-shadow: 
    0 0 20px var(--brand-cyan),
    0 0 40px rgba(0, 212, 255, 0.5),
    0 0 60px rgba(0, 212, 255, 0.3) !important;
  filter: brightness(1.2) saturate(1.3) !important;
  transform: scale(1.15) translateZ(15px) !important;
  animation: letterExplode 3s cubic-bezier(0.23, 1, 0.32, 1) forwards, aiZoomPulse 3s ease-in-out 4.5s infinite !important;
  opacity: 1 !important;
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

@keyframes aiZoomPulse {
  0%, 100% {
    transform: scale(1.15) translateZ(15px) rotateY(0deg);
    text-shadow: 
      0 0 20px var(--brand-cyan),
      0 0 40px rgba(0, 212, 255, 0.5),
      0 0 60px rgba(0, 212, 255, 0.3);
    filter: brightness(1.2) saturate(1.3);
  }
  25% {
    transform: scale(1.25) translateZ(20px) rotateY(5deg);
    text-shadow: 
      0 0 30px var(--brand-cyan),
      0 0 60px rgba(0, 212, 255, 0.7),
      0 0 90px rgba(0, 212, 255, 0.5);
    filter: brightness(1.4) saturate(1.5);
  }
  50% {
    transform: scale(1.3) translateZ(25px) rotateY(0deg);
    text-shadow: 
      0 0 40px var(--brand-cyan),
      0 0 80px rgba(0, 212, 255, 0.8),
      0 0 120px rgba(0, 212, 255, 0.6);
    filter: brightness(1.6) saturate(1.7);
  }
  75% {
    transform: scale(1.25) translateZ(20px) rotateY(-5deg);
    text-shadow: 
      0 0 30px var(--brand-cyan),
      0 0 60px rgba(0, 212, 255, 0.7),
      0 0 90px rgba(0, 212, 255, 0.5);
    filter: brightness(1.4) saturate(1.5);
  }
}

/* =======================
   SUBTITLE REVEAL ANIMATION
   ======================= */
.subtitle-reveal .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) rotateX(-20deg);
  animation: wordReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: calc(var(--delay, 0) * 0.15s + 5.5s);
  transform-origin: center bottom;
  will-change: transform, opacity;
}

.subtitle-reveal .highlight-word {
  position: relative;
  font-weight: 600;
}

.subtitle-reveal .accent-word {
  color: var(--brand-cyan);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

.subtitle-reveal .punctuation {
  display: inline-block;
  opacity: 0;
  animation: punctuationPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  animation-delay: 6.4s;
}

@keyframes wordReveal {
  0% {
    opacity: 0;
    transform: translateY(30px) rotateX(-20deg) scale(0.8);
    filter: blur(2px);
  }
  40% {
    opacity: 0.7;
    transform: translateY(-5px) rotateX(5deg) scale(1.05);
    filter: blur(0.5px);
  }
  70% {
    opacity: 0.9;
    transform: translateY(2px) rotateX(-2deg) scale(1.02);
    filter: blur(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg) scale(1);
    filter: none;
  }
}

@keyframes punctuationPop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-180deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.3) rotate(20deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* Effetto typewriter per "feature" */
.subtitle-reveal .highlight-word::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-cyan), var(--brand-mint));
  animation: underlineGrow 0.6s ease-out forwards;
  animation-delay: 6.2s;
}

@keyframes underlineGrow {
  0% { width: 0; }
  100% { width: 100%; }
}

@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.6), 0 0 30px rgba(0, 212, 255, 0.4);
  }
}