/* ANNCON 2027 landing page - ISACA Abuja Chapter
   Single-view, no-scroll layout. Pure CSS + minimal vanilla JS. */

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

:root{
  --navy-deep:#0B1638;
  --green:#3FCB63;
  --mut:rgba(255,255,255,0.72);
  --line:rgba(255,255,255,0.14);
}

html, body{height:100%;}

body{
  font-family:'Inter',sans-serif;
  color:#fff;
  background:
    radial-gradient(ellipse 900px 520px at 12% -10%, rgba(63,203,99,0.16), transparent 55%),
    radial-gradient(ellipse 800px 560px at 100% 110%, rgba(27,79,160,0.42), transparent 58%),
    var(--navy-deep);
  height:100vh;
  height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

a{color:inherit;}

/* ---------- Header ---------- */
header{
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding:clamp(10px,2.2vh,20px) clamp(16px,3vw,32px) 0;
  flex-shrink:0;
}
header img{width:clamp(24px,3.2vh,34px); height:clamp(24px,3.2vh,34px); border-radius:50%; object-fit:cover; flex-shrink:0;}
header .word{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(11px,1.6vh,14px); line-height:1.3;}
header .word small{display:block; font-family:'JetBrains Mono',monospace; font-size:clamp(7px,1vh,9px); letter-spacing:0.12em; color:var(--mut); font-weight:500;}

/* ---------- Main: fills remaining space, centers content ---------- */
main{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(8px,1.6vh,16px);
  padding:clamp(6px,1.4vh,14px) clamp(16px,4vw,32px);
  text-align:center;
  min-height:0;
}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:clamp(9px,1.3vh,11px); letter-spacing:0.14em;
  color:#a8f0bd; border:1px solid rgba(126,226,160,0.35); border-radius:999px;
  padding:clamp(4px,1vh,7px) clamp(12px,2vw,16px); background:rgba(63,203,99,0.08);
  flex-shrink:0;
}
.dot{width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 1.6s ease-in-out infinite; flex-shrink:0;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);} 50%{opacity:0.4;transform:scale(0.75);}}

.badge-wrap{position:relative; flex-shrink:1; min-height:0;}
.badge-glow{
  position:absolute; inset:-18px; border-radius:50%;
  background:radial-gradient(circle, rgba(63,203,99,0.28), transparent 68%);
  filter:blur(6px);
  animation:glow 3.4s ease-in-out infinite;
}
@keyframes glow{0%,100%{opacity:0.5; transform:scale(1);} 50%{opacity:0.9; transform:scale(1.05);}}
.badge-wrap img{
  position:relative;
  height:min(20vh, 150px);
  width:auto;
  max-width:40vw;
  display:block;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,0.5));
}

h1{
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:clamp(18px,3.4vh,30px); line-height:1.18;
  flex-shrink:0;
}
h1 span{color:var(--green);}

p.lede{
  font-size:clamp(11px,1.6vh,14.5px); line-height:1.55; color:var(--mut);
  max-width:440px;
  flex-shrink:0;
}

/* ---------- Countdown ---------- */
.countdown{display:flex; gap:clamp(6px,1.4vw,14px); flex-shrink:0;}
.cbox{
  border:1px solid var(--line); background:rgba(255,255,255,0.05);
  border-radius:12px;
  padding:clamp(6px,1.2vh,12px) clamp(8px,1.6vw,16px);
  min-width:clamp(48px,7vw,68px);
}
.cbox .n{
  font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:clamp(18px,3vh,28px); color:var(--green); line-height:1;
  font-variant-numeric:tabular-nums;
}
.cbox .u{
  display:block; margin-top:4px;
  font-family:'JetBrains Mono',monospace; font-size:clamp(7.5px,1vh,9.5px);
  letter-spacing:0.1em; color:var(--mut);
}

.details{display:flex; gap:clamp(8px,1.6vw,14px); flex-wrap:wrap; justify-content:center; flex-shrink:0;}
.dcard{
  border:1px solid var(--line); background:rgba(255,255,255,0.045);
  border-radius:12px; padding:clamp(6px,1.2vh,12px) clamp(12px,2vw,18px); text-align:left;
}
.dcard .lbl{font-family:'JetBrains Mono',monospace; font-size:clamp(8px,1vh,9.5px); letter-spacing:0.1em; color:#a8f0bd; margin-bottom:3px;}
.dcard .val{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(11px,1.5vh,14px);}
.dcard .sub{font-size:clamp(9.5px,1.2vh,12px); color:var(--mut); margin-top:1px;}

.contacts{display:flex; gap:clamp(8px,1.4vw,12px); justify-content:center; flex-wrap:wrap; flex-shrink:0;}
.contacts a{
  display:inline-flex; align-items:center; gap:6px;
  font-size:clamp(10.5px,1.4vh,13px); font-weight:600; text-decoration:none; color:#fff;
  border:1px solid var(--line); border-radius:10px;
  padding:clamp(6px,1.2vh,11px) clamp(12px,2vw,18px);
  background:rgba(255,255,255,0.05);
  transition:background .25s, border-color .25s;
}
.contacts a:hover{background:rgba(63,203,99,0.16); border-color:rgba(126,226,160,0.5);}
.contacts svg{width:clamp(12px,1.6vh,15px); height:clamp(12px,1.6vh,15px); flex-shrink:0;}

footer{
  width:100%; text-align:center; flex-shrink:0;
  padding:clamp(6px,1.2vh,10px) 16px clamp(8px,1.6vh,14px);
  font-family:'JetBrains Mono',monospace; font-size:clamp(7.5px,1vh,9.5px);
  letter-spacing:0.1em; color:rgba(255,255,255,0.32);
}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in-view{opacity:1; transform:translateY(0);}
.reveal-1.in-view{transition-delay:.06s;}
.reveal-2.in-view{transition-delay:.12s;}
.reveal-3.in-view{transition-delay:.18s;}
.reveal-4.in-view{transition-delay:.24s;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none;}
}

@media (max-width:480px){
  .details{flex-direction:column; width:100%; max-width:280px;}
  .dcard{text-align:center;}
}

:focus-visible{outline:2px solid var(--green); outline-offset:2px;}