/* ==========================================================================
   INITIATE Iscte Hackathon 2027 — Landing page
   Desktop-first; breakpoints em 1100 (menu), 900 (tablet) e 720 px (mobile).
   Compatível com Safari/iOS 15+ e versões recentes de Chrome, Edge, Firefox e Samsung Internet.
   Os rollovers (:hover) estão todos em @media (hover:hover), para não ficarem "presos" depois
   de um toque no telemóvel.
   ========================================================================== */

/* ---------- Fontes (Aeonik: títulos · Open Sans: texto) ---------- */
@font-face{font-family:'Aeonik';src:url(../fonts/aeonik-light.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Aeonik';src:url(../fonts/aeonik-regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Aeonik';src:url(../fonts/aeonik-medium.woff2) format('woff2');font-weight:500;font-display:swap}
/* Open Sans variável: um só ficheiro para os pesos 300–800 */
@font-face{font-family:'Open Sans';src:url('../fonts/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');font-weight:300 800;font-stretch:75% 100%;font-style:normal;font-display:swap}

/* ---------- Design tokens ---------- */
:root{
  /* Cores INITIATE */
  --ink:#0C2D34;        /* verde-escuro: hero, Challenge, Calendar, Prizes, rodapé */
  --ink-3:#1A4852;
  --cream:#F8F6EA;      /* creme: fundo base, texto sobre escuro */
  --mint:#DFF4D3;       /* verde-claro: About, Participants, Programme, Application */
  --green:#59E159;      /* verde INITIATE: destaques, botões */
  --green-deep:#278C31; /* verde para links sobre fundos claros */

  --mute:rgba(12,45,52,.70);
  --line:rgba(12,45,52,.12);
  --c-mute:rgba(248,246,234,.72);
  --c-line:rgba(248,246,234,.14);

  --font-title:'Aeonik',system-ui,sans-serif;
  --font-text:'Open Sans',system-ui,sans-serif;

  --nav-h:84px;
  --gutter:32px;
  --sec-pad:128px;                          /* margem inferior das secções */
  --sec-pad-top:calc(var(--sec-pad) * .65); /* margem superior (mais curta) */
  --radius-lg:32px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* text-size-adjust: o iOS e o Android não aumentam a letra sozinhos (ex.: ao rodar o telemóvel) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{background:var(--cream);color:var(--ink);font:400 16px/1.6 var(--font-text);overflow-x:hidden}
/* os pans laterais das animações não podem criar scroll horizontal (hidden: iOS anterior ao 16) */
main{overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
a,button{-webkit-tap-highlight-color:rgba(89,225,89,.25)}
h1,h2,h3{font-family:var(--font-title);font-weight:500;letter-spacing:-.01em}
.wrap{width:min(1200px,calc(100% - 2*var(--gutter)));margin:0 auto;position:relative;z-index:1}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
section{position:relative}
.sec{padding:var(--sec-pad-top) 0 var(--sec-pad)}
.nowrap{white-space:nowrap}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* Fundos das secções */
.bg-ink{background:var(--ink);color:var(--cream)}
.bg-mint{background:var(--mint)}

/* ---------- Tipografia comum ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 14px/1 var(--font-title);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--green)}
.bg-ink .eyebrow{color:var(--cream)}
h2{font-size:clamp(36px,4.6vw,58px);line-height:1.04;margin-top:22px;letter-spacing:-.02em}
/* subtítulo do h2 (Challenge): mesmo tamanho do h2, no verde dos botões; com .intro e .bg-ink para ganhar ao .intro p */
.h2-sub,.intro .h2-sub,.bg-ink .intro .h2-sub{font:500 clamp(36px,4.6vw,58px)/1.04 var(--font-title);color:var(--green);letter-spacing:-.02em}
.lead{font-size:18px;line-height:1.6;color:var(--mute);margin-top:22px;max-width:560px}

/* Bloco título + texto em 2 colunas */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:start}
.intro-text{padding-top:44px}
.intro p{font-size:17.5px;line-height:1.65;color:var(--mute)}
.intro p + p{margin-top:16px}
.intro p a,.req p a{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px;transition:color .2s ease}
.intro p sup{font-size:.7em;line-height:0}
.bg-ink .intro p{color:var(--c-mute)}
.bg-ink .intro p a{color:var(--green)} /* em fundo escuro (Challenge): o verde dos botões */

/* ---------- Botões (cantos arredondados) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:999px;font:500 16px/1 var(--font-title);letter-spacing:.005em;text-decoration:none;white-space:nowrap;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.btn svg.i{width:18px;height:18px}
.btn-primary{background:var(--green);color:var(--ink)}
.btn-primary .arr{display:grid;place-items:center;width:28px;height:28px;margin-right:-12px;border-radius:50%;background:var(--ink);color:var(--green);transition:background-color .2s ease,color .2s ease}
.btn-primary .arr svg.i{width:14px;height:14px;stroke-width:2.2}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
/* Application: título a toda a largura */
#application .intro{grid-template-columns:1fr}
/* Botões da caixa do Application: "Hackathon Rulebook" e "Hackathon Declarations" com contorno e texto verdes
   (no hover enchem a verde, ver ROLLOVERS); "Submit Application" verde cheio */
#application .tile .btn{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
#application .tile .btn-primary{background:var(--green);color:var(--ink);box-shadow:none}
/* botões grandes (mais pequenos em mobile, ver ≤720px) */
#application .ctas .btn{height:52px;padding:0 26px;gap:12px;font-size:17px}
#application .ctas .btn-primary .arr{width:32px;height:32px;margin-right:-14px}
#application .ctas .btn-primary .arr svg.i{width:16px;height:16px}

/* ==========================================================================
   CABEÇALHO
   ========================================================================== */
.site-nav{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--cream);border-bottom:1px solid var(--c-line)}
.site-nav .wrap{display:flex;align-items:center;height:var(--nav-h);position:static}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--cream);transition:color .2s ease}
.brand-logo{flex:none;height:24px;width:113.5px} /* proporção do viewBox: 189,1 × 40 */
/* "Hackathon – Portugal" com maiúsculas da altura das letras de INITIATE: as letras do logótipo ocupam
   0,595 da sua altura e a maiúscula da Aeonik mede 0,70 do font-size, logo font-size = 0,85 × altura
   do logótipo. O top centra as maiúsculas (e não a caixa do texto). */
