/* ---------------------------------------------------
   PASSOBO — Paralympic Association of Botswana
   Loading / coming-soon landing
--------------------------------------------------- */

:root{
  --bg: #fbfbfd;
  --bg-2: #f2f4f8;
  --blue: #5a95e8;
  --red: #dd0214;
  --green: #04a130;
  --deep-blue: #0143ad;
  --text: #12151c;
  --text-dim: #6b7280;
  --line: rgba(18,21,28,.14);
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-narrow: "Aptos Narrow", "Arial Narrow", "Helvetica Neue Condensed", var(--font-body);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{ height:100%; }

body{
  background: radial-gradient(120% 120% at 50% 12%, var(--bg) 0%, var(--bg-2) 62%);
  color: var(--text);
  font-family: var(--font-body);
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.glow{
  position:fixed;
  top:50%; left:50%;
  width:min(70vw,640px);
  height:min(70vw,640px);
  transform:translate(-50%,-58%);
  background: radial-gradient(circle, rgba(90,149,232,.18) 0%, rgba(90,149,232,0) 70%);
  filter: blur(10px);
  z-index:0;
  animation: pulse 6s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{ opacity:.7; transform:translate(-50%,-58%) scale(1); }
  50%{ opacity:1; transform:translate(-50%,-58%) scale(1.08); }
}

/* --- Loader (pure CSS, no network/asset dependency) --- */
.loader{
  position:fixed;
  inset:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: .85rem;
  background: radial-gradient(120% 120% at 50% 12%, var(--bg) 0%, var(--bg-2) 62%);
  transition: opacity .6s ease, visibility .6s ease;
}
.loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.loader__dot{
  width:.7rem;
  height:.7rem;
  border-radius:50%;
  display:inline-block;
  animation: dot-pulse 1.2s ease-in-out infinite;
}
.loader__dot:nth-child(1){ background: var(--red); animation-delay: 0s; }
.loader__dot:nth-child(2){ background: var(--deep-blue); animation-delay: .15s; }
.loader__dot:nth-child(3){ background: var(--green); animation-delay: .3s; }
.loader__dot:nth-child(4){ background: var(--blue); animation-delay: .45s; }

@keyframes dot-pulse{
  0%, 80%, 100%{ transform:scale(.55); opacity:.35; }
  40%{ transform:scale(1); opacity:1; }
}

.stage{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding: 0 1.5rem;
}

/* --- Logo (mark + wordmark, as one graphic) --- */
.mark{
  position:relative;
  width: min(62vw, 300px);
  min-width:190px;
  aspect-ratio: 828 / 846;
  margin-bottom: clamp(.4rem, 1.2vw, .7rem);
}

.mark__sketch{
  position:absolute;
  inset:0;
  transition: opacity 1.4s ease;
}
.mark__sketch svg{ width:100%; height:100%; display:block; overflow:visible; }

.mark__color{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transition: opacity 1.4s ease;
  filter: drop-shadow(0 10px 26px rgba(90,149,232,.22));
}

.mark.is-filled .mark__sketch{ opacity:0; }
.mark.is-filled .mark__color{ opacity:1; }

/* --- Divider --- */
.divider{
  width:1px;
  height: clamp(1.5rem, 4vw, 2.25rem);
  margin: clamp(.6rem, 1.8vw, 1rem) 0;
  background: var(--line);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.divider.is-in{ transform: scaleY(1); }

/* --- Contact row --- */
.contact{
  display:flex;
  align-items:center;
  gap: clamp(.9rem, 3vw, 1.5rem);
  font-family: var(--font-narrow);
  font-size: clamp(.9rem, 2.2vw, 1.05rem);
  color: var(--text-dim);
}

.contact__item{
  color: inherit;
  text-decoration:none;
  letter-spacing:.02em;
  opacity:0;
  transform: translateY(18px);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), color .25s ease;
  position:relative;
  white-space:nowrap;
}
.contact__item::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:1px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .35s ease;
}
.contact__item:hover{ color: var(--blue); }
.contact__item:hover::after{ transform: scaleX(1); }
.contact__item.is-in{ opacity:1; transform:translateY(0); }

.contact__sep{
  width:1px;
  height:1.1em;
  background: var(--line);
  opacity:0;
  transition: opacity .5s ease .1s;
}
.contact__sep.is-in{ opacity:1; }

/* --- Responsive --- */
@media (max-width:480px){
  .contact{
    flex-direction:column;
    gap:.75rem;
  }
  .contact__sep{
    width:1.6rem;
    height:1px;
  }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}