/* ==========================================================================
   Plainchamp — Motion primitives
   Progressive enhancement: content is visible by default; JS opts elements
   into the hidden-then-revealed state once GSAP is ready. If JS fails,
   nothing is ever stuck invisible.
   ========================================================================== */

.reveal {
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.js-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
}

.reveal.is-revealed {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Hero bracket entrance: four corners converge from off-frame */
.js-ready .hero-frame .hf-tl {
  transform: translate(-24px, -24px);
  opacity: 0;
}
.js-ready .hero-frame .hf-tr {
  transform: translate(24px, -24px);
  opacity: 0;
}
.js-ready .hero-frame .hf-bl {
  transform: translate(-24px, 24px);
  opacity: 0;
}
.js-ready .hero-frame .hf-br {
  transform: translate(24px, 24px);
  opacity: 0;
}
.hero-frame.is-open span {
  transform: translate(0, 0) !important;
  opacity: 0.9 !important;
  transition: transform 0.9s var(--ease-out), opacity 0.9s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .js-ready .hero-frame span {
    opacity: 0.9;
    transform: none;
  }
}

/* Hero title / subtitle / actions: hidden until GSAP reveals them on load */
.js-ready .hero-title .line span {
  opacity: 0;
  transform: translateY(110%);
}
.js-ready .hero-subtitle,
.js-ready .hero-actions {
  opacity: 0;
  transform: translateY(18px);
}
@media (prefers-reduced-motion: reduce) {
  .js-ready .hero-title .line span,
  .js-ready .hero-subtitle,
  .js-ready .hero-actions {
    opacity: 1;
    transform: none;
  }
}

/* Marquee-free ambient pulse for the scroll cue removed per anti-slop rules;
   kept only as a subtle breathing accent on the hero corner frame. */
@media (prefers-reduced-motion: no-preference) {
  .hero-frame.is-open {
    animation: framebreathe 6s var(--ease-in-out) infinite;
  }
}
@keyframes framebreathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}