/* ==========================================================================
   Experience layer: liquid-glass surfaces, pointer spotlight, light 3D tilt,
   scroll reveal and animated page transitions. Everything degrades to a calm
   static page without JS, on touch screens and with reduced motion.
   ========================================================================== */

/* ---------- Liquid glass: frosted fill, specular rim, soft depth ---------- */

.page-hero__meta,
.toc,
.page-nav,
.security-graph,
.world-card,
.rail-card > a,
.service-card,
.finding,
.vendor-world {
  position: relative;
}

.page-hero__meta,
.page-nav,
.toc:not(:has(.button)) {
  border-color: rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0.04)),
    rgba(30, 47, 66, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 24px 48px -28px rgba(0, 0, 0, 0.75);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
}

/* Specular highlight along the top edge, like light catching curved glass. */
.page-hero__meta::before,
.page-nav::before,
.module-card::before,
.rail-card > a::before,
.world-card::before,
.chart-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.12));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.module-card > :not(.module-card__more),
.chart-card > * {
  position: relative;
  z-index: 1;
}

/* ---------- Pointer spotlight on dark stages ---------- */

.spotlight {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(30rem circle at var(--sx, 50%) var(--sy, 30%), color-mix(in srgb, var(--accent) 4.5%, transparent), color-mix(in srgb, var(--accent) 1.5%, transparent) 40%, transparent 68%);
  opacity: 0;
  transition: opacity 700ms var(--ease-standard);
}

.is-lit > .spotlight {
  opacity: 1;
}

/* ---------- Light 3D tilt ---------- */

.has-tilt {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 500ms var(--ease-out);
  will-change: transform;
}

.iso-scene.has-tilt svg {
  transform: translateZ(20px);
}

.hero-photo.has-tilt::after {
  background:
    radial-gradient(28rem circle at calc(50% + var(--ry, 0deg) * 30) calc(40% - var(--rx, 0deg) * 30), rgba(255, 255, 255, 0.07), transparent 60%),
    linear-gradient(180deg, transparent 50%, rgba(15, 25, 36, 0.55));
}

/* ---------- Scroll reveal (content is visible without JS and with reduced motion) ---------- */

.motion-ready [data-reveal] {
  transition:
    opacity 800ms var(--ease-standard) var(--reveal-delay, 0ms),
    transform 900ms var(--ease-out) var(--reveal-delay, 0ms);
}

.motion-ready [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(1.75rem) scale(0.985);
}

/* ---------- Page transitions (View Transitions) ----------
   Reveal the new page from top to bottom over the stationary old page, both for in-place navigation and
   normal page loads. History back reveals from bottom to top. Neither snapshot moves or fades, so text stays
   in place and the old page covers the viewport until the new page is revealed. The header is captured on its own
   and stays put; its group re-applies the glass blur over the pages moving underneath. Without view transitions
   pages switch instantly, reduced motion too. */

@view-transition {
  navigation: auto;
}

::view-transition-group(site-header) {
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
}

::view-transition-old(site-header) {
  display: none;
}

::view-transition-new(site-header) {
  animation: none;
}

/* An open mega menu or mobile menu is captured on its own when the page leaves (navigation.js) and
   closes the way it normally does instead of vanishing with the old header. */
::view-transition-old(*.closing) {
  animation: vt-panel-close 200ms var(--ease-standard) both;
}

@keyframes vt-panel-close {
  to { opacity: 0; transform: translateY(-6px); }
}

::view-transition-old(root),
::view-transition-new(root) {
  mix-blend-mode: normal;
  animation-duration: 320ms;
  animation-timing-function: cubic-bezier(.2, .65, .25, 1);
  animation-fill-mode: both;
  opacity: 1;
}

::view-transition-old(root) {
  animation: none;
  z-index: 0;
}

::view-transition-new(root) {
  z-index: 1;
  animation-name: vt-reveal-down;
}

html:active-view-transition-type(back)::view-transition-new(root) {
  animation-name: vt-reveal-up;
}

@keyframes vt-reveal-down {
  from { clip-path: inset(0% 0% 100% 0%); }
  to { clip-path: inset(0% 0% 0% 0%); }
}

@keyframes vt-reveal-up {
  from { clip-path: inset(100% 0% 0% 0%); }
  to { clip-path: inset(0% 0% 0% 0%); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .has-tilt,
  .iso-scene.has-tilt svg {
    transform: none !important;
  }

  .spotlight {
    display: none;
  }

  .hero-slides.is-enhanced .hero-slide {
    transition: none;
  }
}