/* Reset */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; }

/* Background image */
body{
  margin: 0;

  background-image: url("./assets/bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;

  color: #111;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Soft overlay so everything is readable */


/* Layout */
.wrap{
  position: relative;
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px; /* closer */
  padding:54px 18px;
}

/* Logo */
.logo-wrap{
  position:relative;
  width:min(980px, 92vw);
  display:grid;
  place-items:center;
  margin-top: 8px;
}

.logo{
  width: 100%;
  max-height: 600px; /* bigger */
  object-fit: contain;
  filter: contrast(1.15) saturate(0.9);
}

/* Shine reflection */
.shine{
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 44%,
    rgba(255,255,255,0.9) 50%,
    rgba(255,255,255,0) 56%,
    rgba(255,255,255,0) 100%
  );
  mix-blend-mode: screen;
  opacity: 0.35;
  transform: translateX(-140%) skewX(-18deg);
  animation: sweep 5.8s ease-in-out infinite;
}

@keyframes sweep{
  0%   { transform: translateX(-140%) skewX(-18deg); opacity:0; }
  14%  { opacity:0.35; }
  55%  { opacity:0.45; }
  78%  { opacity:0.18; }
  100% { transform: translateX(140%) skewX(-18deg); opacity:0; }
}

/* Loading bar */
.bar{
  width:min(980px, 92vw);
  height:12px;
  border-radius:999px;
  background: rgba(0,0,0,0.18);
  overflow:hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.18) inset;
}

.bar-fill{
  height:100%;
  width:0%;
  background:#111;
  border-radius:999px;
  transition: width 200ms linear;
}

/* Text (Impact) */
.text{
  font-family: Impact, "Arial Black", "Franklin Gothic Heavy", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(20px, 2.6vw, 38px);
  text-align: center;
}

/* Buttons */
.buttons{
  width:min(980px, 92vw);
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top: 6px;
}

.btn{
  font-family: Impact, "Arial Black", "Franklin Gothic Heavy", sans-serif;
  text-transform: uppercase;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 22px;
  border-radius:10px;
  background:#ffd400;
  color:#111;

  text-decoration:none;
  border:2px solid #111;
  transition: transform .12s ease, filter .12s ease;
}

.btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* Sound toggle button */
.sound-btn{
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;

  font-family: Impact, "Arial Black", "Franklin Gothic Heavy", sans-serif;
  text-transform: uppercase;

  padding: 10px 14px;
  border-radius: 10px;
  background: #ffd400;
  border: 2px solid #111;
  color: #111;
  cursor: pointer;
}

/* Mobile */
@media (max-width: 520px){
  .wrap{ padding-top: 44px; }
}