/* =========================================================
   OLYMPIAD HUB — styles for the hub page
   (top bar, hero with the rotating 3D Earth, sliding notice
   bar, article cards, footer). Loaded by olympiad-hub.html.
   ========================================================= */

:root{
  --void:#050507;
  --panel-2:#121019;
  --gold-1:#ffe9a8;
  --gold-2:#f0c14b;
  --gold-3:#a8791c;
  --text:#f6f1e4;
  --text-dim:#a79f8d;
  --glass:rgba(255,255,255,.045);
  --glass-strong:rgba(255,255,255,.09);
  --glass-edge:rgba(240,193,75,.22);
  --f-display:"Baloo Da 2",sans-serif;
  --f-body:"Hind Siliguri",sans-serif;
  --f-mono:"JetBrains Mono",monospace;
  --radius-lg:26px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--void);
  color:var(--text);
  font-family:var(--f-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
  radial-gradient(60% 40% at 15% -5%, rgba(240,193,75,.10), transparent 60%),
  radial-gradient(50% 35% at 100% 10%, rgba(240,193,75,.07), transparent 60%),
  linear-gradient(180deg, #050507 0%, #08070b 40%, #050507 100%);
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
.oly-wrap{ position:relative; z-index:1; }

/* ---------------- top bar ---------------- */
.oly-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 5vw;
}
.oly-back{
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:.03em;
  color:var(--gold-2); padding:7px 14px; border:1px solid var(--glass-edge);
  border-radius:999px; transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.oly-back:hover{ border-color:var(--gold-2); transform:translateX(-3px); background:var(--glass); }
.oly-brand{ font-family:var(--f-display); font-weight:700; font-size:13px; color:var(--text-dim); letter-spacing:.03em; }
.oly-brand b{ color:var(--gold-1); }

/* ---------------- hero ---------------- */
.oly-hero{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding:24px 5vw 56px;
  overflow:hidden;
}
.oly-particles{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.oly-particle{
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--gold-2); box-shadow:0 0 6px 1px rgba(240,193,75,.7);
  opacity:.55; animation:olyDrift linear infinite;
}
@keyframes olyDrift{
  0%{ transform:translateY(0); opacity:0; }
  10%{ opacity:.6; } 90%{ opacity:.5; }
  100%{ transform:translateY(-140px) translateX(20px); opacity:0; }
}

.oly-map-frame{
  position:relative;
  width:min(880px, 92vw);
  aspect-ratio:2/1;
  margin:0 auto 6px;
}
.oly-map-stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =========================================================
   REALISTIC ROTATING 3D EARTH
   (satellite-style texture + independent cloud layer,
   orthographically projected Bangladesh beacon so the glow
   stays locked to its true coordinates as the globe spins)
   ========================================================= */
.oly-earth-stage{
  position:relative;
  width:min(300px, 44vw);
  aspect-ratio:1/1;
  opacity:0;
  transform:scale(.86) rotate(-9deg);
  animation:olyEarthFadeIn 1.6s ease .2s forwards,
  olyEarthZoom 2.3s cubic-bezier(.16,1,.3,1) 2.1s forwards;
}
@keyframes olyEarthFadeIn{ to{ opacity:.96; } }
@keyframes olyEarthZoom{ to{ transform:scale(1.14) rotate(-9deg); } }

/* soft rotating nebula ring behind the globe — replaces the old flat void
   with a slow-turning wash of gold / sapphire / amethyst light */
.oly-earth-stage::before{
  content:"";
  position:absolute;
  inset:-26%;
  border-radius:50%;
  background:conic-gradient(from 0deg,
  rgba(240,193,75,.55),
  rgba(120,190,255,.45) 28%,
  rgba(178,130,255,.45) 52%,
  rgba(240,193,75,.20) 72%,
  rgba(240,193,75,.55) 100%);
  filter:blur(26px) saturate(140%);
  opacity:.6;
  animation:olyRingSpin 16s linear infinite;
  pointer-events:none;
}
@keyframes olyRingSpin{ to{ transform:rotate(360deg); } }

.oly-earth-atmosphere{
  position:absolute; inset:-9%;
  border-radius:50%;
  pointer-events:none;
  box-shadow:
  0 0 40px 6px rgba(130,190,255,.28),
  0 0 70px 16px rgba(178,130,255,.18),
  0 0 100px 26px rgba(240,193,75,.20);
  animation:olyAtmoPulse 4.2s ease-in-out infinite;
}
@keyframes olyAtmoPulse{ 0%,100%{ opacity:.75; } 50%{ opacity:1; } }

.oly-earth{
  position:relative;
  width:100%; height:100%;
  border-radius:50%;
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(circle at 30% 28%, #12234a 0%, #071228 45%, #030812 100%);
  box-shadow:
  inset -34px -30px 70px rgba(0,0,0,.68),
  inset 14px 12px 40px rgba(255,255,255,.09),
  inset 0 0 0 1px rgba(240,193,75,.22);
}

.oly-earth-texture,
.oly-earth-clouds{
  position:absolute; inset:0;
  background-repeat:repeat-x;
  background-size:auto 100%;
  will-change:background-position;
}
.oly-earth-texture{
  background-image:url("https://commons.wikimedia.org/wiki/Special:FilePath/Solarsystemscope_texture_2k_earth_daymap.jpg");
  filter:saturate(1.15) contrast(1.06) brightness(.98);
}
.oly-earth-clouds{
  background-image:url("https://commons.wikimedia.org/wiki/Special:FilePath/Solarsystemscope_texture_2k_earth_clouds.jpg");
  mix-blend-mode:screen;
  opacity:.55;
}

/* static sphere shading: sunlight from upper-left, falling off to shadow lower-right */
.oly-earth-shading{
  position:absolute; inset:0;
  background:
  radial-gradient(circle at 32% 30%, rgba(255,255,255,.32), rgba(255,255,255,0) 34%),
  radial-gradient(circle at 68% 74%, rgba(0,0,0,.62), transparent 62%),
  radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
  pointer-events:none;
}
.oly-earth-specular{
  position:absolute; top:12%; left:22%; width:26%; height:20%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
  filter:blur(3px);
  mix-blend-mode:overlay;
  opacity:.8;
  pointer-events:none;
}

.oly-earth-sweep{
  position:absolute; top:0; bottom:0; left:-40%; width:40%; z-index:2;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4) 50%, transparent);
  animation:olySweepMap 2s ease-in-out .3s;
  pointer-events:none;
}
@keyframes olySweepMap{ from{ left:-40%; } to{ left:130%; } }

/* --- Bangladesh highlight pin (radar beacon), position set continuously via JS --- */
.oly-bd-pin{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  opacity:0;
  z-index:4;
  pointer-events:none;
  transition:opacity .7s ease;
}

.oly-pin-core{
  position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; background:var(--gold-1);
  box-shadow:0 0 10px 3px var(--gold-2), 0 0 26px 8px rgba(240,193,75,.55);
  animation:olyPulseDot 1.6s ease-in-out infinite;
}
.oly-pin-ring{
  position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px;
  border-radius:50%; border:1.5px solid var(--gold-2);
  animation:olyRingPulse 2.4s ease-out infinite;
  opacity:0;
}
.oly-pin-ring.r2{ animation-delay:.8s; }
.oly-pin-ring.r3{ animation-delay:1.6s; }
@keyframes olyRingPulse{
  0%{ width:8px; height:8px; margin:-4px 0 0 -4px; opacity:.9; }
  100%{ width:64px; height:64px; margin:-32px 0 0 -32px; opacity:0; }
}
.oly-pin-label{
  position:absolute; left:13px; top:-9px;
  font-family:var(--f-display); font-weight:700; font-size:12.5px; white-space:nowrap;
  color:var(--gold-1); text-shadow:0 0 10px rgba(240,193,75,.7);
  background:rgba(5,5,7,.6); padding:3px 10px; border-radius:8px;
  border:1px solid var(--glass-edge); backdrop-filter:blur(6px);
}

@media (max-width:640px){
  .oly-pin-label{ font-size:11px; padding:2px 7px; left:11px; }
}

.oly-flag{
  position:absolute; top:50%; width:min(140px, 19vw); transform:translateY(-50%);
  opacity:0; filter:drop-shadow(0 0 16px rgba(240,193,75,.35));
  animation:olyFlagIn 1s cubic-bezier(.19,1,.22,1) forwards;
}
.oly-flag.left{ left:0; animation-delay:.5s; transform:translateY(-50%) translateX(-40px); }
.oly-flag.right{ right:0; animation-delay:.7s; transform:translateY(-50%) translateX(40px); }
@keyframes olyFlagIn{ to{ opacity:1; transform:translateY(-50%) translateX(0); } }
.oly-flag svg{ width:100%; height:auto; display:block; }

.oly-eyebrow{
  font-family:var(--f-mono); font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-2); opacity:0; animation:olyFadeUp .6s ease .15s forwards;
}
.oly-title{
  font-family:var(--f-display); font-weight:700; font-size:clamp(30px, 6vw, 60px);
  line-height:1.15; margin:12px 0 10px;
  background:linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 0 40px rgba(240,193,75,.25);
  opacity:0; animation:olyFadeUp .7s cubic-bezier(.19,1,.22,1) .3s forwards;
}
.oly-subtitle{
  font-size:clamp(14.5px, 2vw, 18px); color:var(--text-dim); max-width:640px; margin:0 auto;
  opacity:0; animation:olyFadeUp .7s ease .45s forwards;
}
@keyframes olyFadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:translateY(0);} }