.brand span{position:relative;top:-.05em;font:300 20.4px/1 var(--font-title);letter-spacing:-.01em;white-space:nowrap}
.nav-links{display:flex;gap:24px;list-style:none;margin-left:auto;margin-right:36px;font:400 15.5px/1.6 var(--font-title)}
.nav-links a{color:var(--c-mute);text-decoration:none;transition:color .15s}
.nav-links a.is-active{color:var(--green)} /* secção visível no ecrã */
.site-nav .btn{height:36px;padding:0 16px;font-size:14px}
.nav-cta{display:none} /* "Submit Application" dentro do menu: só em mobile (ver ≤720px) */
/* sem círculo; a margem negativa alinha o ícone com a margem direita (a área de toque mantém 44px) */
.menu-btn{display:none;flex:none;width:44px;height:44px;margin-left:12px;margin-right:-12px;border:0;border-radius:50%;background:none;color:var(--cream);cursor:pointer;place-items:center;transition:color .2s ease}
.menu-btn svg.i{width:20px;height:20px}

/* ==========================================================================
   1 · HERO
   ========================================================================== */
/* ocupa o ecrã todo (menos o cabeçalho); o conteúdo fica centrado na vertical */
.hero{overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:64px 0 16px;min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h))}
.hero .arcs{right:-60px;top:0;height:100%;width:980px;overflow:visible} /* os círculos exteriores saem do svg; quem os corta é a hero */
.hero-top{max-width:760px}
h1{font-size:clamp(40px,5.4vw,76px);line-height:.98;letter-spacing:-.03em}
/* Título em 2 linhas e subtítulo numa linha (tamanhos acertados em js/main.js) */
.hero h1,.hero .sub{white-space:nowrap}
.hero .sub{font:300 clamp(20px,1.9vw,25px)/1.3 var(--font-title);color:var(--green);margin-top:22px;letter-spacing:-.005em}
.hero .lead{font-size:20px;max-width:620px;margin-top:24px;color:rgba(248,246,234,.9);font-weight:300}
.facts{display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px;margin-top:56px;border-top:1px solid var(--c-line);list-style:none}
.fact{display:flex;align-items:center;gap:18px;padding:30px 0}
.fact .ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--green);color:var(--green);transition:background-color .2s ease,color .2s ease}
.fact strong{display:block;font:500 22px/1.25 var(--font-title)}

/* ==========================================================================
   ÓRBITAS (hero, Calendar, Prizes, rodapé)
   Os planetas (.orbit) giram à volta do centro dos círculos (--ox/--oy no svg, em unidades do
   viewBox) e uma onda de luz percorre os círculos de dentro para fora. Cada .orbit traz --a (ângulo
   inicial) e --t (tempo de uma volta) no index.html; o atraso negativo faz a animação começar já nesse
   ângulo. Os --i dos círculos são postos por js/main.js. Fora do ecrã pausa tudo.
   ========================================================================== */
.arcs{position:absolute;z-index:0;pointer-events:none}
.orbits .orbit{transform-box:view-box;transform-origin:var(--ox) var(--oy);transform:rotate(calc(var(--a,0) * 1deg));animation:orbit var(--t,80s) linear infinite;animation-delay:calc(var(--t,80s) * var(--a,0) / -360)}
.orbits .rings circle{animation:ripple 8s ease-in-out infinite;animation-delay:calc(var(--i,0) * .35s)}
.orbits.is-paused .orbit,.orbits.is-paused .rings circle{animation-play-state:paused}
@keyframes orbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes ripple{0%,20%,100%{stroke-width:1.2}8%{stroke-width:2.6}}

/* ==========================================================================
   1b · ABOUT
   ========================================================================== */
/* Quatro cartões escuros a toda a largura: título à esquerda e texto à direita */
.qas{display:grid;gap:20px;margin-top:72px}
.qa{display:grid;grid-template-columns:1fr 1.6fr;gap:72px;border-radius:var(--radius-lg);padding:48px 52px 52px;background:var(--ink);color:var(--cream)}
.qa h3{font-size:clamp(28px,2.8vw,40px);line-height:1.06;letter-spacing:-.02em}
.qa .hl{color:var(--green)}
.qa a.hl{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em;transition:color .2s ease}
.qa p{font-size:17.5px;line-height:1.65;color:var(--c-mute)}
.qa p + p{margin-top:16px}

/* ==========================================================================
   2 · CHALLENGE
   ========================================================================== */
@media (min-width:901px){
  #about .intro,#challenge .intro{grid-template-columns:1fr 1.6fr;gap:72px} /* coluna do texto mais larga que nas outras secções */
  /* About e Challenge: o texto desce até o topo das minúsculas alinhar com o das minúsculas do título
     (desvio proporcional ao tamanho do h2: clamp(36px,4.6vw,58px), medido em 1440 e 1000px) */
  #about .intro-text,#challenge .intro-text{padding-top:calc(36.8px + .383 * clamp(36px,4.6vw,58px))}
}
/* Problema, objetivo e resultados: três caixas verdes lado a lado */
.chal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:88px}
.ch{border-radius:var(--radius-lg);padding:36px 34px 40px;background:var(--green);color:var(--ink)}
.ch .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--green)} /* como nos cartões dos Prizes */
.ch .ic svg.i{width:24px;height:24px}
.ch h3{font-size:clamp(22px,2vw,27px);line-height:1.1;letter-spacing:-.02em;margin-top:24px}
.ch .body{margin-top:22px;padding-top:20px;border-top:1px solid rgba(12,45,52,.18)}
.ch p{font-size:16px;line-height:1.6;color:rgba(12,45,52,.85)}

