/* =========================================================
   ProjectYard — Indicador de carregamento L1 + Splash
   Copiado de prototype/loader.html e prototype/splash.html
   (SPEC: prototype/SPEC-splash-loader.md)
   ========================================================= */

/* ---- núcleo do spinner (3 tamanhos) ---- */
.py-loader { position: relative; display: flex; align-items: center; justify-content: center; }
.py-loader__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: py-spin 1s linear infinite; }
.py-loader__mark { display: flex; align-items: center; justify-content: center; background: #fff;
  border-radius: 22%; box-shadow: 0 6px 16px -8px rgba(35,49,64,.5); border: 1px solid rgba(35,49,64,.08); }
.py-loader__mark img { width: 76%; height: auto; display: block; }
@keyframes py-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .py-loader__ring { animation-duration: 2.4s; } }

.py-loader.lg { width: 96px; height: 96px; }  .py-loader.lg .py-loader__mark { width: 60px; height: 60px; }
.py-loader.md { width: 60px; height: 60px; }  .py-loader.md .py-loader__mark { width: 38px; height: 38px; }
.py-loader.sm { width: 30px; height: 30px; }  .py-loader.sm .py-loader__mark { width: 19px; height: 19px; }
.py-loader.sm .py-loader__mark { box-shadow: none; border: none; background: transparent; }

/* anel inline dentro de botões (sem emblema) */
.py-loader.sm.bare { width: 17px; height: 17px; flex-shrink: 0; }

.py-loading-text { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase; color: #a87c18; }
.py-loading-text i { font-style: normal; animation: py-fade 1.4s infinite; }
.py-loading-text i:nth-child(2) { animation-delay: .2s; } .py-loading-text i:nth-child(3) { animation-delay: .4s; }
@keyframes py-fade { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ---- overlay de ecrã (véu CLARO — nunca escurece) ---- */
.py-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; gap: 18px;
  align-items: center; justify-content: center; background: rgba(243,241,236,.80); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.py-overlay.show { opacity: 1; visibility: visible; }
:root[data-theme="dark"] .py-overlay { background: rgba(20,26,33,.78); }

/* botão em estado "a guardar" */
button.py-busy { opacity: .75; pointer-events: none; }

/* =========================================================
   Splash de arranque (uma vez por sessão)
   ========================================================= */
.py-splash { position: fixed; inset: 0; z-index: 2000; background: #f3f1ec; color: #233140;
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  transition: opacity .45s ease; }
.py-splash.done { opacity: 0; pointer-events: none; }

.py-splash__bg { position: absolute; inset: 0; pointer-events: none; }
.py-splash__grid { position: absolute; inset: -2px;
  background-image:
    linear-gradient(to right, rgba(35,49,64,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(35,49,64,.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(35,49,64,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(35,49,64,.075) 1px, transparent 1px);
  background-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 30%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 45%, #000 30%, transparent 78%); }
.py-splash__reticle { position: absolute; width: 230px; height: 230px; border: 1px solid rgba(35,49,64,.10); }
.py-splash__reticle.tl { top: 54px; left: 54px; border-right: none; border-bottom: none; }
.py-splash__reticle.br { bottom: 54px; right: 54px; border-left: none; border-top: none; }

.py-splash__stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.py-splash__logo { width: min(340px, 76vw); height: auto; display: block;
  filter: drop-shadow(0 18px 36px rgba(35,49,64,.14)); }

.py-splash__ldg { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-size: 12px;
  letter-spacing: .34em; text-transform: uppercase; color: #a87c18; }
.py-splash__ldg i { font-style: normal; animation: py-fade 1.4s infinite; }
.py-splash__ldg i:nth-child(2) { animation-delay: .2s; } .py-splash__ldg i:nth-child(3) { animation-delay: .4s; }

.py-splash__pbar { width: min(300px, 70vw); height: 4px; border-radius: 99px; background: rgba(35,49,64,.10); overflow: hidden; }
.py-splash__pbar i { display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, #d9a32a, #e6b540); animation: py-fill 2.6s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes py-fill { 0% { width: 6%; } 55% { width: 62%; } 85% { width: 88%; } 100% { width: 100%; } }

.py-splash__foot { position: absolute; bottom: 30px; z-index: 1; text-align: center; }
.py-splash__foot .tag { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: 600; font-size: 11px;
  letter-spacing: .32em; text-transform: uppercase; color: #6b7681; }
.py-splash__foot .tag b { color: #d9a32a; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .py-splash__pbar i { animation: none; width: 100%; }
  .py-splash__ldg i { animation: none; opacity: 1; }
}