/* ============================================
   eCarnet — Animations
   All @keyframes + scroll-reveal classes
   ============================================ */

/* ---- Scroll Reveal Base Classes ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }

/* ---- Concentric Ring Pulse ---- */
@keyframes ring-pulse {
  0%   { transform: scale(1); opacity: 0.55; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- App Icon Glow Pulse ---- */
@keyframes icon-glow-pulse {
  0%, 100% {
    box-shadow:
      0 0 24px rgba(0, 112, 204, 0.55),
      0 0 60px rgba(0, 112, 204, 0.25),
      0 20px 60px rgba(0, 0, 0, 0.4);
  }
  50% {
    box-shadow:
      0 0 40px rgba(0, 112, 204, 0.75),
      0 0 90px rgba(0, 112, 204, 0.4),
      0 20px 60px rgba(0, 0, 0, 0.4);
  }
}

/* ---- App Icon 3D Rock ---- */
@keyframes icon-3d-rock {
  0%, 100% { transform: perspective(600px) rotateY(-16deg) rotateX(8deg); }
  50%      { transform: perspective(600px) rotateY(-10deg) rotateX(4deg); }
}

/* ---- Carnet Float ---- */
@keyframes carnet-float {
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  50%       { transform: translateY(-12px) rotate(-2deg); }
}

/* ---- Carnet Close (perspective fold) ---- */
@keyframes carnet-close {
  0%   { transform: perspective(600px) rotateY(0deg) scale(1); opacity: 1; }
  60%  { transform: perspective(600px) rotateY(-80deg) scale(0.9); opacity: 0.6; }
  100% { transform: perspective(600px) rotateY(-90deg) scale(0.8); opacity: 0; }
}

/* ---- Bridge icon zoom in ---- */
@keyframes bridge-icon-zoom {
  0%   { transform: scale(0.2) perspective(600px) rotateY(12deg); opacity: 0; }
  60%  { transform: scale(1.08) perspective(600px) rotateY(-4deg); opacity: 1; }
  100% { transform: scale(1) perspective(600px) rotateY(-8deg); opacity: 1; }
}

/* ---- Digital card reveal ---- */
@keyframes digital-card-reveal {
  0%   { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---- Timeline dot pulse (box-shadow is ok for non-layout prop) ---- */
@keyframes dot-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 0   rgba(0, 112, 204, 0.7),
      0 0 0 0   rgba(0, 112, 204, 0.3);
    opacity: 1;
  }
  60% {
    box-shadow:
      0 0 0 8px rgba(0, 112, 204, 0),
      0 0 0 16px rgba(0, 112, 204, 0);
    opacity: 0.8;
  }
}

/* ---- Scroll Cue ---- */
@keyframes scroll-cue {
  0%   { transform: translateY(0); opacity: 0.7; }
  60%  { transform: translateY(10px); opacity: 0.3; }
  100% { transform: translateY(0); opacity: 0.7; }
}

/* ---- Hero text entrance ---- */
@keyframes hero-word-rise {
  from {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ---- Navbar link underline glide ---- */
@keyframes nav-underline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---- Feature card lift ---- */
@keyframes card-hover-lift {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}

/* ---- Concept section: state classes ---- */

/* Paper carnet: floating (default + explicit phase) */
.concept-stage .carnet-paper,
.concept-stage.phase-floating .carnet-paper {
  animation: carnet-float 4s ease-in-out infinite;
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: opacity 0.3s ease;
}

/* Paper carnet: closing animation */
.concept-stage.phase-closing .carnet-paper {
  animation: carnet-close 0.7s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

/* Paper carnet: gone */
.concept-stage.phase-bridge .carnet-paper,
.concept-stage.phase-digital .carnet-paper {
  opacity: 0;
  pointer-events: none;
}

/* Bridge icon: hidden initially */
.concept-stage .bridge-icon {
  opacity: 0;
  transform: scale(0.2) perspective(600px) rotateY(12deg);
}

/* Bridge icon: zooming in */
.concept-stage.phase-bridge .bridge-icon {
  animation: bridge-icon-zoom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Bridge icon: stays visible in digital phase */
.concept-stage.phase-digital .bridge-icon {
  opacity: 1;
  transform: scale(1) perspective(600px) rotateY(-8deg);
}

/* Digital card: hidden initially */
.concept-stage .digital-card-reveal {
  opacity: 0;
  transform: translateY(20px);
}

/* Digital card: revealed */
.concept-stage.phase-digital .digital-card-reveal {
  animation: digital-card-reveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

/* ============================================
   OVERDRIVE — Cinematic Effects
   ============================================ */

/* ---- Scroll Progress Bar ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--blue-bright), #3dc0ff);
  z-index: 300;
  transition: none;
  will-change: width;
}

/* ---- Hero Entrance Animation ---- */
.hero-entrance {
  display: block;
  opacity: 0;
  transform: translateY(24px) scale(0.92);
  filter: blur(8px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-entrance--1 { transition-delay: 0.1s; }
.hero-entrance--2 { transition-delay: 0.35s; }
.hero-entrance--3 { transition-delay: 0.6s; }
.hero-entrance--4 { transition-delay: 0.85s; display: inline-flex; }

.hero-entrance.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ---- Section Dividers ---- */
.section-divider {
  position: relative;
  margin-top: -1px;
  line-height: 0;
  overflow: hidden;
  background: var(--navy-darkest);
}

.section-divider svg {
  display: block;
  width: 100%;
  height: 60px;
}

.section-divider--light {
  background: var(--bg-light);
}

.section-divider--light svg {
  height: 40px;
}

.section-divider--to-dark {
  background: var(--navy-deep);
}

.section-divider--to-dark svg {
  height: 60px;
}

/* ---- 3D Card Tilt ---- */
.feature-card {
  transform-style: preserve-3d;
  will-change: transform;
}

.feature-card.tilt-active {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.feature-card .feature-card-top,
.feature-card .feature-text,
.feature-card .feature-tag,
.feature-card .feature-uses {
  transform: translateZ(20px);
}

/* ---- Magnetic Button ---- */
.cta-btn {
  will-change: transform;
}

.cta-btn.magnetic-active {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Parallax Mockup ---- */
.concept-visual {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ---- Dramatic pill entrance ---- */
.problem-pill.reveal {
  opacity: 0;
  transform: translateX(-40px) scale(0.95);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.problem-pill.reveal.visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* ---- Reduced Motion Overrides ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .concept-stage .carnet-paper {
    animation: none;
    transform: rotate(-2deg);
  }

  .concept-stage.phase-closing .carnet-paper,
  .concept-stage.phase-bridge .carnet-paper,
  .concept-stage.phase-digital .carnet-paper {
    animation: none;
    opacity: 0;
  }

  .concept-stage.phase-bridge .bridge-icon,
  .concept-stage.phase-digital .bridge-icon {
    animation: none;
    opacity: 1;
    transform: scale(1) perspective(600px) rotateY(-8deg);
  }

  .concept-stage.phase-digital .digital-card-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero-entrance {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .problem-pill.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-progress {
    display: none;
  }

  .hero-ring-arc { animation: none; opacity: 0.5; }
  @keyframes ring-pulse { 0%, 100% { opacity: 0.3; } }
  @keyframes icon-glow-pulse { 0%, 100% { } }
  @keyframes dot-pulse { 0%, 100% { } }
  @keyframes scroll-cue { 0%, 100% { } }
}