/* ==========================================================================
   Breaking Sports with Vivek Sethia
   The brand is two colours only: electric blue and white. Nothing else
   appears in this file — depth comes from tints of the blue, not new hues.
   ========================================================================== */

:root{
  --blue:        #1804DA;   /* brand blue, read out of the logo PDF */
  --blue-lift:   #4634FF;   /* lighter tint — spotlight and the cool bloom */
  --blue-glow:   #150A6B;   /* the ground's warm-side tint                 */
  --blue-night:  #0B0640;   /* the ground itself                           */
  --blue-abyss:  #08033A;   /* deepest corner                              */
  --ink:         #FFFFFF;

  --ease:        cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  min-height:100svh;
  background: var(--blue-night);
  color: var(--ink);
  font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* the page ground — a deep indigo base with two off-centre blooms, so the
   colour has somewhere to travel instead of sitting flat across the viewport.
   Every stop is the brand blue or a tint of it; the hue never moves.        */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    /* the main bloom, up and to the right of the lockup */
    radial-gradient(62% 54% at 72% 30%,
      rgba(24,4,218,.85) 0%,
      rgba(24,4,218,.34) 46%,
      rgba(24,4,218,0)   74%),
    /* a cooler, quieter answer to it in the lower left */
    radial-gradient(56% 50% at 22% 76%,
      rgba(70,52,255,.40) 0%,
      rgba(70,52,255,0)   70%),
    /* and the ground the two sit on */
    linear-gradient(155deg,
      var(--blue-glow)  0%,
      var(--blue-night) 52%,
      var(--blue-abyss) 100%);
}

/* ---------- cursor spotlight ------------------------------------------- */
/* Position is driven from script.js via --mx / --my (px). Hidden until the
   first pointer move so it never flashes in a corner on load.              */
.spotlight{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:0;
  transition:opacity .6s var(--ease);
  background:
    radial-gradient(
      420px 420px at var(--mx,50%) var(--my,50%),
      rgba(70,52,255,.60) 0%,
      rgba(70,52,255,.24) 38%,
      rgba(70,52,255,0)   70%
    ),
    radial-gradient(
      820px 820px at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.09) 0%,
      rgba(255,255,255,0)   65%
    );
}
body.is-live .spotlight{ opacity:1; }

/* faint static texture so the flat blue doesn't band on large screens */
.grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.28;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.16) 1px, transparent 0);
  background-size:26px 26px;
  mask-image: radial-gradient(120% 120% at 50% 50%, #000 25%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, #000 25%, transparent 78%);
}

/* ---------- stage ------------------------------------------------------- */
.stage{
  position:relative; z-index:3;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(2rem,5vh,4rem) 1.5rem;
  text-align:center;
}

.tier{
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(2rem,5vh,3rem);
  animation:rise .9s var(--ease) .05s both;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}

/* ---------- logo lockup ------------------------------------------------- */
/* Two layouts of the same artwork: the wide lockup on anything roomy, the
   stacked one once the wordmark would get too small to read.               */
.lockup{
  width:100%;
  display:flex; justify-content:center;
  color:var(--ink);
  filter:drop-shadow(0 8px 26px rgba(10,2,115,.45));
}
.lockup__art{
  display:block;
  width:100%;
  height:auto;
}
.lockup__art--wide{    max-width:min(560px, 82vw); }
.lockup__art--stacked{ display:none; max-width:min(300px, 66vw); }

@media (max-width: 640px){
  .lockup__art--wide{    display:none; }
  .lockup__art--stacked{ display:block; }
}

/* ---------- social row -------------------------------------------------- */
.socials{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.85rem,2.8vw,1.6rem);
  flex-wrap:wrap;
}

.social{
  --size: clamp(48px, 9.5vw, 58px);
  --tx:0px; --ty:0px;                /* magnetic offset, set from JS */
  position:relative;
  display:grid; place-items:center;
  width:var(--size); height:var(--size);
  border-radius:50%;
  color:var(--ink);
  text-decoration:none;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  transform:translate3d(var(--tx),var(--ty),0);
  transition:
    background .35s var(--ease),
    border-color .35s var(--ease),
    color .35s var(--ease),
    box-shadow .35s var(--ease);
  will-change:transform;
}

.social__ico{ display:grid; place-items:center; }
.social svg{
  width:calc(var(--size) * .44);
  height:calc(var(--size) * .44);
  fill:currentColor;
  display:block;
}

/* accessible names that are not painted */
.sr-only,
.social__label{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* hover / keyboard focus — inverts to white on the brand blue */
.social:hover,
.social:focus-visible{
  color:var(--blue);
  background:var(--ink);
  border-color:var(--ink);
  box-shadow:0 10px 34px -8px rgba(255,255,255,.65);
  outline:none;
}
.social:focus-visible{
  box-shadow:0 10px 34px -8px rgba(255,255,255,.65), 0 0 0 3px rgba(255,255,255,.55);
}

/* ---------- contact line ------------------------------------------------ */
.contact{
  margin:0;
  font-size:clamp(.72rem,1.9vw,.8rem);
  font-weight:500;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:.65em;
}
.contact a{
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.32);
  padding-bottom:.12em;
  letter-spacing:.06em;
  text-transform:none;
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.contact a:hover,
.contact a:focus-visible{ border-color:var(--ink); outline:none; }

/* ---------- accessibility / fallbacks ----------------------------------- */
@media (prefers-reduced-motion: reduce){
  .tier{ animation:none; }
  .social{ transform:none !important; transition:background .2s, color .2s, border-color .2s; }
  .spotlight{ display:none; }
}

/* touch devices have no cursor, so the spotlight has nothing to follow */
@media (hover:none){
  .spotlight{ display:none; }
}