/* ============================================================
   Sprinturf cinematic infrastructure - styles
   Garner Sites demo build, 2026-04-29

   Owns: baseline styles for [data-cinematic-sequence],
   [data-exploded-view], [data-parallax-scene], the custom cursor
   (#sprinturf-cursor), the cinematic tooltip, the WebGL-disabled
   fallback for the fiber shader, and View Transitions custom CSS.

   Does NOT modify tokens.css, base.css, motion.css, components.css.
   No purple/cyan/indigo. No bounce/elastic. Brand greens for
   surface, action red for interaction, ink for text.
   ============================================================ */

@import url("./tokens.css");

:root {
  /* cinematic timing - composable, kept distinct from --t-* so
     section-level cinematics can shift without touching UI. */
  --cinematic-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --cinematic-fast: 220ms var(--cinematic-easing);
  --cinematic-mid: 480ms var(--cinematic-easing);
  --cinematic-slow: 900ms var(--cinematic-easing);
  --cinematic-vt-duration: 360ms;
}

/* ============================================================
   Particle field tooltip
   Floats above the canvas, follows the active accent point.
   No drop shadow, just a clean dark tag with a thin red leader.
   ============================================================ */
.cinematic-tooltip {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transform: translate(-50%, -100%);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--ink-1000);
  color: var(--paper-50);
  font-family: var(--font-text);
  font-size: var(--fs-tiny);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: opacity 160ms var(--ease-out);
}
.cinematic-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 1px;
  height: 6px;
  background: var(--action-600);
  transform: translateX(-50%);
}

/* ============================================================
   Scroll sequence container baseline
   The container holds either a <canvas> (image-sequence mode) or
   an existing <img>/<figure> with [data-cinematic-pan]. The
   container keeps its own height; the canvas/img fills it.
   ============================================================ */
[data-cinematic-sequence] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cinematic-sequence-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
[data-cinematic-sequence] [data-cinematic-pan] {
  display: block;
  width: 100%;
  height: auto;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  will-change: transform;
}

/* ============================================================
   Exploded view layered cross-section
   Each child [data-layer] stacks vertically. JS translates them
   apart on scroll. CSS handles the rest state and the static
   fallback for reduced-motion users.
   ============================================================ */
[data-exploded-view] {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
[data-exploded-view] [data-layer] {
  position: relative;
  transform: translate3d(0, 0, 0);
  transition: transform 80ms linear; /* tiny smoothing; JS rAF drives the real motion */
  will-change: transform;
}
[data-exploded-view].is-static [data-layer] {
  transform: none;
  transition: none;
}

/* ============================================================
   Parallax scene
   Container is the mouse + scroll capture box. Children with
   [data-depth] translate via JS spring; CSS just composites cleanly.
   ============================================================ */
[data-parallax-scene] {
  position: relative;
  isolation: isolate;
}
[data-parallax-scene] [data-depth] {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* ============================================================
   Custom cursor
   #sprinturf-cursor is a fixed-position overlay (dot + ring) that
   trails the system pointer. Visible only on hover-fine devices
   without prefers-reduced-motion. State classes are toggled by JS
   based on what's under the pointer.
   ============================================================ */
html.has-sprinturf-cursor,
html.has-sprinturf-cursor body,
html.has-sprinturf-cursor a,
html.has-sprinturf-cursor button,
html.has-sprinturf-cursor [role="button"] {
  cursor: none;
}
/* But form fields keep the system caret/cursor. */
html.has-sprinturf-cursor input,
html.has-sprinturf-cursor textarea,
html.has-sprinturf-cursor select,
html.has-sprinturf-cursor [contenteditable="true"],
html.has-sprinturf-cursor [data-cursor-disable] {
  cursor: auto;
}

#sprinturf-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: var(--z-toast);
  pointer-events: none;
  mix-blend-mode: normal;
  transition: opacity 200ms var(--ease-out);
}
#sprinturf-cursor.is-hidden { opacity: 0; }

#sprinturf-cursor .cursor-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--ink-1000);
  transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
}
#sprinturf-cursor .cursor-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-700);
  background: transparent;
  transition: width 240ms var(--ease-out), height 240ms var(--ease-out),
              margin 240ms var(--ease-out), border-color 200ms var(--ease-out),
              border-width 200ms var(--ease-out), background 200ms var(--ease-out),
              transform 200ms var(--ease-out);
}

/* hover-link: ring grows, action red */
#sprinturf-cursor.is-hover-link .cursor-ring {
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-color: var(--action-600);
}
#sprinturf-cursor.is-hover-link .cursor-dot {
  background: var(--action-600);
  transform: scale(0.6);
}

/* hover-cta: bigger ring with arrow glyph */
#sprinturf-cursor.is-hover-cta .cursor-ring {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-color: var(--action-600);
  border-width: 2px;
  background: rgba(200, 16, 46, 0.06);
}
#sprinturf-cursor.is-hover-cta .cursor-dot {
  background: var(--action-600);
  transform: scale(0);
}
#sprinturf-cursor.is-hover-cta::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--action-600);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center/contain no-repeat;
}

