/* Ravencove motion: entrance initial states (never below opacity .4, never more than 24px away),
   text hover treatments, and the reduced-motion path that shows everything final. */

/* ---------- entrances (kit.js plays them with GSAP; these are the initial states) ---------- */
[data-enter] { --enter-o: .4; }
[data-enter="settle"]:not(.is-in) { opacity: var(--enter-o); transform: translateY(12px); }
[data-enter="slide-left"]:not(.is-in) { opacity: var(--enter-o); transform: translateX(-24px); }
[data-enter="slide-right"]:not(.is-in) { opacity: var(--enter-o); transform: translateX(24px); }
[data-enter="clip-centre"]:not(.is-in) { clip-path: inset(0 40% 0 40%); }
[data-enter="fan"]:not(.is-in) > * { opacity: var(--enter-o); transform: translateY(16px) rotate(-1.5deg); }
[data-enter="drop"]:not(.is-in) > * { opacity: var(--enter-o); transform: translateY(-18px); }
[data-enter="wipe-alt"]:not(.is-in) > * { clip-path: inset(0 30% 0 0); opacity: .6; }
[data-enter="wipe-alt"]:not(.is-in) > :nth-child(even) { clip-path: inset(0 0 0 30%); }
[data-enter="gate"]:not(.is-in) > :first-child { transform: translateX(16px); opacity: .6; }
[data-enter="gate"]:not(.is-in) > :last-child { transform: translateX(-16px); opacity: .6; }
[data-enter="flood"]:not(.is-in) { background-size: 0% 100%; }
[data-enter="flood"] { background-image: linear-gradient(var(--water), var(--water)); background-repeat: no-repeat; background-size: 100% 100%; background-position: left center; background-color: var(--mist); }
[data-enter="rows"] > * { background-image: linear-gradient(var(--row-rule, var(--rule)), var(--row-rule, var(--rule))); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 1px; }
[data-enter="rows"]:not(.is-in) > * { opacity: var(--enter-o); transform: translateY(8px); background-size: 0% 1px; }
[data-enter="draw"]:not(.is-in) path[pathLength] { stroke-dashoffset: 1; stroke-dasharray: 1; }
/* GSAP takes over from the initial state; the safety timer adds .is-in, which resolves everything above */
.is-in[data-enter], .is-in[data-enter] > * { opacity: 1; transform: none; clip-path: none; }
.is-in[data-enter="flood"] { background-size: 100% 100%; }
.no-js [data-enter], .no-js [data-enter] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* ---------- text hover (data-hover) ---------- */
[data-hover] { transition: font-variation-settings var(--dur-base) var(--ease-slack), color var(--dur-fast); }
[data-hover="settle"].is-settling { filter: url(#rc-settle); }
[data-hover="width"]:hover, [data-hover="width"]:focus-visible { font-variation-settings: "wdth" 100, "opsz" 96; }
[data-hover="lift"] .char, [data-hover="wave"] .char { display: inline-block; transition: transform var(--dur-base) var(--ease-slack); }
[data-hover="tilt"] { display: inline-block; transition: transform var(--dur-base) var(--ease-slack); }
[data-hover="tilt"]:hover, [data-hover="tilt"]:focus-visible { transform: rotate(3deg); }
[data-hover="glow"] { position: relative; isolation: isolate; }
[data-hover="glow"]::before { content: ''; position: absolute; inset: -6px -10px; border-radius: 999px; background: radial-gradient(closest-side, var(--iris-tint), transparent); opacity: 0; z-index: -1; transition: opacity var(--dur-base) var(--ease-slack); }
[data-hover="glow"]:hover::before, [data-hover="glow"]:focus-visible::before { opacity: 1; }
[data-hover="flatten"] { --u-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpath d='M0 2 C 2 0, 4 0, 6 2 S 10 4, 12 2' fill='none' stroke='%23121519' stroke-width='1.2'/%3E%3C/svg%3E"); --u-flat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpath d='M0 3 H12' fill='none' stroke='%23121519' stroke-width='1.2'/%3E%3C/svg%3E"); background-image: var(--u-wave), var(--u-flat); background-repeat: repeat-x, repeat-x; background-size: 12px 4px, 12px 4px; background-position: 0 100%, 0 calc(100% + 6px); transition: background-position .42s var(--ease-slack); }
[data-hover="flatten"]:hover, [data-hover="flatten"]:focus-visible { background-position: 18px calc(100% + 6px), 0 100%; }
.band--deep [data-hover="flatten"] { --u-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpath d='M0 2 C 2 0, 4 0, 6 2 S 10 4, 12 2' fill='none' stroke='%23EDF0F3' stroke-width='1.2'/%3E%3C/svg%3E"); --u-flat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpath d='M0 3 H12' fill='none' stroke='%23EDF0F3' stroke-width='1.2'/%3E%3C/svg%3E"); }
.split-word, .split-char { display: inline-block; white-space: pre; }

