/* Getij: het water stijgt voorbij de streep van een normale dag (druk) of zakt weer (rustig). */

.celebration[data-mode="tide-busy"] { --c1: #082f49; --c2: #0ea5e9; --c3: #e0f2fe; --glow: rgb(56 189 248 / .8); }
.celebration[data-mode="tide-calm"] { --c1: #042f2e; --c2: #14b8a6; --c3: #ccfbf1; --glow: rgb(94 234 212 / .8); }

.cel-tide-scene { position: absolute; inset: 0; overflow: hidden; }
.cel-tide-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 40% 18% at 22% 14%, rgb(148 163 184 / .35), transparent 70%),
    radial-gradient(ellipse 45% 16% at 74% 9%, rgb(100 116 139 / .4), transparent 70%),
    radial-gradient(ellipse 30% 12% at 50% 24%, rgb(71 85 105 / .35), transparent 70%),
    linear-gradient(180deg, #0b1220, #172540 55%, #1e3a5f);
}
.cel-tide-scene.is-surging .cel-tide-sky { animation: cel-tide-flicker 1.8s steps(1) 1; }
@keyframes cel-tide-flicker { 20% { filter: brightness(1.9); } 24% { filter: none; } 62% { filter: brightness(1.5); } 65% { filter: none; } }
.cel-tide-dawn {
  position: absolute; inset: 0; opacity: 0; transition: opacity 2.8s ease;
  background:
    radial-gradient(ellipse 35% 30% at 80% 62%, rgb(253 224 71 / .55), transparent 70%),
    linear-gradient(180deg, #0f3b4c, #1f7a80 45%, #f6c48a 80%);
}
.cel-tide-sun {
  position: absolute; right: 14vw; top: 58vh; width: 22vh; height: 22vh; margin: -11vh -11vh 0 0; border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #fffbeb, #fde68a 45%, #fbbf24);
  box-shadow: 0 0 10vh rgb(253 224 71 / .8), 0 0 24vh rgb(251 191 36 / .5);
  opacity: 0; translate: 0 12vh; transition: opacity 2.6s ease, translate 3s cubic-bezier(.2,.7,.3,1);
}
.cel-tide-scene.is-clearing .cel-tide-dawn { opacity: 1; }
.cel-tide-scene.is-clearing .cel-tide-sun { opacity: 1; translate: 0 0; }

.cel-tide-gulls { position: absolute; left: 0; right: 0; top: 30vh; height: 10vh; opacity: 0; transition: opacity 1.5s ease 1.2s; }
.cel-tide-scene.is-clearing .cel-tide-gulls { opacity: 1; }
.cel-tide-gulls span { position: absolute; left: 62vw; top: 0; width: 12vh; height: 4.2vh; animation: cel-tide-gull 9s linear infinite; }
.cel-tide-gulls svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: #134e4a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; animation: cel-tide-flap .45s ease-in-out infinite alternate; }
.cel-tide-gulls span:nth-child(2) { left: 74vw; top: 6vh; scale: .75; animation-delay: -2s; }
.cel-tide-gulls span:nth-child(2) svg { animation-delay: -.2s; }
.cel-tide-gulls span:nth-child(3) { left: 54vw; top: 9vh; scale: .6; animation-delay: -4s; }
.cel-tide-gulls span:nth-child(3) svg { animation-delay: -.35s; }
@keyframes cel-tide-gull { to { translate: -36vw -5vh; } }
@keyframes cel-tide-flap { to { scale: 1 .35; } }

/* Tekst */
.cel-tide-text { position: absolute; z-index: 4; left: 8vw; right: 8vw; top: 7vh; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cel-tide-kicker { font-size: 2.8vh; font-weight: 700; letter-spacing: .4em; text-transform: uppercase; color: #7dd3fc; opacity: 0; }
.is-tide-calm .cel-tide-kicker { color: #99f6e4; }
.cel-tide-title {
  margin-top: 1.2vh; font-family: var(--font-brand); font-size: 10vh; line-height: 1.05; color: #fff; opacity: 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 .5vh 0 #0c4a6e, 0 0 4vh rgb(56 189 248 / .7);
}
.is-tide-calm .cel-tide-title { font-size: 12vh; text-shadow: 0 .5vh 0 #134e4a, 0 0 4vh rgb(94 234 212 / .7); }
.cel-tide-sub { margin-top: 1.4vh; font-size: 4vh; font-weight: 500; color: #e0f2fe; opacity: 0; font-variant-numeric: tabular-nums; text-shadow: 0 .3vh 1vh rgb(0 0 0 / .6); }
.cel-tide-sub:empty { display: none; }

/* Zee: de bovenkant van .cel-tide-sea is het wateroppervlak. */
.cel-tide-sea { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 0; }
.cel-tide-wave {
  position: absolute; left: 0; right: 0; bottom: -1.6vh; height: 9vh; transform-origin: 50% 100%;
  background-repeat: repeat-x; background-position-y: bottom;
}
.cel-tide-wave.is-back { bottom: .6vh; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20C25 5 75 5 100 20S175 35 200 20V40H0Z' fill='%231e5f86'/%3E%3C/svg%3E"); background-size: 52vw 100%; opacity: .75; animation: cel-tide-roll-back 7s linear infinite; }
.cel-tide-wave.is-mid { bottom: -.4vh; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20C25 5 75 5 100 20S175 35 200 20V40H0Z' fill='%230e7490'/%3E%3C/svg%3E"); background-size: 38vw 100%; opacity: .9; animation: cel-tide-roll-mid 4.4s linear infinite reverse; }
.cel-tide-wave.is-front { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20C25 5 75 5 100 20S175 35 200 20V40H0Z' fill='%230c4a6e'/%3E%3C/svg%3E"); background-size: 46vw 100%; animation: cel-tide-roll-front 3.2s linear infinite; }
@keyframes cel-tide-roll-back { to { background-position-x: 52vw; } }
@keyframes cel-tide-roll-mid { to { background-position-x: 38vw; } }
@keyframes cel-tide-roll-front { to { background-position-x: 46vw; } }
.cel-tide-deep {
  position: absolute; left: 0; right: 0; top: 0; height: 115vh;
  background:
    repeating-linear-gradient(100deg, transparent 0 6vw, rgb(255 255 255 / .03) 6vw 7vw),
    linear-gradient(180deg, #0c4a6e, #082f49 45%, #04121f);
}
.is-tide-calm .cel-tide-wave.is-back { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20C25 5 75 5 100 20S175 35 200 20V40H0Z' fill='%235eead4'/%3E%3C/svg%3E"); opacity: .5; }
.is-tide-calm .cel-tide-wave.is-mid { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20C25 5 75 5 100 20S175 35 200 20V40H0Z' fill='%2314b8a6'/%3E%3C/svg%3E"); }
.is-tide-calm .cel-tide-wave.is-front { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20C25 5 75 5 100 20S175 35 200 20V40H0Z' fill='%230f766e'/%3E%3C/svg%3E"); }
.is-tide-calm .cel-tide-deep {
  background:
    radial-gradient(ellipse 18% 40% at 86% 0%, rgb(253 224 71 / .35), transparent 70%),
    repeating-linear-gradient(100deg, transparent 0 6vw, rgb(255 255 255 / .04) 6vw 7vw),
    linear-gradient(180deg, #0f766e, #115e59 45%, #042f2e);
}

/* Peilschaal en normaalstreep */
.cel-tide-normal {
  position: absolute; z-index: 3; left: 0; right: 0; top: 70vh; height: 0;
  border-top: .5vh dashed rgb(255 255 255 / .7);
}
.cel-tide-normal span {
  position: absolute; right: 3vw; bottom: .8vh; padding: .4vh 1.6vh; border-radius: 999px;
  font-size: 2.6vh; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgb(15 23 42 / .55);
}
.cel-tide-pole {
  position: absolute; z-index: 3; left: 5vw; top: 14vh; bottom: -2vh; width: 3.4vh; border-radius: 1vh 1vh 0 0;
  background: linear-gradient(90deg, #fef3c7, #fde68a 40%, #d97706);
  box-shadow: 0 0 2vh rgb(0 0 0 / .5);
}
.cel-tide-marks { position: absolute; inset: 1vh 0 0; display: flex; flex-direction: column; justify-content: space-between; }
.cel-tide-marks span { display: block; width: 45%; height: .4vh; background: #78350f; }
.cel-tide-marks span.is-major { width: 80%; height: .6vh; background: #b91c1c; }
.cel-tide-marker {
  position: absolute; z-index: 4; left: calc(5vw + 4.4vh); top: 0; height: 0;
  display: flex; align-items: center;
}
.cel-tide-marker::before {
  content: ""; width: 0; height: 0; border: 1.6vh solid transparent; border-right: 2.4vh solid #fff; border-left: 0;
  filter: drop-shadow(0 0 1vh rgb(0 0 0 / .4));
}
.cel-tide-marker span {
  padding: .6vh 2vh; border-radius: 1.2vh; white-space: nowrap;
  font-size: 4.4vh; font-weight: 700; line-height: 1.1; color: #0c4a6e; background: #fff; font-variant-numeric: tabular-nums;
  box-shadow: 0 1vh 2.4vh rgb(0 0 0 / .45);
}
.is-tide-calm .cel-tide-marker span { color: #115e59; }

/* Reddingsboei met de oproep */
.cel-tide-buoy { position: absolute; z-index: 5; left: 36vw; top: 0; height: 0; opacity: 0; }
.cel-tide-float { position: absolute; left: 0; top: -8vh; display: flex; align-items: center; gap: 2.4vh; }
.cel-tide-buoy.is-afloat .cel-tide-float { animation: cel-tide-bob 2.2s ease-in-out infinite; }
.cel-tide-buoy.is-calm { left: 26vw; }
.cel-tide-buoy.is-calm .cel-tide-float { animation-duration: 4s; }
@keyframes cel-tide-bob { 0%, 100% { translate: 0 -.8vh; rotate: -4deg; } 50% { translate: 0 1vh; rotate: 4deg; } }
.cel-tide-ring {
  flex: none; width: 16vh; height: 16vh; border-radius: 50%;
  background: repeating-conic-gradient(from 22.5deg, #ef4444 0 45deg, #fff 45deg 90deg);
  -webkit-mask: radial-gradient(circle, transparent 0 31%, #000 32%); mask: radial-gradient(circle, transparent 0 31%, #000 32%);
  filter: drop-shadow(0 1vh 1.2vh rgb(0 0 0 / .4));
  box-shadow: inset 0 0 0 .4vh rgb(0 0 0 / .15);
}
.cel-tide-buoy-text {
  padding: 1.6vh 3.6vh; border-radius: 999px; white-space: nowrap;
  font-size: 5.6vh; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, #f97316, #c2410c);
  box-shadow: 0 0 0 .5vh #fff, 0 1.6vh 3vh rgb(0 0 0 / .5), 0 0 6vh rgb(249 115 22 / .7);
  text-shadow: 0 .3vh 0 rgb(124 45 18 / .6);
}
.cel-tide-buoy.is-calm .cel-tide-buoy-text {
  font-size: 4.4vh; color: #134e4a; background: linear-gradient(180deg, #ecfeff, #a5f3fc);
  box-shadow: 0 0 0 .4vh #fff, 0 1.6vh 3vh rgb(0 0 0 / .35); text-shadow: none;
}