/* MYL · Atividade N1 — palco 1920x1080 escalado. Títulos são imagens do deck do grupo. */
:root{
  --preto:#0a0a0a;
  --tinta:#f2f0ec;
  --cinza:#9a9791;
  --amarelo:#F2B807;    /* OffGrid, só na assinatura */
  --escala:1;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--preto);color:var(--tinta);overflow:hidden}
body{font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img,video{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.filtros{position:absolute;width:0;height:0}

/* ---------- palco ---------- */
.moldura{position:fixed;inset:0;overflow:hidden}
.palco{position:absolute;left:50%;top:50%;width:1920px;height:1080px;overflow:hidden;background:var(--preto);
  transform:translate(-50%,-50%) scale(var(--escala));transform-origin:center center}
.lamina{position:absolute;inset:0;visibility:hidden;overflow:hidden}
.lamina.ativa{visibility:visible}
.fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fundo-dir{left:auto;width:62%}
.veu{position:absolute;inset:0;pointer-events:none}
.veu-esq{background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.72) 38%,rgba(10,10,10,.1) 75%,rgba(10,10,10,.35) 100%)}
.veu-esq.forte{background:linear-gradient(90deg,var(--preto) 0%,var(--preto) 38%,rgba(10,10,10,.55) 58%,rgba(10,10,10,.15) 100%)}
.veu-dir{background:linear-gradient(270deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.8) 45%,rgba(10,10,10,.35) 100%)}
.veu-capa{background:rgba(10,10,10,.5)}
.veu-qr{background:linear-gradient(90deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.82) 45%,rgba(10,10,10,.9) 100%)}
.veu-baixo{background:linear-gradient(0deg,rgba(10,10,10,.85) 0%,rgba(10,10,10,.1) 60%)}

