/* ==========================================================================
   SMS DEVELOPERS — MOTION ENGINE & SIGNATURE INTERACTIONS
   ========================================================================== */

/* 1. Core Scroll Reveal Engine */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  will-change: opacity, transform;
}

[data-reveal="mask"] {
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 24px, 0);
  transition: clip-path 0.9s var(--ease), transform 0.9s var(--ease), opacity 0.9s var(--ease);
}

[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.94) translate3d(0, 20px, 0);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}

[data-reveal="left"] {
  opacity: 0;
  transform: translate3d(-36px, 0, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

[data-reveal="right"] {
  opacity: 0;
  transform: translate3d(36px, 0, 0);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

/* Active State */
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  clip-path: inset(0 0 0% 0);
}

/* Stagger Children Support */
.stagger-group > [data-reveal]:nth-child(1) { transition-delay: 0.05s; }
.stagger-group > [data-reveal]:nth-child(2) { transition-delay: 0.12s; }
.stagger-group > [data-reveal]:nth-child(3) { transition-delay: 0.19s; }
.stagger-group > [data-reveal]:nth-child(4) { transition-delay: 0.26s; }
.stagger-group > [data-reveal]:nth-child(5) { transition-delay: 0.33s; }
.stagger-group > [data-reveal]:nth-child(6) { transition-delay: 0.40s; }
.stagger-group > [data-reveal]:nth-child(7) { transition-delay: 0.47s; }
.stagger-group > [data-reveal]:nth-child(8) { transition-delay: 0.54s; }

/* 2. Signature: SMS Portal Aperture */
.portal-aperture-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.portal-diagonal-cut {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 48%, var(--border-gold) 50%, transparent 52%);
  opacity: 0.4;
  mix-blend-mode: overlay;
}

/* 3. Gold Hairline Scanning Sweep */
.gold-scan-sweep {
  position: relative;
  overflow: hidden;
}

.gold-scan-sweep::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(216, 177, 91, 0.08) 35%,
    rgba(243, 215, 136, 0.28) 50%,
    rgba(216, 177, 91, 0.08) 65%,
    transparent 100%
  );
  transform: skewX(-24deg);
  pointer-events: none;
  animation: goldSweep 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes goldSweep {
  0% { left: -100%; }
  35%, 100% { left: 200%; }
}

/* 4. Kinetic Typography & Metallic Sheen */
.kinetic-headline {
  letter-spacing: -0.04em;
  line-height: 0.95;
  will-change: transform, letter-spacing;
  transition: letter-spacing 0.2s ease-out;
}

.metallic-gold-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  position: relative;
  font-weight: 800;
}

.metallic-gold-text::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255, 255, 255, 0.6) 45%,
    transparent 70%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
  opacity: 0.7;
  animation: metallicShine 7s ease-in-out infinite;
}

@keyframes metallicShine {
  0%, 70% { transform: translateX(-150%); opacity: 0; }
  75% { opacity: 0.9; }
  85%, 100% { transform: translateX(150%); opacity: 0; }
}

/* 5. Cursor Interactive Spotlight (Full Profile) */
.cursor-spotlight {
  position: fixed;
  pointer-events: none;
  z-index: 2;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(216, 177, 91, 0.06) 0%,
    rgba(216, 177, 91, 0.02) 40%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: left, top;
}

html[data-motion='full'] .cursor-spotlight {
  opacity: 1;
}

/* 6. 3D Tilt Card Interaction */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.25s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}

/* 7. Magnetic CTA Elements */
[data-magnetic] {
  display: inline-flex;
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* 8. Branded Aperture Theme Transition */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

.theme-transition-portal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  background: var(--bg);
  clip-path: circle(0% at var(--theme-origin-x, 50%) var(--theme-origin-y, 50%));
  transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}

.theme-transition-portal.expanding {
  clip-path: circle(150% at var(--theme-origin-x, 50%) var(--theme-origin-y, 50%));
}

/* ==========================================================================
   PERFORMANCE PROFILES (Adaptive Motion Engine)
   ========================================================================== */

/* BALANCED PROFILE: Laptops, Tablets, Mid-tier phones */
html[data-motion='balanced'] .cursor-spotlight {
  display: none;
}
html[data-motion='balanced'] [data-tilt] {
  transition: transform 0.2s ease-out;
}

/* LITE PROFILE: Low-End, Save-Data, Low Concurrency */
html[data-motion='lite'] {
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

html[data-motion='lite'] .cursor-spotlight {
  display: none !important;
}

html[data-motion='lite'] [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html[data-motion='lite'] .gold-scan-sweep::after,
html[data-motion='lite'] .metallic-gold-text::after {
  animation: none !important;
  display: none !important;
}

html[data-motion='lite'] [data-tilt] {
  transform: none !important;
}

/* ACCESSIBILITY: PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  [data-reveal],
  [data-reveal="mask"],
  [data-reveal="scale"],
  [data-reveal="left"],
  [data-reveal="right"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  
  .cursor-spotlight,
  .gold-scan-sweep::after,
  .metallic-gold-text::after {
    display: none !important;
  }
}