/* ===== FUTUDATA — Motion system (refined) =====
   Calm, slow, premium. Short translations (8–12px), long easings (1–1.3s),
   never a bounce. Composed micro-interactions, not flashy effects. */

/* Easing & timing tokens — used consistently everywhere */
:root {
  --ease-out-soft: cubic-bezier(0.16, 0.84, 0.32, 1);   /* primary reveal ease */
  --ease-out-deep: cubic-bezier(0.22, 1, 0.36, 1);       /* large arrivals */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);       /* drifts */

  --reveal-dur:    1100ms;
  --reveal-delay:  0ms;
  --hover-dur:     520ms;
}

/* ========================================================================
   REVEAL VARIANTS
   Subtle: 10px lift, ~1.1s ease. No scale by default. No flashy.
   ======================================================================== */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition:
    opacity var(--reveal-dur) var(--ease-out-soft) var(--reveal-delay),
    transform var(--reveal-dur) var(--ease-out-soft) var(--reveal-delay),
    filter calc(var(--reveal-dur) * 0.7) var(--ease-out-soft) var(--reveal-delay);
}
[data-reveal="rise"]        { transform: translate3d(0, 10px, 0); }
[data-reveal="fade"]        { /* opacity only */ }
[data-reveal="blur-in"]     { transform: translate3d(0, 8px, 0); filter: blur(6px); }
[data-reveal="slide-left"]  { transform: translate3d(16px, 0, 0); }
[data-reveal="slide-right"] { transform: translate3d(-16px, 0, 0); }
[data-reveal="scale"]       { transform: scale(0.985); }

[data-reveal].in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: none;
}

/* Stagger container — children share data-reveal="rise" via JS,
   delays applied via inline --reveal-delay */
[data-reveal="stagger"] {
  /* container itself doesn't animate */
  opacity: 1 !important;
  transform: none !important;
}
[data-reveal="stagger"] > * {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  will-change: opacity, transform;
  transition:
    opacity var(--reveal-dur) var(--ease-out-soft) var(--reveal-delay, 0ms),
    transform var(--reveal-dur) var(--ease-out-soft) var(--reveal-delay, 0ms);
}
[data-reveal="stagger"].in > * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ========================================================================
   SECTION-HEAD: 3-line internal stagger (eyebrow → h2 → lead)
   ======================================================================== */
section .section-head .eyebrow,
section .section-head h2,
section .section-head .lead {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 1.1s var(--ease-out-soft),
    transform 1.1s var(--ease-out-soft);
}
section .section-head h2          { transition-delay: 0.10s; }
section .section-head .lead       { transition-delay: 0.22s; }

[data-reveal="stagger"].in ~ * .section-head .eyebrow,
section[data-revealed] .section-head .eyebrow,
.reveal.is-visible .section-head .eyebrow {
  opacity: 1; transform: translate3d(0, 0, 0);
}

/* Use IO on each section-head via JS — but provide an instant fallback so
   first-paint visible sections are not stuck invisible */
