/* Olympos Games · olympos.games landing page: photo-led and sparse — team hero, numbers, workout chapters, PRO/OPEN, registration, documents, venue.
   Headings use the brand face, Eurostile Extended Black Italic (Adobe Fonts kit xwr6opt); body and small text use Inter Tight. */
:root{
  --bg:#071114; --bg-2:#0b181c; --ink:#f4f7f8; --ink-2:rgba(244,247,248,.74); --ink-3:rgba(244,247,248,.5); --ink-4:rgba(244,247,248,.16);
  --line:rgba(244,247,248,.14); --volt:#d8ff3e;
  --sans:"Inter Tight","Archivo",system-ui,sans-serif;
  --disp:"eurostile-extended","Eurostile Extd","Archivo",sans-serif;
  --px:clamp(20px,3.2vw,48px); --r:24px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
.big{font-family:var(--disp);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.01em;line-height:.95}
.v{color:var(--volt)}
.sm{font-size:12px;line-height:1.4;color:var(--ink-2)}
.photo{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;background-repeat:no-repeat}
.link{display:inline-flex;align-items:center;gap:14px;padding-bottom:8px;border-bottom:2px solid currentColor;font-family:var(--disp);font-weight:900;font-style:italic;font-size:clamp(13px,1vw,15px);text-transform:uppercase;letter-spacing:0;white-space:nowrap;transition:gap .25s}
.link svg{width:.9em;height:.9em}
.link:hover{gap:20px}
.glass{background:rgba(7,17,20,.32);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:inset 0 0 0 1px rgba(244,247,248,.16);border-radius:16px}
.mk{width:26px;height:auto;display:block}

/* hero */
.hero{position:relative;isolation:isolate;overflow:hidden;height:100vh;height:100svh;min-height:660px}
.bar{position:absolute;inset:0 0 auto;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:24px var(--px)}
.bar .lockup{height:26px;width:auto}
.bar nav{display:flex;gap:clamp(18px,2.4vw,40px);font-size:13px;color:var(--ink-2)}
.bar nav a:hover{color:var(--ink)}
.bar .go{justify-self:end;display:flex;align-items:center;gap:8px;font-family:var(--disp);font-size:12px;font-weight:900;font-style:italic;color:var(--volt);text-transform:uppercase}
.bar .go svg{width:11px;height:11px}
.hero .hl{position:absolute;left:var(--px);top:50%;translate:0 -54%;width:min(700px,50vw);pointer-events:none}
.hero h1{font-size:clamp(44px,min(6.1vw,10.4vh),112px)}
.hero h1 span{display:block;overflow:hidden;padding:.1em .12em .22em 0;margin-top:-.12em}   /* clip box holds the İ dot (.86em) and Ş/Ç cedilla (.24em); pitch 1.15em so a cedilla clears the dot below */
.hero h1 span:last-child{margin-bottom:-.16em}
.hero h1 span i{display:block;font-style:normal}
.hero .hl p{max-width:360px;margin-top:clamp(18px,3vh,30px);font-size:15px;line-height:1.55;color:var(--ink-2)}
.hero .bt{position:absolute;left:var(--px);right:var(--px);bottom:30px;pointer-events:none;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.meta{display:flex;gap:clamp(20px,3vw,44px)}
.meta div{font-size:12px;color:var(--ink-2)} .meta b{display:block;font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em;margin-bottom:2px}
.act{display:flex;align-items:center;gap:20px;pointer-events:auto}
.cd{padding:12px 16px;display:flex;align-items:center;gap:14px}
.cd span{font-size:11px;color:var(--ink-2);line-height:1.25}
.cd b{font-family:var(--disp);font-size:18px;font-weight:900;font-style:italic;font-variant-numeric:tabular-nums;white-space:nowrap}
.cd b em{font-style:normal;color:var(--ink-3);font-size:.62em;margin:0 3px 0 1px}
.live .cd{display:none}
.hero .link{color:var(--volt)}

/* intro + numbers */
.intro{padding:clamp(90px,11vw,170px) var(--px) clamp(70px,8vw,120px)}
.intro .st{max-width:1100px;font-size:clamp(28px,3.4vw,52px);font-weight:500;letter-spacing:-.04em;line-height:1.08}
.intro .st span{color:var(--ink-3)}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(56px,7vw,100px);border-top:1px solid var(--line)}
.nums div{padding:26px 24px 0 0}
.nums b{display:block;font-size:clamp(44px,5.6vw,96px)}
.nums b small{font-size:.38em;letter-spacing:-.03em;margin-left:4px;color:var(--volt)}
.nums span{display:block;margin-top:14px;font-size:13px;color:var(--ink-2)}

/* section head */
.hd{display:flex;align-items:flex-end;gap:clamp(16px,3vw,40px);padding:0 var(--px)}
.hd small{display:block;font-size:11.5px;color:var(--ink-3);margin-bottom:4px}
.hd b{display:block;font-family:var(--disp);font-size:clamp(14px,1.25vw,18px);font-weight:900;font-style:italic;text-transform:uppercase}
.hd i{flex:1;height:1px;background:var(--line);margin-bottom:10px}
.hd .r{font-size:13px;color:var(--ink-2);white-space:nowrap}

/* workout chapters: stacked sticky cards */
.wk{padding:clamp(40px,5vw,70px) 0 clamp(80px,9vw,140px)}
.stack{padding:28px var(--px) 0}
.ch{position:sticky;top:calc(14px + var(--i) * 14px);height:min(82vh,760px);margin-bottom:28px;border-radius:var(--r);overflow:hidden;isolation:isolate;box-shadow:0 -20px 50px rgba(0,0,0,.35),inset 0 0 0 1px rgba(244,247,248,.08)}
.ch:last-child{margin-bottom:0}
.ch:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,17,20,.35),rgba(7,17,20,0) 26%,rgba(7,17,20,0) 50%,rgba(7,17,20,.82))}
.ch .n{position:absolute;left:28px;top:24px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600}
.ch .n .mk{width:18px}
.ch .st{position:absolute;right:24px;top:22px;display:flex;gap:22px;padding:12px 18px}
.ch .st div{font-size:10.5px;color:var(--ink-2)}
.ch .st b{display:block;font-family:var(--disp);font-size:20px;font-weight:900;font-style:italic;color:var(--volt);line-height:1.05}
.ch h3{position:absolute;left:26px;bottom:26px;font-size:clamp(36px,5.6vw,96px)}

