/* All entrance states are opt-in: without the early html.motion class, this
   file leaves the static page untouched. */
html.motion,
html.motion body {
  scroll-behavior: auto;
  overflow-x: clip;
}

/* Hold the intro for a normal first-load entrance. If scripts are still late,
   motion-late makes the existing content readable while motion continues loading. */
html.motion:not(.motion-ready) .site-header,
html.motion:not(.motion-ready) .hero-copy,
html.motion:not(.motion-ready) .hero-visual,
html.motion:not(.motion-ready) .reveal {
  opacity: 0;
  visibility: hidden;
}

html.motion.motion-late:not(.motion-ready) .site-header,
html.motion.motion-late:not(.motion-ready) .hero-copy,
html.motion.motion-late:not(.motion-ready) .hero-visual,
html.motion.motion-late:not(.motion-ready) .reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

html.motion .site-header {
  background: rgba(251, 249, 245, .97);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform .36s cubic-bezier(.22, .8, .24, 1), background-color .35s ease,
    box-shadow .35s ease, backdrop-filter .35s ease;
}

html.motion .site-header.motion-glass {
  background: rgba(251, 249, 245, .79);
  box-shadow: 0 8px 26px rgba(36, 29, 24, .045);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html.motion .site-header.header-hidden {
  transform: translate3d(0, -105%, 0);
}

html.motion .site-nav > a {
  position: relative;
  text-decoration: none;
}

html.motion .site-nav > a::after {
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .32s cubic-bezier(.22, .8, .24, 1);
}

html.motion .site-nav > a:hover::after,
html.motion .site-nav > a:focus-visible::after {
  transform: scaleX(1);
}

html.motion.motion-ready .reveal:not(.motion-visible) {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

html.motion.motion-ready .reveal.motion-visible {
  opacity: 1;
  transform: none;
}

html.motion .motion-word-mask {
  display: inline-block;
  overflow: hidden;
  padding-bottom: .13em;
  margin-bottom: -.13em;
  vertical-align: bottom;
}

html.motion .motion-word-mask.motion-mask-open {
  overflow: visible;
}

html.motion .motion-word {
  display: inline-block;
}

/* The still frame is faded by motion.js (GSAP) when the live canvas mounts;
   no CSS transition here, so the two animations do not fight. */
html.motion .hero-pearl-image {
  opacity: 1;
}

html.motion .hero-pearl canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

html.motion .hero-window,
html.motion .shot-card,
html.motion .gallery-tile,
html.motion .ai-screen,
html.motion .phone-frame {
  transform-style: preserve-3d;
}

html.motion .motion-tilt-active { will-change: transform; }

html.motion .hero-window {
  position: relative;
  overflow: clip;
  transform-origin: center center;
}

html.motion .hero-window::after,
html.motion .shot-card::after,
html.motion .gallery-tile::after,
html.motion .ai-screen::after,
html.motion .phone-frame::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 42% 38% at var(--glare-x, 50%) var(--glare-y, 35%),
    rgba(255, 255, 255, .34), rgba(255, 255, 255, .12) 38%, transparent 76%);
  content: "";
  opacity: var(--glare-alpha, 0);
  pointer-events: none;
  transition: opacity .28s ease;
}

html.motion .shot-card,
html.motion .gallery-tile,
html.motion .ai-screen,
html.motion .phone-frame {
  position: relative;
  overflow: clip;
}

html.motion .feature-showcase,
html.motion .screens-grid,
html.motion .gallery-section,
html.motion .mobile-section {
  overflow: clip;
}

html.motion .hero-visual,
html.motion .hero-grid {
  perspective: 1300px;
}

html.motion .dark-trails::before {
  animation: none;
}

html.motion .dark-trails-canvas {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .92;
  pointer-events: none;
}

html.motion .dark-trails::after {
  z-index: 2;
  pointer-events: none;
}

html.motion .steps-list {
  position: relative;
  border-top-color: transparent;
}

html.motion .motion-step-rule {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: rgba(31, 26, 23, .22);
  transform: scaleX(0);
  transform-origin: left center;
}

html.motion .faq-item.motion-faq .faq-answer {
  overflow: hidden;
}

html.motion .field input,
html.motion .field textarea,
html.motion .field select {
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition: background-size .34s cubic-bezier(.22, .8, .24, 1), border-color .25s ease,
    box-shadow .25s ease;
}

html.motion .field input:focus-visible,
html.motion .field textarea:focus-visible,
html.motion .field select:focus-visible {
  background-size: 100% 1px;
}

html.motion .button:not(.button-small) {
  transition: background-color .2s ease, color .2s ease;
}

html.motion .button-arrow,
html.motion .text-link > span:last-child {
  transition: transform .28s cubic-bezier(.22, .8, .24, 1);
}

html.motion .button:hover .button-arrow {
  transform: translateX(3px);
}

html.motion .text-link:hover > span:last-child {
  transform: translate(3px, -1px);
}

html.motion .orb-fallback > span {
  background: radial-gradient(ellipse at 28% 23%, rgba(255, 255, 255, .76), transparent 35%);
  background-size: 170% 170%;
}