/* ═══════════════════════════════════════════════════════════
   IECAN PREMIUM — Shared visual effects layer
   Video heroes, parallax, Ken Burns, scroll reveals, counters
   Drop into any iecan.ai page via <link rel="stylesheet">
   ═══════════════════════════════════════════════════════════ */

/* ═══ DESIGN TOKENS ═══ */
:root {
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur-base: 300ms;
  --dur-reveal: 800ms;
  --dur-hero: 1100ms;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══ VIDEO HERO ═══ */
.hero-video-wrap {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background-color: #020617;
}
.hero-video {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 30%;
  opacity: 0;
  transition: opacity 600ms ease-out;
}
.hero-video.is-ready { opacity: 1; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(2,6,23,0.82) 0%,
    rgba(2,6,23,0.50) 25%,
    rgba(2,6,23,0.30) 50%,
    rgba(2,6,23,0.65) 80%,
    rgba(2,6,23,0.92) 100%);
}
.hero-overlay::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 45%,
    rgba(124,58,237,0.18) 0%,
    rgba(59,130,246,0.10) 35%,
    rgba(2,6,23,0.00) 70%);
  mix-blend-mode: screen;
}
@media(max-width:768px) {
  .hero-video { display: none; }
  .hero-video-wrap { background-size: cover; background-position: center 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none !important; }
}

/* ═══ PARALLAX DIVIDERS ═══ */
.parallax-divider {
  position: relative;
  height: 55vh;
  max-height: 600px;
  min-height: 320px;
  overflow: hidden;
  background: #020617;
  isolation: isolate;
}
.parallax-bg {
  position: absolute;
  inset: -25% 0;
  will-change: auto;
}
.parallax-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.parallax-divider::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(2,6,23,1) 0%,
    rgba(2,6,23,0.3) 15%,
    rgba(2,6,23,0.1) 50%,
    rgba(2,6,23,0.3) 85%,
    rgba(2,6,23,1) 100%);
}
/* Optional text overlay on parallax */
.parallax-content {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  height: 100%; text-align: center; padding: 0 24px;
}
.parallax-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 700; color: #F1F5F9;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
  max-width: 700px;
}
.parallax-content em {
  background: linear-gradient(135deg, #3B82F6, #7C3AED);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* ═══ VIDEO PARALLAX DIVIDERS ═══ */
.parallax-divider-video {
  position: relative;
  height: 55vh; max-height: 600px; min-height: 320px;
  overflow: hidden; background: #020617; isolation: isolate;
}
.parallax-divider-video video {
  position: absolute; inset: -10% 0;
  width: 100%; height: 120%; object-fit: cover;
  will-change: auto;
}
.parallax-divider-video::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(2,6,23,1) 0%, rgba(2,6,23,0.25) 15%,
    rgba(2,6,23,0.08) 50%, rgba(2,6,23,0.25) 85%,
    rgba(2,6,23,1) 100%);
}
@media(max-width:768px) {
  .parallax-divider-video video { display: none; }
  .parallax-divider-video { background-size: cover; background-position: center; }
}

/* ═══ KEN BURNS ═══ */
@keyframes kb-zoom-in {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(0,0,0) scale(1.08); }
}
@keyframes kb-pan-right {
  from { transform: translate3d(-1.5%, 0.5%, 0) scale(1.04); }
  to   { transform: translate3d(1.5%, -0.5%, 0) scale(1.08); }
}
@keyframes kb-pan-left {
  from { transform: translate3d(1.5%, -0.5%, 0) scale(1.05); }
  to   { transform: translate3d(-1.5%, 0.5%, 0) scale(1.09); }
}
.kb-zoom-in img   { animation: kb-zoom-in 24s ease-in-out infinite alternate both; backface-visibility: hidden; }
.kb-pan-right img { animation: kb-pan-right 28s ease-in-out infinite alternate both; backface-visibility: hidden; }
.kb-pan-left img  { animation: kb-pan-left 26s ease-in-out infinite alternate both; backface-visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .kb-zoom-in img, .kb-pan-right img, .kb-pan-left img {
    animation: none !important; transform: none !important;
  }
}

/* ═══ SCROLL REVEALS ═══ */
[data-reveal] {
  opacity: 0; will-change: transform, opacity;
  transition: opacity var(--dur-reveal) var(--ease-out-expo),
              transform var(--dur-reveal) var(--ease-out-expo);
}
[data-reveal="fade-up"]    { transform: translate3d(0, 30px, 0); }
[data-reveal="fade-in"]    { transform: none; }
[data-reveal="scale-in"]   { transform: scale(0.96); }
[data-reveal="slide-left"] { transform: translate3d(-40px, 0, 0); }
[data-reveal="slide-right"]{ transform: translate3d(40px, 0, 0); }
[data-reveal].is-visible   { opacity: 1; transform: translate3d(0,0,0) scale(1); }

/* Hero-specific slower reveal */
[data-reveal-hero] { --dur-reveal: var(--dur-hero); }

/* Stagger children */
[data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 100ms; }
[data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 200ms; }
[data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 300ms; }
[data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 400ms; }
[data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 500ms; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ═══ COUNTERS ═══ */
.counter {
  font-family: 'DM Mono', monospace;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #3B82F6, #7C3AED);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ═══ PREMIUM CARD HOVER ═══ */
.product-card, .own-card {
  transition: transform var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-out-expo) !important;
}
.product-card:hover, .own-card:hover {
  transform: translate3d(0, -6px, 0) !important;
  border-color: rgba(124,58,237,0.3) !important;
  box-shadow: 0 12px 40px -10px rgba(59,130,246,0.25),
              0 0 0 1px rgba(124,58,237,0.15) !important;
}

/* ═══ CTA BUTTON PREMIUM ═══ */
.final-cta-btn {
  position: relative; overflow: hidden;
  transition: transform var(--dur-fast) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-out-expo) !important;
}
.final-cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(59,130,246,0.3) !important;
}
.final-cta-btn::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,0.25) 50%, transparent 80%);
  transform: translateX(-100%);
  transition: transform 600ms ease;
}
.final-cta-btn:hover::before { transform: translateX(100%); }

/* ═══ SECTION FADE TRANSITIONS ═══ */
.section-fade-bottom { position: relative; }
.section-fade-bottom::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 120px; pointer-events: none;
  background: linear-gradient(180deg, rgba(2,6,23,0) 0%, rgba(2,6,23,1) 100%);
}
.section-fade-bottom-light::after {
  background: linear-gradient(180deg, rgba(249,250,251,0) 0%, rgba(249,250,251,1) 100%);
}

/* ═══ FILM GRAIN (subtle texture) ═══ */
.film-grain::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}