/* ============================================================
   SIMHALTOS · EFFECTS — shadows, ocean textures, motion
   Sober and restrained. No 3D effects on the logo; shadows are
   used only to lift cards subtly off the page.
   ============================================================ */
:root {
  /* --- Elevation (cool, low-spread, navy-tinted) --- */
  --shadow-xs: 0 1px 2px rgba(2, 21, 30, 0.06);
  --shadow-sm: 0 1px 3px rgba(2, 21, 30, 0.08), 0 1px 2px rgba(2, 21, 30, 0.06);
  --shadow-md: 0 4px 12px rgba(2, 21, 30, 0.10), 0 2px 4px rgba(2, 21, 30, 0.06);
  --shadow-lg: 0 12px 28px rgba(2, 21, 30, 0.14), 0 4px 8px rgba(2, 21, 30, 0.08);
  --shadow-accent: 0 8px 24px rgba(31, 159, 194, 0.28);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* --- Depth gradients (ocean ground, NEVER on the logo) --- */
  --grad-depth:    linear-gradient(180deg, #04293B 0%, #02151E 100%);
  --grad-depth-x:  linear-gradient(120deg, #04293B 0%, #075A7E 100%);
  --grad-reflect:  linear-gradient(180deg, #075A7E 0%, #04293B 60%, #02151E 100%);
  --grad-brand:    linear-gradient(120deg, #1F9FC2 0%, #075A7E 100%);
  /* Protection scrim so white text survives over imagery */
  --scrim-bottom:  linear-gradient(0deg, rgba(2,21,30,0.88) 0%, rgba(2,21,30,0.55) 38%, rgba(2,21,30,0) 100%);
  --scrim-full:    linear-gradient(180deg, rgba(2,21,30,0.30) 0%, rgba(2,21,30,0.72) 100%);

  /* --- Ocean texture overlay (secondary resource, always veiled <20%) --- */
  --texture-opacity: 0.14; /* @kind other */

  /* --- Motion: precise, never bouncy --- */
  --ease-out:   cubic-bezier(0.16, 0.84, 0.44, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);     /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   360ms;  /* @kind other */
  --dur-wave:   6000ms; /* @kind other */
}

/* Veiled ocean texture: a subtle depth/caustic field for dark sections.
   Built from layered radial + linear gradients — no external image needed.
   Apply to a ::before/::after absolutely-positioned layer at low opacity. */
.simh-ocean-veil {
  position: relative;
  isolation: isolate;
}
.simh-ocean-veil::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--texture-opacity);
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(91,208,240,0.55) 0%, rgba(91,208,240,0) 55%),
    radial-gradient(90% 70% at 85% 25%, rgba(31,159,194,0.40) 0%, rgba(31,159,194,0) 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 9px);
}