/* ============================================================================
   intro.css — Abertura e convites (pré-login)
   Release 23 · "Um só plano"

   O vídeo de marca não corta: o logo desvanece, os anéis dourados baixam de
   intensidade, o fundo escuro fica, e o primeiro convite nasce da mesma
   energia. No fim, a luz dourada cresce até virar o bege do login.

   Convenção: prefixo `intro-`. Reutiliza os tokens de app.css/patient.css
   (--gold, --gold-light, --p-text, --p-max-w …); só declara aqui o que é
   exclusivo do fundo escuro, que não existe em mais lado nenhum do produto.

   Sequência (segundos, a partir do mount):
     0,2–1,3  cérebro acende      3,0–4,6  logo entra
     1,0–3,4  anéis saem dele     8,35–9,55 logo desvanece
     2,5–3,5  núcleo ignita       9,05     primeiro convite nasce
     ~3,95    explosão/flare
   ========================================================================= */

:root {
  --intro-ink-1: #141020;
  --intro-ink-2: #100d19;
  --intro-ink-3: #0b0912;
  --intro-gold-ring: rgba(233, 197, 124, .75);
  --intro-gold-warm: #f0d9a8;
  --intro-gold-hot: #fff6e2;
}

/* ---------------------------------------------------------------- raiz --- */
/* Ecrã inteiro, fora do fluxo: o #view do shell tem padding e largura máxima
   que não servem aqui. `fixed` também impede o scroll de fundo. */
.intro-root {
  position: fixed;
  inset: 0;
  z-index: 3000;
  overflow: hidden;
  background: linear-gradient(180deg, var(--intro-ink-1) 0%, var(--intro-ink-2) 55%, var(--intro-ink-3) 100%);
  color: #fff;
  font-family: var(--p-font, var(--font));
  -webkit-tap-highlight-color: transparent;
}
body.intro-lock { overflow: hidden; }

.intro-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Coluna central — o mesmo limite de largura do portal do paciente, para a
   arte não se esticar num monitor de 27". */
.intro-stage {
  position: absolute;
  inset: 0;
  margin: 0 auto;
  max-width: var(--p-max-w, 520px);
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------------- abertura --- */
.intro-splash {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  text-align: center;
  pointer-events: none;
}
.intro-brain {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 210px;
  max-width: 62vw;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: opacity, transform, filter;
}
.intro-logo {
  width: 268px;
  max-width: 74vw;
  opacity: 0;
  transform: scale(.62);
  will-change: opacity, transform;
}
.intro-logo img { width: 100%; height: auto; display: block; }
.intro-vdd {
  position: absolute;
  left: 0; right: 0;
  bottom: 34px;
  opacity: 0;
  font-size: 9.5px;
  letter-spacing: .34em;
  color: rgba(240, 217, 168, .55);
}
/* Barra do topo: idiomas + Saltar. Ambos desvanecem juntos no fim da
   abertura de marca (ver views/intro.js::paintSplash). */
.intro-topbar {
  position: absolute;
  transition: opacity .4s;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  right: 18px;
  left: 18px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  pointer-events: auto;
}

/* Quatro pílulas pequenas. Deliberadamente discretas: a arte é que manda, e
   isto é uma correção para quem o navegador entregou no idioma errado — não
   uma decisão que se peça a toda a gente. */
.intro-langs { display: flex; gap: 3px; }
.intro-lang {
  padding: 5px 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .40);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.intro-lang:hover { color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .07); }