/* PRO / OPEN */
.cats{display:grid;grid-template-columns:1fr 1fr;border-block:1px solid var(--line)}
.cat{padding:clamp(40px,5vw,72px) var(--px) clamp(40px,5vw,64px);transition:background .4s}
.cat + .cat{border-left:1px solid var(--line)}
.cat:hover{background:var(--bg-2)}
.cat small{font-size:11.5px;color:var(--ink-3)}
.cat h2{margin-top:10px;font-size:clamp(64px,10vw,170px);transition:color .4s}
.cat:hover h2{color:var(--volt)}
.cat p{max-width:420px;margin-top:22px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.cat ul{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
.cat li{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.cat li span{color:var(--ink-3)}

/* registration */
.team{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;display:grid;place-items:start center;text-align:center;padding:clamp(150px,24vh,260px) var(--px) 100px}
.team .photo{background-image:url(../img/site/team.jpg);background-position:center 35%}
.team:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 42% at 50% 50%,rgba(7,17,20,.72),rgba(7,17,20,.2) 78%),linear-gradient(180deg,var(--bg),rgba(7,17,20,0) 14%,rgba(7,17,20,0) 86%,var(--bg))}
.team .in{display:grid;justify-items:center}
.team .k{font-size:12px;font-weight:600;text-transform:uppercase;color:var(--volt)}
.team h2{margin-top:16px;font-size:clamp(42px,5.8vw,96px)}
.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin-top:26px;font-size:14px;color:var(--ink-2)}
.steps b{color:var(--volt);font-weight:600;margin-right:8px}
.team .link{margin-top:36px;color:var(--volt)}
.team .fine{margin-top:18px;font-size:12px;color:var(--ink-3)}
.reg-open .pre,html:not(.reg-open) .post{display:none}

/* shared mid-size headings */
.h2{font-family:var(--disp);font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(28px,3vw,46px);line-height:1.1}
.h3{font-family:var(--disp);font-weight:900;font-style:italic;text-transform:uppercase;font-size:clamp(17px,1.4vw,21px);line-height:1.16}

