/* SOMA Risk Studio — motion.css
   Phase 4 polish: scroll reveals, refined hover micro-interactions,
   confident focus rings, hero entrance animation.
   Compositor-only: transform + opacity. Always respects reduced-motion. */

/* 1. Scroll reveals — JS adds .reveal then .is-revealed once visible. */
.reveal,
.reveal-stagger > *,
.reveal-fade {
  opacity: 0;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal,
.reveal-stagger > * { transform: translateY(16px); }
.reveal-fade { transform: none; }

.reveal.is-revealed,
.reveal-stagger.is-revealed > *,
.reveal-fade.is-revealed { opacity: 1; transform: none; }
/* Per-element stagger delays are set inline by site.js. */

/* 2. Hover micro-interactions (additive to styles.css). */
.btn:hover {
  box-shadow:
    0 0 0 4px rgba(0, 114, 138, 0.10),
    0 8px 24px -8px rgba(0, 51, 102, 0.40);
}
.card--linked:hover { transform: translateY(-3px) scale(1.005); }
.module:hover { transform: translateY(-3px) scale(1.005); }

.product-figure img { transition: filter 200ms var(--ease-out); filter: saturate(1); }
.card--linked:hover .product-figure img,
.product-figure:hover img,
.module:hover .product-figure img { filter: saturate(1.06); }

/* 3. Section hairline — 1px teal accent at the top of ice/navy sections. */
.section--ice,
.section--navy { position: relative; }
.section--ice::before,
.section--navy::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 0; height: 1px;
  background: var(--rs-teal-500);
  opacity: 0;
  transform: translateX(-50%);
  transition: width 700ms var(--ease-out), opacity 700ms var(--ease-out);
}
.section--ice.is-revealed::before,
.section--navy.is-revealed::before { width: min(72%, 960px); opacity: 0.35; }
.section--navy::before { background: var(--rs-accent-underline); }

/* 4. Focus rings — generalises the .btn pattern to other interactive
   surfaces that don't already declare their own. */
.card--linked:focus-visible,
.module:focus-visible,
a.link:focus-visible {
  outline: 2px solid var(--rs-border-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(0, 114, 138, 0.18);
  border-radius: 4px;
}

/* 5. Hero image entrance — page-load only, fires once.
   Rest state lives in styles.css: perspective(1800px) rotateY(-2deg) rotateX(0.5deg). */
@keyframes hero-frame-in {
  from {
    opacity: 0;
    transform: perspective(1800px) rotateY(-8deg) rotateX(2deg) translateY(20px);
  }
  to {
    opacity: 1;
    transform: perspective(1800px) rotateY(-2deg) rotateX(0.5deg);
  }
}
.hero--split .hero__image .product-frame {
  animation: hero-frame-in 700ms var(--ease-out) both;
}

/* 6. Hero CTA arrow shimmer — ±1px drift at rest only.
   styles.css owns the +3px slide on .btn:hover .arrow. */
@keyframes arrow-shimmer {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(1px); }
}
.btn .arrow { animation: arrow-shimmer 3600ms var(--ease-out) infinite; }
.btn:hover .arrow { animation: none; }

/* prefers-reduced-motion: opt out of everything. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > *,
  .reveal-fade { opacity: 1; transform: none; transition: none; }
  .card--linked:hover,
  .module:hover { transform: none; }
  .product-figure img { filter: none; transition: none; }
  .section--ice::before,
  .section--navy::before { display: none; }
  .hero--split .hero__image .product-frame { animation: none; }
  .btn .arrow { animation: none; }
}