@media (prefers-reduced-motion: reduce){ .oly-hero *{ animation-duration:.01ms !important; animation-delay:0s !important; } }

/* ---------------- sliding glow notice bar ---------------- */
.oly-notice-outer{
  position:relative;
  margin:38px auto 0;
  width:min(1000px, 94vw);
  padding:14px 0;
  border-top:1px solid rgba(240,193,75,.18);
  border-bottom:1px solid rgba(240,193,75,.18);
  overflow:hidden;
  opacity:0;
  animation:olyFadeUp .7s ease .6s forwards;
}
.oly-notice-outer::before,
.oly-notice-outer::after{
  content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;
}
.oly-notice-outer::before{ left:0; background:linear-gradient(90deg, var(--void), transparent); }
.oly-notice-outer::after{ right:0; background:linear-gradient(270deg, var(--void), transparent); }

.oly-notice-track{
  display:flex;
  width:max-content;
  animation:olyNoticeSlide 22s linear infinite;
}
.oly-notice-outer:hover .oly-notice-track{ animation-play-state:paused; }

.oly-notice-item{
  display:flex; align-items:center; gap:12px;
  font-family:var(--f-body); font-weight:700; font-size:clamp(14px, 1.8vw, 18px);
  color:var(--gold-1);
  padding:0 48px;
  white-space:nowrap;
  text-shadow:0 0 10px rgba(240,193,75,.55), 0 0 22px rgba(240,193,75,.3);
}
.oly-notice-item .oly-notice-dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold-1);
  box-shadow:0 0 8px 2px var(--gold-2);
  animation:olyPulseDot 1.7s ease-in-out infinite;
  flex:0 0 auto;
}
@keyframes olyPulseDot{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.5; transform:scale(1.4);} }

