/* Olympos Games · public home (olympos.games): one screen, countdown to registrations. */
:root{
  --bg:#081215; --bg-2:#0c1a1f; --ink:#f4f7f8; --ink-2:rgba(244,247,248,.72); --ink-3:rgba(244,247,248,.46); --ink-4:rgba(244,247,248,.22);
  --line:rgba(244,247,248,.10); --line-2:rgba(244,247,248,.22); --volt:#d8ff3e; --volt-ink:#0b1a12;
  --disp:"Eurostile Extd","Archivo",system-ui,sans-serif; --body:"Archivo",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --padx:clamp(20px,4vw,64px);
  --cut:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{background:var(--bg)}
body{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit}
.mono{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.mono.w{color:var(--ink)}
.bg{position:fixed;inset:-4%;background:url(../img/photos/T02.jpg) center/cover no-repeat;filter:brightness(.5) saturate(.95)}
.veil{position:fixed;inset:0;background:radial-gradient(70% 60% at 50% 45%,rgba(8,18,21,.35) 0,rgba(8,18,21,.85) 70%,var(--bg) 100%),linear-gradient(180deg,rgba(8,18,21,.5),rgba(8,18,21,.2) 30%,rgba(8,18,21,.85))}

.top{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px var(--padx)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .lockup{height:30px;width:auto;display:block}
.top nav{display:flex;gap:4px}
.top nav a{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink-2);padding:9px 14px;border:1px solid transparent;transition:color .2s,border-color .2s}
.top nav a:hover{color:var(--ink);border-color:var(--line-2)}

.hero{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(12px,3vh,40px) var(--padx) clamp(24px,5vh,56px)}
.logo{width:clamp(150px,min(20vw,26vh),300px);height:auto;overflow:visible}
.date{margin-top:clamp(16px,3vh,30px);font-family:var(--disp);font-style:italic;font-weight:900;font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(20px,min(2.6vw,4.4vh),40px)}
.m{display:block;overflow:hidden;padding:.12em .06em .04em;margin:-.12em -.06em -.04em} .m > span{display:inline-block}
.sub{margin-top:12px;line-height:1.7} .sub b{color:var(--volt);font-weight:500;margin:0 4px}

.cd{margin-top:clamp(22px,4.4vh,48px);width:min(760px,100%);border:1px solid var(--line-2);background:rgba(8,18,21,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:clamp(18px,3vh,30px) clamp(16px,3vw,36px) clamp(20px,3.4vh,32px)}
.cd-lab{color:var(--volt)}
.cd-row{display:flex;justify-content:center;align-items:flex-start;gap:clamp(6px,1.6vw,22px);margin-top:clamp(12px,2.4vh,22px)}
.cd-row > div{display:grid;justify-items:center;gap:8px;min-width:0}
.cd-row b{display:block;overflow:hidden;padding:.16em .06em .02em;margin-top:-.06em;font-family:var(--disp);font-style:italic;font-weight:900;font-stretch:125%;font-size:clamp(34px,min(5vw,8.6vh),80px);line-height:.95;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cd-row > div:first-child b{color:var(--volt)}
.cd-row i{font-style:normal;font-family:var(--disp);font-weight:900;font-size:clamp(24px,min(3.4vw,6vh),56px);line-height:1.15;color:var(--ink-4)}
.prog{margin-top:clamp(16px,3vh,26px);text-align:left}
.prog .lbl{display:flex;justify-content:flex-end;gap:12px;margin-bottom:10px}
.prog .track{position:relative;height:2px;background:var(--ink-4)}
.prog .fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink)}
.prog .fill:after{content:"";position:absolute;right:-5px;top:-4px;width:10px;height:10px;background:var(--volt)}
body.open .cd-row{display:none}

.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:clamp(20px,4vh,36px)}
.btn{display:inline-flex;align-items:center;gap:12px;height:50px;padding:0 26px;background:var(--volt);color:var(--volt-ink);font-family:var(--disp);font-style:italic;font-weight:900;font-stretch:125%;font-size:14px;text-transform:uppercase;text-decoration:none;clip-path:var(--cut);transition:filter .2s,transform .2s}
.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{background:rgba(8,18,21,.4);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2);clip-path:none}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}

.foot{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px var(--padx) 22px;border-top:1px solid var(--line)}
.foot .sp{display:flex;align-items:center;gap:14px}
.foot img{height:12px;width:auto}

@media (max-width:640px){
  .brand .lockup{height:26px}
  .cd-row i{display:none}
  .cd-row{gap:4px;justify-content:space-between}
  .cd-row > div{min-width:0;flex:1}
  .cta .btn{flex:1 1 100%;justify-content:center}
  .foot{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){ .bg{inset:0} }