/* ─────────────────────────────────────────────────────────────
   premium.css — shared premium animation layer for all mockups
   Patterns: Stripe / Linear / Hawksford easing + scroll reveals
   Authored 2026-05 · Entegrix UAE revamp
   ───────────────────────────────────────────────────────────── */

:root{
  /* Premium easing curves (Linear-style: cubic-bezier "out expo") */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-smooth: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Premium shadow scale */
  --shadow-sm: 0 1px 2px rgba(26,16,46,.06);
  --shadow-md: 0 8px 24px -8px rgba(26,16,46,.12);
  --shadow-lg: 0 22px 50px -20px rgba(26,16,46,.18);
  --shadow-xl: 0 30px 80px -20px rgba(0,0,0,.5);
  --shadow-sky: 0 12px 28px rgba(161,212,232,.30);
}

/* ── Reveal-on-scroll (intersection observer triggers .is-in) ── */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition: opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.is-in{ opacity:1; transform:translateY(0); }

.reveal-soft{
  opacity:0;
  transform:translateY(12px);
  transition: opacity .6s var(--ease-out-smooth), transform .6s var(--ease-out-smooth);
}
.reveal-soft.is-in{ opacity:1; transform:translateY(0); }

.reveal-fade{
  opacity:0;
  transition: opacity 1.2s var(--ease-out-smooth);
}
.reveal-fade.is-in{ opacity:1; }

/* Stagger child delays — apply .stagger-children to parent */
.stagger-children > *{ transition-delay: 0ms; }
.stagger-children.is-in > *:nth-child(1){ transition-delay: 80ms; }
.stagger-children.is-in > *:nth-child(2){ transition-delay: 160ms; }
.stagger-children.is-in > *:nth-child(3){ transition-delay: 240ms; }
.stagger-children.is-in > *:nth-child(4){ transition-delay: 320ms; }
.stagger-children.is-in > *:nth-child(5){ transition-delay: 400ms; }
.stagger-children.is-in > *:nth-child(6){ transition-delay: 480ms; }
.stagger-children.is-in > *:nth-child(7){ transition-delay: 560ms; }
.stagger-children.is-in > *:nth-child(8){ transition-delay: 640ms; }
.stagger-children.is-in > *:nth-child(9){ transition-delay: 720ms; }

/* ── Magnetic button (data-magnetic attribute) ── */
.magnetic{
  transition: transform .25s var(--ease-out-smooth);
  will-change: transform;
}

/* ── Animated underline links ── */
.underline-anim{
  position:relative;
  display:inline-block;
  padding-bottom:2px;
}
.underline-anim::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:1px; background:currentColor;
  transform: scaleX(1); transform-origin: right;
  transition: transform .55s var(--ease-out-expo);
}
.underline-anim:hover::after{
  transform: scaleX(0); transform-origin: left;
  animation: ul-redraw .55s var(--ease-out-expo) .15s forwards;
}
@keyframes ul-redraw{
  0%{ transform: scaleX(0); transform-origin: left; }
  100%{ transform: scaleX(1); transform-origin: left; }
}

/* ── Marquee / infinite scroll (trust logos) ── */
.marquee{
  display:flex; overflow:hidden; width:100%;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track{
  display:flex; flex-shrink:0;
  animation: marquee-scroll 38s linear infinite;
  gap: 12px;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ── Card lift on hover ── */
.card-lift{
  transition: transform .35s var(--ease-out-smooth), box-shadow .35s var(--ease-out-smooth), border-color .35s var(--ease-out-smooth);
}
.card-lift:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ── Pulse-on-load attention ring (for primary CTAs) ── */
.pulse-ring{ position:relative; }
.pulse-ring::before{
  content:''; position:absolute; inset:-4px;
  border-radius: inherit;
  border: 1px solid currentColor;
  opacity:0;
  animation: pulse-out 3s var(--ease-out-expo) infinite;
  animation-delay: 1.5s;
  pointer-events:none;
}
@keyframes pulse-out{
  0%{ inset:-2px; opacity:.5; }
  70%{ inset:-14px; opacity:0; }
  100%{ inset:-14px; opacity:0; }
}

/* ── Gradient text shimmer (for accent words) ── */
.text-shimmer{
  background: linear-gradient(110deg, var(--sky,#A1D4E8) 30%, #C8E5F0 50%, var(--sky,#A1D4E8) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer{
  to{ background-position: -200% 0; }
}

/* ── Number counter (used with JS) ── */
.counter{ display:inline-block; font-variant-numeric: tabular-nums; }

/* ── Subtle parallax (hero photo) ── */
.parallax-slow{ will-change: transform; }

/* ── Cursor effects ── */
.has-cursor{ cursor: pointer; }
.has-cursor[data-cursor="play"]{ cursor: pointer; }

/* ── Smooth-scroll page-wide ── */
html{ scroll-behavior: smooth; }

/* ── Focus rings (accessibility, premium feel) ── */
*:focus-visible{
  outline: 2px solid var(--sky, #A1D4E8);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Reduced motion respect ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-soft, .reveal-fade{ opacity:1 !important; transform:none !important; }
  .marquee-track{ animation: none !important; }
  .pulse-ring::before{ animation: none !important; }
  .text-shimmer{ animation: none !important; background-position: 0 0; }
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}