/* ══════════════════════════════════════════════════════════════════════════
   Clube Ténis de Coimbra · v3
   O sistema é o campo: filetes brancos sobre campos de cor chapada.
   As cores vêm das três superfícies reais do clube — piso rápido, relva
   sintética, areia — mais o lima exacto do logótipo.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* superfícies do clube */
  --lima:   #B0E000;   /* exacto do logótipo — sinal, nunca fundo largo */
  --ink:    #16180F;   /* preto quente: não vibra debaixo do lima */
  --court:  #1F5C55;   /* piso rápido */
  --sand:   #E3D2B4;   /* campo de praia — secção Instalações */
  --turf:   #4E7A3E;   /* relva sintética — secção Instalações */
  --paper:  #F4F3EE;   /* base */

  --line:      rgba(255,255,255,.72);
  --line-soft: rgba(255,255,255,.34);
  --line-ink:  rgba(22,24,15,.16);

  --display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --text:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;

  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --hdr-h: 4.25rem;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Cartões: canto, sombra e o degrau de elevação do hover. A sombra é da cor
     da tinta do clube, não cinzenta — cinzento sobre um campo de cor lê como
     sujidade. Duas camadas: contacto curto e opaco, ambiente longo e ténue.

     Sobre papel a sombra chega. Sobre a secção escura não chega: uma sombra
     de tinta sobre um fundo de tinta é invisível, e um cartão a flutuar sem
     aresta lê como um erro. Por isso o `--rim`, um filete de luz de dentro
     para fora, que só existe onde o fundo é escuro — a aresta faz o trabalho
     que a sombra ali não consegue fazer, e a sombra passa a preto para ainda
     dizer alguma coisa. Ver `.sec--ink .surface`. */
  --raio:     18px;
  --sombra:   0 1px 2px rgba(22,24,15,.16), 0 10px 24px -12px rgba(22,24,15,.42);
  --sombra-2: 0 2px 4px rgba(22,24,15,.20), 0 26px 46px -18px rgba(22,24,15,.55);
  --rim:      inset 0 0 0 1px rgba(244,243,238,.11);
  --rim-2:    inset 0 0 0 1px rgba(244,243,238,.20);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }
html.js-motion{ scroll-behavior:auto; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--text);
  font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  /* clip, não hidden: hidden faz do body um contentor de scroll e parte o
     position:sticky do filme em Safari */
  overflow-x:clip;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:inherit; }

:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--lima);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:fixed; top:.5rem; left:.5rem; z-index:99;
  padding:.6rem 1rem; background:var(--ink); color:var(--paper);
  font:600 .82rem/1 var(--text); text-decoration:none;
  transform:translateY(-160%);
}
.skip:focus{ transform:none; }

.wrap{ width:min(100% - var(--gut)*2, 78rem); margin-inline:auto; }

/* ─────────────────────────────── tipografia ───────────────────────────── */

.h2{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.9rem,1.1rem + 3.2vw,3.5rem);
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0;
  text-wrap:balance;
}

.eyebrow{
  display:flex; align-items:center; gap:.7rem;
  margin:0 0 1.4rem;
  font-size:.7rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 62%, transparent);
}
.eyebrow i{ flex:0 0 1.6rem; height:1px; background:currentColor; opacity:.5; }

/* marcador de secção: numeral de quadro de torneio + linha de fundo */
.mark{
  display:flex; align-items:baseline; gap:1rem;
  margin:0 0 clamp(2rem,4vw,3.5rem);
  font-size:.72rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase;
}
.mark b{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.5rem,6vw,4.5rem); line-height:.8;
  letter-spacing:-.04em;
}
.mark i{ flex:1; height:1px; background:currentColor; opacity:.28; align-self:center; }

/* ──────────────────────────────── botões ──────────────────────────────── */

.btn{
  --pad:.95rem 1.6rem;
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--pad);
  font:600 .95rem/1 var(--text);
  letter-spacing:.005em;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:2px;                 /* quase recto: o sistema é de linhas */
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .12s var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }

