/*
 * First-load splash: the Lamico logo fills with water (#014681) from the bottom to the top.
 * Lives in /public as a separate file because the site's Content-Security-Policy does not allow inline <style>.
 * splash.js drives --p (fill level) and removes the element when the app is ready.
 */
@property --p {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.35;
}
@property --wp {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

#splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 42%, #ffffff 0%, #eef6fd 58%, #dcecf9 100%);
  opacity: 1;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  /* If splash.js never runs, the splash still gets out of the way. */
  animation: splash-failsafe 0.4s ease 12s forwards;
}
#splash.is-quiet {
  opacity: 0;
  transition: none;
}
#splash.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@keyframes splash-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

.splash-logo {
  --w: min(62vw, 300px);
  --h: calc(var(--w) * 0.37222); /* the logo is 900 x 335 */
  --wave: calc(var(--w) * 0.035);
  --tile: calc(var(--w) * 0.24);
  position: relative;
  width: var(--w);
  height: var(--h);
  animation: splash-in 0.5s ease-out both;
}
.splash-logo > *,
.splash-rise > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.splash-logo img {
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* the empty vessel: a pale ghost of the logo */
.splash-base {
  filter: grayscale(1);
  opacity: 0.16;
}

/* the rising water: everything inside is only visible below the wave line */
.splash-rise {
  --y: calc(var(--h) * (1 - var(--p)));
  --wx: calc(var(--tile) * var(--wp) * -1);
  animation: splash-wave 1s linear infinite;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8V4Q12 0 24 4T48 4V8Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 8' preserveAspectRatio='none'%3E%3Cpath d='M0 8V4Q12 0 24 4T48 4V8Z'/%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-size: var(--tile) var(--wave), 100% 100%;
  mask-size: var(--tile) var(--wave), 100% 100%;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  -webkit-mask-position: var(--wx) calc(var(--y) - var(--wave)), 0 var(--y);
  mask-position: var(--wx) calc(var(--y) - var(--wave)), 0 var(--y);
}
@keyframes splash-wave {
  from {
    --wp: 0;
  }
  to {
    --wp: 1;
  }
}

/* water in the shape of the logo */
.splash-water {
  background: linear-gradient(180deg, #0a6bb5 0%, #014681 45%, #013562 100%);
  -webkit-mask: url('/assets/branding/lamico-logo.webp') center / 100% 100% no-repeat;
  mask: url('/assets/branding/lamico-logo.webp') center / 100% 100% no-repeat;
}

/* once full, the water gives way to the real colours of the logo */
.splash-color {
  opacity: 0;
  transition: opacity 0.25s ease;
}
#splash.is-filled .splash-color {
  opacity: 1;
}

@keyframes splash-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
}

@media (prefers-reduced-motion: reduce) {
  #splash {
    transition-duration: 0.15s, 0s;
  }
  .splash-logo,
  .splash-rise {
    animation: none;
  }
}