/**
 * ASC360 premium scroll reveals + 3D card entrances (opt-in via data-premium-motion).
 * Global foundation — tokens from asc-motion-tokens.css.
 * Loaded after styles.css — overrides legacy #credibility .glance entrance where noted.
 */

body[data-premium-motion] {
  --home-premium-ease: var(--motion-ease-standard, cubic-bezier(0.22, 1, 0.36, 1));
  --home-premium-dur: var(--motion-duration-reveal, 820ms);
  --home-premium-stagger: var(--motion-stagger-md, 120ms);
  --home-premium-perspective: 1000px;
}

/* —— Scroll reveals —— */
html.js body[data-premium-motion] [data-home-reveal]:not(.is-home-revealed) {
  opacity: 0;
  transform: translateY(var(--motion-distance-lg, 32px));
  transition:
    opacity var(--home-premium-dur) var(--home-premium-ease),
    transform var(--home-premium-dur) var(--home-premium-ease);
  transition-delay: calc(var(--home-reveal-i, 0) * var(--home-premium-stagger));
}

html.js body[data-premium-motion] [data-home-reveal="fade-in"]:not(.is-home-revealed) {
  transform: none;
}

html.js body[data-premium-motion] [data-home-reveal="scale-up"]:not(.is-home-revealed) {
  transform: translateY(24px) scale(0.96);
}

html.js body[data-premium-motion] [data-home-reveal].is-home-revealed {
  opacity: 1;
  transform: none;
}

/* Homepage .reveal blocks (toggled by main.js initReveal) */
html.js body[data-page="home"][data-premium-motion] .reveal {
  transition:
    opacity var(--home-premium-dur) var(--home-premium-ease),
    transform var(--home-premium-dur) var(--home-premium-ease);
}

html.js body[data-page="home"][data-premium-motion] .reveal:not(.is-visible) {
  opacity: 0;
  transform: translateY(36px);
}

/* 360 Packages page only — transforms broke Plan details / Get covered hit-testing. */
body[data-page="packages"] #pkg-grid .pkg,
body[data-premium-motion][data-page="packages"] #pkg-grid .pkg {
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
}

@media (hover: hover) and (pointer: fine) {
  body[data-premium-motion][data-page="packages"] #pkg-grid .pkg:hover,
  body[data-premium-motion] .pkg.is-home-card-3d-target:hover {
    transform: none !important;
    border-color: var(--line-2);
    box-shadow: 0 18px 36px -18px rgba(11, 27, 46, 0.26);
  }
}

/* Orphan data-home-stagger → same language as reveal groups */
html.js body[data-premium-motion] [data-home-stagger] > *:not(.is-home-revealed) {
  opacity: 0;
  transform: translateY(var(--motion-distance-md, 24px));
  transition:
    opacity var(--home-premium-dur) var(--home-premium-ease),
    transform var(--home-premium-dur) var(--home-premium-ease);
  transition-delay: calc(var(--home-i, 0) * var(--home-premium-stagger));
}

html.js body[data-premium-motion] [data-home-stagger] > *.is-home-revealed,
html.js body[data-premium-motion] [data-home-stagger] > *.is-home-stagger-visible {
  opacity: 1;
  transform: none;
}

/* —— 3D card context —— */
body[data-premium-motion] [data-home-card-3d] {
  perspective: var(--home-premium-perspective);
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
}

html.js body[data-premium-motion] [data-home-card-3d] .is-home-card-3d-target:not(.is-home-revealed) {
  opacity: 0;
  transform: translateY(30px) scale(0.95) rotateX(7deg) rotateY(var(--home-card-tilt-y, 0deg));
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  transition:
    opacity 850ms var(--home-premium-ease),
    transform 850ms var(--home-premium-ease),
    box-shadow 850ms var(--home-premium-ease);
  transition-delay: calc(var(--home-card-i, 0) * var(--home-premium-stagger));
}

html.js body[data-premium-motion] [data-home-card-3d] .is-home-card-3d-target.is-home-revealed {
  opacity: 1;
  transform: none;
}

/* Entrance in progress: keep the fade/lift transition until it lands (overrides hover transition) */
html.js body[data-premium-motion] [data-home-card-3d] .is-home-card-3d-target.is-home-revealed.is-home-entering {
  transition:
    opacity 850ms var(--home-premium-ease),
    transform 850ms var(--home-premium-ease),
    box-shadow 850ms var(--home-premium-ease);
  transition-delay: 0s;
}

/*
 * Credibility metrics — calmer than Plans (no 3D tilt entrance).
 * Higher-specificity than styles.css html.js #credibility .glance .glance__stat
 */
html.js body[data-premium-motion] #credibility [data-home-card-3d] .glance__stat.is-home-card-3d-target:not(.is-home-revealed) {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition-delay: 0s;
}

html.js body[data-premium-motion] #credibility [data-home-card-3d] .glance__stat.is-home-card-3d-target.is-home-revealed {
  opacity: 1;
  transform: none;
}

/* Do not wait for .glance.is-inview when premium owns these stats */
html.js body[data-premium-motion] #credibility .glance:not(.is-inview) .glance__stat.is-home-card-3d-target.is-home-revealed {
  opacity: 1;
  transform: none;
}

/* Trust band reveals: heading → logos → recognition (stats use card stagger) */
html.js body[data-premium-motion] #credibility .credibility__intro[data-home-reveal]:not(.is-home-revealed) {
  transform: translateY(14px);
}
html.js body[data-premium-motion] #credibility .credibility__intro[data-home-reveal] {
  transition-duration: 720ms;
}
html.js body[data-premium-motion] #credibility .credibility__marquee-wrap[data-home-reveal]:not(.is-home-revealed) {
  transform: translateY(12px);
}
html.js body[data-premium-motion] #credibility [data-home-card-3d] {
  --home-premium-stagger: 150ms;
}

