/* Identidade da Minha Rosie (DEC-008): creme, ameixa, sálvia e terracota. Fontes da marca, servidas daqui mesmo. */
@font-face { font-family: 'Fraunces'; src: url('fontes/Fraunces_700Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('fontes/NunitoSans_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito Sans'; src: url('fontes/NunitoSans_700Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --creme: #F4ECE1;
  --fundo: #F8F2EA;
  --ameixa: #4E1E40;
  --ameixa-escura: #3A142F;
  --noite: #1E0A18;
  --salvia: #8E9E7F;
  --verde: #3E5434;
  --terracota: #C8664F;
  --terracota-texto: #9E4630;
  --texto: #2E2228;
  --suave: #6B5A63;
  --linha: #E4D8CC;
  --tempo: 450ms;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 400 17px/1.6 'Nunito Sans', system-ui, sans-serif; }
h1, h2 { font-family: 'Fraunces', Georgia, serif; color: var(--ameixa); line-height: 1.15; margin: 0; }
img, video { max-width: 100%; height: auto; display: block; }
main > section { padding: 56px 16px; }
/* A terracota da marca não chega a 4,5:1 sobre o creme: o texto usa um tom mais escuro dela. */
.sobretitulo { margin: 0; font-weight: 700; letter-spacing: 0.12em; color: var(--terracota-texto); }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* O filme da abertura. No celular, o vídeo fica inteiro (16:9) e a legenda vem embaixo dele. */
.filme { background: var(--creme); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.filme h1 { font-size: clamp(34px, 9vw, 64px); }
.filme-topo { display: grid; gap: 8px; transition: opacity var(--tempo) ease, translate var(--tempo) ease; }
.tela { position: relative; width: 100%; max-width: 760px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; background: var(--noite);
  box-shadow: 0 12px 32px rgba(78, 30, 64, 0.16); transition: background-color 700ms ease;
  /* --quadro: largura do quadro do filme na tela; as medidas do símbolo e do nome são frações dela. */
  container-type: inline-size; --quadro: 100cqw; }
.tela video { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1); }

/* Fim do filme: o vídeo encolhe para o centro sobre o mesmo creme dele (#F1E9DE), com as bordas esfumadas, e no
   final o símbolo desliza para a esquerda e o nome "Minha Rosie" entra ao lado, o conjunto centralizado. */
.no-simbolo .tela { background: #F1E9DE; }
.no-simbolo .tela video { transform: scale(0.56); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%); }
.com-nome .tela video { transform: translateX(calc(var(--quadro) * -0.194)) scale(0.56); }
.nome-da-marca { position: absolute; margin: 0; left: calc(50% - var(--quadro) * 0.071); top: calc(50% + var(--quadro) * 0.007); translate: 0 -50%;
  font: 700 calc(var(--quadro) * 0.06)/1 'Fraunces', Georgia, serif; color: var(--ameixa); white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(calc(var(--quadro) * 0.02)); transition: opacity 700ms ease 250ms, transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) 150ms; }
.com-nome .nome-da-marca { opacity: 1; transform: none; }
.legenda { min-height: 3.2em; margin: 16px auto 0; max-width: 34ch; font-size: clamp(18px, 4.6vw, 22px); line-height: 1.45; color: var(--texto); opacity: 0; transition: opacity var(--tempo) ease; }
.legenda.visivel { opacity: 1; }
.legenda b { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 700; color: var(--ameixa); }
.filme-acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.botao-filme, .rolar { font: 700 16px/1 'Nunito Sans', system-ui, sans-serif; min-height: 48px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; }
.botao-filme { border: 2px solid var(--ameixa); background: transparent; color: var(--ameixa); }
.rolar { background: var(--ameixa); color: var(--fundo); }
.botao-filme:focus-visible, .rolar:focus-visible { outline: 3px solid var(--terracota-texto); outline-offset: 3px; }