/* ---------- kinetic H2s (5B, mechanism changed by the QA loop 2026-09-28): the width axis holds at 85; as each
   heading scrubs into view it swings from a 1.2 degree tilt to level on the Slack water curve, pivoting on the page's
   centre line with its water line, so the heading and the line settle level together (kit.js) ---------- */
.h2[data-kinetic] { --wdth: 85; transform-origin: 50% 70%; }

/* photographs ripple on hover (TEX-007) and settle flat; a single settle on tap */
picture[data-hover="settle"] img, img[data-hover="settle"], .shore--media[data-hover="settle"] img { transition: transform var(--dur-base) var(--ease-slack); }
picture[data-hover="settle"]:hover img, .shore--media[data-hover="settle"]:hover img { transform: scale(1.015); }

/* the gate of two doors: the halves part from the seam (kit.js scrubs clip-path and a 40px slide) */
[data-gate] { position: relative; overflow: hidden; }
[data-gate] .gate__half { will-change: clip-path, transform; }

/* ---------- loader and scenes shared ---------- */
.scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- reduced motion: everything shown final, nothing animates ---------- */
@media (prefers-reduced-motion: reduce) {
  /* transitions are instant (0s, QA loop 2026-09-28): a .001s transition made every JS measure after a style write read the old value */
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  [data-enter], [data-enter] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-enter="flood"] { background-size: 100% 100% !important; }
  .btn::after { animation: none !important; }
  .h2[data-kinetic] { transform: none !important; }
  [data-hover="settle"].is-settling { filter: none; }
  [data-enter="rows"] > * { background-size: 100% 1px !important; }
  .h2[data-kinetic] { --wdth: 85 !important; }
  .tide-edge { animation: none !important; }
  .spine__float::before { animation: none !important; }
  .rc-level *, .rule-meet *, .rule-tide *, .rule-ripple *, .rc-burgee *, [data-enter="draw"] path { animation: none !important; stroke-dashoffset: 0 !important; transform: none !important; opacity: 1 !important; clip-path: none !important; }
  .rule-meet .rc-divider-meet__mark { transform: translateX(-50%) scale(1) !important; }
  .tide::after { transform: scaleX(1) !important; }
  .tide::before { transform: translateX(-50%) scaleY(1) !important; }
}
/* the ?qa=rm hook mirrors reduced motion through a class on <html> */
html.rc-reduced *, html.rc-reduced *::before, html.rc-reduced *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }
html.rc-reduced [data-enter], html.rc-reduced [data-enter] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
html.rc-reduced .btn::after { animation: none !important; }
html.rc-reduced .h2[data-kinetic] { transform: none !important; }
html.rc-reduced .h2[data-kinetic] { --wdth: 85 !important; }
html.rc-reduced .tide-edge { animation: none !important; }
html.rc-reduced .spine__float::before { animation: none !important; }
html.rc-reduced .rc-level *, html.rc-reduced .rule-meet *, html.rc-reduced .rule-tide *, html.rc-reduced .rule-ripple *, html.rc-reduced .rc-burgee * { animation: none !important; stroke-dashoffset: 0 !important; transform: none !important; opacity: 1 !important; clip-path: none !important; }
html.rc-reduced .rule-meet .rc-divider-meet__mark { transform: translateX(-50%) scale(1) !important; }
html.rc-reduced .tide::after { transform: scaleX(1) !important; }
html.rc-reduced .tide::before { transform: translateX(-50%) scaleY(1) !important; }