/* =============================================================
   transitions.css — Transição de página (cortina), showloading
   animado (casa → chave) e cursor casinha de carregamento
   ============================================================= */

/* ---------- Cortina / Overlay de transição ---------- */
.ptl-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background:
    radial-gradient(1000px 500px at 20% 0%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(160deg, #10b981 0%, #059669 55%, #0284c7 120%);
  transform: translateY(0);
  transition: transform .75s cubic-bezier(.76,0,.24,1);
  will-change: transform;
}
.ptl-overlay.is-open { transform: translateY(-100%); pointer-events: none; }
/* remove totalmente da árvore quando escondida por tempo prolongado */
.ptl-overlay.is-gone { display: none; }

/* ---------- Loader casa → chave ---------- */
.ptl-loader { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ptl-svg { width: clamp(120px, 26vw, 168px); height: auto; overflow: visible; }
.ptl-svg .brick, .ptl-svg .roof, .ptl-svg .door { transform-box: fill-box; transform-origin: center; }

/* Tijolos da casa (montagem tipo Lego) */
.ptl-svg .brick { fill: #ffffff; }
.ptl-svg .brick:nth-child(odd) { fill: #eafff7; }
.ptl-svg .roof { fill: #fbbf24; }
.ptl-svg .door { fill: #0284c7; }

.ptl-house .brick,
.ptl-house .roof {
  animation: brickBuild 1.9s cubic-bezier(.22,1,.36,1) infinite;
  animation-delay: calc(var(--d) * .13s);
  opacity: 0;
}
.ptl-house .door { animation: doorPop 1.9s ease infinite; animation-delay: .95s; opacity: 0; }

@keyframes brickBuild {
  0%   { opacity: 0; transform: translateY(-18px) scale(.85); }
  12%  { opacity: 1; transform: translateY(0) scale(1); }
  68%  { opacity: 1; transform: translateY(0) scale(1); }
  84%,100% { opacity: 0; transform: translateY(-18px) scale(.85); }
}
@keyframes doorPop {
  0%,8% { opacity: 0; transform: scale(.4); }
  20%   { opacity: 1; transform: scale(1); }
  68%   { opacity: 1; }
  82%,100% { opacity: 0; }
}

/* Chave (aparece ao concluir) */
.ptl-key { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(-38deg) scale(.4); }
.ptl-key .key-ring { fill: none; stroke: #fbbf24; stroke-width: 7; }
.ptl-key .key-hole { fill: #059669; }
.ptl-key .key-shaft, .ptl-key .key-tooth { fill: #fbbf24; }

.ptl-loader.is-done .ptl-house { opacity: 0; transform: scale(.6); transition: opacity .35s ease, transform .35s ease; }
.ptl-loader.is-done .ptl-house * { animation: none; }
.ptl-loader.is-done .ptl-key {
  opacity: 1; transform: rotate(0) scale(1);
  transition: opacity .5s ease .2s, transform .7s cubic-bezier(.34,1.56,.64,1) .2s;
}

.ptl-text { color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .01em; opacity: .95; }
.ptl-loader .ptl-dots::after { content: '…'; animation: dots 1.4s steps(4,end) infinite; }
@keyframes dots { 0%{clip-path:inset(0 100% 0 0)} 100%{clip-path:inset(0 0 0 0)} }

/* ---------- Cursor casinha (mini loading junto ao ponteiro) ---------- */
.ptl-cursor {
  position: fixed; top: 0; left: 0; z-index: 10001; width: 30px; height: 30px;
  pointer-events: none; transform: translate(-50%, -50%);
  opacity: 0; transition: opacity .18s ease;
}
.ptl-cursor.is-on { opacity: 1; }
.ptl-cursor .ch { animation: cursorBob .85s ease-in-out infinite; transform-origin: center; }
.ptl-cursor .ring { transform-origin: center; animation: cursorSpin 1s linear infinite; }
@keyframes cursorBob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-3px) } }
@keyframes cursorSpin { to { transform: rotate(360deg) } }

/* Observação: a animação do showloading é intencional e solicitada;
   por isso não é desativada por prefers-reduced-motion. */