/* ═══════════════════════════════════════════════════════════════════════════
   KDV TIDE MOODS — the cinematic layer.  v1 · 2026-07-06
   Five tides, five moods, one island. Driven by island-mood.js data-attrs:
   html[data-tide= low | rising | mid | high | king | storm ]
   html[data-drama= ocean-serene…ocean-rage]   html[data-daypart=…]
   html[data-moon=…]   html[data-onair="1"]
   Loads AFTER a site's own stylesheet; token layer + dramatic washes only —
   typography and layout always belong to the site underneath.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens: the five moods ─────────────────────────────────────────────── */
:root{
  --tm-accent:#5EC4A4; --tm-accent-strong:#72D4B4; --tm-deep:#081220;
  --tm-wash1:rgba(94,196,164,.10); --tm-wash2:rgba(232,164,64,.05);
  --tm-glow:rgba(94,196,164,.30); --tm-ink:#EAF6F2;
  --tm-speed:34s; --tm-glowmul:1;
}
:root[data-tide="low"]{
  --tm-accent:#7AB4D4; --tm-accent-strong:#A8C8E0; --tm-deep:#070C18;
  --tm-wash1:rgba(122,180,212,.12); --tm-wash2:rgba(232,200,154,.10);
  --tm-glow:rgba(122,180,212,.32); --tm-ink:#D8E8F4; --tm-speed:46s;
}
:root[data-tide="rising"]{
  --tm-accent:#3EC8A0; --tm-accent-strong:#50D8B0; --tm-deep:#06151E;
  --tm-wash1:rgba(62,200,160,.14); --tm-wash2:rgba(62,200,160,.05);
  --tm-glow:rgba(62,200,160,.38); --tm-ink:#DCF4EA; --tm-speed:26s;
}
:root[data-tide="mid"]{
  --tm-accent:#5EC4A4; --tm-accent-strong:#72D4B4; --tm-deep:#081220;
  --tm-wash1:rgba(94,196,164,.11); --tm-wash2:rgba(232,164,64,.06);
  --tm-glow:rgba(94,196,164,.30); --tm-ink:#EAF6F2; --tm-speed:34s;
}
:root[data-tide="high"]{
  --tm-accent:#4A90D9; --tm-accent-strong:#6AAAE8; --tm-deep:#050E20;
  --tm-wash1:rgba(74,144,217,.16); --tm-wash2:rgba(46,107,176,.10);
  --tm-glow:rgba(74,144,217,.42); --tm-ink:#DCE8F8; --tm-speed:24s;
}
:root[data-tide="king"],:root[data-tide="storm"]{
  --tm-accent:#22D3EE; --tm-accent-strong:#67E8F9; --tm-deep:#04081A;
  --tm-wash1:rgba(34,211,238,.15); --tm-wash2:rgba(30,58,138,.22);
  --tm-glow:rgba(34,211,238,.5); --tm-ink:#E0F6FC; --tm-speed:14s;
}
:root[data-tide="storm"]{ --tm-alert:#FF5A5A; }

/* drama multiplies the pulse of everything */
:root[data-drama="ocean-charged"]{ --tm-glowmul:1.25; }
:root[data-drama="ocean-fierce"]{ --tm-glowmul:1.6; }
:root[data-drama="ocean-rage"]{ --tm-glowmul:2.1; }

/* ── the wash: a living sea behind every page ───────────────────────────── */
@keyframes tmWash{
  0%,100%{transform:translateX(0) scale(1);opacity:1}
  50%{transform:translateX(-2.5%) scale(1.05);opacity:.82}
}
@keyframes tmStormDrift{
  0%{background-position:0 0,0 0}
  100%{background-position:640px 360px,-420px 240px}
}
@keyframes tmShimmer{
  0%,100%{opacity:.5}50%{opacity:1}
}
body::before{
  content:"";position:fixed;inset:-12% -6%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 112%, var(--tm-wash1) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 12%,  var(--tm-wash2) 0%, transparent 48%);
  animation:tmWash var(--tm-speed) ease-in-out infinite;
}
/* low tide: sun-bleached shimmer */
:root[data-tide="low"] body::before{
  background:
    radial-gradient(ellipse at 50% 116%, var(--tm-wash1) 0%, transparent 52%),
    radial-gradient(ellipse at 20% 6%,   rgba(240,214,170,.10) 0%, transparent 44%),
    radial-gradient(ellipse at 84% 20%,  var(--tm-wash2) 0%, transparent 40%);
  animation:tmWash var(--tm-speed) ease-in-out infinite, tmShimmer 9s ease-in-out infinite;
}
/* king/storm: drifting storm bands over the deep */
:root[data-tide="king"] body::before,
:root[data-tide="storm"] body::before{
  background:
    repeating-linear-gradient(118deg, transparent 0 90px, rgba(34,211,238,.035) 90px 150px),
    repeating-linear-gradient(24deg, transparent 0 140px, rgba(30,58,138,.14) 140px 260px),
    radial-gradient(ellipse at 50% 118%, var(--tm-wash1) 0%, transparent 60%);
  animation:tmStormDrift 38s linear infinite;
}
:root[data-tide="storm"] body::before{ animation-duration:19s; }

