/* ==========================================================================
   Histórias que constroem Portugal — DREAMMEDIA
   ========================================================================== */

:root {
  --laranja: #f57000;
  --tinta: #333333; /* o mesmo preto do lettering da campanha */
  --tinta-2: #555553;
  --cinza: #8a8a87;
  --papel: #ffffff;
  --peca: #f3f3f1; /* papel das histórias */
  --retrato-fundo: #e6e6e4;

  --serif: 'ivypresto-display', 'IvyPresto Display', 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cine: cubic-bezier(0.77, 0, 0.18, 1);

  --u: 30px; /* unidade de composição — recalculada em tunel.js */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--papel);
  color: var(--tinta);
}
body {
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
html:not(.fontes-prontas) .experiencia { visibility: hidden; }

p, h1, h2, figure { margin: 0; padding: 0; font-weight: inherit; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--laranja); outline-offset: 4px; }

.sem-js { padding: 18vh 8vw; max-width: 40em; }
.sem-js h1 { font-size: 48px; font-weight: 400; margin-bottom: 24px; }

.cruz { position: relative; width: 14px; height: 14px; flex: none; }
.cruz::before, .cruz::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}
.cruz::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ==========================================================================
   Statement central
   ========================================================================== */
.declaracao { color: var(--tinta); }
.declaracao--tunel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 200;
  width: min(calc(var(--u) * 15.5), calc(100vw - 48px));
  transform: translate(-50%, calc(-50% + (1 - var(--paragrafos, 1)) * var(--desloc, 0px)));
  text-align: center;
  user-select: text;
  -webkit-user-select: text;
  transition: opacity 0.5s var(--ease);
}
.tunel.tem-foco .declaracao--tunel { opacity: 0.28; }

.declaracao__titulo--logo { display: flex; justify-content: center; font-size: 0; line-height: 0; }
.declaracao__titulo--logo img {
  display: block;
  width: calc(var(--u) * 7.2);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.3s var(--ease-cine) 0.15s;
}
.is-pronta .declaracao__titulo--logo img { clip-path: inset(0); }

.declaracao__texto { margin-top: calc(var(--u) * 1.6); opacity: var(--paragrafos, 1); }
.declaracao__texto p {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(13.5px, calc(var(--u) * 0.47), 17px);
  line-height: 1.8;
  text-align: justify;
  text-align-last: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 1s var(--ease) calc(700ms + var(--i) * 170ms), transform 1.3s var(--ease-out) calc(700ms + var(--i) * 170ms);
}
.declaracao__texto p + p { margin-top: 1.1em; }
.is-pronta .declaracao__texto p { opacity: 1; transform: none; }
.declaracao--tunel.so-titulo .declaracao__texto,
.declaracao--tunel.so-titulo .declaracao__marca { pointer-events: none; user-select: none; }

/* logótipo DREAMMEDIA, logo abaixo do texto */
.declaracao__marca {
  display: inline-block;
  margin-top: calc(var(--u) * 1.05);
  padding: 4px;
  opacity: 0;
  transition: opacity 1.2s var(--ease) 1.3s;
}
.is-pronta .declaracao__marca { opacity: var(--paragrafos, 1); }
.declaracao__marca img { width: auto; height: clamp(13px, calc(var(--u) * 0.5), 17px); }

/* título composto (só se não houver lettering em SVG) */
.declaracao__titulo { position: relative; font-weight: 400; font-size: calc(var(--u) * 1.7); line-height: 1.04; letter-spacing: -0.014em; }
.linha { position: relative; display: block; overflow: hidden; padding: 0.3em 0 0.14em; margin: -0.3em 0 -0.14em; white-space: nowrap; }
.linha + .linha:not(.declaracao__recorte) { padding-left: 0.48em; }
.linha__texto { display: inline-block; }
.declaracao__quadrado { display: inline-block; width: 0.86em; height: 0.86em; margin-right: -0.38em; vertical-align: 0.16em; background: var(--laranja); }
.declaracao__recorte { position: absolute; margin: 0 !important; color: #fff; pointer-events: none; }
.declaracao__recorte .declaracao__quadrado { visibility: hidden; }

/* ==========================================================================
   Peças: retrato e história
   ========================================================================== */
.peca { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }

.peca--retrato { background-color: var(--retrato-fundo); transition: background-color 0.6s var(--ease); }
.peca__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  user-select: none;
  -webkit-user-drag: none;
}
.peca__moldura {
  position: absolute;
  inset: 4.4%;
  border: 1px solid rgba(255, 255, 255, 0.72);
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.laranja {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  shape-rendering: crispEdges;
  pointer-events: none;
  transition: transform 0.22s steps(1, end);
}
.laranja rect { fill: var(--laranja); transform-box: fill-box; transform-origin: 50% 50%; }

/* história: uma folha de papel, sem moldura */
.peca--texto {
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 0.95) calc(var(--u) * 0.95) calc(var(--u) * 0.85);
  background: var(--peca);
  color: var(--tinta);
}
.peca__abertura {
  font-style: italic;
  font-weight: 400;
  font-size: calc(var(--u) * 0.74);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: calc(var(--u) * 0.42);
}
.peca__excerto {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  font-style: italic;
  font-weight: 300; /* light — só o texto da história no cartão */
  font-size: calc(var(--u) * 0.47);
  line-height: 1.56;
  text-align: justify;
  hyphens: manual;
  -webkit-hyphens: manual;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--linhas, 6);
}
.peca__assinatura {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: auto;
  padding-top: calc(var(--u) * 0.34);
  text-align: right;
  font-size: calc(var(--u) * 0.42);
  line-height: 1.3;
}
.peca__local { font-weight: 600; }
.peca__ler {
  position: absolute;
  top: calc(var(--u) * 0.95);
  right: calc(var(--u) * 0.95);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 500 calc(var(--u) * 0.3)/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out);
}
.peca__ler i { width: calc(var(--u) * 0.2); height: calc(var(--u) * 0.2); background: var(--laranja); }