/* team structure */
.squad{padding:clamp(20px,3vw,40px) 0 clamp(60px,7vw,100px)}
.sq{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,100px);align-items:center;padding:36px var(--px) 0}
.sq-txt p{margin-top:20px;max-width:480px;font-size:15px;line-height:1.6;color:var(--ink-2)}
.sq-txt .sm{color:var(--ink-3)}
.sq-list{border-top:1px solid var(--line)}
.sq-r{display:grid;grid-template-columns:170px minmax(0,1fr) 140px;gap:20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.sq-r b{font-weight:600;font-size:15px}
.sq-r em{font-style:normal;font-size:12.5px;color:var(--ink-3);text-align:right}
.sq-r span{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.sq-r i{height:30px;display:grid;place-items:center;border-radius:8px;border:1px dashed var(--ink-4);font-style:normal;font-size:11px;font-weight:600;color:var(--ink-4)}
.sq-r i.on{border:1px solid rgba(244,247,248,.3);background:rgba(244,247,248,.08);color:var(--ink)}
.sq-r i.on.kpt{background:var(--volt);border-color:var(--volt);color:#0b1a12}

/* workout movement panel */
.ch .ft{position:absolute;right:28px;bottom:30px;max-width:340px;display:grid;justify-items:start;gap:16px}
.ch .ft p{font-size:14px;line-height:1.5;color:var(--ink-2)}
.mv-btn{display:inline-flex;align-items:center;gap:10px;padding:9px 14px 9px 16px;border:0;border-radius:99px;background:rgba(244,247,248,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;transition:background .2s}
.mv-btn i{font-style:normal;color:var(--volt);font-size:16px;line-height:1}
.mv-btn:hover{background:rgba(244,247,248,.2)}
.mv{position:absolute;z-index:3;top:16px;right:16px;bottom:16px;width:min(500px,calc(100% - 32px));overflow:auto;padding:22px 24px;border-radius:18px;background:rgba(7,17,20,.82);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(244,247,248,.14);opacity:0;transform:translateX(24px);pointer-events:none;transition:opacity .35s,transform .45s cubic-bezier(.16,1,.3,1)}
.ch.open .mv{opacity:1;transform:none;pointer-events:auto}
.mv-hd,.mv-r{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:baseline}
.mv-hd{position:relative;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mv-hd b{font-family:var(--disp);font-weight:900;font-style:italic;text-transform:uppercase;font-size:14px}
.mv-hd span{font-family:var(--disp);font-weight:900;font-style:italic;font-size:12px;color:var(--volt)}
.mv-x{position:absolute;right:-6px;top:-8px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(244,247,248,.1);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.mv-hd span:last-of-type{padding-right:30px}
.mv-r{padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.mv-r b{font-weight:600}
.mv-r span{color:var(--ink-2)}
.mv-n{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--ink-3)}

/* scoring */
.score{padding:clamp(80px,9vw,130px) 0 clamp(70px,8vw,110px)}
.sc3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:30px var(--px) 0}
.sc3 > div{padding:26px 26px 28px;border-radius:18px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.sc3 .n{font-family:var(--disp);font-weight:900;font-style:italic;font-size:13px;color:var(--volt)}
.sc3 .h3{margin-top:30px}
.sc3 p{margin-top:12px;font-size:14px;line-height:1.55;color:var(--ink-2)}

/* hero 3D stage: the trophy (assets/js/kupa3d.js); the poster paints until the canvas fades in */
.tr-stage{position:absolute;inset:0;z-index:-1;touch-action:pan-y;cursor:grab;user-select:none;background:var(--bg) url(../img/site/kupa-poster.jpg) 65% 50%/cover no-repeat}
.tr-stage.grab{cursor:grabbing}
.tr-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s;-webkit-mask-image:linear-gradient(#000 0,#000 90%,transparent);mask-image:linear-gradient(#000 0,#000 90%,transparent)}
.tr-stage.ready canvas{opacity:1}
.tr-hint{position:absolute;z-index:1;left:65%;translate:-50% 0;bottom:clamp(108px,14vh,140px);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);pointer-events:none;white-space:nowrap}
.tr-stage.no3d .tr-hint{display:none}
.hero .tr-cap{display:block;margin-top:14px;font-size:12px;color:var(--ink-3)}

/* documents: file cards */
.docs{padding:clamp(80px,9vw,130px) 0 clamp(60px,7vw,100px)}
.files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:30px var(--px) 0}
.file{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .25s,transform .25s}
.file:hover{box-shadow:inset 0 0 0 1px rgba(216,255,62,.6);transform:translateY(-3px)}
.file .cv{height:220px;display:flex;justify-content:center;align-items:flex-start;padding-top:28px;overflow:hidden;background:radial-gradient(70% 90% at 50% 0,#12262c,#0a161a)}
.file .cv img{width:46%;height:auto;border-radius:4px;box-shadow:0 22px 44px rgba(0,0,0,.55);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.file:hover .cv img{transform:translateY(-6px)}
.file .fi{display:flex;flex-direction:column;gap:8px;flex:1;padding:20px 22px 22px}
.file .tag{font-size:11px;font-weight:600;color:var(--volt)}
.file b{font-size:18px;font-weight:600;letter-spacing:-.01em}
.file p{font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.file .fm{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.file .dl{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.file .dl svg{width:10px;height:10px;color:var(--volt)}

/* venue: map + film */
.venue{padding:clamp(70px,8vw,110px) 0 clamp(70px,8vw,110px);border-top:1px solid var(--line)}
.vg{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:16px;padding:30px var(--px) 0}
.map{position:relative;min-height:590px;border-radius:var(--r);overflow:hidden;background:#0b181c;box-shadow:inset 0 0 0 1px var(--line)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.45) brightness(.92) contrast(.92)}
.pin{position:absolute;left:18px;bottom:18px;width:min(380px,calc(100% - 36px));padding:20px 22px 22px;background:rgba(7,17,20,.78)}
.pin .h3{display:block;margin-top:6px;font-size:20px}
.pin p{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.days{margin-top:16px;border-top:1px solid var(--line)}
.days div{display:grid;grid-template-columns:140px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.days b{color:var(--ink);font-weight:600}
.pin .link{margin-top:18px}
.film{position:relative;border-radius:var(--r);overflow:hidden;background:#000;box-shadow:inset 0 0 0 1px var(--line)}
.film video{width:100%;height:100%;object-fit:cover}
.film .sm{position:absolute;left:16px;bottom:14px;color:var(--ink)}

/* faq */
.faq{padding:clamp(40px,5vw,70px) 0 clamp(80px,9vw,120px)}
.hd .r a:hover{color:var(--volt)}
.qa{margin:30px var(--px) 0;border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:20px 0;font-size:clamp(15px,1.3vw,18px);font-weight:500;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";flex:none;font-size:22px;font-weight:400;line-height:1;color:var(--volt);transition:transform .25s}
.qa details[open] summary:after{transform:rotate(45deg)}
.qa summary:hover{color:var(--volt)}
.qa p{max-width:760px;padding:0 0 22px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}

/* sponsors + footer */
.spons{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(24px,3.6vw,54px);padding:46px var(--px);border-top:1px solid var(--line)}
.spons img{height:calc(var(--h) * .7);width:auto;opacity:.9}
.spons .rule{width:1px;height:40px;background:var(--line)}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;padding:28px var(--px) 34px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3)}
.foot .lockup{height:24px;width:auto}
.foot nav{display:flex;flex-wrap:wrap;gap:24px;color:var(--ink-2)}
.foot nav a:hover{color:var(--volt)}

/* reveal */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:960px){
  .tr-hint{display:none}
  .tr-stage{background-size:145% auto;background-position:99% 82%}   /* poster matches the phone framing until the canvas fades in */
  .bar nav{display:none}
  .bar{grid-template-columns:1fr auto}
  .hero .hl{top:clamp(92px,13vh,124px);translate:none;width:auto;right:var(--px)}
  .hero .bt{flex-direction:column;align-items:flex-start}
  .meta{display:none}
  .nums{grid-template-columns:1fr 1fr}
  .ch{height:min(74vh,620px)}
  .ch{display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
  .ch h3,.ch .ft{position:static}
  .ch h3{font-size:clamp(28px,8.6vw,60px)}
  .ch .ft{margin-top:12px;max-width:none}
  .mv{top:10px;right:10px;bottom:10px;width:calc(100% - 20px);padding:18px}
  .sq{grid-template-columns:minmax(0,1fr)}
  .sc3,.files{grid-template-columns:minmax(0,1fr)}
  .vg{grid-template-columns:minmax(0,1fr)}
  .map{min-height:auto;display:flex;flex-direction:column}
  .map iframe{position:relative;height:340px;flex:none}
  .pin{position:relative;left:auto;bottom:auto;width:auto;margin:0;border-radius:0 0 var(--r) var(--r)}
  .film{aspect-ratio:4/5}
  .ch .st{right:16px;top:16px;padding:10px 14px;gap:16px}
  .ch .n{left:22px;top:26px}
  .cats{grid-template-columns:1fr}
  .cat + .cat{border-left:0;border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .bar .lockup{height:22px}
  .hero h1{font-size:11vw}
  .act{width:100%;justify-content:space-between}
  .cd b{font-size:16px}
  .hd .r{display:none}
  .file{flex-direction:row}
  .file .cv{flex:none;width:112px;height:auto;padding:16px 14px;align-items:center}
  .file .cv img{width:100%;height:auto}
  .file .fi{padding:16px 16px 16px 4px}
  .file p{display:none}
  .sq-r{grid-template-columns:minmax(0,1fr);gap:10px}
  .sq-r em{text-align:left}
  .days div{grid-template-columns:minmax(0,1fr);gap:2px}
  .mv-hd,.mv-r{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:8px;font-size:12px}
  .spons img{height:calc(var(--h) * .48)}
  .foot{justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
}

/* small phones: countdown + Kayıt ol must share ~320px; short screens drop the spec line so the trophy gets clear space */
@media (max-width:420px){
  .act{gap:12px}
  .cd{padding:10px 12px;gap:10px}
  .cd span{font-size:min(11px,2.8vw)}
  .cd b{font-size:min(16px,3.75vw)}
  .hero .link{gap:8px}
}
@media (max-width:560px) and (max-height:700px){
  .hero .tr-cap{display:none}
}