.section-head.in .eyebrow,
.section-head.in h2,
.section-head.in .lead {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ========================================================================
   HERO — choreographed entrance, very gentle
   ======================================================================== */
.hero .hero-eyebrow-row,
.hero h1,
.hero .lead,
.hero .hero-ctas,
.hero .hero-meta {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: hero-rise 1.2s var(--ease-out-soft) forwards;
}
.hero .hero-eyebrow-row { animation-delay: 0.05s; }
.hero h1                { animation-delay: 0.18s; }
.hero .lead             { animation-delay: 0.34s; }
.hero .hero-ctas        { animation-delay: 0.50s; }
.hero .hero-meta        { animation-delay: 0.66s; }

@keyframes hero-rise {
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.hero .dash {
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.99);
  animation: hero-dash-in 1.4s var(--ease-out-deep) 0.4s forwards;
}
@keyframes hero-dash-in {
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Floating tiles: smooth, varied bobbing + entry */
.float-tile {
  opacity: 0;
  animation:
    float 7s var(--ease-in-out) infinite,
    float-in 1s var(--ease-out-soft) forwards;
}
.float-tile:nth-of-type(1) { animation-delay: 0s, 0.95s; }
.float-tile:nth-of-type(2) { animation-delay: 2.3s, 1.20s; animation-duration: 8s, 1s; }
.float-tile:nth-of-type(3) { animation-delay: 4.1s, 1.45s; animation-duration: 9s, 1s; }
@keyframes float-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero ambient — glow drift */
.hero-bg .glow-a { animation: drift-a 24s var(--ease-in-out) infinite alternate; }
.hero-bg .glow-b { animation: drift-b 28s var(--ease-in-out) infinite alternate; }
@keyframes drift-a {
  0%   { transform: translate(0, 0); opacity: 0.95; }
  100% { transform: translate(40px, 28px); opacity: 1; }
}
@keyframes drift-b {
  0%   { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(-44px, 24px); opacity: 0.9; }
}

/* Subtle gradient flow on grad-text */
.grad-text {
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: grad-flow 12s var(--ease-in-out) infinite;
}
@keyframes grad-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ========================================================================
   STAT COUNTERS — gentle scale-in (number tweens via JS)
   ======================================================================== */
.stat .v {
  font-variant-numeric: tabular-nums;
}
.hero-meta .stat .v {
  display: inline-block;
}

/* ========================================================================
   CARDS — refined hover (no scaling, just lift + light)
   Shine sweep is one diagonal pass; spotlight follows the cursor.
   ======================================================================== */
.value-card,
.svc-card,
.insight,
.proj,
.mvv .card,
.benefit {
  transition:
    transform var(--hover-dur) var(--ease-out-soft),
    border-color 0.4s ease,
    background 0.4s ease,
    box-shadow var(--hover-dur) var(--ease-out-soft);
}
.value-card:hover,
.svc-card:hover,
.insight:hover,
.proj:hover {
  transform: translate3d(0, -3px, 0);
  box-shadow:
    0 22px 50px -28px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 198, 255, 0.10) inset;
}

/* Cursor-following spotlight on cards with [data-spotlight] */
[data-spotlight] {
  position: relative;
  --spot-x: 50%;
  --spot-y: 50%;
  --spot-o: 0;
}
[data-spotlight]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    240px 240px at var(--spot-x) var(--spot-y),
    rgba(0, 198, 255, 0.16),
    transparent 60%
  );
  opacity: var(--spot-o);
  transition: opacity 0.5s ease;
  z-index: 0;
}
[data-spotlight] > * { position: relative; z-index: 1; }
[data-spotlight]:hover { --spot-o: 1; }

/* Shine sweep — diagonal pass on hover (only for svc-card, the strongest) */
.svc-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgba(255,255,255,0.05) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  transition: transform 1s var(--ease-out-deep);
  z-index: 0;
}
.svc-card:hover::after { transform: translateX(100%); }

/* Icon — gentle lift */
.value-card .icon,
.svc-card .icon-wrap,
.mvv .card .label {
  transition: transform 0.55s var(--ease-out-soft), box-shadow 0.5s ease;
}
.value-card:hover .icon,
.svc-card:hover .icon-wrap {
  transform: translate3d(0, -2px, 0);
  box-shadow: 0 10px 24px -10px rgba(0, 198, 255, 0.45);
}

/* Insight & project thumbnail — slow zoom on hover */
.insight .thumb, .proj .visual { overflow: hidden; }
.insight .thumb > *, .proj .visual > * {
  transition: transform 1.4s var(--ease-out-soft);
}
.insight:hover .thumb > *, .proj:hover .visual > * {
  transform: scale(1.04);
}

/* Benefit — subtle slide */
.benefit:hover {
  transform: translate3d(3px, 0, 0);
  border-color: rgba(0, 198, 255, 0.28);
}

/* ========================================================================
   BUTTONS — refined sheen + arrow nudge
   ======================================================================== */
