/* Raccoon Studio — Motion Core V1
   Content remains visible without .motion-ready (progressive enhancement).
*/

:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-distance: 22px;
  --motion-duration: 620ms;
}

/* Prep states ONLY when motion is ready and not reduced */
html.motion-ready:not(.motion-reduced) [data-reveal].is-reveal-prep,
html.motion-ready:not(.motion-reduced) [data-hero-enter].is-reveal-prep {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
}

html.motion-ready:not(.motion-reduced) [data-reveal="up"].is-reveal-prep,
html.motion-ready:not(.motion-reduced) [data-hero-enter].is-reveal-prep {
  transform: translate3d(0, var(--motion-distance), 0);
}

html.motion-ready:not(.motion-reduced) [data-reveal="left"].is-reveal-prep {
  transform: translate3d(calc(var(--motion-distance) * -1), 0, 0);
}

html.motion-ready:not(.motion-reduced) [data-reveal="right"].is-reveal-prep {
  transform: translate3d(var(--motion-distance), 0, 0);
}

html.motion-ready:not(.motion-reduced) [data-reveal="scale"].is-reveal-prep {
  transform: scale(0.97);
}

html.motion-ready:not(.motion-reduced) [data-reveal].is-revealed,
html.motion-ready:not(.motion-reduced) [data-hero-enter].is-revealed,
html.motion-reduced [data-reveal],
html.motion-reduced [data-hero-enter],
html:not(.motion-ready) [data-reveal],
html:not(.motion-ready) [data-hero-enter] {
  opacity: 1;
  transform: none;
}

html.motion-ready:not(.motion-reduced) [data-reveal].is-revealed,
html.motion-ready:not(.motion-reduced) [data-hero-enter].is-revealed {
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
}

/* Gold line scaleX helper */
html.motion-ready:not(.motion-reduced) [data-reveal="line"].is-reveal-prep {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
}

html.motion-ready:not(.motion-reduced) [data-reveal="line"].is-revealed {
  transform: scaleX(1);
}

/* Header — visual-only scrolled state (no height/layout change → no CLS) */
.site-header {
  transition: background 0.35s var(--motion-ease), border-color 0.35s var(--motion-ease),
    box-shadow 0.35s var(--motion-ease);
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color: rgba(253, 185, 19, 0.18);
  box-shadow: 0 1px 0 rgba(253, 185, 19, 0.06);
}

.nav {
  position: relative;
}

.nav a {
  position: relative;
  transition: color 0.2s ease;
}

.nav a.is-active {
  color: var(--gold);
}

.nav a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.nav-underline {
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  height: 2px;
  width: 0;
  background: var(--gold);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: transform 0.45s var(--motion-ease), width 0.45s var(--motion-ease),
    opacity 0.25s ease;
}

html.motion-reduced .nav-underline {
  transition: none;
}

/* Buttons micro */
.btn,
.card-link {
  transition: transform 0.2s var(--motion-ease), background 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.25s ease;
}

.btn.is-pressed:not(.btn-whatsapp) {
  transform: scale(0.98);
}

.btn.is-magnetic {
  will-change: transform;
}

.btn:focus-visible,
.card-link:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.btn-gold:not(.btn-whatsapp):hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 65%, #fff);
}

.card-link span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.25s var(--motion-ease);
}

.card-link:hover span[aria-hidden="true"],
.card-link:focus-visible span[aria-hidden="true"] {
  transform: translateX(4px);
}

html.motion-reduced .btn:hover,
html.motion-reduced .card-link:hover span[aria-hidden="true"] {
  transform: none;
}

html.motion-reduced .btn.is-pressed {
  transform: none;
}

.motion-paused [data-reveal].is-reveal-prep {
  transition: none;
}

html.motion-reduced {
  scroll-behavior: auto;
}

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

  html.motion-ready [data-reveal],
  html.motion-ready [data-hero-enter] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .nav-underline {
    transition: none;
  }

  .site-header {
    transition: none;
  }

  html.motion-depth-ready [data-motion-depth],
  html.motion-depth-ready [data-motion-depth].is-depth-active,
  html.motion-depth-ready [data-depth-layer] {
    transform: none !important;
    transition: none !important;
  }

  html.motion-depth-ready [data-motion-depth]::after {
    opacity: 0 !important;
  }
}

/* ========== Phase 03 — card depth (tilt / parallax / glow) ==========
   Active only with html.motion-depth-ready (fine pointer + motion). */
:root {
  --depth-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --depth-ms: 280ms;
}

html.motion-depth-ready .cards {
  perspective: 1100px;
}

html.motion-depth-ready [data-motion-depth] {
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  --tilt-ty: 0px;
  --glow-x: 50%;
  --glow-y: 50%;
  --glow-o: 0;
  position: relative;
  transform-style: preserve-3d;
}

/* Must beat reveal `transform: none` on .is-revealed (same stylesheet, higher specificity) */
html.motion-ready.motion-depth-ready:not(.motion-reduced) [data-motion-depth],
html.motion-depth-ready:not(.motion-reduced) [data-motion-depth] {
  transform: translate3d(0, var(--tilt-ty), 0) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
  transition:
    transform var(--depth-ms) var(--depth-ease),
    border-color var(--depth-ms) var(--depth-ease),
    box-shadow var(--depth-ms) var(--depth-ease);
}

html.motion-ready.motion-depth-ready:not(.motion-reduced) [data-motion-depth].is-depth-active,
html.motion-depth-ready:not(.motion-reduced) [data-motion-depth].is-depth-active {
  border-color: rgba(253, 185, 19, 0.28);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(253, 185, 19, 0.12);
  z-index: 2;
}

/* Directional gold sheen — opacity only toggled; position via custom props */
html.motion-depth-ready [data-motion-depth]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  pointer-events: none;
  opacity: calc(var(--glow-o) * 0.22);
  background: radial-gradient(
    420px circle at var(--glow-x) var(--glow-y),
    color-mix(in srgb, var(--gold) 55%, transparent),
    transparent 58%
  );
  transition: opacity var(--depth-ms) var(--depth-ease);
  mix-blend-mode: soft-light;
}

html.motion-depth-ready [data-depth-layer] {
  --layer-x: 0px;
  --layer-y: 0px;
  transform: translate3d(var(--layer-x), var(--layer-y), 0);
  transition: transform var(--depth-ms) var(--depth-ease);
  will-change: auto;
}

html.motion-depth-ready [data-motion-depth].is-depth-active [data-depth-layer] {
  will-change: transform;
  transition: transform 60ms linear;
}

html.motion-depth-ready [data-motion-depth].is-depth-active [data-depth-layer='fore'] {
  z-index: 3;
}

/* Avoid fighting stock hover scale while depth is active */
html.motion-depth-ready [data-motion-depth].is-depth-active .card-media img {
  transition: transform 60ms linear;
}

html.motion-depth-ready [data-motion-depth].is-depth-active .card-media img:not([data-depth-layer]) {
  transform: none;
}

html.motion-reduced [data-motion-depth],
html.motion-paused [data-motion-depth],
html:not(.motion-depth-ready) [data-motion-depth] {
  transform: none;
}

html.motion-reduced [data-motion-depth]::after,
html:not(.motion-depth-ready) [data-motion-depth]::after {
  content: none;
}