.btn--lime{ background:var(--lima); color:var(--ink); }
.btn--lime:hover{ background:#C2F216; }

.btn--line{ border-color:var(--line-ink); color:var(--ink); }
.btn--line:hover{ border-color:var(--ink); }

.btn--ghost{ border-color:rgba(255,255,255,.42); color:#fff; }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.1); }

/* sobre o campo lima o botão inverte-se: a tinta é que passa a ser o sinal */
.btn--ink{ background:var(--ink); color:var(--paper); }
.btn--ink:hover{ background:#000; }

.btn--outline{ border-color:rgba(22,24,15,.32); color:var(--ink); }
.btn--outline:hover{ border-color:var(--ink); }

.btn--sm{ --pad:.62rem 1.05rem; font-size:.84rem; }
.btn--lg{ --pad:1.05rem 1.9rem; font-size:1rem; }

/* ──────────────────────────────── header ──────────────────────────────── */

.hdr{
  position:fixed; inset:0 0 auto; z-index:40;
  height:var(--hdr-h);
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding-inline:var(--gut);
  background:color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line-ink);
  transition:background .35s var(--ease), border-color .35s var(--ease),
             color .35s var(--ease);
}
/* por cima do filme o header desaparece: fica só a marca, em branco */
.hdr.is-film{
  background:transparent;
  backdrop-filter:none;
  border-color:transparent;
  color:#fff;
}
.hdr.is-film .hdr__brand img{ filter:brightness(0) invert(1); }

.hdr__brand{ display:block; flex:0 0 auto; }
.hdr__brand img{
  height:clamp(2rem,4.2vw,2.6rem); width:auto;
  transition:filter .35s var(--ease);
}

.hdr__nav{ display:flex; gap:clamp(1rem,2.2vw,2rem); margin-left:auto; }
.hdr__nav a{
  position:relative;
  font-size:.86rem; font-weight:500; text-decoration:none;
  padding-block:.35rem;
}
.hdr__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--lima);
  transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease);
}
.hdr__nav a:hover::after{ transform:scaleX(1); }

@media (max-width:52rem){
  .hdr__nav{ display:none; }
  .hdr__cta{ margin-left:auto; }
}

/* ═════════════════════════════════ HERO ═══════════════════════════════════
   O scroll é a barra de tempo do filme. A secção mede ~2,8 ecrãs; lá dentro
   o vídeo fica preso ao topo e cada acto da filmagem recebe o seu texto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A altura é a duração. Dez segundos de filme num hero de 2,8 ecrãs davam um
   flick de trackpad a gastar 80% da filmagem — o filme passava, mas ninguém o
   via. Cinco ecrãos e meio dão-lhe o tempo de leitura que ele merece. */
.hero{
  position:relative;
  height:540vh;   /* recuo para quem não tem svh (Chrome/Edge <108, Safari <15.4) */
  height:540svh;
  background:var(--ink);
}

.hero__pin{
  position:sticky; top:0;
  height:100vh;   /* mesmo recuo */
  height:100svh; min-height:32rem;
  overflow:hidden;
  background:var(--ink);
}

/* O filtro fica no invólucro, não no <video>. Em Windows, filter directo no
   vídeo com aceleração por GPU deixa o filme preto — o currentTime avança mas
   nada aparece. */
.hero__film{
  position:absolute; inset:0;
  filter:saturate(1.06) contrast(1.05);
}
/* Capa com o poster por cima do <video> até o filme estar vivo.
   Safari/iOS pintam um play nativo que o CSS dos media-controls não
   consegue esconder sempre — a capa tapa-o. */
.hero__film::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  background:#1a1c14 url("assets/hero/hero-poster.jpg") center/cover no-repeat;
  pointer-events:none;
  transition:opacity .15s linear;
}
.hero__film.is-live::after{ opacity:0; visibility:hidden; }
.hero__vid{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}
.hero__vid::-webkit-media-controls,
.hero__vid::-webkit-media-controls-enclosure,
.hero__vid::-webkit-media-controls-panel,
.hero__vid::-webkit-media-controls-start-playback-button,
.hero__vid::-webkit-media-controls-overlay-play-button,
.hero__vid::-webkit-media-controls-play-button{
  display:none !important;
  -webkit-appearance:none;
  opacity:0 !important;
  pointer-events:none;
}