.btn {
  transition:
    transform 0.4s var(--ease-out-soft),
    box-shadow 0.4s ease,
    background 0.35s ease,
    border-color 0.35s ease;
}
.btn:hover { transform: translate3d(0, -1px, 0); }

.btn-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -40%; width: 30%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.28) 50%,
    transparent 70%
  );
  transform: skewX(-20deg);
  transition: left 0.9s var(--ease-out-deep);
  pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }

.btn-arrow { transition: transform 0.4s var(--ease-out-soft); }

/* ========================================================================
   PROCESS — step number rotates softly; line draws on reveal
   ======================================================================== */
.step-num::after {
  animation: step-rotate 14s linear infinite;
}
@keyframes step-rotate { to { transform: rotate(360deg); } }

.step-num {
  transition: transform 0.55s var(--ease-out-soft), box-shadow 0.5s ease;
}
.step-card:hover .step-num {
  transform: scale(1.04);
  box-shadow: 0 12px 28px -12px rgba(0, 198, 255, 0.4);
}

.process::before {
  background-size: 200% 100%;
  background-position: 100% 50%;
  transition: background-position 2.2s var(--ease-out-soft);
}
.process[data-line-in]::before {
  background-position: 0% 50%;
}

/* ========================================================================
   FEATURED — gentle background drift
   ======================================================================== */
.featured {
  background-size: 100% 100%, 100% 100%, 100% 100%;
  animation: featured-drift 22s var(--ease-in-out) infinite;
}
@keyframes featured-drift {
  0%, 100% { background-position: 100% 0%, 0% 100%, 0% 0%; }
  50%      { background-position: 95%  5%, 5%  95%, 0% 0%; }
}

/* e-CF points reveal sequentially */
.featured-points li {
  opacity: 0;
  transform: translateX(-10px);
  transition:
    opacity 0.85s var(--ease-out-soft),
    transform 0.85s var(--ease-out-soft);
}
.featured-points.in li { opacity: 1; transform: translateX(0); }
.featured-points.in li:nth-child(1) { transition-delay: 0.05s; }
.featured-points.in li:nth-child(2) { transition-delay: 0.13s; }
.featured-points.in li:nth-child(3) { transition-delay: 0.21s; }
.featured-points.in li:nth-child(4) { transition-delay: 0.29s; }
.featured-points.in li:nth-child(5) { transition-delay: 0.37s; }
.featured-points.in li:nth-child(6) { transition-delay: 0.45s; }
.featured-points.in li:nth-child(7) { transition-delay: 0.53s; }

/* Flow line — active step pulses softly */
.flowline .step.active {
  animation: step-pulse 3s var(--ease-in-out) infinite;
}
@keyframes step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 198, 255, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(0, 198, 255, 0.15); }
}

/* ========================================================================
   NAV — link underline grow
   ======================================================================== */
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.5s var(--ease-out-soft);
}
.nav-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.site-header {
  transition:
    background 0.55s var(--ease-out-soft),
    backdrop-filter 0.55s var(--ease-out-soft),
    border-color 0.55s var(--ease-out-soft);
}

/* ========================================================================
   FOOTER
   ======================================================================== */
.foot-social a {
  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    transform 0.4s var(--ease-out-soft);
}
.foot-social a:hover { transform: translate3d(0, -2px, 0); }

/* ========================================================================
   CTA-FINAL — F-mark gentle glow pulse
   ======================================================================== */
.cta-final svg[aria-label="FUTUDATA"] {
  animation: cta-mark-pulse 4.5s var(--ease-in-out) infinite;
}
@keyframes cta-mark-pulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(0, 198, 255, 0.20)); }
  50%      { filter: drop-shadow(0 0 22px rgba(0, 198, 255, 0.55)); }
}

/* ========================================================================
   REDUCED MOTION
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal],
  [data-reveal="stagger"] > *,
  .section-head .eyebrow,
  .section-head h2,
  .section-head .lead,
  .hero .hero-eyebrow-row,
  .hero h1, .hero .lead,
  .hero .hero-ctas, .hero .hero-meta,
  .hero .dash, .float-tile,
  .featured-points li {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}