/* ==========================================================================
   NXTL eSIM — SHARED PREMIUM MOTION SYSTEM
   Progressive enhancement only: resting layouts remain unchanged.
   ========================================================================== */

:root {
  --nxtl-motion-instant: 120ms;
  --nxtl-motion-fast: 180ms;
  --nxtl-motion-base: 260ms;
  --nxtl-motion-reveal: 540ms;
  --nxtl-motion-hero: 600ms;
  --nxtl-motion-stagger: 48ms;
  --nxtl-motion-distance-sm: 8px;
  --nxtl-motion-distance-md: 18px;
  --nxtl-motion-distance-lg: 26px;
  --nxtl-ease-standard: cubic-bezier(.2, .8, .2, 1);
  --nxtl-ease-out: cubic-bezier(.22, 1, .36, 1);
  --nxtl-ease-emphasis: cubic-bezier(.16, 1, .3, 1);
}

html.nxtl-motion-ready {
  overflow-x: clip;
}

/* The global shell keeps its approved black base, with a near-black tonal lift. */
html.nxtl-motion-ready .ftr {
  background-image: linear-gradient(
    180deg,
    rgba(255, 61, 90, .026) 0%,
    rgba(27, 30, 40, .18) 28%,
    rgba(7, 8, 12, 0) 72%
  );
  background-repeat: no-repeat;
}

/* Preparation is applied only after the JavaScript enhancement layer is ready. */
html.nxtl-motion-ready .nxtl-motion-reveal,
html.nxtl-motion-ready .nxtl-motion-media,
html.nxtl-motion-ready .nxtl-motion-stagger > .nxtl-motion-item,
html.nxtl-motion-ready .nxtl-motion-hero {
  opacity: 0;
  translate: 0 var(--nxtl-motion-distance-md);
}

html.nxtl-motion-ready .nxtl-motion-reveal,
html.nxtl-motion-ready .nxtl-motion-stagger > .nxtl-motion-item {
  transition:
    opacity var(--nxtl-motion-reveal) var(--nxtl-ease-out),
    translate var(--nxtl-motion-reveal) var(--nxtl-ease-out);
  transition-delay: var(--nxtl-motion-delay, 0ms);
}

html.nxtl-motion-ready .nxtl-motion-hero {
  transition:
    opacity var(--nxtl-motion-hero) var(--nxtl-ease-emphasis),
    translate var(--nxtl-motion-hero) var(--nxtl-ease-emphasis);
  transition-delay: calc(var(--nxtl-motion-order, 0) * var(--nxtl-motion-stagger));
}

html.nxtl-motion-ready .nxtl-motion-media {
  scale: 1.015;
  transition:
    opacity var(--nxtl-motion-reveal) var(--nxtl-ease-out),
    translate var(--nxtl-motion-reveal) var(--nxtl-ease-out),
    scale var(--nxtl-motion-hero) var(--nxtl-ease-emphasis);
  transition-delay: var(--nxtl-motion-delay, 0ms);
}

html.nxtl-motion-ready .nxtl-motion-reveal.nxtl-motion-visible,
html.nxtl-motion-ready .nxtl-motion-media.nxtl-motion-visible,
html.nxtl-motion-ready .nxtl-motion-stagger > .nxtl-motion-item.nxtl-motion-visible,
html.nxtl-motion-ready .nxtl-motion-hero.nxtl-motion-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

html.nxtl-motion-ready [data-nxtl-motion="from-left"] {
  translate: calc(-1 * var(--nxtl-motion-distance-md)) 0;
}

html.nxtl-motion-ready [data-nxtl-motion="from-right"] {
  translate: var(--nxtl-motion-distance-md) 0;
}

html.nxtl-motion-ready [data-nxtl-motion="from-left"].nxtl-motion-visible,
html.nxtl-motion-ready [data-nxtl-motion="from-right"].nxtl-motion-visible {
  translate: 0 0;
}

/* A clear but controlled menu entrance: brand, navigation, then utility actions. */
html.nxtl-motion-ready .nxtl-motion-header-enter :where(.logo, .nav, .hdr-r) {
  opacity: 0;
  filter: blur(2px);
  translate: 0 -10px;
  transition:
    opacity 520ms var(--nxtl-ease-emphasis),
    filter 520ms var(--nxtl-ease-emphasis),
    translate 520ms var(--nxtl-ease-emphasis);
}

html.nxtl-motion-ready .nxtl-motion-header-enter .nav {
  transition-delay: 70ms;
}

html.nxtl-motion-ready .nxtl-motion-header-enter .hdr-r {
  transition-delay: 130ms;
}

html.nxtl-motion-ready .nxtl-motion-header-enter.nxtl-motion-visible :where(.logo, .nav, .hdr-r) {
  opacity: 1;
  filter: blur(0);
  translate: 0 0;
}

/* Tactile controls preserve dimensions and immediate keyboard focus. */
html.nxtl-motion-ready :where(.btn, .hdr-cta, .app-badge-lk, button[type="submit"], a[class*="-btn"]),
html.nxtl-motion-ready .nxtl-motion-card--interactive {
  transition-duration: var(--nxtl-motion-fast);
  transition-timing-function: var(--nxtl-ease-standard);
  transition-property: color, background-color, border-color, box-shadow, opacity, transform, translate, scale, filter;
}