/* dois véus: um em cima para o header respirar, outro em baixo para o texto */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(10,14,8,.5) 0%, rgba(10,14,8,0) 22%),
    linear-gradient(to top,    rgba(10,14,8,.78) 0%, rgba(10,14,8,.34) 34%, rgba(10,14,8,0) 62%);
  pointer-events:none;
}

.hero__stage{
  position:absolute; inset:auto 0 0;
  padding:0 var(--gut) clamp(4rem,11svh,7rem);
  z-index:3;
  color:#fff;
}

/* ── os três actos ──
   Todos ocupam o mesmo sítio; só um está aceso de cada vez. */
.beat{
  grid-area:1/1;
  max-width:min(100%,44rem);
  opacity:0;
  transform:translateY(22px);
  transition:opacity .55s var(--ease), transform .7s var(--ease);
  pointer-events:none;
}
/* os três actos partilham a mesma célula, encostados ao mesmo rodapé —
   senão cada um assentava a uma altura diferente conforme o seu tamanho */
.hero__stage{ display:grid; align-items:end; }
.beat.on{ opacity:1; transform:none; pointer-events:auto; }
.beat.was{ opacity:0; transform:translateY(-16px); }

.beat__line{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2rem,1rem + 3.4vw,4rem);
  line-height:1;
  letter-spacing:-.03em;
  margin:0;
  text-shadow:0 2px 30px rgba(8,12,6,.42);
}
.beat__sub{
  margin:1rem 0 0;
  max-width:32rem;
  font-size:clamp(.98rem,.94rem + .3vw,1.12rem);
  color:rgba(255,255,255,.82);
}
.eyebrow--on-film{ color:rgba(255,255,255,.82); }

/* headline do acto 3 — as linhas entram quando a bola bate no piso */
.hero__h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.35rem,1rem + 4.4vw,5.5rem);
  line-height:.95;
  letter-spacing:-.035em;
  margin:0 0 1.2rem;
  text-shadow:0 2px 34px rgba(8,12,6,.5);
}
.hero__h1 .ln{
  display:block; overflow:hidden;
  padding-bottom:.1em; margin-bottom:-.1em;
}
.hero__h1 .ln i{
  display:block; font-style:normal;
  transform:translateY(108%) scale(1.04);
  filter:blur(10px);
  opacity:0;
  transition:transform .52s var(--ease), filter .44s var(--ease), opacity .3s linear;
}
.beat--3.on .ln i{ transform:none; filter:none; opacity:1; }
.beat--3.on .ln:nth-child(2) i{ transition-delay:.08s; }
.hero__h1 .ln:nth-child(2){ color:var(--lima); }

.hero .lede{
  max-width:36rem;
  margin:0 0 1.9rem;
  font-size:clamp(1rem,.94rem + .4vw,1.15rem);
  color:rgba(255,255,255,.84);
  text-wrap:pretty;
}
.acts{ display:flex; flex-wrap:wrap; gap:.75rem; }