@keyframes olyNoticeSlide{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){ .oly-notice-track{ animation:none; } }

/* ---------------- article section ---------------- */
.oly-section{ padding:56px 5vw 110px; max-width:920px; margin:0 auto; }
.oly-section-head{ text-align:center; margin-bottom:46px; }
.oly-section-head .oly-eyebrow{ opacity:1; animation:none; }
.oly-section-title{
  font-family:var(--f-display); font-weight:700; font-size:clamp(24px, 4vw, 34px);
  color:var(--gold-1); margin:10px 0 0;
}

.oly-cards{ display:flex; flex-direction:column; gap:34px; }

.oly-card{
  position:relative; border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(155deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%), var(--panel-2);
  backdrop-filter:blur(20px) saturate(140%); -webkit-backdrop-filter:blur(20px) saturate(140%);
  overflow:hidden; cursor:pointer;
  opacity:0; transform:translateY(36px);
  transition:opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1),
  border-color .35s ease, box-shadow .35s ease;
}
.oly-card.oly-in-view{ opacity:1; transform:translateY(0); }
.oly-card:hover{
  border-color:var(--glass-edge);
  box-shadow:0 20px 60px -20px rgba(240,193,75,.25), 0 0 0 1px rgba(240,193,75,.08) inset;
}
.oly-card:focus-visible{
  outline:none;
  border-color:var(--gold-2);
  box-shadow:0 20px 60px -20px rgba(240,193,75,.35), 0 0 0 2px var(--gold-2);
}