/* ==========================================================================
   Túnel (página estática, sem scroll)
   ========================================================================== */
.tunel {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.tunel.is-arrastar, .tunel.is-arrastar * { cursor: grabbing !important; }
.tunel__camada { position: absolute; inset: 0; }
.tunel .modulo {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  transform-origin: 0 0;
  backface-visibility: hidden;
}
.tunel .modulo.is-oculto { visibility: hidden; }
.tunel .modulo.is-tenue { pointer-events: none; }
.tunel .modulo--texto { cursor: pointer; }
.modulo--texto:focus-visible { outline-offset: 6px; }
.modulo.is-foco .peca__ler, .modulo:focus-visible .peca__ler { opacity: 1; transform: none; }

/* entrada: os blocos constroem-se, a fotografia aparece por baixo */
.modulo .laranja rect {
  transform: scale(0);
  transition: transform 0.42s var(--ease-out) var(--d, 0ms);
}
.modulo.is-revelado .laranja rect { transform: scale(1); }
.modulo .peca__foto {
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.1s var(--ease) 420ms, transform 2s var(--ease-out) 300ms;
}
.modulo.is-revelado .peca__foto.is-carregada { opacity: 1; transform: none; }
.modulo.is-revelado.is-foco .peca__foto.is-carregada { transform: scale(1.035); transition: opacity 0.3s, transform 1.4s var(--ease-out); }

.modulo .peca--texto { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-cine) 120ms; }
.modulo .peca--texto > :not(.peca__ler) {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s var(--ease) 600ms, transform 1.2s var(--ease-out) 600ms;
}
.modulo.is-revelado .peca--texto { clip-path: inset(0); }
.modulo.is-revelado .peca--texto > :not(.peca__ler) { opacity: 1; transform: none; }

/* saída: ao passar por nós, o retrato desfaz-se bloco a bloco */
.modulo.is-saindo .peca__foto.is-carregada { opacity: 0; transform: scale(1.04); transition: opacity 0.35s var(--ease), transform 0.6s var(--ease); }
.modulo.is-saindo .peca--retrato { background-color: rgba(230, 230, 228, 0); }
.modulo.is-saindo .peca__moldura { opacity: 0; }
.modulo.is-saindo .laranja rect { transform: scale(0); transition: transform 0.5s var(--ease-out) calc(120ms + var(--d, 0ms) * 0.7); }

/* arte final: a imagem já traz os blocos laranja; constrói-se e desfaz-se em blocos da cor do papel */
.peca--arte { background: transparent; }
.peca--arte .peca__foto { filter: none; }
.dissolver { position: absolute; inset: 0; width: 100%; height: 100%; shape-rendering: crispEdges; pointer-events: none; }
.dissolver rect { fill: var(--papel); transform-box: fill-box; transform-origin: 50% 50%; transition: transform 0.45s var(--ease-out) var(--d, 0ms); }
.modulo.is-revelado .dissolver rect { transform: scale(0); }
.modulo.is-saindo .peca--arte .peca__foto.is-carregada { opacity: 1; transform: none; }
.modulo.is-saindo .dissolver rect { transform: scale(1); transition: transform 0.4s var(--ease-out) calc(var(--d, 0ms) * 0.6); }

.sem-transicao, .sem-transicao * { transition: none !important; }

/* ==========================================================================
   Leitor — a história numa folha de papel
   ========================================================================== */