/* hover-image: ring grows, zoom glyph */
#sprinturf-cursor.is-hover-image .cursor-ring {
  width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-color: var(--paper-50);
  background: rgba(11, 15, 14, 0.45);
}
#sprinturf-cursor.is-hover-image .cursor-dot { background: var(--paper-50); transform: scale(0); }
#sprinturf-cursor.is-hover-image::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  background: var(--paper-50);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8V3h5M21 8V3h-5M3 16v5h5M21 16v5h-5'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8V3h5M21 8V3h-5M3 16v5h5M21 16v5h-5'/></svg>") center/contain no-repeat;
}

/* view-zoom: solid green dot */
#sprinturf-cursor.is-view-zoom .cursor-ring {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-color: var(--brand-700);
  background: rgba(20, 83, 45, 0.10);
}
#sprinturf-cursor.is-view-zoom .cursor-dot { background: var(--brand-700); }

/* press feedback */
#sprinturf-cursor.is-press .cursor-ring { transform: scale(0.85); }

/* disabled state hides the custom cursor entirely so the system caret is unambiguous */
#sprinturf-cursor.is-disable { opacity: 0; }

/* ============================================================
   View Transitions API custom CSS
   Smooth crossfade for both same-doc and cross-doc transitions.
   Shared element names declared via JS (sprinturf-logo, -cta).
   Browsers without VT support: native MPA navigation, no special.
   ============================================================ */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--cinematic-vt-duration);
  animation-timing-function: var(--cinematic-easing);
}

/* Crossfade root: old fades out, new fades in slightly later */
::view-transition-old(root) {
  animation-name: cinematic-vt-fade-out;
}
::view-transition-new(root) {
  animation-name: cinematic-vt-fade-in;
}

@keyframes cinematic-vt-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes cinematic-vt-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Shared element morph: logo and primary CTA glide between pages */
::view-transition-old(sprinturf-logo),
::view-transition-new(sprinturf-logo),
::view-transition-old(sprinturf-cta),
::view-transition-new(sprinturf-cta) {
  animation-duration: 420ms;
  animation-timing-function: var(--cinematic-easing);
  mix-blend-mode: normal;
}

/* ============================================================
   WebGL-unavailable fallback
   For the fiber shader: render a static, hand-tuned SVG noise
   pattern via background-image. Cheap, no JS, no GPU.
   ============================================================ */
.cinematic-fiber-fallback {
  background-color: var(--brand-950);
  background-image:
    repeating-linear-gradient(
      82deg,
      rgba(20, 83, 45, 0.55) 0,
      rgba(20, 83, 45, 0.55) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      96deg,
      rgba(15, 59, 34, 0.45) 0,
      rgba(15, 59, 34, 0.45) 1px,
      transparent 1px,
      transparent 6px
    ),
    radial-gradient(circle at 30% 20%, rgba(108, 193, 138, 0.10), transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(20, 83, 45, 0.18), transparent 60%);
  background-size: 12px 12px, 18px 18px, 100% 100%, 100% 100%;
}
.cinematic-fiber-fallback.is-cream {
  background-color: var(--cream-50);
  background-image:
    repeating-linear-gradient(
      82deg,
      rgba(216, 218, 211, 0.55) 0,
      rgba(216, 218, 211, 0.55) 1px,
      transparent 1px,
      transparent 4px
    ),
    repeating-linear-gradient(
      96deg,
      rgba(183, 189, 185, 0.30) 0,
      rgba(183, 189, 185, 0.30) 1px,
      transparent 1px,
      transparent 6px
    ),
    radial-gradient(circle at 30% 20%, rgba(108, 193, 138, 0.06), transparent 50%);
  background-size: 12px 12px, 18px 18px, 100% 100%;
}

/* CSS-only static fallback for [data-cinematic-particle] when JS or
   WebGL is unavailable. Use as a sibling/decorative layer if no
   <canvas> render takes hold. */
.cinematic-particle-fallback {
  background:
    radial-gradient(circle at 22% 38%, rgba(20, 83, 45, 0.55) 0 1.5px, transparent 2px) 0 0/26px 26px,
    radial-gradient(circle at 70% 60%, rgba(20, 83, 45, 0.45) 0 1.5px, transparent 2px) 13px 13px/26px 26px,
    var(--paper-50);
}

/* ============================================================
   prefers-reduced-motion: reduce
   Hard short-circuit. Static everything. The custom cursor is
   already gated in JS, but as a belt-and-braces it is hidden
   here too.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #sprinturf-cursor { display: none !important; }
  html.has-sprinturf-cursor,
  html.has-sprinturf-cursor * { cursor: auto !important; }
  [data-exploded-view] [data-layer],
  [data-parallax-scene] [data-depth],
  [data-cinematic-sequence] [data-cinematic-pan] {
    transform: none !important;
    transition: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 1ms !important;
  }
}