/* —— Hover (desktop) —— */
@media (hover: hover) and (pointer: fine) {
  body[data-premium-motion] [data-home-card-3d] .is-home-card-3d-target.is-home-revealed {
    transition:
      transform 320ms var(--home-premium-ease),
      box-shadow 320ms var(--home-premium-ease),
      border-color 320ms ease;
  }

  body[data-premium-motion] [data-home-card-3d] .is-home-card-3d-target.is-home-revealed.is-home-tilt-active {
    transition: transform 80ms linear, box-shadow 320ms var(--home-premium-ease);
  }

  body[data-premium-motion] #credibility .glance__stat.is-home-card-3d-target.is-home-revealed:not(.is-home-tilt-active):hover {
    transform: translateY(-4px);
    box-shadow: var(--cred-shadow-hover);
    background: rgba(255, 255, 255, 0.92);
  }

  body[data-premium-motion] .story-feature.is-home-revealed:hover .story-feature__img img,
  body[data-premium-motion] .story-list li.is-home-revealed:hover img {
    transform: scale(1.04);
  }

  body[data-premium-motion] .pkg:hover .pkg__media > img {
    transform: scale(1.05);
  }

  body[data-premium-motion] .pkg-detail__related-card.is-home-card-3d-target.is-home-revealed:not(.is-home-tilt-active):hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -20px rgba(11, 27, 46, 0.26);
  }
}

/* Blog + story cards: never leave residual 3D tilt transforms (breaks link hit-testing). */
body[data-premium-motion] #blog-grid[data-home-card-3d] .blog-card.is-home-card-3d-target.is-home-revealed,
body[data-premium-motion] #travel-stories [data-home-card-3d] .story-feature.is-home-card-3d-target.is-home-revealed,
body[data-premium-motion] #travel-stories [data-home-card-3d] .story-list > li.is-home-card-3d-target.is-home-revealed {
  transform: none;
  box-shadow: none;
}

body[data-premium-motion] #blog-grid[data-home-card-3d] .blog-card.is-home-card-3d-target.is-home-revealed {
  border-color: var(--line);
}

@media (hover: hover) and (pointer: fine) {
  body[data-premium-motion] #blog-grid[data-home-card-3d] .blog-card.is-home-card-3d-target.is-home-revealed:hover,
  body[data-premium-motion] #travel-stories [data-home-card-3d] .story-feature.is-home-card-3d-target.is-home-revealed:hover,
  body[data-premium-motion] #travel-stories [data-home-card-3d] .story-list > li.is-home-card-3d-target.is-home-revealed:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 44px -24px rgba(11, 27, 46, 0.28);
  }

  body[data-premium-motion] #blog-grid[data-home-card-3d] .blog-card.is-home-card-3d-target.is-home-revealed:hover {
    border-color: rgba(255, 106, 26, 0.35);
  }
}

/* —— Image reveal (Ken Burns settle — travel-platform class) —— */
html.js body[data-premium-motion] [data-home-image-reveal]:not(.is-home-revealed) img {
  opacity: 0;
  transform: scale(var(--motion-image-enter-from, 1.1));
  transition:
    opacity 900ms var(--motion-ease-media, var(--home-premium-ease)),
    transform 1100ms var(--motion-ease-media, var(--home-premium-ease));
  will-change: opacity, transform;
}

html.js body[data-premium-motion] #protection .cap[hidden] [data-home-image-reveal] img,
html.js body[data-premium-motion] .field-stories__panel[hidden] [data-home-image-reveal] img,
html.js body[data-premium-motion] .why__item:not(.is-active) [data-home-image-reveal] img {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

html.js body[data-premium-motion] [data-home-image-reveal].is-home-revealed img {
  opacity: 1;
  transform: scale(1);
  will-change: auto;
}

body[data-premium-motion] [data-home-image-reveal] {
  overflow: hidden;
  border-radius: var(--r-2);
}

/* Soften story/blog 3D entrance — closer to industry travel sites (lift > tilt) */
html.js body[data-premium-motion] [data-home-card-3d] .story-feature.is-home-card-3d-target:not(.is-home-revealed),
html.js body[data-premium-motion] [data-home-card-3d] .story-list > li.is-home-card-3d-target:not(.is-home-revealed),
html.js body[data-premium-motion] #blog-grid[data-home-card-3d] .blog-card.is-home-card-3d-target:not(.is-home-revealed) {
  transform: translateY(28px) scale(0.97) rotateX(2deg);
}

html.js body[data-premium-motion] #blog-grid[data-home-card-3d] .blog-card {
  animation: none !important;
}

@media (max-width: 899px) {
  html.js body[data-premium-motion] [data-home-card-3d] .is-home-card-3d-target:not(.is-home-revealed) {
    transform: translateY(22px) scale(0.97);
    rotate: none;
  }

  html.js body[data-premium-motion] #credibility [data-home-card-3d] .glance__stat.is-home-card-3d-target:not(.is-home-revealed) {
    transform: translateY(16px) scale(0.98);
    rotate: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.js body[data-premium-motion] [data-home-reveal]:not(.is-home-revealed),
  html.js body[data-premium-motion] [data-home-card-3d] .is-home-card-3d-target:not(.is-home-revealed),
  html.js body[data-premium-motion] [data-home-image-reveal]:not(.is-home-revealed) img,
  html.js body[data-page="home"][data-premium-motion] .reveal:not(.is-visible) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}