:root{
  --night:#0a0e12;
  --turf:#14261c;
  --floodlight:#ffd873;
  --floodlight-dim:rgba(255,216,115,0.16);
  --chalk:#f3efe4;
  --rust:#c1503a;
  --wall:#1c2420;
  --wall-line:rgba(255,255,255,0.07);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{
  background:var(--night);
  font-family:'DM Sans',sans-serif;
  color:var(--chalk);
  min-height:100vh;
  overflow-x:hidden;
}

.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--night);
  padding:40px;
}

/* mosaic of small beveled boxes, painted dynamically on <canvas> — see paintBoxGrid() in main.js */
.box-grid{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
}

.eyebrow{
  position:absolute;
  top:36px; left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:3px;
  text-transform:uppercase;
  color:var(--floodlight);
  opacity:0;
  animation:fadeIn .6s ease forwards;
  animation-delay:.1s;
  z-index:5;
}

/* ── PHOTO WALL GRID ── */
.wall{
  position:relative;
  width:min(920px, 92vw);
  aspect-ratio:16/9;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-template-rows:repeat(4,1fr);
  gap:10px;
  background:var(--wall);
}

.tile{
  position:relative;
  border-radius:6px;
  background:var(--wall);
  border:1px solid var(--wall-line);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  opacity:0;
  transform:translate(var(--sx), var(--sy)) scale(3.4) rotate(var(--rot));
  animation:flyIn .85s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:var(--delay);
}

/* jersey-card placeholder art — swap for real <img> tiles in production */
.tile .jersey{
  width:60%; height:60%;
  display:flex; align-items:center; justify-content:center;
  border-radius:8px;
  font-family:'Oswald',sans-serif;
  font-size:clamp(18px,3vw,30px);
  font-weight:600;
  color:rgba(10,14,18,0.75);
}

.tile img.jersey-photo{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* illustrated cricketer figures — flat SVG on a soft turf-tinted cell */
.tile .cricketer{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 120% 80% at 50% 118%, rgba(74,157,91,0.22), transparent 70%),
    var(--wall);
}
.tile .cricketer svg{
  width:92%; height:92%;
  display:block;
}

.tile .flash{
  position:absolute; inset:0;
  background:var(--floodlight);
  opacity:0;
  animation:flash .85s ease forwards;
  animation-delay:var(--delay);
  pointer-events:none;
}

.tile .pin{
  position:absolute;
  top:6px; right:6px;
  width:9px; height:9px;
  background:var(--floodlight);
  border-radius:50%;
  z-index:2;
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}

/* center cells reserved for text overlay */
.tile.empty{ background:transparent; border:none; animation:none; opacity:1; }

/* text block, appears after wall settles */
.hero-text{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-46%);
  text-align:center;
  z-index:6;
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:4.6s;
  width:min(560px, 84vw);
}

.hero-text .panel{
  background:rgba(10,14,18,0.72);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,216,115,0.2);
  border-radius:14px;
  padding:32px 28px;
}

.hero-text h1{
  font-family:'Oswald',sans-serif;
  font-weight:700;
  font-size:clamp(34px,5.5vw,52px);
  letter-spacing:.5px;
  line-height:1.05;
  color:var(--chalk);
}

.hero-text h1 span{ color:var(--floodlight); }

.hero-text p{
  margin-top:14px;
  font-size:15px;
  font-weight:300;
  color:rgba(243,239,228,0.7);
  line-height:1.6;
}

.cta{
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--floodlight);
  color:var(--night);
  font-weight:700;
  font-size:14px;
  padding:12px 24px;
  border-radius:8px;
  text-decoration:none;
  letter-spacing:.3px;
}

.replay{
  position:absolute;
  bottom:24px; left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:rgba(243,239,228,0.4);
  background:transparent;
  border:1px solid rgba(243,239,228,0.2);
  padding:8px 16px;
  border-radius:20px;
  cursor:pointer;
  z-index:6;
}
.replay:hover{ color:var(--floodlight); border-color:var(--floodlight); }

@keyframes flyIn{
  0%{ opacity:0; }
  55%{ opacity:1; }
  70%{ transform:translate(0,0) scale(1.06) rotate(0deg); opacity:1;}
  100%{ transform:translate(0,0) scale(1) rotate(0deg); opacity:1; }
}
@keyframes flash{
  0%,45%{ opacity:0; }
  58%{ opacity:.55; }
  100%{ opacity:0; }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translate(-50%,-40%); }
  to{ opacity:1; transform:translate(-50%,-46%); }
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

@media (prefers-reduced-motion: reduce){
  .tile{ animation:none !important; opacity:1 !important; transform:none !important; }
  .tile .flash{ animation:none !important; opacity:0 !important; }
  .hero-text{ animation:none !important; opacity:1 !important; transform:translate(-50%,-46%) !important; }
}

@media (max-width:700px){
  .wall{ grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(6,1fr); aspect-ratio:3/4; }
}