/* ==========================================================================
   3 · PARTICIPANTS
   ========================================================================== */
/* 4 itens em 2 colunas, por coluna: 1.º e 2.º à esquerda, 3.º e 4.º à direita; linhas separadas por coluna */
.reqs{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;grid-auto-flow:column;column-gap:96px;margin-top:72px;list-style:none}
.req{display:flex;gap:18px;padding:30px 0;border-bottom:1px solid rgba(12,45,52,.16)}
.req:nth-child(odd){border-top:1px solid rgba(12,45,52,.16)}
.req:nth-child(even){border-bottom:0;padding-bottom:0}
.req .ck{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--green)}
.req .ck svg.i{width:18px;height:18px;stroke-width:2.6}
.req p{font-size:17px;line-height:1.6;color:var(--ink);margin-top:5px}
.req .lk{color:var(--green-deep);transition:color .2s ease} /* parênteses retos na cor do link */

/* ==========================================================================
   4 · CALENDAR (2 timelines horizontais no desktop; verticais em ecrãs pequenos)
   ========================================================================== */
/* (as órbitas do Challenge são iguais às do Calendar: partilham estas regras) */
.timeline,#challenge{overflow:hidden}
/* órbitas com o centro no limite direito da secção, a meia altura (só se vê a metade esquerda) */
.timeline .orbits,#challenge .orbits{right:0;top:50%;width:900px;height:900px;margin-top:-450px;opacity:.7;overflow:visible}
.orbits-2,.timeline .m-only{display:none} /* 2.º conjunto de órbitas e 5.ª órbita do 1.º: só em mobile */
/* Challenge (fora do mobile): as da direita mais abaixo e um 2.º conjunto, espelhado, à esquerda e mais acima
   (este só a partir de 901px, ver o bloco ≤900px) */
@media (min-width:721px){
  #challenge .orbits:not(.orbits-l){top:63%}
  #challenge .orbits-l{right:auto;left:0;top:37%}
}
.tlrow{margin-top:72px}
.tlrow + .tlrow{margin-top:64px;padding-top:56px}
.tll{display:inline-flex;align-items:center;gap:12px;font:500 13.5px/1 var(--font-title);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.tll b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--green);font-weight:500;letter-spacing:0}
/* as duas linhas (3 datas cada) usam as mesmas colunas: 2 iguais + uma última com a largura do texto mais
   comprido das duas últimas datas, para esse texto acabar no fim da secção. --tl-last (essa largura) é
   posto por js/main.js; 250px é o valor sem JS */
.timeline{--tl-last:250px}
.tl{display:grid;grid-template-columns:repeat(2,1fr) var(--tl-last);margin-top:58px;position:relative;list-style:none}
/* linha: acaba no círculo da última data (início da última coluna + 16px) */
.tl::before{content:"";position:absolute;left:0;right:calc(var(--tl-last) - 16px);top:86px;height:2px;background:rgba(89,225,89,.35)}
.tlrow.r2 .tl{margin-top:44px}
.ms{position:relative;padding-right:32px}
/* última data de cada linha: largura do texto, sem partir (é medida pelo js) */
.tl .ms:last-child{padding-right:0;width:max-content;white-space:nowrap}
.ms .date{height:62px;display:flex;flex-direction:column;justify-content:flex-end}
.ms .date b{font:500 25px/1.1 var(--font-title);letter-spacing:-.015em;white-space:nowrap} /* não parte no hífen (18-19 March) */
.ms .date small{font-size:13px;color:var(--c-mute);margin-top:4px}
.ms .dot{width:16px;height:16px;border-radius:50%;background:var(--green);margin:16px 0 0}
.ms .lbl{margin-top:26px;font-size:15px;line-height:1.4;color:var(--c-mute)}
.ms .lbl strong{display:block;color:var(--cream);font:500 18px/1.25 var(--font-title);margin-bottom:4px}
.ms.hot .date b{color:var(--green)}
/* prazo: anéis que pulsam à volta da bola (anéis fixos com "reduzir movimento") */
.ms.hot .dot{box-shadow:0 0 0 6px rgba(89,225,89,.2),0 0 0 12px rgba(89,225,89,.08);animation:hot-pulse 1.6s ease-out infinite}
@keyframes hot-pulse{
  0%{box-shadow:0 0 0 0 rgba(89,225,89,.55),0 0 0 0 rgba(89,225,89,.3)}
  90%,100%{box-shadow:0 0 0 12px rgba(89,225,89,0),0 0 0 24px rgba(89,225,89,0)}
}
.ms.hot .pill{position:absolute;top:-34px;left:0;display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:999px;background:var(--green);color:var(--ink);font:500 12px/1 var(--font-title);letter-spacing:.12em;text-transform:uppercase}

/* ==========================================================================
   5 · PROGRAMME
   ========================================================================== */