/* ── daypart veil: the hour tints the light ─────────────────────────────── */
html::after{
  content:"";position:fixed;inset:0;z-index:2147480000;pointer-events:none;
  mix-blend-mode:soft-light;opacity:.5;transition:background 3s ease;
}
:root[data-daypart="daypart-dawn"]::after{background:linear-gradient(180deg,rgba(242,166,160,.34),transparent 62%)}
:root[data-daypart="daypart-morning"]::after{background:linear-gradient(180deg,rgba(190,226,255,.14),transparent 55%)}
:root[data-daypart="daypart-afternoon"]::after{background:linear-gradient(180deg,rgba(255,244,214,.16),transparent 50%)}
:root[data-daypart="daypart-golden"]::after{background:linear-gradient(200deg,rgba(232,164,64,.30),transparent 64%)}
:root[data-daypart="daypart-dusk"]::after{background:linear-gradient(195deg,rgba(155,123,212,.26),transparent 60%)}
:root[data-daypart="daypart-night"]::after{background:linear-gradient(180deg,rgba(8,14,40,.34),transparent 70%)}
/* moonlight silvers a bright-moon night */
:root[data-daypart="daypart-night"][data-moon="moon-full"]::after,
:root[data-daypart="daypart-night"][data-moon="moon-gibbous"]::after{
  background:radial-gradient(ellipse at 78% -8%,rgba(214,228,248,.30),transparent 46%),
             linear-gradient(180deg,rgba(8,14,40,.28),transparent 70%);
}

