:root {
  --ink: #FFFFFF;
  --mute: rgba(255, 255, 255, .78);
  --line: rgba(255, 255, 255, .4);
  --display: 'Oswald', 'Bebas Neue', 'Arial Narrow', sans-serif;
  --sans: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --lento: cubic-bezier(.22, .7, .1, 1);
  --suave: cubic-bezier(.65, 0, .35, 1);
}
* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0; background: #5AA7DE; color: var(--ink);
  font: 300 17px/1.6 var(--sans); letter-spacing: .01em;
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
/* veio de madeira bem fraquinho por cima da cor da mesa */
body::before { content: ''; position: fixed; inset: -2%; z-index: 0; pointer-events: none;
  background: url(madeira.svg) center / cover no-repeat; mix-blend-mode: soft-light; opacity: .32; }
.camada, .ui, #abertura { z-index: 1; }
.ui { z-index: 50; } #abertura { z-index: 100; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:disabled { opacity: .25; cursor: default; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ---------- luz sobre a mesa ---------- */
#luz { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* rampa sutil de hue sobre qualquer cor de fundo: ceu em cima, dourado embaixo */
#rampa { position: absolute; inset: 0; mix-blend-mode: soft-light; pointer-events: none;
  background: linear-gradient(172deg, rgba(110, 170, 240, .38) 0%, rgba(110, 170, 240, 0) 42%, rgba(255, 196, 80, 0) 58%, rgba(255, 196, 80, .42) 100%); }
#sombra { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; opacity: .3; mix-blend-mode: multiply;
  filter: blur(6px);
  /* rampa: a sombra aparece so em manchas (luz da janela em cima a direita, um pedaco embaixo a esquerda) */
  --manchas: radial-gradient(ellipse 46% 52% at 74% 24%, #000 0%, rgba(0, 0, 0, .65) 38%, transparent 74%),
             radial-gradient(ellipse 34% 38% at 20% 80%, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .4) 40%, transparent 72%);
  -webkit-mask-image: var(--manchas); mask-image: var(--manchas); }
.foco { position: absolute; left: 0; top: 0; width: 90vmax; height: 90vmax; margin: -45vmax 0 0 -45vmax;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 244, 222, .22), rgba(255, 244, 222, .07) 55%, transparent);
  mix-blend-mode: soft-light; will-change: transform; opacity: 0; transition: opacity 2s; }
body:not(.intro) .foco { opacity: 1; }

/* ---------- camadas (mesa, calendario, paginas) ---------- */
.camada { position: fixed; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s var(--suave), visibility 0s .8s; }
body[data-estado="mesa"] #mesa, body[data-estado="cal"] #visor,
body[data-estado="sobre"] #sobre, body[data-estado="fotografos"] #fotografos, body[data-estado="contato"] #contato {
  opacity: 1; visibility: visible; transition: opacity .8s var(--suave) .15s, visibility 0s;
}
/* quando a capa chega no centro, o calendario de verdade toma o lugar dela, sem fade */
body[data-estado="cal"] #mesa { opacity: 0; visibility: hidden; transition: none; }
body[data-estado="cal"] #visor { transition: none; }
body.sem-fade #mesa, body.sem-fade #visor { transition: none !important; }
body.cobre #mesa { opacity: 1; visibility: visible; z-index: 2; }
#visor { cursor: zoom-out; } #visor #livro { cursor: grab; }

/* ---------- a mesa ---------- */
#mesa { display: grid; place-items: center; }
.capas { --c: 300px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5vw; padding-top: 4vh; }
/* sombra projetada (js/site.js projetar): borda seca, a peca escalada em volta do ponto do mouse.
   --alt = altura sobre a mesa (1 caindo, 0 encostada), animada junto com a queda */
@property --alt { syntax: '<number>'; inherits: true; initial-value: 0; }
.projecao { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; }
.projecao > i { position: absolute; inset: 0; background: currentColor; will-change: transform; }
.capa > img { position: relative; }
.capas.coluna { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 4vh; padding-top: 8vh; }
.capa { position: relative; width: var(--c); height: var(--c); padding: 0;
  transform: translateY(70vh) scale(1.9) rotate(calc(var(--i) * 6deg - 3deg)); opacity: 0; --alt: 1;
  transition: transform 1.5s cubic-bezier(.16, .84, .3, 1.06) calc(var(--i) * .3s), opacity .5s ease calc(var(--i) * .3s),
    --alt 1.5s cubic-bezier(.3, .45, .35, 1) calc(var(--i) * .3s);   /* a projecao longa fica mais tempo na tela */ }