.prog-h{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.prog-h .meta{display:flex;flex-wrap:wrap;gap:10px}
.prov{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line);font-size:14px;color:var(--mute)}
.prov svg.i{width:17px;height:17px;color:var(--ink)}
.days{display:grid;grid-template-columns:1fr 1fr;column-gap:96px;row-gap:56px;margin-top:128px}
.day .dh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:22px;border-bottom:1.5px solid var(--ink)}
.day .dh h3{font-size:24px;letter-spacing:-.015em;text-transform:uppercase}
.day .dh .tab{display:inline-flex;align-items:center;height:40px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--cream);font:500 16px/1 var(--font-title);white-space:nowrap}
.day ol{list-style:none}
.row{display:grid;grid-template-columns:72px 1fr;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.45}
.row:last-child{border-bottom:0}
.row time{font:500 17px/1 var(--font-title)}
.row.k span{font-weight:500}

/* ==========================================================================
   6 · PRIZES
   ========================================================================== */
#prizes{overflow:hidden}
/* órbitas com o centro no limite esquerdo da secção, a meia altura (só se vê a metade direita) */
#prizes .orbits{left:0;top:50%;width:900px;height:900px;margin-top:-450px;opacity:.7;overflow:visible}
.pz{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.card{border-radius:var(--radius-lg);padding:36px 34px 40px;display:flex;flex-direction:column;background:var(--green);color:var(--ink)}
.card .ic{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--ink);color:var(--green)}
.card .ic svg.i{width:28px;height:28px}
.card .k{font:500 13.5px/1 var(--font-title);letter-spacing:.14em;text-transform:uppercase;margin-top:72px;opacity:.8}
.card h3{font-size:34px;line-height:1.08;margin-top:14px;letter-spacing:-.02em}
.card p{font-size:15.5px;line-height:1.55;margin-top:14px;color:rgba(12,45,52,.82)}

/* ==========================================================================
   7 · APPLICATION
   ========================================================================== */
.tile{border-radius:var(--radius-lg);padding:40px 44px 64px;margin-top:72px;background:var(--ink);color:var(--cream)}
.tile h3{font-size:30px;letter-spacing:-.015em}
/* Passos: 3 colunas iguais + a última com a largura do seu texto, para "Submit the form" acabar na
   margem direita; os círculos ficam igualmente espaçados. A linha vai do centro do 1.º círculo ao centro
   do último: --flow-last (largura da última coluna) é posto por js/main.js; 220px é o valor sem JS */
.flow{display:grid;grid-template-columns:repeat(3,1fr) max-content;margin-top:36px;position:relative;list-style:none}
.flow::before{content:"";position:absolute;top:23px;left:24px;right:calc(var(--flow-last,220px) - 24px);height:2px;background:var(--c-line)}
.flow li{position:relative}
.flow li:last-child{white-space:nowrap}
.flow b{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--ink-3);border:1.5px solid var(--green);color:var(--green);font:500 18px/1 var(--font-title);transition:background-color .2s ease,color .2s ease}
.flow span{display:block;margin-top:16px;font:500 17px/1.3 var(--font-title)} /* desktop e tablet; em mobile 19px (ver ≤720px) */
/* "Submit the form" (último passo): link para o formulário, sem sublinhado (verde no hover, ver ROLLOVERS) */
.flow-lk{text-decoration:none;transition:color .2s ease}
/* o link cobre o passo todo (círculo incluído): clicar no "3" também abre o formulário */
.flow-lk::after{content:"";position:absolute;inset:0}
/* Partes da caixa a seguir aos passos ("Read the Hackathon documents", "Prepare before submitting",
   "Submit your application"): títulos com a letra de "Application process" (.tile h3) e uma linha verde
   por cima, a meio do espaço entre as partes */
.docs-h{margin-top:44px;padding-top:44px;border-top:1px solid var(--green);font-family:var(--font-title);font-weight:500;font-size:30px;letter-spacing:-.015em}
.docs-h + .docs{margin-top:16px}
/* "Read the Hackathon documents" e "Submit your application" (.head-row): botões na mesma linha do título, encostados
   à direita e centrados em altura; a linha verde e o espaço passam do título para a linha toda; em mobile os botões
   ficam por baixo */
.head-row{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:44px;padding-top:44px;border-top:1px solid var(--green)}
.head-row .docs-h{margin-top:0;padding-top:0;border-top:0;line-height:1.15}
.head-row .ctas{margin-top:0;flex:none}
@media (min-width:721px) and (max-width:1199px){
  /* sem espaço para o título e os dois botões grandes numa linha: "Hackathon Rulebook" e "Hackathon Declarations"
     ficam mais pequenos e um por baixo do outro, com a largura do maior */
  #application .head-row .ctas{display:grid;grid-template-columns:max-content}
  #application .head-row .ctas .btn:not(.btn-primary){height:44px;padding:0 20px;font-size:15px}
}
/* lista dos documentos: sem caixa nem ícones, só as linhas divisórias */
.docs{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;margin-top:40px;list-style:none}
.doc{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--c-line);font-size:15.5px}
.doc:nth-last-child(-n+2){border-bottom:0}
.doc em{margin-left:auto;padding-left:12px;font-style:normal;font-size:14px;color:var(--c-mute);text-align:right}
@media (min-width:901px){ /* desktop: nomes dos documentos e nº de palavras um pouco maiores */
  .doc{font-size:17px}
  .doc em{font-size:15.5px}
}

/* ==========================================================================
   8 · RODAPÉ (contactos, parceiros, financiamento UE)
   ========================================================================== */
