/* Flores para Habib — the shell: palette, type, the "abrir" gate, the entrance and the garden path (BRIEF.md). */
:root {
  /* daylight fairy-garden palette (BRIEF.md, 2026-11-06) */
  --creme: #F7F1E3; --musgo: #6E8B4E; --salvia: #A8B89A; --rosa: #E8A9B8; --lilas: #B7A3CF; --agua: #A9D9D6;
  --sol: #E9C46A; --hibisco: #C8243C; --madeira: #7A5A43; --tinta: #3E3A35;
  /* older names kept as aliases so every part reads the same tokens */
  --noite: var(--creme); --papel: #FFFCF4; --folha: var(--musgo); --dourado: var(--madeira); --petala: var(--rosa); --vagalume: var(--sol);
  --f-titulo: 'Cormorant Garamond', Georgia, serif; --f-texto: 'Lora', Georgia, serif; --f-mao: 'Caveat', 'Segoe Print', cursive;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --caminho-h: 72px;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* read by screen readers only */   /* author display rules must never resurrect a hidden element */
html, body { margin: 0; min-height: 100%; }
body { background: var(--creme); color: var(--tinta); font: 400 17px/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px dotted var(--hibisco); outline-offset: 3px; }
p, h1, h2, h3, li { text-wrap: pretty; }
.abrir-convite, .titulo, .enviada-sub, .resultado, .bilhete-texto { text-wrap: balance; }
h1, h2 { font-family: var(--f-titulo); font-style: italic; font-weight: 600; line-height: 1.15; margin: 0; }

/* the label buttons: a paper tag with a clipped corner, like a sweet's wrapping */
.etiqueta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 26px 10px 22px;
  background: var(--papel); color: var(--hibisco); border: 0; text-decoration: none; font: 600 15px/1 var(--f-texto); font-variant: small-caps; letter-spacing: .04em;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); filter: drop-shadow(0 3px 6px rgb(122 90 67 / .28)); transition: transform 300ms var(--curva); }
@media (hover: hover) { .etiqueta:hover { transform: translateY(-2px); } }
.etiqueta:active, .caminho a:active .ico, .flor-carta:active img, .tocar-ninfa:active, .selo-puxar:active .selo { transform: scale(.95); transition-duration: 90ms; }
.etiqueta.clara { background: rgb(255 252 244 / .72); color: var(--madeira); filter: drop-shadow(0 2px 4px rgb(122 90 67 / .18)); }
.etiqueta.grande { min-height: 56px; padding: 14px 40px 14px 34px; font-size: 20px; }

/* ---------- the "abrir" gate */
#abrir { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--creme); }
.abrir-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(5px) saturate(.9); opacity: .55; }
.abrir-caixa { position: relative; display: grid; justify-items: center; gap: 18px; padding: 24px; text-align: center; }
.abrir-convite { margin: 0; font: italic 600 clamp(26px, 6vw, 40px)/1.2 var(--f-titulo); color: var(--tinta); text-shadow: 0 0 18px rgb(255 252 244 / .9); max-width: 20ch; }
.abrir-dica { margin: 0; font: 500 22px var(--f-mao); color: var(--hibisco); }

/* ---------- top bar: sound and the gardener's "Habib is here" */
.topo { position: fixed; top: 0; right: 0; left: 0; z-index: 20; display: flex; justify-content: flex-end; align-items: center; gap: 12px; padding: 10px 14px; pointer-events: none; }
.topo > * { pointer-events: auto; }
body:not(.aberto) .topo, body:not(.aberto) .caminho, body:not(.aberto) .rodape, body.no-curta .topo, body.no-curta .caminho, body.no-curta .rodape { display: none; }
.som { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(122 90 67 / .35); background: rgb(255 252 244 / .85); display: grid; place-items: center; }
.som span { width: 20px; height: 20px; background: var(--madeira);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 7h3l5-4v14l-5-4H3z'/%3E%3Cpath d='M14 6.5a5 5 0 0 1 0 7M16.5 4a8.5 8.5 0 0 1 0 12' stroke='black' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.som[aria-pressed="false"] span { opacity: .45; }
.aviso-aqui { margin: 0; padding: 6px 14px 6px 28px; border-radius: 999px; background: rgb(255 252 244 / .94); border: 1px solid var(--musgo); color: var(--musgo); font: 600 14px var(--f-texto); position: relative; }
.aviso-aqui::before { content: ''; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--musgo); animation: pulsa 2s ease-in-out infinite; }