.hero__cue{
  position:absolute; z-index:4; right:var(--gut); bottom:1.6rem;
  margin:0; pointer-events:none;   /* é um aviso, não é para se clicar */
  font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
  transition:opacity .5s var(--ease);
}
.hero.is-end .hero__cue{ opacity:0; }
.hero__cue span{ display:block; animation:cue 2.4s var(--ease) infinite; }
@keyframes cue{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* barra de tempo do filme — o mesmo filete branco do resto do site */
.hero__bar{
  position:absolute; z-index:4; left:0; right:0; bottom:0;
  height:2px; background:rgba(255,255,255,.16);
}
.hero__bar i{
  display:block; height:100%; width:0;
  background:var(--lima);
  transform-origin:left;
}

/* ─────────────────────────────── secções ──────────────────────────────── */

.sec{ padding-block:clamp(4.5rem,10vw,8.5rem); position:relative; }

/* Os campos de cor da página são as superfícies reais do clube. A ordem
   papel → tinta → papel → piso → lima dá o ritmo: cada bloco escuro é
   seguido de luz, e o lima só aparece uma vez, no fim, onde há um botão.
   O lima é sinal, não decoração: sobre papel dá 1,6:1 e fica ilegível,
   por isso os numerais de secção levam sempre a cor do texto. */
.sec--paper{ background:var(--paper); color:var(--ink); }
.sec--white{ background:#fff; color:var(--ink); }
.sec--ink  { background:var(--ink);   color:var(--paper); }
.sec--court{ background:var(--court); color:var(--paper); }
.sec--sand { background:var(--sand);  color:var(--ink); }

.sec--ink .sec__body p,
.sec--court .sec__body p{ color:rgba(244,243,238,.78); }

.sec__grid{
  display:grid; gap:clamp(1.5rem,4vw,4.5rem);
  grid-template-columns:1fr;
}
@media (min-width:56rem){
  .sec__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:end; }
}
.sec__body p{
  margin:0 0 1.05rem;
  max-width:40ch;
  color:color-mix(in srgb, var(--ink) 74%, transparent);
}
.sec__body p:last-child{ margin:0; }

.note{
  margin:clamp(2rem,4vw,3rem) 0 0;
  font-size:.9rem;
  color:rgba(244,243,238,.6);
}
.sec--paper .note,
.sec--white .note,
.sec--sand .note{
  color:color-mix(in srgb, var(--ink) 55%, transparent);
}

/* ── 02 · as três superfícies, cada uma com a sua cor ─────────────────── */

/* Em ecrã pequeno os três painéis arrastam-se de lado, sem intervalo entre
   eles: as cores continuam a tocar-se como no desktop, e a fatia do painel
   seguinte que fica à vista é o que diz «isto puxa-se». Empilhá-los dava três
   ecrãs de scroll para dizer a mesma coisa. */
.surfaces{
  list-style:none; margin:clamp(2.5rem,6vw,4.5rem) 0 0; padding:0;
  display:flex; gap:clamp(.85rem,2vw,1.5rem);
  padding-inline:var(--gut);
  scroll-padding-inline:var(--gut);
  /* espaço em baixo para a sombra e o degrau do hover não serem cortados */
  padding-block-end:1.5rem; margin-block-end:-1.5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;   /* não dispara o «voltar» do iOS */
  scrollbar-width:none;
}
.surfaces::-webkit-scrollbar{ display:none; }
.surface{ flex:0 0 82%; min-width:0; scroll-snap-align:start; }

@media (min-width:52rem){
  .surfaces{
    display:grid; grid-template-columns:repeat(3,1fr);
    width:min(100% - var(--gut)*2, 78rem); margin-inline:auto;
    padding-inline:0;
    overflow:visible; scroll-snap-type:none;
  }
  .surface{ flex:none; }
}

/* O cartão é uma peça só: a fotografia e o texto partilham o mesmo canto e a
   mesma sombra, e é o cartão inteiro que se levanta — não a imagem por dentro
   de uma moldura quadrada. */
.surface{
  display:flex; flex-direction:column;
  border-radius:var(--raio); overflow:hidden;
  box-shadow:var(--sombra);
  transform:translateZ(0);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.surface:hover,
.surface:focus-within{
  transform:translateY(-6px);
  box-shadow:var(--sombra-2);
}

/* Num campo escuro a sombra sozinha não separa nada. O filete separa. */
.sec--ink .surface,
.sec--court .surface{
  box-shadow:var(--rim), 0 2px 4px rgba(0,0,0,.32), 0 18px 34px -14px rgba(0,0,0,.7);
}
.sec--ink .surface:hover,
.sec--ink .surface:focus-within,
.sec--court .surface:hover,
.sec--court .surface:focus-within{
  box-shadow:var(--rim-2), 0 4px 8px rgba(0,0,0,.36), 0 32px 54px -18px rgba(0,0,0,.8);
}
/* A fotografia respira meio ponto quando o cartão está debaixo do cursor: dá
   vida ao gesto sem o painel de cor se mexer. */
.surface__ph img{ transition:transform .55s var(--ease), filter .32s var(--ease); }
.surface:hover .surface__ph img,
.surface:focus-within .surface__ph img{ transform:scale(1.045); }
.surface--hard{ background:var(--court); color:var(--paper); }
.surface--turf{ background:var(--turf);  color:var(--paper); }
.surface--sand{ background:var(--sand);  color:var(--ink); }

/* Três imagens de proveniências diferentes têm de ler como um conjunto. A
   graduação não vai na imagem — vai numa camada da cor do painel por cima,
   em `multiply`, com a força controlada por `--tint`. Assim cada fotografia
   recebe a dose que precisa: a do piso rápido é de crepúsculo e não aguenta
   o mesmo véu que a da areia, que já vem clara. */
.surface__ph{
  margin:0; position:relative;
  aspect-ratio:4/3; overflow:hidden;
  background:inherit;
}
.surface__ph img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(var(--gray,.5)) contrast(1.06) brightness(var(--lift,1));
}
.surface__ph::after{
  content:""; position:absolute; inset:0;
  background:inherit;
  mix-blend-mode:multiply;
  opacity:var(--tint,.72);
}
.surface--hard{ --tint:.5;  --lift:1.5; --gray:.45; }
.surface--turf{ --tint:.72; --lift:1.05; }
.surface--sand{ --tint:.62; --lift:1.02; --gray:.35; }

.surface__txt{
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex; flex-direction:column; flex:1;
}
.surface__n{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.75rem,6vw,4.25rem); line-height:.8;
  letter-spacing:-.045em;
  margin-bottom:1.1rem;
}
.surface h3{
  margin:0 0 .5rem;
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.15rem,.9rem + .8vw,1.5rem);
  letter-spacing:-.015em;
}
.surface p{ margin:0; font-size:.95rem; opacity:.82; max-width:32ch; }