.leitor { position: fixed; inset: 0; z-index: 300; }
.leitor__lamina {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: var(--peca);
  transform-origin: 0 0;
  will-change: transform;
}
.leitor__rolo { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }
.leitor__grelha {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  column-gap: clamp(40px, 7vw, 140px);
  padding: 104px clamp(28px, 8vw, 160px) 128px;
}
.leitor__grafismo { position: relative; justify-self: end; width: min(52vh, 28vw); aspect-ratio: 1; }
.leitor__grafismo .laranja { position: absolute; inset: 0; transition: none; }
.leitor .laranja rect { transform: scale(0); transition: transform 0.3s var(--ease-out) var(--d, 0ms); }
.leitor .laranja rect.on { transform: scale(1); }

.leitor__texto { max-width: 31em; }
.leitor__abertura {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 5.2vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.018em;
  margin-bottom: 0.5em;
}
.leitor__historia p {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.72;
  text-align: justify;
  hyphens: manual;
  -webkit-hyphens: manual;
}
.leitor__historia p + p { margin-top: 0.9em; }
.leitor__assinatura { display: grid; justify-items: end; gap: 4px; margin-top: 2em; text-align: right; font-size: clamp(17px, 1.25vw, 21px); }
.leitor__local { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.leitor__local i { width: 8px; height: 8px; background: var(--laranja); flex: none; }

.leitor__texto > * { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 1s var(--ease-out); }
.leitor__texto > :nth-child(1) { --k: 0; }
.leitor__texto > :nth-child(2) { --k: 1; }
.leitor__texto > :nth-child(3) { --k: 2; }
.leitor.is-aberto .leitor__texto > * { opacity: 1; transform: none; transition-delay: calc(520ms + var(--k, 0) * 120ms); }
.leitor.is-navegou .leitor__texto > * { transition-delay: calc(var(--k, 0) * 70ms); }
.leitor__texto.is-sair > * {
  opacity: 0 !important;
  transform: translateX(calc(var(--dir, 1) * -22px)) !important;
  transition: opacity 0.26s var(--ease), transform 0.4s var(--ease) !important;
}
.leitor__texto.is-entrar > * { opacity: 0 !important; transform: translateX(calc(var(--dir, 1) * 26px)) !important; transition: none !important; }
.leitor.is-fechar .leitor__texto > * { opacity: 0; transition: opacity 0.22s var(--ease); transition-delay: 0s; }

.leitor__topo {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  opacity: 0;
  transition: opacity 0.5s var(--ease) 0.4s;
}
.leitor.is-aberto .leitor__topo { opacity: 1; }
.leitor.is-fechar .leitor__topo, .leitor.is-fechar .leitor__nav { opacity: 0; transition: opacity 0.2s; }
.leitor__campanha { display: block; height: 34px; width: auto; }
.leitor__fechar {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  font: 500 10.5px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.leitor__fechar .cruz { transition: transform 0.5s var(--ease-out); }
.leitor__fechar:hover .cruz { transform: rotate(90deg); }

.leitor__nav {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  align-items: end;
  padding: 0 28px 24px;
  opacity: 0;
  transition: opacity 0.5s var(--ease) 0.6s;
  pointer-events: none;
}
.leitor.is-aberto .leitor__nav { opacity: 1; }
.leitor__nav > * { pointer-events: auto; }
.leitor__seta { display: grid; justify-items: start; gap: 7px; padding: 6px 0; text-align: left; }
.leitor__seta--seg { justify-items: end; text-align: right; }
.leitor__seta-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 9.5px/1 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cinza);
}
.leitor__seta-rotulo i { position: relative; width: 18px; height: 1px; background: currentColor; transition: width 0.45s var(--ease-out); }
.leitor__seta:hover .leitor__seta-rotulo i { width: 34px; }
.leitor__seta:hover .leitor__seta-rotulo { color: var(--tinta); }
.leitor__seta-nome { font-style: italic; font-size: 19px; }

/* ==========================================================================
   Ecrãs estreitos
   ========================================================================== */
.tunel-estreito .declaracao--tunel .declaracao__texto { margin-top: 22px; }
.tunel-estreito .declaracao__titulo--logo img { width: min(190px, 52vw); }
.tunel-estreito .declaracao__marca { margin-top: 18px; }
.tunel-estreito .declaracao__marca img { height: 12px; }

@media (max-width: 899px), (max-height: 559px) {
  .leitor__grelha { grid-template-columns: minmax(0, 1fr); align-items: start; row-gap: 30px; padding: 78px 22px 120px; }
  .leitor__grafismo { justify-self: start; width: min(42vw, 220px); }
  .leitor__texto { width: 100%; max-width: 34em; }
  .leitor__abertura { font-size: clamp(38px, 10.5vw, 56px); }
  .leitor__historia p { font-size: clamp(17.5px, 4.6vw, 21px); line-height: 1.7; }
  .leitor__topo { padding: 14px 20px; background: var(--peca); }
  .leitor__campanha { height: 28px; }
  .leitor__nav { padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--peca); align-items: center; }
  .leitor__seta-nome { font-size: 16px; max-width: 38vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 420px) {
  .leitor__fechar span:first-child { display: none; }
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
}