/* ─────────────────────────────────────────────────────────────────────────
   Noble Charities: shared motion layer.
   Kept from the motion experiment: stroke draw-in primitives, the slow contour
   texture on navy bands, and the Special Events season emblems. Rule for adding
   anything here: motion lives on graphics the site draws, never on photographs;
   it plays once unless it is a slow background texture; and it must mean
   something. Reduced motion shows every finished state and runs nothing.
   - .d / .f        stroked element that draws in / element that fades in
   - [data-inview]  parent that triggers .d/.f once it scrolls into view
   - [data-motion]  parent whose loops pause off-screen (motion.js adds .is-off)
   - [data-contours] navy band that receives the drifting contour field
   ───────────────────────────────────────────────────────────────────────── */

@keyframes nc-draw { to { stroke-dashoffset: 0; } }
@keyframes nc-fade { to { opacity: 1; } }
@keyframes nc-spin { to { transform: rotate(360deg); } }

/* ── Draw-in primitives ─────────────────────────────────────────────────── */
.nc-js [data-inview] .d,
.nc-onload .d {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
[data-inview].is-in .d,
.nc-onload .d {
  animation: nc-draw var(--dur, 1.2s) cubic-bezier(0.65, 0.05, 0.25, 1) var(--d, 0s) forwards;
}
.nc-js [data-inview] .f,
.nc-onload .f { opacity: 0; }
[data-inview].is-in .f,
.nc-onload .f { animation: nc-fade 0.7s ease var(--d, 0s) forwards; }

/* Pause every loop while its section is off-screen. */
.is-off,
.is-off * { animation-play-state: paused !important; }

/* ── Topographic contour field (injected by motion.js into [data-contours]) */
[data-contours] { position: relative; overflow: hidden; isolation: isolate; }
[data-contours] > :not(.nc-contours) { position: relative; z-index: 1; }
.nc-contours {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.nc-cs {
  position: absolute;
  will-change: transform;
  animation: nc-spin 200s linear infinite;
}
.nc-cs svg { display: block; width: 100%; height: 100%; overflow: visible; }
.nc-cs path { fill: none; stroke: rgba(158, 217, 223, 0.13); stroke-width: 1.3; }
.nc-cs-a { width: 1300px; height: 1300px; right: -560px; bottom: -820px; }
.nc-cs-b { width: 780px; height: 780px; left: -380px; top: -470px; animation-duration: 160s; animation-direction: reverse; }
.nc-cs-b path { stroke: rgba(158, 217, 223, 0.09); }
@media (max-width: 760px) {
  .nc-cs-a { width: 900px; height: 900px; right: -520px; bottom: -560px; }
  .nc-cs-b { width: 560px; height: 560px; left: -320px; top: -330px; }
}


/* ── Special events: animated season emblems ─────────────────────────────── */
.season-icon {
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  overflow: hidden;
  fill: none;
  stroke: #061b37;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.season-icon .acc { stroke: #00a8d6; }
.season-icon .dot { fill: #061b37; stroke: none; }
.season-icon .ball { fill: #f4f0e8; }

/* Golf: the ball rolls to the cup and drops; the pin flag flutters. */
.si-golf .pin-flag { transform-box: fill-box; transform-origin: 0% 50%; animation: nc-flag 2.8s ease-in-out infinite; }
.si-golf .ball { animation: si-putt 5s cubic-bezier(0.25, 0.6, 0.35, 1) infinite; }
@keyframes si-putt {
  0%, 8%  { transform: translate(0, 0); opacity: 1; }
  62%     { transform: translate(23px, 0); opacity: 1; }
  70%     { transform: translate(24px, 4px); opacity: 0; }
  71%, 90% { transform: translate(0, 0); opacity: 0; }
  100%    { transform: translate(0, 0); opacity: 1; }
}
/* Fishing: the water runs; a fish clears the swell every few seconds. */
.si-fish .waves { animation: si-waves 3s linear infinite; }
@keyframes si-waves { to { transform: translateX(-16px); } }
.si-fish .fish-x { animation: si-fish-x 4.2s linear infinite; }
.si-fish .fish-y { animation: si-fish-y 4.2s linear infinite; }
@keyframes si-fish-x {
  0%, 20% { transform: translateX(0); }
  62%, 100% { transform: translateX(22px); }
}
@keyframes si-fish-y {
  0%, 20%  { transform: translateY(0) rotate(-40deg); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  24%      { opacity: 1; }
  41%      { transform: translateY(-19px) rotate(0deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.3); }
  58%      { opacity: 1; }
  62%, 100% { transform: translateY(0) rotate(40deg); opacity: 0; }
}
.si-fish .fish-y { transform-box: fill-box; transform-origin: 50% 50%; }
/* Clays: a disc arcs across and breaks. */
.si-clay .clay-x { animation: si-clay-x 3.6s linear infinite; }
.si-clay .clay-y { animation: si-clay-y 3.6s linear infinite; }
@keyframes si-clay-x { 0% { transform: translateX(0); } 55%, 100% { transform: translateX(26px); } }
@keyframes si-clay-y {
  0%   { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.1, 0.6, 0.4, 1); }
  55%  { transform: translateY(-24px); opacity: 1; }
  56%, 100% { transform: translateY(-24px); opacity: 0; }
}
.si-clay .shards path { opacity: 0; transform-box: view-box; transform-origin: 34px 16px; animation: si-shard 3.6s ease-out infinite; }
@keyframes si-shard {
  0%, 54%  { opacity: 0; transform: scale(0.2); }
  58%      { opacity: 1; }
  78%, 100% { opacity: 0; transform: scale(1.5); }
}
.si-clay .reticle { animation: si-reticle 3.6s ease-in-out infinite; transform-box: view-box; transform-origin: 34px 16px; }
@keyframes si-reticle { 0%, 40% { opacity: 0.25; transform: scale(1.3); } 55% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0.25; transform: scale(1.3); } }
@media (max-width: 560px) { .season-icon { display: none; } }


/* ── Reduced motion: show every finished state, run nothing ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .nc-cs,
  .season-icon * { animation: none !important; }
  .nc-js [data-inview] .d { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .nc-js [data-inview] .f { opacity: 1 !important; animation: none !important; }
  .si-golf .ball { transform: translate(12px, 0); }
  .si-fish .fish-x { transform: translateX(11px); }
  .si-fish .fish-y { transform: translateY(-17px); opacity: 1; }
  .si-clay .clay-x { transform: translateX(14px); }
  .si-clay .clay-y { transform: translateY(-19px); }
  .si-clay .reticle { opacity: 1; }
}