/* ==========================================================================
   Tide — the living colour field behind the dark sections.
   Soft pools of the brand's sea colours over ink, under film grain.
   It is also the dive: light from the surface at the top of every page,
   darkening to the deep at the bottom (see .tide__surface and .tide__abyss).
   Movement is driven by ../js/tide.js; without it this is a still picture.
   Only transform and opacity ever change, so it stays cheap to animate.
   ========================================================================== */

.tide {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  background:
    radial-gradient(120% 90% at 88% 112%, var(--navy) 0%, transparent 62%),
    var(--ink);
}

/* Everything that washes in when a page opens */
.tide__field {
  position: absolute;
  inset: 0;
  animation: tide-wash 1000ms var(--ease-out) both;
}

/* A pool of colour. Drawn small and scaled up, which keeps memory use low. */
.tide__pool {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36vmax;
  height: 36vmax;
  margin: -18vmax 0 0 -18vmax;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    var(--c) 0%,
    color-mix(in srgb, var(--c) 58%, transparent) 46%,
    transparent 100%
  );
  will-change: transform, opacity;
}

/* Resting places, used until the script takes over (or if it never loads) */
.tide__pool--deep { --c: var(--deep); transform: translate3d(30vw, 30vh, 0) scale(2.3); opacity: 0.9; }
.tide__pool--sea { --c: var(--sea); transform: translate3d(-34vw, 36vh, 0) scale(1.9); opacity: 0.45; }
.tide__pool--aqua { --c: var(--aqua); transform: translate3d(38vw, -36vh, 0) scale(1.15); opacity: 0.32; }

/* One band of light that crosses the screen as the page opens */
.tide__sweep {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(
    105deg,
    transparent 36%,
    color-mix(in srgb, var(--aqua) 20%, transparent) 50%,
    transparent 64%
  );
  opacity: 0;
  animation: tide-sweep 1900ms var(--ease-out) 120ms both;
}

/* The dive. Light from the surface, strongest at the top of a page… */
.tide__surface {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 55% at 50% -8%, color-mix(in srgb, var(--sea) 70%, transparent), transparent 70%),
    linear-gradient(to bottom, color-mix(in srgb, var(--deep) 55%, transparent), transparent 60%);
  opacity: 1;
  will-change: opacity;
}
/* …and the deep, which closes in as you scroll down. Very dark blue, never black. */
.tide__abyss {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0;
  will-change: opacity;
}

/* A ring that spreads from wherever the visitor clicks or taps */
.tide__ripple {
  position: absolute;
  left: 0;
  top: 0;
  width: 34vmax;
  height: 34vmax;
  margin: -17vmax 0 0 -17vmax;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    transparent 56%,
    color-mix(in srgb, var(--aqua) 55%, transparent) 80%,
    transparent 100%
  );
  opacity: 0;
  will-change: transform, opacity;
}

/* Film grain: takes the digital smoothness off the gradients */
.tide__grain {
  position: absolute;
  inset: 0;
  opacity: 0.075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes tide-wash {
  from { opacity: 0; transform: scale(1.35); }
  to { opacity: 1; transform: none; }
}

@keyframes tide-sweep {
  0% { transform: translate3d(-85%, 0, 0); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate3d(85%, 0, 0); opacity: 0; }
}