.titulo{height:auto;max-width:none;will-change:transform}
.tit{width:max-content;flex:none}
.corpo{font-size:27px;line-height:1.45;font-weight:400;color:#b3afa8;letter-spacing:-.005em}
.corpo b{color:#fff;font-weight:700}
.foto{overflow:hidden;background:#161616}
.foto img{width:100%;height:100%;object-fit:cover}

/* linhas de texto quebradas pelo motor: cada .ln tem máscara */
.ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:inline-block}

/* ---------- 00 entrada ---------- */
.entrada{background:#000}
.pular{position:absolute;right:88px;bottom:80px;padding:14px 22px;font-size:16px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(242,240,236,.7);border:1px solid rgba(242,240,236,.3)}
.pular:hover{color:var(--tinta);border-color:var(--tinta)}

/* ---------- 01 capa ---------- */
.capa .fundo{filter:none}
.capa-bloco{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center}
.capa-par{display:flex;align-items:center;gap:46px}
.capa-logo{width:720px}
.capa-x{font-size:96px;font-weight:400;line-height:1;color:rgba(242,240,236,.7);transform:translateY(-6px)}
.capa-og{width:600px}
.capa-frase{width:640px;margin-top:64px}
.assina{position:absolute;left:150px;bottom:72px;display:flex;align-items:center;gap:16px;
  font-size:18px;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
.assina img{width:40px;height:auto}

/* ---------- 02 qr do site ---------- */
.qr-bloco{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:110px}
.qr-tile{width:520px;height:520px;background:var(--tinta);padding:34px;flex:none}
.qr-tile svg{width:100%;height:100%;display:block;fill:var(--preto)}
.qr-texto{width:auto}
.qr-rotulo{font-size:20px;letter-spacing:.2em;text-transform:uppercase;color:var(--cinza)}
.qr-url{font-size:58px;white-space:nowrap;font-weight:700;letter-spacing:-.03em;line-height:1.05;margin:22px 0 30px;color:var(--tinta)}
.qr-texto .corpo{max-width:26ch}

/* ---------- 03 filme ---------- */
.filme .fundo{object-fit:cover}
.som{position:absolute;right:88px;bottom:80px;display:flex;align-items:center;gap:16px;
  padding:18px 26px;border:1px solid rgba(242,240,236,.35);font-size:18px;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(10,10,10,.45);backdrop-filter:blur(6px)}
.som:hover{border-color:var(--tinta)}
.som-barras{display:flex;align-items:flex-end;gap:4px;height:22px}
.som-barras i{width:4px;height:6px;background:var(--tinta)}
.som[aria-pressed="true"] .som-barras i{animation:eq .9s ease-in-out infinite alternate}
.som[aria-pressed="true"] .som-barras i:nth-child(2){animation-delay:-.3s}
.som[aria-pressed="true"] .som-barras i:nth-child(3){animation-delay:-.6s}
.som[aria-pressed="true"] .som-barras i:nth-child(4){animation-delay:-.15s}
@keyframes eq{to{height:22px}}
.credito{position:absolute;left:88px;bottom:88px;font-size:16px;letter-spacing:.12em;text-transform:uppercase;color:rgba(242,240,236,.55)}

/* ---------- 03 make your life ---------- */
.myl-texto{position:absolute;left:150px;top:300px;width:820px}
.myl-texto .titulo{width:780px}
.myl-texto .corpo{margin-top:52px;font-size:32px}
.myl-texto .destaque{margin-top:28px;color:var(--tinta);font-weight:500}
.myl-bone{position:absolute;right:150px;top:120px;width:470px;height:380px}
.myl-grupo{position:absolute;right:360px;top:560px;width:720px;height:422px}

/* ---------- 04 mvv ---------- */
.mvv-lista{position:absolute;left:150px;top:0;bottom:0;width:1010px;display:flex;flex-direction:column;justify-content:center;gap:44px}
.mvv-item .titulo{height:72px;width:auto}
.mvv-item .corpo{margin-top:14px;max-width:38ch;font-size:25px}

/* ---------- 05 portfólio ---------- */
.port-titulo{position:absolute;left:150px;top:90px}
.trilho{position:absolute;left:0;right:0;top:340px;will-change:transform}
.fita{display:flex;gap:28px;width:max-content;will-change:transform}
.peca{width:360px;height:480px;flex:none;overflow:hidden;background:#161616}
.peca img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.peca:hover img{transform:scale(1.06)}
.port-conta{position:absolute;left:150px;bottom:110px;font-size:22px;letter-spacing:.12em;text-transform:uppercase;color:var(--cinza)}
.port-conta b{font-size:64px;color:var(--tinta);letter-spacing:-.02em;margin-right:14px;vertical-align:-10px}
.port-nomes{position:absolute;right:150px;bottom:118px;max-width:940px;text-align:right;font-size:19px;line-height:1.6;color:#8d8a84;letter-spacing:.01em}

/* ---------- 06 4Ps ---------- */
.cartoes{position:absolute;inset:110px 150px;display:grid;grid-template-columns:1fr 1fr;gap:34px}
.cartao{background:rgba(242,240,236,.035);border:1px solid rgba(242,240,236,.14);padding:44px 52px;position:relative;overflow:hidden}
.cartao .titulo{height:74px;width:auto}
.cartao .corpo{margin-top:20px;font-size:25px}

/* ---------- 08 perfil ---------- */
.mosaico{position:absolute;left:150px;top:150px;width:760px;height:780px}
.mosaico .foto{position:absolute}
.m1{left:0;top:0;width:360px;height:380px}
.m2{left:390px;top:60px;width:370px;height:340px}
.m3{left:0;top:410px;width:360px;height:370px}
.m4{left:390px;top:430px;width:370px;height:350px}
.perfil-texto{position:absolute;right:150px;top:0;bottom:0;width:820px;display:flex;flex-direction:column;justify-content:center}
.perfil-texto .titulo{width:760px}
.lista{list-style:none;margin-top:48px;display:flex;flex-direction:column;gap:22px}
.lista li{position:relative;padding-left:40px;font-size:29px}
.lista li::before{content:"";position:absolute;left:0;top:.62em;width:20px;height:2px;background:rgba(242,240,236,.55)}

/* ---------- 09 concorrentes ---------- */
.concorrentes{display:grid;grid-template-columns:1fr 3px 1fr;gap:0 90px;padding:120px 150px}
.conc-col{display:flex;flex-direction:column;align-items:center}
.conc-col>.titulo{width:440px}
.divisor{background:var(--tinta);transform-origin:top;align-self:stretch}
.logos{margin-top:70px;display:grid;grid-template-columns:repeat(2,1fr);gap:46px 60px;align-items:center;justify-items:center;width:100%}
.logos img{max-width:250px;max-height:130px;width:auto;height:auto;object-fit:contain}
.logos img[alt="On"]{max-height:120px}
.logos img[alt="Live!"],.logos img[alt="Hound"],.logos img[alt="Kiprun Decathlon"]{max-height:170px}

/* ---------- 10–15 ambientes ---------- */
.amb-lista{position:absolute;top:0;bottom:0;width:1000px;display:flex;flex-direction:column;justify-content:center;gap:76px}
.micro .amb-lista{right:190px;text-align:right;align-items:flex-end}
.macro .amb-lista{left:190px}
.amb-item .titulo{height:72px;width:auto}
.micro .amb-item .titulo{margin-left:auto}
.amb-item .corpo{margin-top:18px}
.rotulo{position:absolute;top:50%;height:560px;width:auto;opacity:0;pointer-events:none;z-index:5}
.rotulo-micro{left:78px;transform:translateY(-50%)}
.rotulo-macro{right:78px;transform:translateY(-50%)}

/* ---------- 16 fim ---------- */
.fim-foto{object-fit:cover;transform-origin:50% 70%}
.fim-bloco{position:absolute;left:0;right:0;top:300px;display:flex;flex-direction:column;align-items:center}
.fim-obrigado{width:1100px}
.fim-myl{width:640px;margin-top:40px}
.fim-nomes{margin-top:44px;font-size:21px;line-height:1.7;text-align:center;color:#a8a49d;letter-spacing:.02em}
.fim-baixar{margin-top:34px;display:flex;gap:18px}
.baixa{display:inline-flex;align-items:center;gap:14px;padding:16px 26px;text-decoration:none;color:var(--tinta);
  background:rgba(242,240,236,.06);border:1px solid rgba(242,240,236,.22);transition:background .35s,border-color .35s,transform .35s}
.baixa:hover{background:rgba(242,240,236,.13);border-color:rgba(242,240,236,.45);transform:translateY(-2px)}
.baixa svg{flex:none;opacity:.8}
.baixa span{display:flex;flex-direction:column;font-size:15px;line-height:1.3;color:#b3afa8;letter-spacing:.06em;text-transform:uppercase}
.baixa b{font-size:21px;letter-spacing:.01em;text-transform:none;color:var(--tinta)}

/* ---------- a grade de transição ---------- */
.grade{position:absolute;inset:0;display:flex;pointer-events:none;z-index:20}
.grade i{flex:1;height:100%;background:var(--preto);transform:scaleY(0);transform-origin:top;
  box-shadow:inset -2px 0 0 rgba(242,240,236,.06)}

/* ---------- controle ---------- */
.controle{position:fixed;right:24px;bottom:18px;display:flex;align-items:center;gap:6px;z-index:40;
  font-size:13px;letter-spacing:.14em;color:rgba(242,240,236,.6);font-variant-numeric:tabular-nums}
.controle button{width:34px;height:34px;display:grid;place-items:center;font-size:16px;color:rgba(242,240,236,.6)}
.controle button:hover{color:var(--tinta)}
.controle .cheia{width:auto;gap:8px;display:flex;padding:0 10px;margin-left:8px;border:1px solid rgba(242,240,236,.22);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.cheia .fecha{display:none}
:fullscreen .cheia .fecha{display:inline}
:fullscreen .cheia .abre{display:none}
/* em tela cheia o controle some até o mouse mexer */
.quieto .controle,.quieto .progresso{opacity:0;transition:opacity .6s}
.controle,.progresso{transition:opacity .3s}
.quieto,.quieto *{cursor:none}
.progresso{position:fixed;left:24px;bottom:30px;display:flex;gap:5px;z-index:40}
.progresso i{width:3px;height:14px;background:rgba(242,240,236,.22);transition:background .3s,height .3s}
.progresso i.feito{background:rgba(242,240,236,.55)}
.progresso i.agora{background:var(--tinta);height:22px;margin-top:-8px}
.grao{position:fixed;inset:0;background:url(../assets/img/grao.png);opacity:.5;pointer-events:none;z-index:30}

@media (prefers-reduced-motion:reduce){
  .peca img{transition:none}
}

/* ---------- espera da abertura: primeiro quadro parado + botão ---------- */
.entrada .fundo{opacity:1}
.veu-espera{background:rgba(10,10,10,.55)}
.espera{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;z-index:3}
.inicio-botao{display:inline-flex;align-items:center;gap:18px;padding:26px 44px;border:1px solid rgba(242,240,236,.55);
  background:rgba(10,10,10,.35);backdrop-filter:blur(4px);
  font-size:20px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta);transition:background .3s,color .3s,border-color .3s}
.inicio-botao svg{transform:translateX(1px)} /* centro óptico do triângulo */
.inicio-botao:hover,.inicio-botao:focus-visible{background:var(--tinta);color:var(--preto);border-color:var(--tinta);outline:none}
.inicio-dica{font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,240,236,.6)}
.entrada .pular{opacity:0}

/* ---------- celular ---------- */
.girar{display:none}
@media (orientation:portrait) and (pointer:coarse){
  .girar{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--preto);color:var(--tinta);text-align:center;padding:0 32px}
  .girar svg{animation:girar 2.6s cubic-bezier(.65,0,.35,1) infinite}
  .girar-t{font-size:22px;font-weight:600;letter-spacing:-.01em;margin-top:10px}
  .girar-s{font-size:16px;color:var(--cinza)}
}
@keyframes girar{0%,25%{transform:rotate(0)}55%,100%{transform:rotate(-90deg)}}
@media (prefers-reduced-motion:reduce){.girar svg{animation:none;transform:rotate(-90deg)}}
/* iPhone não põe a página em tela cheia: o botão some em vez de quebrar */
.sem-cheia .cheia{display:none}