/* ============================================
   LUXURY MOTION DESIGN — ARISDEX
   motion.css  ·  Load after all other CSS
   ============================================ */

/* ─── KEYFRAMES ─────────────────────────────── */

/* Hero tile entrance: slide-up + blur-in + scale */
@keyframes heroTileIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.975);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

/* Button shimmer sweep */
@keyframes btnShimmer {
  0%   { left: -80%; }
  100% { left: 175%; }
}

/* Trust banner scan line */
@keyframes trustScan {
  0%        { left: -40%; }
  65%, 100% { left: 150%; }
}

/* Section label line — gold shimmer */
@keyframes labelLineShimmer {
  0%   { background-position: 0% 50%;   }
  100% { background-position: 300% 50%; }
}

/* PSC heading gradient drift */
@keyframes gradientFlow {
  0%   { background-position: 0% 50%;   }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%;   }
}

/* Trust banner text reveal */
@keyframes trustTextIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ─── HERO TILES — ENHANCED ENTRANCE ────────── */

/*
 * Override visual-identity.css's basic fadeIn with a richer
 * slide-up + blur-in. More specific selector wins.
 */
.bento-hero-grid .bento-hero-tile.fade-in {
  animation: heroTileIn 0.78s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: var(--hero-tile-delay, 0.06s);
}

/* Per-tile stagger delays */
.bento-hero-grid .bento-hero-tile:nth-child(1) { --hero-tile-delay: 0.05s; }
.bento-hero-grid .bento-hero-tile:nth-child(2) { --hero-tile-delay: 0.15s; }
.bento-hero-grid .bento-hero-tile:nth-child(3) { --hero-tile-delay: 0.25s; }
.bento-hero-grid .bento-hero-tile:nth-child(4) { --hero-tile-delay: 0.35s; }
.bento-hero-grid .bento-hero-tile:nth-child(5) { --hero-tile-delay: 0.44s; }
.bento-hero-grid .bento-hero-tile:nth-child(6) { --hero-tile-delay: 0.52s; }

/* Hero label bar entrance */
.hero-header.fade-in {
  animation: heroTileIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-delay: 0s;
}

/* ─── HERO TILES — HOVER UPGRADE ─────────────── */

.bento-hero-tile {
  will-change: transform;
  transition:
    transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.38s ease;
}

.bento-hero-tile:hover {
  transform: translateY(-7px) scale(1.014);
  border-color: rgba(58, 95, 255, 0.36);
  background: rgba(26, 26, 29, 0.72);
  box-shadow:
    0 24px 68px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(58, 95, 255, 0.12),
    0 0 32px rgba(58, 95, 255, 0.07);
}

.bento-hero-tile-featured:hover {
  border-color: rgba(58, 95, 255, 0.46);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.56),
    0 0 0 1px rgba(58, 95, 255, 0.18),
    0 0 50px rgba(58, 95, 255, 0.12);
}

/* ─── AI SERVICE CARDS — HOVER UPGRADE ──────── */

.ai-service-card {
  will-change: transform;
  transition:
    transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.38s ease;
}

.ai-service-card:hover {
  transform: translateY(-7px) scale(1.013);
  border-color: rgba(200, 168, 75, 0.3);
  background: rgba(30, 30, 30, 0.72);
  box-shadow:
    0 28px 72px rgba(0, 0, 0, 0.52),
    0 0 0 1px rgba(200, 168, 75, 0.1),
    0 0 36px rgba(200, 168, 75, 0.06);
}

/* ─── TRUST SERVICE CARDS — HOVER LIFT ──────── */

.service-card {
  will-change: transform;
  transition:
    background 0.3s ease,
    transform 0.38s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.38s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(224, 32, 32, 0.1);
}

/* ─── CREDENTIAL BLOCKS — HOVER LIFT ─────────── */

.cred-block {
  will-change: transform;
  transition:
    background 0.3s ease,
    transform 0.36s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.36s ease;
}

.cred-block:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.38);
}

/* ─── SECTION HEADER REVEAL — SMOOTHER ───────── */