/* ── faixa de fotografia a sangrar ───────────────────────────────────── */

.band{
  margin:clamp(2.5rem,6vw,4.5rem) 0 0;
  aspect-ratio:16/9; overflow:hidden;   /* base: ecrã pequeno */
}
.band--tall{ aspect-ratio:16/9; }
.band img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:44rem){
  .band{ aspect-ratio:21/8; }
  .band--tall{ aspect-ratio:21/9; }
}

/* ── 02 · as fichas da equipa ────────────────────────────────────────── */

/* Cartão claro estilo feed: foto viva, pessoa centrada, nome por baixo. */
.team{
  list-style:none; margin:clamp(2.5rem,6vw,4rem) 0 0; padding:0;
  display:flex; gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut);
  scroll-padding-inline:var(--gut);
  padding-block-end:1.5rem; margin-block-end:-1.5rem;
}
.team::-webkit-scrollbar{ height:4px; }
.team::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius:99px;
}

.face{
  flex:0 0 64%;
  min-width:0;
  scroll-snap-align:start;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(22,24,15,.06);
  box-shadow:
    0 1px 2px rgba(22,24,15,.04),
    0 14px 32px -18px rgba(22,24,15,.35);
  padding-bottom:0;
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
  cursor:default;
}

@media (min-width:40rem){
  .face{
    flex:0 0 calc((100% - 2rem) / 3);
  }
}

.face:hover,
.face:focus-within{
  transform:translateY(-5px);
  box-shadow:
    0 2px 6px rgba(22,24,15,.08),
    0 22px 40px -16px rgba(22,24,15,.32);
}
.face__ph{
  margin:0;
  aspect-ratio:4 / 5;
  overflow:hidden;
  position:relative;
  background:#e8e6df;
}
.face__ph img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center center;
  transition:opacity .4s var(--ease), transform .55s var(--ease);
}
.face__ph-perto{ opacity:1; z-index:1; }
.face__ph-longe{ opacity:0; z-index:2; }
.face:hover .face__ph-perto,
.face:focus-within .face__ph-perto{ opacity:0; }
.face:hover .face__ph-longe,
.face:focus-within .face__ph-longe{ opacity:1; }
.face:hover .face__ph img,
.face:focus-within .face__ph img{ transform:scale(1.03); }
.face h3{
  margin:0;
  padding:1rem 1.15rem 1.15rem;
  font-family:var(--text);
  font-weight:600;
  font-size:clamp(.95rem,.88rem + .3vw,1.05rem);
  line-height:1.25;
  letter-spacing:.01em;
  color:var(--ink);
  text-align:center;
}
.face p{ display:none; }