@media (hover: hover) and (pointer: fine) {
  html.nxtl-motion-ready :where(.btn, .hdr-cta, .app-badge-lk, button[type="submit"], a[class*="-btn"]):hover {
    translate: 0 -1px;
  }

  html.nxtl-motion-ready .nxtl-motion-card--interactive:hover {
    translate: 0 -2px;
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  }
}

html.nxtl-motion-ready :where(.btn, .hdr-cta, .app-badge-lk, button[type="submit"], a[class*="-btn"]):active,
html.nxtl-motion-ready .nxtl-motion-card--interactive:active {
  scale: .985;
}

html.nxtl-motion-ready :focus-visible {
  transition-delay: 0ms !important;
}

/* Shared shell motion. Height never changes, so the state cannot shift layout. */
html.nxtl-motion-ready .hdr {
  --nxtl-scroll-progress: 0;
  translate: 0 0;
  transition:
    background-color var(--nxtl-motion-base) var(--nxtl-ease-standard),
    border-color var(--nxtl-motion-base) var(--nxtl-ease-standard),
    box-shadow var(--nxtl-motion-base) var(--nxtl-ease-standard),
    backdrop-filter var(--nxtl-motion-base) var(--nxtl-ease-standard),
    translate var(--nxtl-motion-base) var(--nxtl-ease-emphasis);
}

/* The gradient is an overlay, allowing a smooth tonal change without repainting layout. */
html.nxtl-motion-ready .hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    rgba(255, 61, 90, .052) 0%,
    rgba(23, 26, 36, .07) 36%,
    rgba(90, 105, 255, .026) 100%
  );
  opacity: .58;
  transition: opacity 360ms var(--nxtl-ease-standard);
}

html.nxtl-motion-ready .hdr::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 1;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, #ff3d5a 0%, #e61e58 52%, rgba(119, 137, 255, .72) 100%);
  box-shadow: 0 0 10px rgba(255, 61, 90, .24);
  opacity: .78;
  transform: scaleX(var(--nxtl-scroll-progress));
  transform-origin: left center;
  transition: opacity var(--nxtl-motion-base) var(--nxtl-ease-standard);
}

html.nxtl-motion-ready .hdr-in {
  position: relative;
  z-index: 2;
}

html.nxtl-motion-ready .hdr.scrolled {
  background-color: rgba(10, 12, 18, .965);
  border-bottom-color: rgba(255, 255, 255, .16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

html.nxtl-motion-ready .hdr.scrolled::before {
  opacity: 1;
}

html.nxtl-motion-ready :where(.sub-menu, .cur-menu) {
  transition-duration: var(--nxtl-motion-fast);
  transition-timing-function: var(--nxtl-ease-out);
}

html.nxtl-motion-ready .nxtl-drawer,
html.nxtl-motion-ready .nxtl-drawer-backdrop {
  transition-duration: 0.28s;
  transition-timing-function: var(--nxtl-ease-emphasis);
}

/*
   Persistent viewport response is intentionally non-destructive: no content fades
   out and no section reveal replays. Only selected cards and numeric highlights
   receive a measured tonal/position settle as they cross the viewport edge.
*/
html.nxtl-motion-ready .nxtl-motion-ambient {
  transition:
    filter 420ms var(--nxtl-ease-emphasis),
    translate 420ms var(--nxtl-ease-emphasis),
    scale 420ms var(--nxtl-ease-emphasis);
}

html.nxtl-motion-ready .nxtl-motion-ambient--card:not(.nxtl-motion-in-view) {
  filter: brightness(.88) saturate(.92);
  translate: 0 8px;
  scale: .99;
}

html.nxtl-motion-ready .nxtl-motion-ambient--value:not(.nxtl-motion-in-view) {
  filter: brightness(.8);
  translate: 0 3px;
  scale: .96;
}

html.nxtl-motion-ready .nxtl-motion-ambient.nxtl-motion-in-view {
  filter: brightness(1);
  translate: 0 0;
  scale: 1;
}

@media (hover: hover) and (pointer: fine) {
  html.nxtl-motion-ready .nxtl-motion-card--interactive.nxtl-motion-ambient--card:hover {
    translate: 0 -2px;
  }
}

/* Optional one-shot SVG route/connector contract. */
html.nxtl-motion-ready [data-nxtl-motion="line"] {
  stroke-dasharray: var(--nxtl-motion-line-length, 1);
  stroke-dashoffset: var(--nxtl-motion-line-length, 1);
  transition: stroke-dashoffset var(--nxtl-motion-hero) var(--nxtl-ease-emphasis);
}

html.nxtl-motion-ready [data-nxtl-motion="line"].nxtl-motion-visible {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  html.nxtl-motion-ready .nxtl-motion-reveal,
  html.nxtl-motion-ready .nxtl-motion-media,
  html.nxtl-motion-ready .nxtl-motion-stagger > .nxtl-motion-item,
  html.nxtl-motion-ready .nxtl-motion-hero,
  html.nxtl-motion-ready .nxtl-motion-header-enter,
  html.nxtl-motion-ready .nxtl-motion-header-enter :where(.logo, .nav, .hdr-r),
  html.nxtl-motion-ready .nxtl-motion-ambient,
  html.nxtl-motion-ready [data-nxtl-motion],
  html.nxtl-motion-ready .hdr,
  html.nxtl-motion-ready .hdr.nxtl-motion-header-hidden {
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
    scale: 1 !important;
    translate: 0 0 !important;
    transform: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }

  html.nxtl-motion-ready .hdr::before,
  html.nxtl-motion-ready .hdr::after {
    transition-duration: .01ms !important;
  }
}