.capa img { width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  transition: box-shadow .6s var(--lento), transform .6s var(--lento); }
.capas.assentou .capa { transform: none; opacity: 1; --alt: 0; }
.capas.assentou .capa:hover img { transform: scale(1.03); }   /* sobe da mesa (vem um pouco para a camera); a sombra abre em volta */
/* brilho: um swipe de luz diagonal passa pela capa logo antes de ela assentar (so na primeira entrada) */
.capa::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 44.5%, rgba(255, 255, 255, .4) 47%, rgba(255, 255, 255, .4) 53%, transparent 55.5%) 120% 0 / 300% 100% no-repeat;   /* metade da forca, borda mais viva */
  mix-blend-mode: screen; }
.capas.assentou.estreia .capa::after { animation: swipe 1s cubic-bezier(.45, 0, .25, 1) calc(var(--i) * .3s + .75s) both; }
/* clicou: a capa vem para a frente e o mesmo swipe de luz passa junto */
.capas.assentou .capa.escolhida::after { animation: swipe-zoom 1.1s cubic-bezier(.45, 0, .25, 1) .05s both; }
@keyframes swipe-zoom { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -20% 0; } }
@keyframes swipe { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -20% 0; } }
/* zoom: a capa escolhida vai para o centro; as outras escorregam para fora */
.capas.assentou .capa[style*="transform"] { transition: transform 1.15s var(--suave), opacity .9s var(--suave); }
.capa.escolhida { z-index: 2; }
.capa.escolhida img { transform: none !important; }

/* a frase da contracapa: aparece quando a marca sobe e some atras dos calendarios */
.citacao { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); margin: 0; width: min(36ch, 84vw);
  font: 300 clamp(20px, 2.1vw, 30px)/1.5 var(--sans); text-align: center; letter-spacing: .01em;
  opacity: 0; transition: opacity 1.4s var(--suave), transform 1.8s var(--suave); pointer-events: none; }
body.cita .citacao { opacity: 1; transform: translate(-50%, -50%); }
body.cita-sai .citacao { opacity: 0; transform: translate(-50%, -50%) scale(.97); transition: opacity 1.6s var(--suave) .5s, transform 2s var(--suave); }
.capas { position: relative; z-index: 1; }

/* ---------- o calendario ---------- */
#livro {
  --s: 300px;
  position: absolute; left: 50%; top: 50%;
  width: var(--s); height: calc(var(--s) * 2);
  transform: translate(-50%, -50%);
  cursor: grab; outline: none; touch-action: none;
  user-select: none; -webkit-user-select: none;
}
#livro.pegando { cursor: grabbing; }
.paginas, .folha-l { position: absolute; inset: 0; }
.folha-l img { position: absolute; left: 0; width: var(--s); height: var(--s); visibility: hidden; pointer-events: none; }
.folha-l .verso { top: 0; }
.folha-l .frente { top: var(--s); }
.folha-l img.on { visibility: visible; }
#carga { position: absolute; left: 50%; bottom: 14px; width: min(40vw, 320px); height: 1px; transform: translateX(-50%);
  background: rgba(255, 255, 255, .22); transition: opacity 1.2s ease .6s; }
#carga::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: 0 50%;
  transform: scaleX(var(--p, 0)); transition: transform .4s ease; }
#carga.cheia { opacity: 0; }
canvas.curl { position: absolute; pointer-events: none; z-index: 5; }

/* ---------- interface ---------- */
.ui { position: fixed; left: 4vw; right: 4vw; z-index: 50; display: flex; align-items: center; gap: 24px;
  font-size: 16px; letter-spacing: .03em; }
.ui-top { top: 0; height: calc(4vw + 80px); align-items: flex-start; padding-top: 4vw; pointer-events: none; }   /* margem de cima = margem do lado */
.ui-top > * { pointer-events: auto; }
.ui-bot { bottom: 0; height: 72px; }
.menu a, .ctrl, .ui-bot { opacity: 0; pointer-events: none; transition: opacity .6s var(--lento), transform .6s var(--lento), color .4s; }
body.ui-on .menu a, body.ui-on .ctrl { opacity: 1; pointer-events: auto; }
body.ui-on[data-estado="cal"] .ui-bot { opacity: 1; pointer-events: auto; }

