/* SPDX-License-Identifier: MIT */
/* LCB Manchester, arrival splash.
   The crest shows on its own first, then the page hands over to it.
   This file touches nothing else on the site.
   Change the two colours below if you ever want a different look. */

:root {
  --lcb-splash-bg:  #0B1220;   /* same dark navy as the site footer */
  --lcb-splash-dot: #D4A24C;   /* the site gold, it lifts the crest off the navy */
}

.lcb-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(212,162,76,.16), rgba(11,18,32,0) 62%),
    var(--lcb-splash-bg);
  /* safety net: with scripting off the splash still clears itself */
  animation: lcb-splash-out .5s ease 3s forwards;
}

.lcb-splash-logo {
  width: 180px;
  height: 180px;
  object-fit: contain;
  filter: drop-shadow(0 12px 34px rgba(0,0,0,.6));
  animation: lcb-splash-logo-in .7s ease both;
}

.lcb-splash-dots {
  display: flex;
  gap: .55rem;
  line-height: 0;
}

.lcb-splash-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--lcb-splash-dot);
  box-shadow: 0 0 10px rgba(212,162,76,.45);
  animation: lcb-splash-dot 1.1s ease-in-out infinite;
}

.lcb-splash-dots i:nth-child(2) { animation-delay: .16s; }
.lcb-splash-dots i:nth-child(3) { animation-delay: .32s; }

@keyframes lcb-splash-logo-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes lcb-splash-dot {
  0%, 100% { opacity: .28; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-5px); }
}

@keyframes lcb-splash-out {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* respect reduced motion: no drifting logo, no bouncing dots */
@media (prefers-reduced-motion: reduce) {
  .lcb-splash-logo,
  .lcb-splash-dots i { animation: none; }
}

/* small phones */
@media (max-width: 430px) {
  .lcb-splash-logo { width: 138px; height: 138px; }
  .lcb-splash { gap: 1.4rem; }
}