/* The opening banner (lib/splash.js), over the studio while it opens.
 *
 * Laid out on a 2000 × 1220 stage (the artwork, 2000 × 1116, with the
 * loader's line under it); the layers are placed in stage units. */

#splash {
  --splash-bg: #15161a;
  --splash-gold: #d9b26a;
  --splash-gold-hi: #f3dca3;
  --splash-muted: #8a7a62;
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: var(--splash-bg);
  font-family: "Cormorant Garamond", Didot, "Bodoni 72", Georgia, serif;
  cursor: pointer;
  transition:
    opacity 0.9s ease,
    filter 0.9s ease;
}
#splash[hidden] {
  display: none;
}
#splash.done {
  opacity: 0;
  filter: blur(8px);
}
#splash.quick {
  transition-duration: 0.35s;
}

/* The whole banner on wide windows; on narrow ones its empty sides are cut,
   so the middle half (the rose and the name) still fills the width. */
#splash .stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(100vw, 100vh * 2000 / 1220);
  aspect-ratio: 2000 / 1220;
  container-type: inline-size;
}
@media (max-aspect-ratio: 1/1) {
  #splash .stage {
    width: min(200vw - 24px, 100vh * 2000 / 1220);
  }
}

#splash .layer {
  position: absolute;
  left: calc(var(--x) / 20 * 1%);
  top: calc(var(--y) / 12.2 * 1%);
  width: calc(var(--w) / 20 * 1%);
  height: calc(var(--h) / 12.2 * 1%);
}
#splash .layer > img,
#splash .layer > svg,
#splash .layer > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* The background plate, feathered into the page's colour. */
#splash .plate {
  opacity: 0;
  animation: splash-fade 1.2s ease forwards;
}

/* A warm glow behind the bloom, breathing slowly. */
#splash .glow {
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(214, 120, 90, 0.22), rgba(170, 40, 60, 0.1) 55%, transparent 100%);
  animation:
    splash-fade 1.5s ease 1.2s forwards,
    splash-breathe 7s ease-in-out 2.7s infinite;
}

/* 1. The outline draws itself, from the clef up to the bloom. */
#splash .sketch {
  overflow: visible;
  filter: drop-shadow(0 0 4px rgba(243, 220, 163, 0.6));
  animation: splash-fade-out 1.2s ease 2.2s forwards;
}
#splash .sketch path {
  fill: none;
  stroke: var(--splash-gold-hi);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: splash-draw 1.3s cubic-bezier(0.55, 0.1, 0.3, 1) var(--d, 0s) forwards;
}

/* 2. The painted rose rises in behind a soft edge, bright and blurred at first. */
#splash .paint,
#splash .reveal-title {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
#splash .paint {
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 38%, transparent 62%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 38%, transparent 62%, transparent 100%);
  -webkit-mask-size: 100% 300%;
  mask-size: 100% 300%;
  -webkit-mask-position: 0 0%;
  mask-position: 0 0%;
  filter: brightness(1.8) blur(5px);
  animation: splash-paint-in 1.8s cubic-bezier(0.4, 0.1, 0.2, 1) 1.4s forwards;
}

/* 3. Light sweeps across the gold every few seconds. */
#splash .glint {
  filter: brightness(2.1) saturate(0.7);
  opacity: 0;
  -webkit-mask-image: linear-gradient(110deg, transparent 42%, #000 50%, transparent 58%);
  mask-image: linear-gradient(110deg, transparent 42%, #000 50%, transparent 58%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: splash-glint 7s ease-in-out var(--gd, 4s) infinite;
}

/* The notes pop in, then float on the staff. */
#splash .note {
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(243, 220, 163, 0.45));
  animation:
    splash-note-in 0.9s cubic-bezier(0.3, 1.4, 0.5, 1) var(--nd) forwards,
    splash-bob 4.5s ease-in-out calc(var(--nd) + 0.9s) infinite;
}

/* The name wipes in from the left, then the subtitle settles. */
#splash .reveal-title {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 60%, transparent 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  filter: blur(3px);
  animation: splash-wipe 1.4s cubic-bezier(0.5, 0.1, 0.2, 1) 2.7s forwards;
}
#splash .subtitle {
  opacity: 0;
  transform: translateY(6px);
  animation: splash-rise 1.2s ease 3.4s forwards;
}

#splash .wave {
  opacity: 0;
  animation: splash-fade 1s ease 3.8s forwards;
}
#splash .dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  animation: splash-fade 2s ease 1.8s forwards;
}

#splash .status {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1135 / 12.2 * 1%);
  text-align: center;
  font-style: italic;
  font-size: max(12px, 1.15cqw);
  letter-spacing: 0.05em;
  color: var(--splash-muted);
  opacity: 0;
  animation: splash-fade 1s ease 4s forwards;
}

@keyframes splash-fade {
  to {
    opacity: 1;
  }
}
@keyframes splash-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes splash-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes splash-paint-in {
  to {
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    filter: none;
  }
}
@keyframes splash-wipe {
  to {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
    filter: none;
  }
}
@keyframes splash-rise {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes splash-breathe {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(0.97);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}
@keyframes splash-note-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes splash-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-7%) rotate(-4deg);
  }
}
@keyframes splash-glint {
  0% {
    opacity: 0;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  6% {
    opacity: 0.75;
  }
  28% {
    opacity: 0.75;
  }
  36% {
    opacity: 0;
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
  100% {
    opacity: 0;
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #splash,
  #splash *,
  #splash *::before,
  #splash *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  #splash .sketch,
  #splash .glint {
    display: none;
  }
}