/* ============================================================
   WINNING TEAM RECORDS — VISUAL POLISH LAYER
   Cursor glow, magnetic buttons, page transitions,
   text scramble, loading screen
   ============================================================ */

/* ---- LOADING SCREEN ---- */
#wtr-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #050309;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.5s ease;
}

#wtr-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

#wtr-loader::before {
  /* Same grain texture as the rest of the site */
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  pointer-events: none;
}

.wtr-loader-logo {
  width: clamp(140px, 30vw, 220px);
  height: auto;
  opacity: 0;
  transform: scale(0.88);
  filter: blur(6px) drop-shadow(0 0 30px rgba(153, 51, 255, 0.35));
  position: relative;
  z-index: 1;
  animation: loaderLogoIn 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes loaderLogoIn {
  0%   { opacity: 0;   transform: scale(0.84); filter: blur(10px) drop-shadow(0 0 0 rgba(153,51,255,0)); }
  45%  { opacity: 1;   transform: scale(1.015); filter: blur(0px) drop-shadow(0 0 30px rgba(153,51,255,0.4)); }
  64%  { opacity: 0.35; transform: scale(0.99); } /* glitch flicker frame */
  68%  { opacity: 1;   transform: scale(1.01); }
  78%  { opacity: 0.55; transform: scale(0.995); } /* second flicker */
  82%  { opacity: 1;   transform: scale(1); }
  100% { opacity: 1;   transform: scale(1); }
}

.wtr-loader-line {
  width: 0;
  height: 2px;
  background: var(--accent, #C9A84C);
  margin-top: 22px;
  position: relative;
  z-index: 1;
  animation: loaderLineIn 0.9s ease-out 1.0s forwards;
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.5);
}

@keyframes loaderLineIn {
  from { width: 0; }
  to   { width: 160px; }
}

/* ---- CURSOR GLOW (hero section, desktop only) ---- */
#wtr-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 420px;
  height: 420px;
  pointer-events: none;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, 0.10) 0%, rgba(201, 168, 76, 0.03) 40%, transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}

#wtr-cursor-glow.active { opacity: 1; }

@media (max-width: 768px), (hover: none) {
  #wtr-cursor-glow { display: none; }
}

/* ---- MAGNETIC BUTTONS ---- */
.btn {
  will-change: transform;
}

/* ---- PAGE TRANSITION OVERLAY ---- */
#wtr-page-transition {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #050309;
  transform: translateY(100%);
  pointer-events: none;
}

#wtr-page-transition.leaving {
  transition: transform 0.45s cubic-bezier(0.76, 0, 0.24, 1);
  transform: translateY(0%);
}

body.wtr-page-enter {
  animation: wtrPageEnter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wtrPageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- TEXT SCRAMBLE ---- */
.scramble-text {
  display: inline-block;
}

.scramble-char {
  display: inline-block;
}