.intro-lang.on {
  color: #2a2340;
  background: var(--gold-light, #f0d9a8);
}

.intro-skip {
  z-index: 4;
  padding: 8px 15px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  color: rgba(255, 255, 255, .72);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .2s, opacity .4s;
}
.intro-skip:hover { background: rgba(255, 255, 255, .13); }

/* ------------------------------------------------------------- convites --- */
.intro-card {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: 0 26px calc(env(safe-area-inset-bottom, 0px) + 30px);
}
.intro-card.on { display: flex; }

.intro-art {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-top: calc(env(safe-area-inset-top, 0px) + 44px);
}
.intro-card.on .intro-art { animation: intro-emerge-art 1.15s cubic-bezier(.2, .8, .25, 1) both; }

.intro-h {
  margin: 0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(25px, 7.2vw, 31px);
  line-height: 1.22;
  letter-spacing: -.01em;
  white-space: pre-line;
}
.intro-p {
  margin: 0 0 22px;
  font-size: 13.6px;
  line-height: 1.68;
  color: rgba(255, 255, 255, .62);
  max-width: 42ch;
}
.intro-card.on .intro-h { animation: intro-emerge-up .85s cubic-bezier(.2, .8, .25, 1) .32s both; }
.intro-card.on .intro-p { animation: intro-emerge-up .85s cubic-bezier(.2, .8, .25, 1) .46s both; }

.intro-dots { display: flex; gap: 7px; margin-bottom: 20px; }
.intro-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  transition: background .3s, width .3s;
}
.intro-dots i.on { background: var(--gold, #d9ab52); width: 18px; border-radius: 99px; }
.intro-card.on .intro-dots { animation: intro-emerge-up .7s ease-out .60s both; }

.intro-act { display: flex; gap: 10px; align-items: center; }
.intro-card.on .intro-act { animation: intro-emerge-up .7s ease-out .70s both; }
.intro-btn {
  flex: 1;
  padding: 13px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--gold, #d9ab52);
  color: #2a2340;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(217, 171, 82, .28);
  transition: transform .15s, box-shadow .2s;
}
.intro-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(217, 171, 82, .36); }
.intro-btn:active { transform: translateY(0); }
.intro-btn.ghost {
  flex: 0 0 auto;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: none;
  font-weight: 500;
}
.intro-btn.ghost:hover { background: rgba(255, 255, 255, .06); transform: none; }

@keyframes intro-emerge-art { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes intro-emerge-up  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ============================ 1 · A PERGUNTA ==============================
   O ponto aparece sozinho, dele desabrocha o "?" da VDD, e do mesmo ponto
   saem os anéis da Centelha. O centro (45,6% × 96,2%) é a coordenada exacta
   do ponto no ficheiro original da marca — não é um valor estético.
   ========================================================================= */
.intro-q {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 206px;
  height: 309px;
  max-width: 58vw;
}
/* Os anéis do vídeo continuam a girar cerca de um segundo e travam. */
.intro-q-spin { position: absolute; left: 45.6%; top: 96.2%; width: 0; height: 0; }
.intro-q-spin i {
  position: absolute;
  left: 50%; top: 50%;
  border-radius: 50%;
  border: 1.6px solid transparent;
  border-top-color: var(--intro-gold-ring);
  border-right-color: rgba(233, 197, 124, .28);
  animation: intro-spinstop .95s cubic-bezier(.06, .75, .2, 1) both,
             intro-spinfade 1.15s ease-out both;
}
.intro-q-spin i:nth-child(1) { width: 150px; height: 150px; margin: -75px 0 0 -75px; animation-delay: 0s, 0s; }
.intro-q-spin i:nth-child(2) { width: 250px; height: 250px; margin: -125px 0 0 -125px; animation-duration: 1.05s, 1.25s; }
.intro-q-spin i:nth-child(3) { width: 360px; height: 360px; margin: -180px 0 0 -180px; animation-duration: 1.15s, 1.35s; }
@keyframes intro-spinstop { from { transform: rotate(-560deg); } to { transform: rotate(0deg); } }
@keyframes intro-spinfade { 0% { opacity: .9; } 62% { opacity: .55; } 100% { opacity: 0; } }

.intro-q-clip {
  position: absolute;
  inset: 0;
  clip-path: circle(0% at 45.6% 96.2%);
  animation: intro-bloom 2s cubic-bezier(.22, .85, .3, 1) .5s forwards;
}
.intro-q-clip img {
  width: 100%;
  display: block;
  opacity: .62;
  filter: drop-shadow(0 0 22px rgba(217, 171, 82, .4));
}
@keyframes intro-bloom { to { clip-path: circle(140% at 45.6% 96.2%); } }

.intro-q-dot {
  position: absolute;
  left: 45.6%; top: 96.2%;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffdf6, var(--intro-gold-warm));
  opacity: 0;
  transform: scale(.2);
  box-shadow: 0 0 30px 9px rgba(240, 217, 168, .75);
  animation: intro-dotin .6s cubic-bezier(.2, 1.5, .4, 1) .15s forwards,
             intro-dotpulse 3.4s ease-in-out 2.6s infinite;
}
@keyframes intro-dotin { to { opacity: 1; transform: scale(1); } }
@keyframes intro-dotpulse {
  0%, 100% { box-shadow: 0 0 30px 9px rgba(240, 217, 168, .70); }
  50%      { box-shadow: 0 0 40px 13px rgba(240, 217, 168, .95); }
}
.intro-q-ring {
  position: absolute;
  left: 45.6%; top: 96.2%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  border: 1px solid rgba(240, 217, 168, .8);
  opacity: 0;
  animation: intro-ripple 3.6s cubic-bezier(.2, .7, .3, 1) 2.5s infinite;
}
.intro-q-ring:nth-of-type(2) { animation-delay: 3.7s; }
.intro-q-ring:nth-of-type(3) { animation-delay: 4.9s; }
@keyframes intro-ripple {
  0%   { transform: scale(1); opacity: 0; }
  12%  { opacity: .85; }
  100% { transform: scale(11); opacity: 0; }
}

/* ============================= 2 · O CAMINHO ==============================
   Os três instrumentos pousam, um após o outro, com 13° a mais de rotação
   que se endireitam ao assentar. É a rotação que faz o olho ler "pousou"
   em vez de "apareceu".
   ========================================================================= */
.intro-tile {
  position: absolute;
  background: #fdfaf3;
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  opacity: 0;
  transform: rotate(var(--rot, 0deg));
  animation: intro-land .62s cubic-bezier(.18, .9, .28, 1) both;
  animation-delay: calc(.45s + var(--d, 0s));
}
.intro-tile svg { width: 100%; height: 100%; }
@keyframes intro-land {
  0%   { opacity: 0; transform: translateY(-34px) scale(1.14) rotate(calc(var(--rot, 0deg) + 13deg)); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(var(--rot, 0deg)); }
}

/* ============================= 3 · A DECISÃO ==============================
   Uma árvore a crescer. Cada galho nasce exactamente sobre a curva do ramo
   que o gera (os pontos foram calculados na curva de Bézier, não estimados).
   No fim acende uma luz de um lado e duas do outro — a única assimetria da
   árvore é a que carrega o sentido.
   ========================================================================= */
.intro-tree {
  position: absolute;
  left: 50%;
  top: 6px;
  transform: translateX(-50%);
  width: 292px;
  height: 370px;
  max-width: 78vw;
  overflow: visible;
}
.intro-tree .br {
  stroke: var(--intro-gold-ring);
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: intro-draw .6s cubic-bezier(.3, .6, .4, 1) both;
}
.intro-tree .w0 { stroke-width: 3.2; }
.intro-tree .w1 { stroke-width: 2.4; }
.intro-tree .w2 { stroke-width: 1.7; stroke: rgba(233, 197, 124, .62); }
.intro-tree .w3 { stroke-width: 1.1; stroke: rgba(233, 197, 124, .48); }
.intro-tree .w4 { stroke-width: .8;  stroke: rgba(233, 197, 124, .34); }
.intro-tree .d0 { animation-delay: .18s; animation-duration: .42s; }
.intro-tree .d1 { animation-delay: .50s; animation-duration: .60s; }
.intro-tree .d2 { animation-delay: .82s; animation-duration: .50s; }
.intro-tree .d3 { animation-delay: 1.02s; animation-duration: .42s; }
.intro-tree .d4 { animation-delay: 1.24s; animation-duration: .34s; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }

/* A copa: 28 pontos pequenos, deliberadamente a 62% — são copa, não são o
   assunto. Se ficarem tão fortes como os três grandes, a mensagem some. */
.intro-tree .tp {
  fill: #f6e6c2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 5px rgba(240, 217, 168, .8));
  animation: intro-tipin .42s ease-out both;
}
.intro-tree .t0 { animation-delay: 1.36s; }
.intro-tree .t1 { animation-delay: 1.44s; }
.intro-tree .t2 { animation-delay: 1.52s; }
.intro-tree .t3 { animation-delay: 1.60s; }
.intro-tree .t4 { animation-delay: 1.68s; }
@keyframes intro-tipin { from { opacity: 0; transform: scale(.3); } to { opacity: .62; transform: scale(1); } }

.intro-tree .nd {
  fill: var(--intro-gold-hot);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 10px rgba(240, 217, 168, .95));
  animation: intro-nodein .46s cubic-bezier(.2, 1.5, .4, 1) both;
}
.intro-tree .n0  { animation-delay: .48s;  fill: var(--intro-gold-warm); filter: drop-shadow(0 0 7px rgba(240, 217, 168, .7)); }
.intro-tree .nL  { animation-delay: 1.62s; }
.intro-tree .nR  { animation-delay: 1.76s; }
.intro-tree .nR2 { animation-delay: 1.88s; fill: #f6e6c2; }
@keyframes intro-nodein { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

/* ========================= a luz vira o bege ============================== */
/* Vive no <body>, não na view: o router esvazia o #view ao navegar para
   /login e a luz tem de sobreviver à troca de ecrã. */
.intro-dawn {
  position: fixed;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 42%,
    #fff8e8 0%, #f5e2b4 26%, var(--gold, #d9ab52) 52%, rgba(20, 16, 32, 0) 76%);
  animation: intro-dawn 1.5s cubic-bezier(.35, .15, .2, 1) forwards;
}
@keyframes intro-dawn {
  0%   { opacity: 0; transform: scale(.28); }
  38%  { opacity: 1; transform: scale(1.5); }
  58%  { opacity: 1; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(3.4); }
}

/* ============================ acessibilidade ============================= */
/* Com `reduce`, nada se move: tudo aparece no estado final. A sequência
   continua a existir (os três convites), só deixa de ser animada. */
@media (prefers-reduced-motion: reduce) {
  .intro-card.on .intro-art,
  .intro-card.on .intro-h,
  .intro-card.on .intro-p,
  .intro-card.on .intro-dots,
  .intro-card.on .intro-act { animation: none !important; }

  .intro-q-spin { display: none; }
  .intro-q-clip { clip-path: none !important; animation: none !important; }
  .intro-q-dot { opacity: 1 !important; transform: scale(1) !important; animation: none !important; }
  .intro-q-ring { display: none; }

  .intro-tile { opacity: 1 !important; transform: rotate(var(--rot, 0deg)) !important; animation: none !important; }

  .intro-tree .br { stroke-dashoffset: 0 !important; animation: none !important; }
  .intro-tree .tp { opacity: .62 !important; transform: none !important; animation: none !important; }
  .intro-tree .nd { opacity: 1 !important; transform: none !important; animation: none !important; }

  .intro-dawn { animation: intro-dawn-quiet .5s linear forwards; }
  @keyframes intro-dawn-quiet { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }
}

/* ============================== telas largas ============================= */
@media (min-width: 720px) {
  .intro-h { font-size: 34px; }
  .intro-p { font-size: 14.5px; }
  .intro-card { padding-bottom: 46px; }
}