.site-footer{position:relative;overflow:hidden;padding-top:var(--sec-pad-top)}
/* órbitas com o centro no limite direito do rodapé, a meia altura (só se vê a metade esquerda) */
.site-footer .orbits{right:0;top:50%;width:900px;height:900px;margin-top:-450px;opacity:.7}
/* Email / Address: duas caixas iguais, com o aspeto e o espaçamento dos cartões dos parceiros (.lc) */
.cts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;padding-bottom:34px;border-bottom:1px solid var(--c-line);font-style:normal}
.ct{display:flex;align-items:center;gap:18px;padding:24px 28px}
.ct .ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--green);color:var(--green);transition:background-color .2s ease,color .2s ease}
.ct small{display:block;font-size:13.5px;color:var(--c-mute);letter-spacing:.02em}
.ct .mail{display:block;font:500 20px/1.3 var(--font-title);margin-top:4px;color:var(--cream);text-decoration:none;transition:color .2s ease}
.ct .addr{display:block;white-space:nowrap;font-size:14px;line-height:1.5;color:var(--c-mute);margin-top:4px}
/* Parceiros: 3 grupos (principal, 5 locais, financiamento) numa grelha de 7 colunas iguais;
   cada logótipo num cartão de cantos arredondados, todos com a mesma altura */
.orgby{display:grid;grid-template-columns:repeat(7,1fr);gap:20px;padding:30px 0 40px;border-bottom:1px solid var(--c-line)}
.og:nth-child(2){grid-column:span 5}
/* rótulos dos parceiros: mais pequenos, sem bola e sempre numa linha */
.og .eyebrow{font-size:10.5px;white-space:nowrap}
.og .eyebrow::before{display:none}
/* com pouca largura: menos espaço entre letras e a letra desce com a grelha, para "Funding partner"
   (o mais longo, ≈10,1× o tamanho da letra) caber numa coluna: (grelha − 6 gaps de 12px) / 7 colunas / 10,1 */
@media (min-width:721px) and (max-width:960px){
  .orgby{container-type:inline-size}
  .og .eyebrow{letter-spacing:.08em;font-size:min(10.5px,calc((100cqw - 72px) / 71))}
}
/* rótulo em cima e cartões em baixo: se um rótulo partir em 2 linhas, os cartões continuam alinhados */
.og{display:flex;flex-direction:column;gap:14px}
.lgrid{display:grid;grid-template-columns:var(--cols,1fr);gap:20px;margin-top:auto;list-style:none}
/* locais (Iscte, BADS, BRU, DINÂMIA'CET, AEIscte): larguras à medida do logótipo; a soma de 5fr mantém a largura total do grupo */
.og:nth-child(2) .lgrid{--cols:1fr 1.25fr .875fr .875fr 1fr}
.lc{display:flex;height:84px}
.lc,.ct{border-radius:14px;border:1px solid rgba(248,246,234,.14);transition:border-color .25s ease,box-shadow .25s ease;
  /* vidro: fundo semitransparente com desfoque do que fica por trás (órbitas) */
  background:linear-gradient(135deg,rgba(248,246,234,.024),rgba(248,246,234,.005));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(248,246,234,.08)}
/* o link ocupa o cartão todo */
.lc a{display:flex;align-items:center;justify-content:center;width:100%;padding:0 18px;border-radius:inherit}
/* larguras em % do cartão: os logótipos encolhem com ele e mantêm o tamanho relativo entre si
   (height:auto mantém as proporções do ficheiro) */
.lc .lg-init,.lc img.partner{width:88%;height:auto}
.lc img.partner.ici{width:65%}
.lc img.partner.bads{width:81%}
.lc img.partner.dinamia{width:72%}
.lc img.partner.ckic{width:100%}
.lc img.partner.aeiscte{width:90%}
.legal{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start;padding:40px 0 112px}
/* logótipo oficial da UE, versão outline (bandeira + texto); o contorno da bandeira começa a ≈4,5% do topo do SVG,
   por isso com 56px de altura o contorno tem ≈51px e o margin-top de 3px alinha o topo da bandeira com o topo do texto */
.eu{display:block;margin-top:3px}
.eu img{display:block;width:auto;height:56px}
.legal p{font-size:13px;line-height:1.6;color:rgba(248,246,234,.55);max-width:820px}
.legal p:first-child{font-weight:700} /* "Funded by the European Union…" */

/* ==========================================================================
   ROLLOVERS (só em aparelhos com rato; no telemóvel não ficam ativos depois de um toque)
   ========================================================================== */