/* ── 04 · três grupos, não oito coisas soltas ────────────────────────── */

.groups{
  display:grid; gap:clamp(1.75rem,4vw,3rem);
  grid-template-columns:1fr;
  margin-top:clamp(2.5rem,6vw,4rem);
}
@media (min-width:44rem){ .groups{ grid-template-columns:repeat(3,1fr); } }

.group h3{
  margin:0 0 1rem; padding-bottom:.9rem;
  border-bottom:1px solid var(--line-soft);
  font-size:.7rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,243,238,.62);
}
.group ul{ list-style:none; margin:0; padding:0; }
.group li{
  padding:.55rem 0;
  font-family:var(--display); font-weight:600;
  font-size:clamp(1.05rem,.9rem + .55vw,1.4rem);
  letter-spacing:-.015em;
}

.acts--sec{ margin:clamp(2.5rem,5vw,3.5rem) 0 0; }

/* ── 05 · o convite ───────────────────────────────────────────────────── */

.cta__h{
  margin:0 0 1rem;
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.4rem,1rem + 5.5vw,6rem);
  line-height:.95; letter-spacing:-.04em;
}
.cta__p{
  margin:0 0 clamp(2rem,4vw,2.75rem);
  max-width:34ch;
  font-size:clamp(1.05rem,.98rem + .45vw,1.3rem);
  color:color-mix(in srgb, var(--ink) 76%, transparent);
}
.cta__alt{
  margin:1.4rem 0 0;
  font-size:.95rem;
  color:color-mix(in srgb, var(--ink) 62%, transparent);
}
.cta__alt a{ text-decoration:none; border-bottom:1px solid currentColor; }
.cta__alt a:hover{ color:var(--ink); }
.cta__alt i{ font-style:normal; opacity:.4; margin-inline:.5rem; }

.btn--xl{ --pad:1.25rem 2.4rem; font-size:1.08rem; }

/* ─────────────────────────────── rodapé ───────────────────────────────── */

.ft{ background:var(--ink); color:var(--paper); padding-block:clamp(3rem,6vw,5rem); }
.ft__in{ display:grid; gap:1.2rem; }
@media (min-width:52rem){
  .ft__in{ grid-template-columns:1fr auto; align-items:start; }
  .ft__note{ grid-column:1/-1; }
}
.ft__addr{ margin:0; line-height:1.6; color:rgba(244,243,238,.72); font-style:normal; }
.ft__links{ display:flex; flex-wrap:wrap; gap:1.25rem; margin:0; }
.ft__links a{ text-decoration:none; border-bottom:1px solid var(--line-soft); padding-bottom:2px; }
.ft__links a:hover{ border-color:var(--lima); color:var(--lima); }
.ft__note{
  margin:1.5rem 0 0; padding-top:1.5rem;
  border-top:1px solid rgba(244,243,238,.14);
  font-size:.78rem; color:rgba(244,243,238,.45);
}

/* ────────────────────────── revelações de scroll ──────────────────────── */