.marca { display: block; width: 168px; position: relative; z-index: 2; }
.marca svg { display: block; width: 100%; height: auto; }
.marca svg * { fill: #fff !important; }
.marca > svg { position: relative; }
/* god rays de sombra da marca (js/site.js raios) */
.raios { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; }
.raios > div { position: absolute; inset: 0; will-change: transform; }
.raios svg * { fill: currentColor !important; }
body.intro .marca { visibility: hidden; }
.menu { position: absolute; left: 0; top: calc(4vw + 128px); display: flex; flex-direction: column; gap: 8px;
  font: 300 17px/1.4 var(--display); text-transform: uppercase; letter-spacing: .08em; }
.menu a { text-decoration: none; transform: translateX(-6px); color: rgba(255, 255, 255, .62); }
body.ui-on .menu a { transform: none; }
.menu a:nth-child(2) { transition-delay: .05s; } .menu a:nth-child(3) { transition-delay: .1s; } .menu a:nth-child(4) { transition-delay: .15s; }
.menu a.atual, .menu a:hover { color: #fff; }
.ctrl { margin-left: auto; display: flex; align-items: center; gap: 18px; font-family: var(--display); letter-spacing: .08em; }
.lang { opacity: .55; } .lang[aria-pressed="true"] { opacity: 1; }
.ico-cheia { display: block; width: 15px; height: 15px; border: 1px solid currentColor;
  -webkit-mask: linear-gradient(#000 0 0) top/ 40% 100% no-repeat, linear-gradient(#000 0 0) left/ 100% 40% no-repeat;
  -webkit-mask-composite: xor; mask-composite: exclude; }

.escolha, .folha { display: flex; align-items: center; gap: 16px; }
.escolha { font: 300 15px var(--display); text-transform: uppercase; letter-spacing: .08em; }
.folha { margin-left: auto; font: 300 18px var(--display); text-transform: uppercase; letter-spacing: .1em; }
#rotulo { min-width: 12ch; text-align: center; }
.folha button { font-family: var(--sans); font-size: 22px; line-height: 1; padding: 4px 8px; }
.tam { display: inline-flex; align-items: flex-end; gap: 7px; }
.tam .mini { overflow: visible; }
.tam .mini .ch, .tam .mini .tr { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tam .mini .tr { stroke-dasharray: 2 1.6; opacity: .75; }
.tam { opacity: .55; } .tam[aria-pressed="true"] { opacity: 1; }
.voltar { opacity: .85; } .voltar:hover { opacity: 1; }
.sep { width: 1px; height: 14px; background: currentColor; opacity: .4; }

/* ---------- abertura ---------- */
#abertura { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
body.intro #abertura { pointer-events: auto; cursor: pointer; }
.logo-intro { position: absolute; left: 50%; top: 50%; width: min(52vw, 520px); transform: translate(-50%, -50%);
  transform-origin: 0 0; }
.logo-intro svg { display: block; width: 100%; height: auto; overflow: visible; }
.logo-intro .f { fill: #fff; fill-opacity: 0; stroke: #fff; stroke-width: .5;
  stroke-dasharray: var(--L); stroke-dashoffset: var(--L); }
body.desenha .logo-intro .f {
  stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0;
  transition: stroke-dashoffset 2.2s cubic-bezier(.45, .05, .25, 1) var(--d),
              fill-opacity 1.1s ease calc(var(--d) + 1.5s), stroke-opacity .8s ease calc(var(--d) + 1.9s);
}
.brilho { transform: translateX(0) skewX(-22deg); }
body.brilha .brilho { transform: translateX(var(--anda)) skewX(-22deg); transition: transform 1.1s cubic-bezier(.55, 0, .25, 1); }
.estrela { position: absolute; width: 46px; height: 46px; fill: #fff; opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .9)); }
body.plim .estrela { animation: plim .9s cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes plim {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(45deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(110deg); }
}
.tunel { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.tunel * { fill: #fff !important; }
.logo-intro.sobe { transition: transform 1.3s cubic-bezier(.65, 0, .2, 1); }
body:not(.intro) #abertura { visibility: hidden; }

/* ---------- paginas de texto ---------- */
.pagina h2 { font: 300 clamp(44px, 5.4vw, 86px)/1.02 var(--display); text-transform: uppercase; letter-spacing: .01em; margin: 0 0 .5em; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6vw; padding: 0 8vw 0 calc(4vw + 220px); }
.dupla.invertida .foto { order: 2; }
.foto { margin: 0; height: 66vh; overflow: hidden; }
/* fotos das telas: o mesmo filete de sombra seca das capas, seguindo a luz do mouse */
.pagina .foto { position: relative; z-index: 1; }
.pagina > .projecao { inset: auto; opacity: 1; z-index: 0; }
.foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transition: transform 1.6s var(--lento); }
.texto { max-width: 32em; }
.texto p { font-size: 18px; line-height: 1.75; margin: 0 0 1.1em; }
.medidas { display: grid; grid-template-columns: minmax(150px, 210px) 1fr; gap: 3vw; align-items: end; margin-top: 3.5vh; }
.medidas { grid-template-columns: minmax(130px, 170px) 1fr; }
.medidas .ficha { margin: 0; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
.medidas .ficha dd { font-size: 14px; line-height: 1.45; }
.esquema { margin: 0; max-width: 210px; }
.esquema svg { display: block; width: 100%; height: auto; overflow: visible; }
.esquema .ch, .esquema .tr, .esquema .co { fill: none; stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.esquema .tr { stroke-dasharray: 4 3; opacity: .8; }
.esquema .co { opacity: .6; }
.esquema text { fill: #fff; font: 300 11px var(--display); letter-spacing: .06em; }
.esquema text.rot { font-size: 10px; opacity: .75; text-transform: uppercase; }
.esquema figcaption { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 300 12px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.esquema figcaption .ch-l, .esquema figcaption .tr-l { width: 22px; height: 0; border-top: 1px solid #fff; }
.esquema figcaption .tr-l { border-top-style: dashed; margin-left: 10px; }
.ficha { margin: 4vh 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 3vw; }
.ficha dt { color: var(--mute); font: 300 13px var(--display); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; }
.ficha dd { margin: 0; font-size: 15px; }
#contato { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 8vw; }
/* foto em cima do "get in touch" */
.foto-contato { width: min(54vh, 78vw); height: auto; aspect-ratio: 3 / 2; margin-bottom: 4.5vh; flex: none; }
#contato h2 { margin-bottom: .35em; }
#contato p { color: var(--mute); max-width: 30em; margin: 0 0 2.2em; }
.email { font: 300 clamp(28px, 4.2vw, 60px)/1.2 var(--display); letter-spacing: .02em; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--lento); }
.email:hover { background-size: 100% 1px; }
.email, .insta { display: inline-flex; align-items: baseline; gap: .4em; }
.ico { flex: none; fill: none; stroke: currentColor; }
/* envelope: canto reto, mesma espessura do traco da letra, da linha de base ate o topo do "t" */
.ico.env { width: .95em; height: .66em; stroke-width: 2.3; stroke-linejoin: miter; stroke-linecap: square; }
.insta .ico { width: 1em; height: 1em; stroke-width: 1.5; align-self: center; }
.insta { margin-top: 22px; font-size: clamp(20px, 2.2vw, 32px); opacity: .9; text-decoration: none; font-family: var(--display); letter-spacing: .08em; }

/* ---------- celular ---------- */
@media (max-width: 820px) {
  .marca { width: 112px; }
  .menu { top: 100px; font-size: 15px; }
  .dupla { grid-template-columns: 1fr; padding: 220px 6vw 40px; gap: 4vh; align-content: start; overflow-y: auto; }
  .dupla.invertida .foto { order: 0; }
  /* contato no celular igual as outras telas: foto logo abaixo do menu, texto embaixo, rola se precisar */
  #contato { justify-content: flex-start; padding: 220px 6vw 40px; overflow-y: auto; }
  #contato { overflow-x: hidden; }
  .email { font-size: min(28px, 6.3vw); max-width: 100%; }   /* o e-mail inteiro cabe na largura do iPhone */
  .foto-contato { width: 100%; }
  .foto { height: 30vh; }
  .medidas { grid-template-columns: 1fr; gap: 4vh; }
  .esquema { max-width: 230px; }
  .ui-bot { flex-wrap: wrap; justify-content: center; height: auto; padding-bottom: 10px; gap: 6px 18px; }
  .folha { margin-left: 0; }
}

.aviso-arquivo { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 200; padding: 10px 18px; background: rgba(0,0,0,.55); font-size: 14px; }

/* telas baixas (notebook 720-800px): o About tem que caber inteiro */
@media (min-width: 821px) and (max-height: 820px) {
  .pagina h2 { font-size: clamp(40px, 4.4vw, 64px); }
  .texto p { font-size: 16px; line-height: 1.6; margin-bottom: .9em; }
  .medidas { margin-top: 2vh; }
  .medidas .ficha { gap: 8px 20px; }
  .medidas .ficha dd { font-size: 13px; line-height: 1.4; }
  .esquema { max-width: 150px; }
}

/* na abertura so o botao de tela cheia aparece (fade in), para ver a vinheta em tela cheia */
body.intro .ui-top { z-index: 110; }
body.intro .menu, body.intro .marca { pointer-events: none; }
body.intro .ctrl { opacity: 1; pointer-events: auto; animation: aparece-cheia 1.2s .4s both; }
body.intro .ctrl .lang { opacity: 0; pointer-events: none; }
@keyframes aparece-cheia { from { opacity: 0; } }