/* Upgrade the container transition for section headers */
.ai-services-header.reveal,
.psc-header.reveal {
  transition:
    opacity 0.75s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.75s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ─── TRUST SECTION — STAGGER REVEAL ─────────── */

/*
 * These elements each have .reveal and get .is-visible at roughly the same
 * moment. Setting transition-delay on the PRE-visible state staggers them,
 * because the browser reads transition-delay from the "from" state.
 * Specificity: (0,3,0) beats .reveal at (0,1,0).
 */
.section .section-label.reveal  { transition-delay: 0s;    }
.section .section-title.reveal   { transition-delay: 0.1s;  }
.section .section-body.reveal    { transition-delay: 0.2s;  }
.section .services-grid.reveal   { transition-delay: 0.32s; }

/* ─── SECTION LABEL — ANIMATED SHIMMER LINE ─── */

/* Animated gold-red gradient on the decorative line */
.section-label::before {
  background: linear-gradient(
    90deg,
    var(--red, #e02020) 0%,
    var(--gold, #c8a84b) 50%,
    var(--red, #e02020) 100%
  );
  background-size: 300% 100%;
  animation: labelLineShimmer 4s linear infinite;
}

/* ─── PSC HEADING — GRADIENT ANIMATION ──────── */

.psc-heading em {
  background-size: 200% 200%;
  animation: gradientFlow 6s ease-in-out infinite;
}

/* ─── BUTTON SYSTEM — GLOW + SHIMMER + MAGNETIC ─ */

/*
 * CSS variables --mag-x / --mag-y are set by motion.js on mousemove
 * and reset to 0px on mouseleave. The transform combines magnetic
 * offset with the hover lift so they compose cleanly.
 */

/* ── Red Button ── */
.btn-red {
  overflow: hidden;
  transform: translate(var(--mag-x, 0px), var(--mag-y, 0px));
  transition:
    background 0.28s ease,
    transform 0.42s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.3s ease;
}

/* Shimmer element */
.btn-red::before {
  content: '';
  position: absolute;
  top: -15%;
  left: -80%;
  width: 52%;
  height: 130%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.14),
    transparent
  );
  transform: skewX(-22deg);
  pointer-events: none;
}

.btn-red:hover {
  transform: translate(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 3px));
  box-shadow:
    0 0 28px rgba(224, 32, 32, 0.5),
    0 0 62px rgba(224, 32, 32, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.38);
}

.btn-red:active {
  transform: translate(var(--mag-x, 0px), var(--mag-y, 0px));
}

.btn-red:hover::before {
  animation: btnShimmer 0.55s ease forwards;
}

/* ── Cobalt Primary Button ── */
.btn-base.btn-primary {
  transform: translate(var(--mag-x, 0px), var(--mag-y, 0px));
  transition:
    background 0.28s ease,
    transform 0.42s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.3s ease;
}

/* Shimmer using ::after (::before already used by visual-identity.css) */
.btn-base.btn-primary::after {
  content: '';
  position: absolute;
  top: -15%;
  left: -80%;
  width: 52%;
  height: 130%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.11),
    transparent
  );
  transform: skewX(-22deg);
  pointer-events: none;
}

.btn-base.btn-primary:hover {
  transform: translate(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 3px));
  box-shadow:
    0 0 32px rgba(58, 95, 255, 0.58),
    0 0 70px rgba(58, 95, 255, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.38);
}

.btn-base.btn-primary:active {
  transform: translate(var(--mag-x, 0px), var(--mag-y, 0px));
}

.btn-base.btn-primary:hover::after {
  animation: btnShimmer 0.55s ease forwards;
}

/* ── Secondary Outline Button ── */
.btn-base.btn-secondary {
  transform: translate(var(--mag-x, 0px), var(--mag-y, 0px));
  transition:
    all 0.28s ease,
    transform 0.42s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-base.btn-secondary:hover {
  transform: translate(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 3px));
  box-shadow:
    0 0 20px rgba(58, 95, 255, 0.22),
    0 4px 18px rgba(0, 0, 0, 0.28);
}

.btn-base.btn-secondary:active {
  transform: translate(var(--mag-x, 0px), var(--mag-y, 0px));
}