.oly-card-media{ position:relative; height:250px; overflow:hidden; }
.oly-card-media img{
  width:100%; height:100%; object-fit:cover; transform:scale(1.02);
  transition:transform .7s cubic-bezier(.19,1,.22,1);
}
.oly-card:hover .oly-card-media img{ transform:scale(1.09); }
.oly-card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,5,7,0) 40%, rgba(5,5,7,.85) 100%);
}

.oly-status{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; backdrop-filter:blur(10px);
  border:1px solid transparent; display:inline-flex; align-items:center; gap:6px;
}
.oly-status::before{ content:""; width:6px; height:6px; border-radius:50%; }
.oly-status[data-status="open"]{ color:#8dffc4; background:rgba(20,60,45,.55); border-color:rgba(141,255,196,.35); }
.oly-status[data-status="open"]::before{ background:#8dffc4; box-shadow:0 0 6px #8dffc4; animation:olyPulseDot 1.6s infinite; }
.oly-status[data-status="closing"]{ color:var(--gold-1); background:rgba(75,55,15,.55); border-color:var(--glass-edge); }
.oly-status[data-status="closing"]::before{ background:var(--gold-2); box-shadow:0 0 6px var(--gold-2); animation:olyPulseDot 1.1s infinite; }
.oly-status[data-status="closed"]{ color:#c8c2b4; background:rgba(40,38,34,.6); border-color:rgba(255,255,255,.12); }
.oly-status[data-status="closed"]::before{ background:#8a8579; }

.oly-category{
  position:absolute; top:16px; right:16px; z-index:2;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--gold-1);
  padding:6px 12px; border-radius:999px; background:rgba(0,0,0,.45);
  border:1px solid var(--glass-edge); backdrop-filter:blur(10px);
}

.oly-card-title{
  position:absolute; left:22px; right:22px; bottom:16px; z-index:2;
  font-family:var(--f-display); font-weight:700; font-size:clamp(19px, 2.6vw, 25px);
  color:var(--text); line-height:1.28;
}

.oly-card-body{ padding:22px 24px 26px; }
.oly-card-desc{ color:var(--text-dim); font-size:15px; line-height:1.7; margin:0 0 16px; }

.oly-meta{
  display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:18px; padding:14px 0;
  border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);
}
.oly-meta-item{ display:flex; flex-direction:column; gap:3px; font-size:13px; }
.oly-meta-label{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); opacity:.75;
}
.oly-meta-value{ color:var(--text); font-weight:600; }

.oly-card-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
.oly-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-weight:700; font-size:14px;
  padding:11px 20px; border-radius:999px; cursor:pointer; border:1px solid transparent;
  transition:transform .3s cubic-bezier(.19,1,.22,1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.oly-btn-gold{
  color:#241b04;
  background:linear-gradient(135deg, var(--gold-1), var(--gold-2) 60%, var(--gold-3));
  box-shadow:0 8px 24px -8px rgba(240,193,75,.6);
}
.oly-btn-gold:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(240,193,75,.75); }
.oly-btn-gold:active{ transform:translateY(0); }
.oly-btn[disabled]{ opacity:.45; cursor:not-allowed; pointer-events:none; }

.oly-footer{
  text-align:center; padding:36px 5vw 56px; color:var(--text-dim);
  font-size:12.5px; font-family:var(--f-mono); border-top:1px solid rgba(255,255,255,.06);
}
.oly-footer b{ color:var(--gold-2); }

@media (max-width:640px){
  .oly-flag{ width:76px; }
  .oly-card-media{ height:190px; }
  .oly-section{ padding:44px 6vw 80px; }
}