@media (hover:hover){
  .brand:hover,.nav-links a:hover,.menu-btn:hover{color:var(--green)}
  /* hero e cabeçalho: o botão inverte (fundo escuro, contorno e texto verdes; seta com as cores trocadas) */
  .hero .btn-primary:hover,.site-nav .btn-primary:hover{background:var(--ink);color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
  .hero .btn-primary:hover .arr{background:var(--green);color:var(--ink)}
  /* caixa do Application: "Hackathon Rulebook" e "Hackathon Declarations" enchem a verde; "Submit Application"
     inverte como o do hero (fundo escuro, contorno e texto verdes; seta com as cores trocadas) */
  #application .tile .btn:hover{background:var(--green);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--green)}
  #application .tile .btn-primary:hover{background:var(--ink);color:var(--green);box-shadow:inset 0 0 0 1.5px var(--green)}
  #application .tile .btn-primary:hover .arr{background:var(--green);color:var(--ink)}
  /* ícones e círculos: cheios a verde, com o ícone/número escuro (nos passos, só o último, link para o formulário) */
  .fact:hover .ic,.ct:hover .ic,.flow li:last-child:hover b{background:var(--green);color:var(--ink)}
  .lc:hover,.ct:hover{border-color:var(--green);box-shadow:inset 0 1px 0 rgba(248,246,234,.08),0 0 18px rgba(255,255,255,.18)} /* cartões dos parceiros e contactos: contorno verde e brilho branco */
  .ct:hover .mail{color:var(--green)} /* ícone e link (email, morada) reagem juntos */
  .intro p a:hover,.req .lk:hover,.req .lk:hover a{color:var(--ink)} /* verde-escuro do fundo do hero */
  .bg-ink .intro p a:hover{color:var(--cream)} /* em fundo escuro (Challenge): creme */
  .qa a.hl:hover{color:var(--mint)} /* verde-claro do fundo da secção About */
  .flow li:last-child:hover .flow-lk{color:var(--green)} /* círculo e texto reagem juntos */
}

/* ==========================================================================
   ANIMAÇÕES DE ENTRADA (classes postas por js/main.js)
   ========================================================================== */
/* o hero só aparece quando o js tiver preparado a entrada (.js-ready); sem isto, numa ligação lenta via-se
   o conteúdo a desaparecer logo a seguir. A classe .js vem do script no <head>. Se o js falhar, esta
   animação mostra o hero na mesma ao fim de 3s */
.js:not(.js-ready) .hero > *{visibility:hidden;animation:show-failsafe 0s 3s forwards}
@keyframes show-failsafe{to{visibility:visible}}
/* enquanto o js aplica o estado inicial (escondido), nada anima */
.anim-setup *,.anim-setup *::before{transition:none!important}

/* elementos: .rv escondido, .is-in visível; o efeito vem de data-rv */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.rv[data-rv="left"]{transform:translateX(-56px)}
.rv[data-rv="right"]{transform:translateX(56px)}
.rv[data-rv="nudge"]{transform:translateX(-20px)}
.rv[data-rv="zoom"]{transform:translateY(32px) scale(.93)}
.rv[data-rv="fade"]{transform:none;transition-duration:1.1s}
.rv.is-in[data-rv]{opacity:1;transform:none}

/* órbitas: os círculos expandem-se do centro para fora; cada planeta aparece quando a linha da sua
   órbita (que cresce de 60% até ao raio final) chega até ele (--i da órbita) */
.arcs-anim circle{transform-box:fill-box;transform-origin:center;transition:opacity .8s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.arcs-anim .rings circle{transition-delay:calc(var(--i,0) * 75ms)}
.arcs-anim .orbit circle{transition-duration:.4s,.5s;transition-delay:calc(var(--i,0) * 75ms + .75s)}
@media screen{.arcs-wait circle{opacity:0;transform:scale(.6)}}

/* linhas da timeline e dos passos: desenham-se a velocidade constante (1,5s — igual a LINE_TIME em
   js/main.js); --line-delay vem do js (a 2.ª timeline só começa quando a 1.ª acaba). Cada marco aparece
   quando a linha chega ao seu círculo, que "salta" (o atraso vem do marco) */
.draw::before{transform-origin:left center;transition:transform 1.5s linear var(--line-delay,.2s)}
.flow.draw::before{transition-duration:1.1s} /* passos da candidatura: mais rápido (igual a FLOW_TIME em js/main.js) */
.draw-wait::before{transform:scaleX(0)}
.ms.rv .dot,.flow li.rv b{transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1);transition-delay:inherit}
.ms.rv.is-in .dot,.flow li.rv.is-in b{transform:none}

@media print{
  .rv{opacity:1;transform:none}
  .draw-wait::before{transform:none}
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

/* ---- 1181–1279px: menu completo, mais junto (com o botão "Submit Application" não cabia com os espaços normais) ---- */
@media (min-width:1181px) and (max-width:1279px){
  .nav-links{gap:18px;margin-right:24px}
}
/* ---- ≤1180px: menu compacto ---- */
@media (max-width:1180px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:8px var(--gutter) 20px;background:var(--ink);border-bottom:1px solid var(--c-line);box-shadow:0 18px 30px rgba(12,45,52,.35)}
  .nav-links.is-open{display:flex}
  .nav-links a{display:block;padding:14px 0;font:500 20px/1.2 var(--font-title);border-bottom:1px solid var(--c-line)}
  .nav-links li:last-child a,.nav-links li:nth-last-child(2) a{border-bottom:0} /* "Application" e o botão (.nav-cta) */
  .brand{margin-right:auto}
  .menu-btn{display:grid}
}
/* ---- ≤1100px ---- */
@media (max-width:1100px){
  .ct .addr{white-space:normal} /* a morada pode partir para não apertar os contactos */
  /* parceiros: numa linha, como em desktop, com menos espaço entre cartões e dentro deles
     (o mesmo espaço dentro e fora dos grupos, para as colunas continuarem alinhadas) */
  .orgby,.lgrid{gap:12px}
  .lc{height:68px}
  .lc a{padding:0 8px}
}

/* ---- ≤900px: tablet ---- */
@media (max-width:900px){
  :root{--sec-pad:96px}
  .intro{grid-template-columns:1fr;gap:8px}
  .intro-text{padding-top:16px}

  /* Hero */
  .hero{padding-top:56px}
  .hero .arcs{opacity:.6}
  .facts{grid-template-columns:1fr;margin-top:40px}
  .fact{padding:22px 0}
  .fact + .fact{border-top:1px solid var(--c-line)}

  /* About: cartões um por baixo do outro */
  .qa{grid-template-columns:1fr;gap:20px}

  /* Challenge: sem as órbitas da esquerda (com o texto numa só coluna passariam por cima dele) */
  #challenge .orbits-l{display:none}

  /* Challenge: caixas uma por baixo da outra */
  .chal{grid-template-columns:1fr;margin-top:64px}

  /* Participants, Programme, Prizes */
  .reqs{column-gap:48px}
  .days{grid-template-columns:1fr}
  .pz{grid-template-columns:1fr}
  .card .k{margin-top:48px}

  /* Calendar: timelines verticais; a linha acaba no centro da última bola
     (--line-bottom medido por js/main.js; 66px é o valor sem JS) */
  .tl{grid-template-columns:1fr;margin-top:36px;padding-left:44px}
  .tlrow.r2 .tl{margin-top:36px}
  .tl::before{left:7px;right:auto;top:10px;bottom:var(--line-bottom,66px);width:2px;height:auto}
  .tl.draw::before{transform-origin:center top}
  .tl.draw-wait::before{transform:scaleY(0)}
  .ms{padding:0 0 56px}
  .tl .ms:last-child{width:auto;white-space:normal}
  .ms .date{height:auto;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:10px}
  .ms .date small{margin-top:0}
  .ms .dot{position:absolute;left:-44px;top:5px;margin:0}
  .ms.hot .pill{position:static;margin-bottom:10px}
  .ms.hot .dot{top:41px} /* desce a altura da etiqueta "Deadline" (26px + 10px) */
  .tlrow:not(.r2) .tl::before{top:46px} /* (depois da regra das linhas) a 1.ª data é o prazo: a linha começa na sua bola, abaixo da etiqueta */
  .ms .lbl{margin-top:8px}

  /* Application: passos em 4 colunas iguais; a linha é a do desktop (--flow-last mede o último passo) */
  .flow{grid-template-columns:repeat(4,1fr);row-gap:28px}
  .flow li:last-child{white-space:normal}

  /* Rodapé: caixas dos contactos lado a lado, em metades iguais */
  .cts{padding-bottom:24px}
  .ct{padding:20px}
  .ct .mail{font-size:18px}
}

/* ---- ≤720px: mobile ---- */
@media (max-width:720px){
  :root{--gutter:28px;--sec-pad:80px;--nav-h:68px}
  .lead{font-size:16.5px}
  .intro p{font-size:16px}
  .rv[data-rv="left"]{transform:translateX(-28px)}
  .rv[data-rv="right"]{transform:translateX(28px)}

  /* Cabeçalho */
  .brand{gap:6px}
  .brand-logo{height:20px;width:94.6px}
  .brand span{font-size:17px}
  .site-nav .btn{display:none}
  /* o botão "Submit Application" passa do cabeçalho para o fim do menu aberto */
  .nav-links{padding-bottom:36px} /* mais espaço por baixo do botão */
  .nav-links .nav-cta{display:block;padding-top:24px}
  .nav-links .nav-cta a{display:inline-flex;height:54px;padding:0 26px;border-bottom:0;color:var(--ink);font:500 17px/1 var(--font-title)}
  .menu-btn{margin-right:-11px} /* mantém o ícone alinhado com a margem direita */
  .menu-btn svg.i{width:22px;height:22px}

  /* Hero: todo o conteúdo centrado na altura do ecrã; datas e local logo a seguir ao botão,
     com um intervalo que acompanha a altura do ecrã (nunca menos de 40px) */
  .hero{padding-top:76px;padding-bottom:72px}
  .hero .wrap{flex:1;display:flex;flex-direction:column;justify-content:center}
  .hero .lead{font-size:16px;max-width:none}
  .hero .ctas{margin-top:28px}
  .hero .btn{height:40px;padding:0 18px;font-size:14px;gap:8px}
  .hero .btn-primary .arr{width:24px;height:24px;margin-right:-10px}
  .hero .btn-primary .arr svg.i{width:12px;height:12px}
  .facts{border-top:0;margin-top:clamp(40px,7vh,64px);margin-top:clamp(40px,7svh,64px)} /* vh: Safari < 15.4 */
  .fact{gap:14px;padding:16px 0}
  .fact + .fact{border-top:0;padding-top:0}
  .fact .ic{width:40px;height:40px}
  .fact .ic svg.i{width:18px;height:18px}
  .fact strong{font-size:18px}
  /* órbitas mais pequenas (proporção do viewBox 980×900), com o centro no canto inferior direito:
     o centro (y=1000) fica 100 unidades abaixo do viewBox; a 650/980 de escala são ~66px */
  .hero .arcs{top:auto;bottom:66px;right:-120px;width:650px;height:597px;opacity:1}
  /* sem as 3 órbitas exteriores nem os seus planetas (os 6 últimos no index.html) */
  .hero .rings circle:nth-child(n+7),.hero .dots .orbit:nth-child(n+13){display:none}
  /* os svg estão reduzidos; sem isto as linhas ficavam mais finas (e mais apagadas) do que em desktop */
  .hero .rings circle,.timeline .rings circle,#challenge .rings circle{vector-effect:non-scaling-stroke}

  /* Challenge: órbitas como as do 1.º conjunto do Calendar, a meia altura da secção */
  #challenge .orbits{width:486px;height:486px;margin-top:-243px;opacity:1}
  .chal{margin-top:48px;gap:16px}
  .ch{padding:28px 24px 32px;border-radius:24px}

  /* About */
  .qas{margin-top:48px;gap:16px}
  .qa{padding:28px 24px 32px;border-radius:24px}
  .qa h3{font-size:clamp(24px,6.6vw,30px)}
  .qa p{font-size:16px}

  /* Participants */
  .reqs{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;margin-top:48px}
  .req:nth-child(n+2){border-top:0}
  .req:nth-child(2){border-bottom:1px solid rgba(12,45,52,.16);padding-bottom:30px}

  /* Calendar */
  .timeline{padding-bottom:104px}
  .tlrow + .tlrow{margin-top:48px;padding-top:0} /* timelines mais próximas */
  .ms:last-child{padding-bottom:0}
  .ms .date b{font-size:22px}
  /* dois conjuntos de órbitas com 5 órbitas cada e o mesmo tamanho visível (~220px de raio):
     a órbita maior do 1.º tem 540 unidades e a do 2.º 460, por isso o 1.º svg fica a 460/540 do 2.º */
  .timeline .orbits{width:570px;height:570px;margin-top:-285px;opacity:1}
  .timeline .m-only{display:inline}
  /* 1.º: centrado em altura com a 1.ª timeline (--orbits1-top medido por js/main.js) */
  .timeline .orbits:not(.orbits-2){top:var(--orbits1-top,max(23%,300px));width:486px;height:486px;margin-top:-243px}
  /* 2.º: junto ao fundo, com o centro a 290px do fundo da secção */
  .timeline .orbits-2{display:block;top:calc(100% - 290px)}

  /* Programme */
  .prog-h h2{font-size:min(36px,calc((100vw - 2*var(--gutter)) / 9.6))} /* "Hackathon – Portugal" sempre numa linha */
  .days{margin-top:88px}
  .row{grid-template-columns:60px 1fr}
  .day .dh h3{font-size:21px}

  /* Prizes: só a cor do fundo */
  #prizes .orbits{display:none}
  .card{padding:28px 24px 32px;border-radius:24px}

  /* Application */
  .tile{margin-top:40px;padding:36px 36px 64px;border-radius:24px}
  /* títulos da caixa um pouco mais pequenos (com as margens maiores, "Application process" não cabia a 390px) */
  .tile h3,.tile .docs-h{font-size:26px;line-height:1.15}
  /* passos como a timeline: círculo à esquerda e texto à direita, ligados por uma linha vertical
     que acaba no centro do último círculo (--line-bottom medido por js/main.js) */
  .flow{grid-template-columns:1fr}
  .flow li{display:grid;grid-template-columns:48px 1fr;column-gap:16px;align-items:start}
  .flow span{margin-top:12px;font-size:19px}
  .flow::before{left:23px;right:auto;top:24px;bottom:var(--line-bottom,24px);width:2px;height:auto}
  .flow.draw::before{transform-origin:center top;transition-duration:.7s} /* mais rápido em mobile (FLOW_TIME_MOBILE em js/main.js) */
  .flow.draw-wait::before{transform:scaleY(0)}
  .docs{grid-template-columns:1fr}
  .head-row{display:block}
  .head-row .ctas{margin-top:24px}
  #application .ctas .btn{height:54px;padding:0 26px;font-size:17px}
  /* "Submit your application": o botão cresce por inteiro (letra, seta, altura, margens) até ter a largura do título,
     e fica um pouco mais afastado dele. A coluna tem a largura do título (até à da caixa); a .ctas é um container
     e o tamanho da letra do botão vem da sua largura: o botão mede 13,75em de largura (medido no browser), todas as
     medidas em em. Sem suporte de cqw (Safari < 16) fica com 17px e esticado à largura do título */
  .head-row-submit{display:grid;grid-template-columns:fit-content(100%);gap:0}
  #application .head-row-submit .ctas{display:block;container-type:inline-size;margin-top:32px}
  #application .head-row-submit .ctas .btn{width:100%;font-size:17px;font-size:calc(100cqw / 13.75);height:3.18em;padding:0 1.53em;gap:.82em}
  #application .head-row-submit .ctas .btn-primary .arr{width:2.24em;height:2.24em;margin-right:-1.06em}
  #application .head-row-submit .ctas .btn-primary .arr svg.i{width:1.06em;height:1.06em}
  /* "Hackathon Rulebook" e "Hackathon Declarations" lado a lado, com a mesma largura e altura; mais pequenos e,
     se não couberem numa linha, o texto passa para duas */
  #application .ctas-docs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  #application .ctas-docs .btn{height:auto;min-height:60px;padding:8px 8px;font-size:17px;line-height:1.2;white-space:normal;text-align:center}
  .doc:nth-last-child(2){border-bottom:1px solid var(--c-line)}

  /* Rodapé: sem órbitas */
  .site-footer .orbits{display:none}
  .cts{grid-template-columns:1fr;gap:0;margin-top:40px;padding-bottom:0}
  /* em mobile, sem caixas (:hover para o brilho não aparecer em janelas estreitas no desktop) */
  .ct,.ct:hover{align-items:flex-start;gap:18px;padding:24px 0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .ct:last-child{padding-bottom:40px}
  .ct .mail{font-size:20px}
  /* parceiros: um grupo por baixo do outro, pela ordem do html */
  .orgby{grid-template-columns:1fr;gap:40px;padding:16px 0 32px}
  .og:nth-child(n){grid-column:auto}
  /* um cartão por linha, com a largura toda; logótipos um pouco maiores
     (sem órbitas por trás, o desfoque do vidro só gastaria bateria) */
  .lgrid{grid-template-columns:1fr;gap:12px}
  .lc{height:104px;border-radius:12px;-webkit-backdrop-filter:none;backdrop-filter:none}
  .lc a{padding:0 14px}
  .lc img.partner.ckic{width:216px}
  .lc img.partner.ici{width:134px}
  .lc img.partner.bads{width:184px}
  .lc img.partner.bru{width:132px}
  .lc img.partner.dinamia{width:124px}
  .lc img.partner.aeiscte{width:190px}
  .lc .lg-init{width:auto;height:40px}
  .legal{grid-template-columns:1fr;gap:20px}
  .eu{margin-top:0}
}

/* ---- ≤359px: telemóveis muito estreitos (ex.: 320px) — logótipo do cabeçalho mais pequeno para caber
   com o botão do menu (mesma proporção: texto = 0,85 × altura do logótipo) ---- */
@media (max-width:359px){
  .brand-logo{height:16px;width:75.7px}
  .brand span{font-size:13.6px}
  .ct .mail{font-size:18px} /* o email (nowrap) a 20px passaria a margem em ecrãs de 320px */
  .prov{height:auto;min-height:36px;padding:6px 15px;border-radius:18px} /* o local e as datas (Programme) partem em 2 linhas, sem sair do contorno */
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn{transition:none}
  .orbits .orbit,.orbits .rings circle,.ms.hot .dot{animation:none}
}