/* ── Ghost-Alt Button ── */
.btn-ghost-alt {
  overflow: hidden;
  transform: translate(var(--mag-x, 0px), var(--mag-y, 0px));
  transition:
    all 0.28s ease,
    transform 0.42s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-ghost-alt:hover {
  transform: translate(var(--mag-x, 0px), calc(var(--mag-y, 0px) - 3px));
  box-shadow:
    0 0 22px rgba(200, 168, 75, 0.26),
    0 4px 18px rgba(0, 0, 0, 0.28);
}

.btn-ghost-alt:active {
  transform: translate(var(--mag-x, 0px), var(--mag-y, 0px));
}

/* ─── TRUST BANNER — SCAN + REVEAL ──────────── */

.trust-banner {
  position: relative;
  overflow: hidden;
}

/* Traveling shimmer across the red banner */
.trust-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -40%;
  width: 32%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.04),
    transparent
  );
  transform: skewX(-12deg);
  animation: trustScan 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.trust-inner {
  position: relative;
  z-index: 1;
}

/*
 * Trust text reveal on scroll.
 * .motion-ready is added by motion.js — ensures progressive enhancement:
 * without JS, text is always visible.
 */
.motion-ready .trust-text,
.motion-ready .trust-sub {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.65s ease,
    transform 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}

.trust-banner.trust-banner--visible .trust-text {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0s;
}

.trust-banner.trust-banner--visible .trust-sub {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.12s;
}

/* Trust CTA button reveal */
.motion-ready .trust-banner .btn {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition:
    opacity 0.55s ease 0.22s,
    transform 0.55s cubic-bezier(0.23, 1, 0.32, 1) 0.22s;
}

.trust-banner.trust-banner--visible .btn {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ─── BADGE STRIP — HOVER ENHANCEMENTS ──────── */

.exp-pill {
  transition:
    transform 0.32s cubic-bezier(0.23, 1, 0.32, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.exp-pill:hover {
  transform: translateY(-3px) scale(1.04);
  border-color: rgba(200, 168, 75, 0.52);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.32),
    0 0 16px rgba(200, 168, 75, 0.1);
}

.bs-img {
  transition:
    transform 0.36s cubic-bezier(0.23, 1, 0.32, 1),
    filter 0.36s ease;
}

.bs-img:hover {
  transform: scale(1.09) translateY(-3px);
  filter: drop-shadow(0 6px 14px rgba(200, 168, 75, 0.3));
}

/* ─── HERO EXPERIENCE NUMBER — COUNTER SETUP ─── */

.hero-experience-number {
  display: inline-block;
  transition: color 0.3s ease;
}

/* ─── PARALLAX SETUP — HERO BG ───────────────── */

/* JS sets inline transform; will-change prepares GPU layer */
.hero-bg,
.hero-grid {
  will-change: transform;
}

/* ─── AI SERVICE CTA BLOCK — SUBTLE HOVER ────── */

.ai-services-cta {
  transition:
    border-color 0.4s ease,
    background 0.4s ease,
    box-shadow 0.4s ease;
}

.ai-services-cta:hover {
  border-color: rgba(200, 168, 75, 0.28);
  background: linear-gradient(135deg, rgba(224, 32, 32, 0.08) 0%, rgba(200, 168, 75, 0.06) 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* ─── ACCESSIBILITY: REDUCED MOTION ─────────── */

@media (prefers-reduced-motion: reduce) {
  /* Revert to simple fade */
  .bento-hero-grid .bento-hero-tile.fade-in,
  .hero-header.fade-in {
    animation: fadeIn 0.3s ease both; /* Use existing simple fadeIn */
    animation-delay: 0s;
    filter: none;
  }

  /* No transforms on hover */
  .bento-hero-tile:hover,
  .bento-hero-tile-featured:hover,
  .ai-service-card:hover,
  .service-card:hover,
  .cred-block:hover,
  .btn-red:hover,
  .btn-base.btn-primary:hover,
  .btn-base.btn-secondary:hover,
  .btn-ghost-alt:hover,
  .exp-pill:hover {
    transform: none;
  }

  /* No shimmer animations */
  .btn-red:hover::before,
  .btn-base.btn-primary:hover::after {
    animation: none;
  }

  /* No continuous animations */
  .trust-banner::before,
  .section-label::before,
  .psc-heading em {
    animation: none;
  }

  /* Trust banner text: show immediately */
  .motion-ready .trust-text,
  .motion-ready .trust-sub,
  .motion-ready .trust-banner .btn {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Reset stagger delays */
  .section .section-label.reveal,
  .section .section-title.reveal,
  .section .section-body.reveal,
  .section .services-grid.reveal {
    transition-delay: 0s;
  }

  /* Disable will-change */
  .hero-bg,
  .hero-grid,
  .bento-hero-tile,
  .ai-service-card,
  .service-card {
    will-change: auto;
  }
}