/* ---------- the opening short fills the screen (curta.css draws it) */
.curta { position: fixed; inset: 0; z-index: 45; background: #5E5A8E; }
.pular { position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid rgb(246 238 220 / .45); background: rgb(59 56 100 / .55); color: #FFF9EC; font: 600 14px var(--f-texto); font-variant: small-caps; }

/* ---------- the stage and every scene */
#palco { min-height: 100svh; outline: none; }
.cena { position: relative; min-height: 100svh; padding: 72px 16px calc(var(--caminho-h) + 28px); }
.cena .fundo { position: absolute; inset: 0; z-index: -1; }
.cena .fundo img { width: 100%; height: 100%; object-fit: cover; }
.sinal { display: inline-block; height: 1.05em; width: auto; vertical-align: -.18em; margin: 0 .06em; }
.titulo { font-size: clamp(30px, 7vw, 44px); color: var(--hibisco); }
.em-breve { display: grid; place-content: center; gap: 12px; text-align: center; }

/* ---------- entrance */
.entrada { display: grid; align-content: start; justify-items: center; text-align: center; }
.entrada .veu { background: linear-gradient(rgb(247 241 227 / .72), rgb(247 241 227 / 0) 40%, rgb(247 241 227 / 0) 70%, rgb(247 241 227 / .8)); }
.entrada .fundo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgb(247 241 227 / .7), rgb(247 241 227 / 0) 42%, rgb(247 241 227 / 0) 72%, rgb(247 241 227 / .85)); }
.entrada-texto { display: grid; justify-items: center; gap: 10px; max-width: 640px; animation: sobe 1100ms var(--curva) both; }
.entrada .titulo { font-size: clamp(38px, 10vw, 64px); text-shadow: 0 0 22px rgb(255 252 244 / .95); }
.saudacao { margin: 0; font: 500 clamp(24px, 6vw, 30px) var(--f-mao); color: var(--tinta); text-shadow: 0 0 14px rgb(255 252 244 / .95); }
.contador-linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.contador { margin: 0; font: 600 21px var(--f-titulo); font-variant-numeric: oldstyle-nums; color: var(--madeira); letter-spacing: .02em; text-shadow: 0 0 12px rgb(255 252 244 / .95); }
.rever-curta { min-height: 44px; padding: 8px 18px 8px 22px; font-size: 14px; }
.rolo { width: 22px; height: 18px; background: url(/img/passaro.webp) center / contain no-repeat; }
.novidades { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.novidades li { padding: 6px 14px; border-radius: 999px; background: rgb(255 252 244 / .9); color: var(--tinta); font-size: 15px; box-shadow: 0 2px 8px rgb(122 90 67 / .15); }
.novidades li::before { content: '✦ '; color: var(--sol); }
.entrar { margin-top: auto; }
.entrada .entrar-caixa { position: absolute; left: 0; right: 0; bottom: calc(var(--caminho-h) + 28px + env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 10px; }
.entrada .contador { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 999px; background: rgb(255 252 244 / .82); text-shadow: none; }
.entrada .rever-curta { min-height: 48px; }

/* ---------- garden path: bottom bar on the phone, doors along the bottom on the desktop */
.caminho { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: calc(var(--caminho-h) + env(safe-area-inset-bottom)); padding: 6px 4px env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(6, 1fr); background: linear-gradient(rgb(247 241 227 / 0), rgb(247 241 227 / .95) 30%); }
.caminho a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 48px; text-decoration: none; font: 500 19px/1 var(--f-mao); color: var(--madeira); }
.caminho a[aria-current] { color: var(--hibisco); }
.ico { width: 34px; height: 34px; background: center / contain no-repeat; transition: transform 300ms var(--curva); }
@media (hover: hover) { .caminho a:hover .ico { transform: translateY(-3px); } }
.caminho a[aria-current] .ico { transform: translateY(-3px); }
.rodape { position: fixed; z-index: 21; left: 10px; top: 10px; }
.jardineiro-link { display: grid; place-items: center; width: 44px; height: 44px; color: rgb(200 36 60 / .45); text-decoration: none; font-size: 18px; }

/* ---------- notes and paper sheets */
.bilhete { position: fixed; z-index: 60; left: 50%; bottom: calc(var(--caminho-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; width: max-content; max-width: 92vw;
  padding: 6px 20px 8px; border-radius: 22px; background: var(--papel); color: var(--tinta); font: 500 22px/1.25 var(--f-mao); text-align: center; text-wrap: balance; box-shadow: 0 6px 18px rgb(122 90 67 / .28); animation: sobe 300ms var(--curva) both; }
.bilhete.erro { color: var(--hibisco); }
.bilhete.no-ceu { bottom: auto; top: 112px; white-space: nowrap; font-size: clamp(18px, 5vw, 22px); padding: 6px 16px; }
@media (min-width: 900px) { .bilhete.no-ceu { top: 162px; } }
.bilhete.sai { opacity: 0; transition: opacity 300ms; }
.folha-fundo { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; background: rgb(62 58 53 / .35); backdrop-filter: blur(2px); }
.folha { position: relative; width: min(100%, 640px); max-height: calc(100svh - 32px); overflow: auto; padding: 36px 26px 28px; background: var(--papel); color: var(--tinta);
  box-shadow: 0 12px 40px rgb(0 0 0 / .45); animation: desdobra 600ms var(--curva) both; transform-origin: 50% 0; }
.folha.pequena { width: min(100%, 380px); text-align: center; }
.folha-fechar { position: absolute; top: 4px; right: 6px; width: 44px; height: 44px; border: 0; background: none; color: var(--tinta); font-size: 28px; line-height: 1; }
.folha-titulo { color: var(--hibisco); margin-bottom: 12px; font-size: 30px; }
.folha.sai, .folha-fundo.sai, .folha-fundo.sai .folha { opacity: 0; transition: opacity 300ms; }
.botoes { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }

@keyframes sobe { from { opacity: 0; transform: translateY(14px); } }
@keyframes desdobra { 0% { opacity: 0; transform: perspective(900px) rotateX(-70deg); } 60% { opacity: 1; } 100% { transform: none; } }
@keyframes pulsa { 50% { opacity: .55; } }

@media (min-width: 900px) {
    :root { --caminho-h: 104px; }
  .caminho { left: 0; right: 0; bottom: 0; height: calc(var(--caminho-h) + 36px); padding: 36px max(5vw, calc(50vw - 420px)) 10px; align-items: end;
    background: linear-gradient(rgb(247 241 227 / 0), rgb(247 241 227 / .82) 45%, rgb(247 241 227 / .95)); }
  .caminho a { font-size: 22px; gap: 4px; }
  .ico { width: 58px; height: 58px; filter: drop-shadow(0 6px 4px rgb(70 52 34 / .22)); }
  .etiqueta, .etiqueta.clara { font-variant: normal; text-transform: uppercase; font-size: 15px; letter-spacing: .1em; min-height: 56px; padding: 14px 40px 14px 34px; }
  .etiqueta.grande { font-size: 17px; }
  .etiqueta.grande { font-size: 21px; min-height: 60px; }
  .rever-curta, .voltar { font-size: 14px !important; min-height: 48px !important; padding: 8px 22px 8px 26px !important; }
  .saudacao { font-size: 32px !important; }
  .titulo { font-size: 52px; }
  .entrada .titulo { font-size: 72px; }
  .legenda, .saudacao { font-size: 27px !important; }
  .contador { font-size: 26px; }
  .abrir-convite { max-width: 22ch; }
  .abrir-dica { font-size: 26px; }
  .cena { padding: 80px 40px calc(var(--caminho-h) + 40px); }
}

@media (max-width: 374px) { .caminho a { font-size: 17px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .aviso-aqui { animation: none; }
}

/* the garden path's painted icons */
.ico-estufa { background-image: url(/img/ico-estufa.webp); }
.ico-correio { background-image: url(/img/ico-correio.webp); }
.ico-doceria { background-image: url(/img/ico-doceria.webp); }
.ico-pote { background-image: url(/img/ico-pote.webp); }
.ico-fonte { background-image: url(/img/ico-fonte.webp); }
.ico-responder { background-image: url(/img/ico-responder.webp); }

/* every place's subtitle sits on a soft paper ribbon, so it reads over any part of the painting */
.cena .legenda, .legenda-ceu, .presenca-correio:not(:empty) { display: inline-block; justify-self: center; padding: 1px 14px 3px; border-radius: 999px;
  background: rgb(255 252 244 / .8); box-shadow: 0 1px 6px rgb(122 90 67 / .12); text-shadow: none !important; }
@media (min-width: 900px) { .legenda-ceu { font-size: 25px !important; } }
/* the signature on every note: a handwritten dash in wood brown */
.assinatura, .assina { font-family: var(--f-mao) !important; color: var(--madeira) !important; }

/* changing place: a soft paper wash covers the swap, the path stays */
.veu-troca { position: fixed; inset: 0; z-index: 18; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 42%, #FFFCF4, #F7F1E3 55%, #EBDCC4), var(--creme);
  transition: opacity 380ms var(--curva); }
.veu-troca::after { content: ''; position: absolute; inset: 0; background: url(/img/grao.png); opacity: .5; }
.veu-troca.cobre { opacity: 1; transition-duration: 230ms; }
/* back to the entrance (where "rever o curta" lives), from every place */
.voltar { margin-right: auto; margin-left: 44px; min-height: 48px; padding: 6px 16px 6px 22px; font-size: 14px; }
body.na-entrada .voltar, body.no-curta .voltar { visibility: hidden; }
/* while breathing, the sound button stays reachable above the veil (the breathing music can be turned off) */
body:has(.respirar) .topo, body:has(.respirar) .rodape { z-index: 41; }
body:has(.respirar) .voltar { visibility: hidden; }
.som.chama { animation: chama-som 1.4s var(--curva) 2; }
@keyframes chama-som { 50% { transform: scale(1.15); box-shadow: 0 0 0 6px rgb(200 36 60 / .2); } }

@media (max-height: 500px) and (orientation: landscape) {
  :root { --caminho-h: 56px; }
  .caminho a { font-size: 15px; gap: 0; }
  .ico { width: 28px; height: 28px; }
  .cena { padding-top: 56px; }
  .titulo { font-size: 28px; }
  .entrada .titulo { font-size: 34px; }
  .entrada .entrar-caixa { gap: 4px; bottom: calc(var(--caminho-h) + 8px); }
  .entrada .novidades { display: none; }
  .entrada-texto { gap: 4px; }
  .saudacao { font-size: 22px; }
}
/* behind each place's title, a soft breath of paper: the gold finials and arches of the paintings stay, quieter */
.estufa-topo, .fonte-topo, .doceria-topo, .pote-topo, .responder-topo, .correio-topo { position: relative; isolation: isolate; }
.fonte-topo::before, .doceria-topo::before, .pote-topo::before, .responder-topo::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(150%, 92vw); height: 210%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 252 244 / .85), rgb(255 252 244 / .55) 55%, rgb(255 252 244 / 0)); }
.cena .legenda, .legenda-ceu { border-radius: 16px; }
.entrada { padding-top: 60px; }
.entrada-texto { gap: 8px; }
@media (min-width: 900px) { .entrada { padding-top: 40px; } .entrada-texto { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .veu-troca, .veu-troca.cobre { transition-duration: 160ms !important; } }