/* Computador: o filme ocupa a tela, como no cinema; título e legenda por cima, com um véu para a leitura. */
@media (min-width: 900px) and (min-height: 500px) {
  .filme.com-script { position: relative; height: 100svh; min-height: 500px; padding: 0; overflow: hidden; background: var(--noite); justify-content: flex-end; gap: 0; }
  /* Em tela cheia o vídeo cobre a tela: o quadro tem a largura da tela ou mais, se a tela for mais alta que 16:9. */
  .com-script .tela { position: absolute; inset: 0; max-width: none; aspect-ratio: auto; border-radius: 0; box-shadow: none;
    container-type: size; --quadro: max(100cqw, 177.78cqh); }
  .filme.com-script { transition: background-color 700ms ease; }
  .com-script.no-simbolo { background: #F1E9DE; }
  .com-script .tela::after { content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity var(--tempo) ease;
    background: linear-gradient(to bottom, rgba(30, 10, 24, 0.62), rgba(30, 10, 24, 0) 32%, rgba(30, 10, 24, 0) 52%, rgba(30, 10, 24, 0.78)); }
  .com-script .filme-topo { position: absolute; top: 48px; left: 0; right: 0; z-index: 1; }
  .com-script .filme-topo h1 { color: #FFFFFF; font-size: clamp(44px, 5.4vw, 76px); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
  .com-script .sobretitulo { color: #F2C4B5; }
  .com-script.sem-titulo .filme-topo { opacity: 0; translate: 0 -12px; }
  .com-script .legenda { position: absolute; left: 0; right: 0; bottom: 120px; margin: 0 auto; max-width: 30ch; min-height: 0; z-index: 1;
    color: #FFFFFF; font-size: clamp(24px, 2.4vw, 34px); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
  .com-script .legenda b { color: #FFFFFF; }
  .com-script .filme-acoes { position: relative; z-index: 1; padding: 0 0 40px; }
  .com-script .botao-filme { border-color: rgba(255, 255, 255, 0.85); color: #FFFFFF; backdrop-filter: blur(6px); }
  .com-script .rolar { background: #FFFFFF; color: var(--ameixa); }
  /* No fim o filme mostra o símbolo sobre o creme: o véu sai e o texto fica ameixa. */
  .com-script.no-simbolo .tela::after { opacity: 0; }
  .com-script.no-simbolo .legenda { color: var(--ameixa); text-shadow: none; top: 9vh; bottom: auto; max-width: 44ch; font-size: clamp(22px, 2.4vw, 34px); }
  .com-script.no-simbolo .legenda b { color: var(--ameixa); }
  .com-script.no-simbolo .botao-filme { border-color: var(--ameixa); color: var(--ameixa); }
  /* O símbolo fica sozinho no centro: os botões ficam discretos enquanto ele se desenha e voltam pouco depois do fim. */
  .com-script.no-simbolo .filme-acoes { opacity: 0.35; transition: opacity var(--tempo) ease; }
  .com-script.no-simbolo .filme-acoes:hover, .com-script.no-simbolo .filme-acoes:focus-within { opacity: 1; }
  .com-script.acabou .filme-acoes { animation: voltar-acoes 700ms ease 1.6s both; }
  .com-script.no-simbolo .rolar { background: var(--ameixa); color: var(--fundo); }
}

/* A revelação: a marca e o que ela faz. */
.revelacao { text-align: center; }
.revelacao > * { max-width: 680px; margin-left: auto; margin-right: auto; }
.marca { margin-bottom: 18px; border-radius: 24px; }
.revelacao h2 { font-size: clamp(32px, 7.5vw, 54px); }
.sub { font-size: clamp(18px, 4.4vw, 22px); color: var(--suave); }
.provas { list-style: none; padding: 0; margin: 36px auto 0; display: grid; gap: 12px; text-align: left; max-width: 980px; }
.provas li { display: flex; gap: 16px; align-items: baseline; background: #FFFFFF; border: 1px solid var(--linha); border-radius: 20px; padding: 20px 22px; font-size: 19px; }
.provas .numero { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 28px; color: var(--terracota-texto); }
.provas strong { color: var(--verde); }
@media (min-width: 760px) {
  .provas { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .provas li { flex-direction: column; gap: 6px; padding: 26px 24px; }
}

/* Como começou: a história, em letra grande. */
.historia { background: var(--ameixa); color: var(--creme); }
.historia p { max-width: 680px; margin: 0 auto 16px; font-size: clamp(17px, 4vw, 19px); }
.historia .historia-abre { font-family: 'Fraunces', Georgia, serif; font-size: clamp(24px, 5.6vw, 34px); line-height: 1.3; color: #FFFFFF; margin-bottom: 24px; }
.historia strong { color: #F2C4B5; }
.historia p:last-child { margin-bottom: 0; }

/* Situação de hoje, sem inscrição nem promessa de data. */
.agora { background: var(--creme); text-align: center; }
.agora h2 { font-size: clamp(26px, 6.5vw, 38px); margin-bottom: 12px; }
.agora p { max-width: 40ch; margin: 0 auto; }

/* A Sheila no fim da página, sem fundo, apoiada na borda como numa mesa. Os olhos seguem o cursor (olhar.js).
   No celular a figura passa da largura da tela para o rosto não ficar pequeno; as pontas dos papéis ficam de fora. */
.agora:has(.sheila) { padding-bottom: 0; overflow: hidden; }
.sheila { position: relative; width: min(150vw, 900px); margin: 32px 0 0 50%; translate: -50% 0; }
.sheila img { width: 100%; }
.olhos { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* Página de privacidade e página de erro. */
.texto { max-width: 680px; margin: 0 auto; }
.texto h1 { font-size: clamp(32px, 8vw, 48px); margin-bottom: 20px; }
.texto h2 { font-size: clamp(22px, 5vw, 28px); margin: 32px 0 8px; }
.voltar { display: inline-block; margin-bottom: 24px; }

a { color: var(--ameixa); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--ameixa); outline-offset: 3px; border-radius: 4px; }
footer { padding: 28px 16px 40px; text-align: center; color: var(--suave); font-size: 14px; }
footer p { margin: 4px 0; }

@keyframes voltar-acoes { from { opacity: 0.35; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}