.js-motion .rv{
  opacity:0; transform:translateY(20px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js-motion .rv.in{ opacity:1; transform:none; }

/* ──────────────────────── movimento reduzido / still ──────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}
/* Sem movimento: o hero deixa de ser um filme e passa a ser um cartaz —
   um ecrã, o último fotograma, e o acto 3 já escrito. */
.calm .hero{ height:auto; }
.calm .hero__pin{ position:static; height:100vh; height:100svh; }
/* ── o filme num ecrã ao alto ──────────────────────────────────────────────
   O filme é deitado (1128×720) e o telemóvel é ao alto. A sangrar por todo o
   ecrã, o `cover` tinha de o ampliar até à altura e só sobravam 29% da largura
   do fotograma à vista: uma bola gigante, sem torre e sem campo — que é a
   história que o filme conta.

   Panorâmica não resolvia: numa fatia de 29% a torre (15–40% do fotograma) e
   a bola (ao centro) não cabem as duas. Para se verem juntas o filme tem de
   encolher. Encolhe então para uma faixa em cima, e o texto passa a viver
   sobre o escuro, por baixo — onde já estava, só que agora em campo limpo. */
@media (max-aspect-ratio: 3/4){
  /* O filme continua a sangrar e o texto continua por cima dele — só deixa de
     ir até ao fundo, para o `cover` não ter de o ampliar tanto. Os 30svh que
     sobram em baixo são escuro, que é onde o texto já vivia. */
  .hero__film,
  .hero__scrim{ inset:0 0 auto; height:70vh; height:70svh; }

  /* A moldura anda com o filme.

     Num ecrã ao alto o `cover` só deixa ver 42% da largura do ficheiro. Medido
     fotograma a fotograma: o relógio da torre ocupa 11–40%, a bola ocupa
     44–69%. São 58% de conteúdo para 42% de janela — os dois nunca cabem ao
     mesmo tempo, e isto é aritmética, não é gosto. Um valor fixo obrigava a
     escolher, e o valor que lá estava (68%, a bola ao meio) escolhia deitar a
     torre fora inteira.

     Em vez de escolher, a moldura desliza de 30% para 62% ao longo dos
     primeiros 5,5 s: abre no relógio, e acompanha a bola para a direita
     enquanto ela cai. É o movimento que um operador de câmara faria — e é
     também o que o filme conta, porque o primeiro acto é a torre e o último
     é a bola. Efeito secundário: a bola fica quieta no ecrã e é a cidade que
     lhe passa por trás.

     30% é onde abre: o mostrador do relógio inteiro e dois terços da bola a
     entrar pela direita. Descer mais ganhava o segundo mostrador e perdia
     metade da bola — que é a marca do clube, e é o que está a cair.

     O valor vem do `app.js`, a par do currentTime; 30% é também onde fica se
     o JS não correr. */
  .hero__vid{ object-position:var(--pan,30%) center; }

  /* o escurecido fecha em `--ink` opaco no fim do filme, senão via-se o risco
     onde a imagem acaba e o fundo da página começa */
  .hero__scrim{
    background:
      linear-gradient(to bottom, rgba(10,14,8,.42) 0%, rgba(10,14,8,0) 30%),
      linear-gradient(to top, var(--ink) 0%, rgba(10,14,8,.55) 18%, rgba(10,14,8,0) 58%);
  }
}

.calm .hero__film{ display:none; }
.calm .hero__pin{
  background:#1a1c14 url("assets/hero/hero-last.jpg") center/cover no-repeat;
}
.calm .beat--1,
.calm .beat--2{ display:none; }
.calm .beat--3{ opacity:1; transform:none; }
.calm .hero__h1 .ln i{ transform:none; filter:none; opacity:1; }
.calm .hero__cue,
.calm .hero__bar{ display:none; }

/* ?shots — só para fotografar a página inteira de uma vez */
.shots .hero__pin{ height:26rem; min-height:0; }

/* ────────────────────────────── ecrã pequeno ──────────────────────────── */

@media (max-width:44rem){
  /* 440svh davam quatro ecrãs e meio só de filme. A 360 o filme continua a
     precisar de duas ou três passagens de dedo — chega para o ver. */
  .hero{ height:360vh; height:360svh; }
  .hero__stage{ padding-bottom:clamp(3rem,9svh,5rem); }
  .acts{ flex-direction:column; align-items:stretch; }
  .acts .btn{ width:100%; }

  /* Alvos de toque. 44px é o mínimo que um polegar acerta de forma fiável;
     o CTA do header estava a 35. */
  .hdr__cta,
  .hdr__brand{ min-height:44px; display:inline-flex; align-items:center; }

  /* Nas ligações em linha a área de toque cresce por baixo, com um
     pseudo-elemento: aumentar o padding empurrava o sublinhado para longe
     do texto. */
  .ft__links a,
  .cta__alt a{ position:relative; }
  .ft__links a::after,
  .cta__alt a::after{
    content:""; position:absolute; inset:-12px -6px;
  }
}