/* ── chrome: the mood reaches what you touch ────────────────────────────── */
::selection{background:var(--tm-accent);color:var(--tm-deep)}
.site-nav,nav.site-nav,header.site-header{
  border-bottom-color:color-mix(in srgb,var(--tm-accent) 22%,transparent)!important;
  box-shadow:0 1px calc(18px*var(--tm-glowmul)) color-mix(in srgb,var(--tm-glow) 38%,transparent);
  transition:border-color 2s ease,box-shadow 2s ease;
}
.btn-primary,button.btn-primary,a.btn-primary{
  transition:background .5s ease,box-shadow .8s ease,color .5s ease;
  box-shadow:0 0 calc(20px*var(--tm-glowmul)) var(--tm-glow),0 2px 6px rgba(0,0,0,.3);
}
.btn-primary:hover{box-shadow:0 0 calc(32px*var(--tm-glowmul)) var(--tm-glow),0 3px 10px rgba(0,0,0,.4)}
.card:hover,.hood-card:hover,.pulse-card:hover{
  border-color:color-mix(in srgb,var(--tm-accent) 34%,transparent);
  box-shadow:0 8px 30px rgba(0,0,0,.35),0 0 calc(14px*var(--tm-glowmul)) color-mix(in srgb,var(--tm-glow) 55%,transparent);
}
.tide-label,.ocean-bar b,.pulse-card__value{color:var(--tm-accent-strong)}
html{scrollbar-color:color-mix(in srgb,var(--tm-accent) 55%,#20303a) transparent}

/* ── 🔴 ON AIR — the radio breathing through every page ─────────────────── */
@keyframes tmOnAir{0%,100%{opacity:1;box-shadow:0 0 10px rgba(255,179,71,.55)}
  50%{opacity:.72;box-shadow:0 0 22px rgba(255,179,71,.85)}}
.kdv-onair-chip{
  position:fixed;left:14px;bottom:14px;z-index:2147480001;text-decoration:none;
  font:600 11.5px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;
  color:#FFDFAE;background:rgba(24,14,4,.86);border:1px solid rgba(255,179,71,.55);
  border-radius:999px;padding:8px 14px 8px 11px;backdrop-filter:blur(6px);
  animation:tmOnAir 2.4s ease-in-out infinite;
}
.kdv-onair-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:#FF4D4D;margin-right:7px;vertical-align:-1px;
  box-shadow:0 0 8px #FF4D4D}
:root[data-onair="1"] .site-nav,:root[data-onair="1"] header.site-header{
  border-bottom-color:rgba(255,179,71,.4)!important;
  box-shadow:0 1px 22px rgba(255,179,71,.22);
}

/* ── ⚠ alert bar — when the ocean report seizes the page ────────────────── */
.kdv-alert-bar{
  position:sticky;top:0;z-index:2147480002;
  font:600 12.5px/1.5 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.04em;
  color:#FFE2E2;background:linear-gradient(90deg,#3A0A12,#59101c 50%,#3A0A12);
  border-bottom:1px solid #FF5A5A;padding:9px 16px;text-align:center;
  animation:tmShimmer 3.5s ease-in-out infinite;
}

/* ── property adapters ──────────────────────────────────────────────────── */
/* GIS field map: tint the chrome, never the terrain */
[data-kdv-prop="gis"] .badge{border-color:var(--tm-accent);color:var(--tm-accent-strong)}
[data-kdv-prop="gis"] .btn-primary{box-shadow:0 0 calc(14px*var(--tm-glowmul)) var(--tm-glow)}
[data-kdv-prop="gis"] .channel-tabs,[data-kdv-prop="gis"] .ch-tab.active{
  border-color:color-mix(in srgb,var(--tm-accent) 45%,transparent)}
[data-kdv-prop="gis"] body::before{display:none}         /* keep the map clean */
:root[data-kdv-prop="gis"]::after{content:none!important}  /* no veil over terrain */
/* Moodle / portal: navbar + buttons only */
[data-kdv-prop="class"] .navbar,[data-kdv-prop="portal"] .navbar,
[data-kdv-prop="class"] #page-header{
  border-bottom:2px solid color-mix(in srgb,var(--tm-accent) 40%,transparent)!important;
  box-shadow:0 2px 18px color-mix(in srgb,var(--tm-glow) 40%,transparent);
}
[data-kdv-prop="class"] .btn-primary,[data-kdv-prop="portal"] .btn-primary{
  background:var(--tm-accent)!important;border-color:var(--tm-accent)!important;
  color:var(--tm-deep)!important}


/* ── the tideline: one breath of light at the foot of every page ────────── */
@keyframes tmTideSweep{
  0%{background-position:-40vw 0}100%{background-position:140vw 0}
}
@keyframes tmTideBreathe{
  0%,100%{opacity:.55;transform:scaleY(1)}50%{opacity:1;transform:scaleY(1.8)}
}
.kdv-tideline{
  position:fixed;left:0;right:0;bottom:0;height:2px;z-index:2147479999;
  pointer-events:none;transform-origin:bottom;
  background:linear-gradient(90deg,transparent 0%,
    color-mix(in srgb,var(--tm-accent) 55%,transparent) 35%,
    var(--tm-accent-strong) 50%,
    color-mix(in srgb,var(--tm-accent) 55%,transparent) 65%,transparent 100%);
  background-size:80vw 100%;background-repeat:no-repeat;
  animation:tmTideSweep calc(var(--tm-speed)*0.55) ease-in-out infinite alternate,
            tmTideBreathe calc(var(--tm-speed)*0.28) ease-in-out infinite;
  box-shadow:0 0 calc(12px*var(--tm-glowmul)) var(--tm-glow);
}
:root[data-tide="king"] .kdv-tideline,:root[data-tide="storm"] .kdv-tideline{height:3px}
:root[data-onair="1"] .kdv-tideline{
  background:linear-gradient(90deg,transparent,rgba(255,179,71,.7) 50%,transparent);
  background-size:80vw 100%;background-repeat:no-repeat;
  box-shadow:0 0 14px rgba(255,179,71,.5);
}
@media (prefers-reduced-motion:reduce){.kdv-tideline{animation:none;opacity:.5}}

/* ── respect ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  body::before,.kdv-onair-chip,.kdv-alert-bar{animation:none!important}
  html::after{transition:none}
}