/* ============================================================
   MOTION PREMIUM — preloader, parallax, menu de ecrã inteiro,
   cortina de transição, revelações escalonadas.
   Carregado DEPOIS de styles.css (vence onde sobrepõe).
   Tudo em transform/opacity (60fps). Respeita "reduzir movimento".
   ============================================================ */

/* ---------------- PRELOADER (entrada) — brasão a preencher = % ---------------- */
#preloader {
  position: absolute; inset: 0; z-index: 130;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--cream);
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out);
}
#preloader .pl-c { display: flex; flex-direction: column; align-items: center; gap: 22px; }
#preloader .pl-crest { position: relative; width: 124px; height: 152px; }
#preloader .pl-crest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
#preloader .pl-ghost { opacity: .12; filter: grayscale(1); }
#preloader .pl-fill { opacity: 1; clip-path: inset(100% 0 0 0); transition: clip-path .18s linear; }
#preloader .pl-cap { font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); }
#preloader .pl-line { width: 124px; height: 2px; background: rgba(26,36,23,.10); overflow: hidden; border-radius: 2px; }
#preloader .pl-line i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .18s linear; }
#preloader.lift { opacity: 0; transform: scale(1.05); pointer-events: none; }
#preloader.gone { display: none; }

/* ---------------- SPLASH — entrada escalonada ---------------- */
#splash .splash-kicker, #splash .splash-title, #splash .splash-actions, #splash .splash-official {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .85s var(--ease-out);
}
#splash.ready .splash-kicker  { opacity: 1; transform: none; transition-delay: .05s; }
#splash.ready .splash-title   { opacity: 1; transform: none; transition-delay: .16s; }
#splash.ready .splash-actions { opacity: 1; transform: none; transition-delay: .32s; }
#splash.ready .splash-official{ opacity: 1; transform: none; transition-delay: .46s; }

/* ---------------- HOME — parallax + revelação cinematográfica ---------------- */
.hero-full img { will-change: transform; }
/* grelha de categorias entra escalonada */
.cat-grid.reveal .cat-tile { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .55s var(--ease-out); }
.cat-grid.reveal.in .cat-tile { opacity: 1; transform: none; }
.cat-grid.reveal.in .cat-tile:nth-child(1){transition-delay:.03s}
.cat-grid.reveal.in .cat-tile:nth-child(2){transition-delay:.07s}
.cat-grid.reveal.in .cat-tile:nth-child(3){transition-delay:.11s}
.cat-grid.reveal.in .cat-tile:nth-child(4){transition-delay:.15s}
.cat-grid.reveal.in .cat-tile:nth-child(5){transition-delay:.19s}
.cat-grid.reveal.in .cat-tile:nth-child(6){transition-delay:.23s}
.cat-grid.reveal.in .cat-tile:nth-child(7){transition-delay:.27s}
.cat-grid.reveal.in .cat-tile:nth-child(8){transition-delay:.31s}
.cat-grid.reveal.in .cat-tile:nth-child(9){transition-delay:.35s}
.cat-tile { transition: transform .35s var(--ease-spring), background .2s; }
.cat-tile:active { transform: scale(.95); }
/* imagem revela-se por baixo de uma máscara (clip) */
.reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--ease-out); }
.reveal-img.in { clip-path: inset(0 0 0 0); }

/* ---------------- MENU DE ECRÃ INTEIRO + HAMBÚRGER ANIMADO ---------------- */
.home-menu .ham { position: relative; display: block; width: 22px; height: 16px; }
.home-menu .ham i {
  position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .38s var(--ease-out), opacity .2s ease;
}
.home-menu .ham i:nth-child(1) { top: 0; }
.home-menu .ham i:nth-child(2) { top: 7px; }
.home-menu .ham i:nth-child(3) { top: 14px; }
body.drawer-open .home-menu .ham i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.drawer-open .home-menu .ham i:nth-child(2) { opacity: 0; transform: translateX(-8px); }
body.drawer-open .home-menu .ham i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* o painel lateral passa a overlay de ecrã inteiro com revelação em círculo */
.drawer {
  width: 100%; max-width: none; transform: none;
  clip-path: circle(0% at 36px calc(36px + var(--safe-t)));
  transition: clip-path .6s var(--ease-out);
  padding: calc(80px + var(--safe-t)) 30px calc(30px + var(--safe-b));
  justify-content: flex-start;
}
body.drawer-open .drawer { transform: none; clip-path: circle(150% at 36px calc(36px + var(--safe-t))); }
.drawer-veil { display: none; }
.drawer-close {
  position: absolute; top: calc(20px + var(--safe-t)); right: 24px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: none;
  background: rgba(26,36,23,.07); color: var(--ink); display: flex; align-items: center; justify-content: center;
}
.drawer-close:active { transform: scale(.92); }
/* conteúdo do menu entra suave quando abre */
.drawer .brand, .drawer #drawer-nav, .drawer .drawer-lang, .drawer .drawer-legal, .drawer .foot {
  opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease-out), transform .55s var(--ease-out);
}
body.drawer-open .drawer .brand     { opacity: 1; transform: none; transition-delay: .16s; }
body.drawer-open .drawer #drawer-nav{ opacity: 1; transform: none; transition-delay: .24s; }
body.drawer-open .drawer .drawer-lang { opacity: 1; transform: none; transition-delay: .34s; }
body.drawer-open .drawer .drawer-legal{ opacity: 1; transform: none; transition-delay: .40s; }
body.drawer-open .drawer .foot      { opacity: 1; transform: none; transition-delay: .46s; }
/* menu maior e mais respirado em ecrã inteiro */
.drawer .drawer-secs a { font-size: 16px; padding: 13px 10px; }
.drawer .drawer-cats .dc { padding: 13px 12px; }

/* CREME como cor predominante do menu (em vez do verde) */
.drawer { background: var(--cream); color: var(--ink); }
.drawer .brand h2 { color: var(--ink); }
.drawer .brand p { color: var(--ink-2); }
.drawer .brand .logo { background: var(--cream-2); }
.drawer .brand .logo img { object-fit: contain; padding: 5px; }
.drawer-lbl { color: var(--forest); opacity: .85; }
.drawer .mode-switch { background: var(--cream-2); }
.drawer-cats .dc { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.drawer-cats .dc:active { background: var(--cream-2); }
.drawer-cats .dc-ic { color: var(--forest); }
.drawer-secs a { color: var(--ink); }
.drawer-secs a svg { color: var(--forest); }
.drawer-secs a:active { background: var(--cream-2); }
.drawer .drawer-lbl-local { color: var(--gold); }
.drawer-local a { color: var(--ink); }
.drawer .drawer-lang { border-top-color: rgba(26,36,23,.10); }
.drawer .drawer-lang .dl-opt { color: var(--ink-2); }
.drawer .drawer-lang .dl-opt.on { background: var(--forest); color: #fff; }
.drawer .drawer-legal a { color: var(--ink-2); }
.drawer .drawer-legal span { color: var(--ink-3); }
.drawer .foot { color: var(--ink-3); }

/* ---------------- TRANSIÇÃO ENTRE PÁGINAS (sem cor, "spatial") ----------------
   Cada página entra com um fade + leve aproximação (scale) + subida.
   Substitui a cortina dourada. */
#screen.nav-anim { animation: vm-screen-in .5s var(--ease-out); }
@keyframes vm-screen-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- FICHA DO LOCAL — parallax + título cinético ---------------- */
.detail-hero img { will-change: transform; }
.detail-hero .h-title { overflow: hidden; }
.detail-hero .h-title h1 { animation: vm-title-up .85s var(--ease-out) both; }
@keyframes vm-title-up { from { transform: translateY(108%); opacity: 0; } to { transform: none; opacity: 1; } }
.detail-hero .h-title .badge { animation: vm-fade-up .6s var(--ease-out) both; animation-delay: .12s; }
.detail-body > * { animation: vm-fade-up .55s var(--ease-out) both; }
.detail-body > *:nth-child(1){animation-delay:.06s} .detail-body > *:nth-child(2){animation-delay:.10s}
.detail-body > *:nth-child(3){animation-delay:.14s} .detail-body > *:nth-child(4){animation-delay:.18s}
.detail-body > *:nth-child(n+5){animation-delay:.22s}
@keyframes vm-fade-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }

/* imagem-fantasma da "foto que cresce" (shared element) */
.vm-ghost { position: absolute; z-index: 56; margin: 0; object-fit: cover; will-change: left, top, width, height; pointer-events: none; }

/* lista de resultados (Explorar/Agenda/Roteiros) — entra escalonada */
.list .vista-card.reveal, .ev-list .event-card.reveal { transition: opacity .55s var(--ease-out), transform .6s var(--ease-out); }

/* ---------------- POLIMENTO DO INTERIOR (fotos, toque, hero editorial) ---------------- */
/* a foto "assenta" (zoom suave) quando o cartão se revela */
.vista-card.reveal img, .story-card.reveal img, .event-card.reveal .ph img { transition: transform 1s var(--ease-out); }
.vista-card.reveal:not(.in) img, .story-card.reveal:not(.in) img, .event-card.reveal:not(.in) .ph img { transform: scale(1.07); }
.event-card .ph { overflow: hidden; }
/* feedback tátil consistente (mola) ao tocar nos cartões */
.vista-card, .event-card, .route-card, .story-card, .ai-card, .spot-card {
  transition: transform .35s var(--ease-spring), opacity .5s var(--ease-out), box-shadow .3s var(--ease);
}
.vista-card:active, .event-card:active, .route-card:active, .story-card:active, .ai-card:active, .spot-card:active { transform: scale(.975); }
/* hero editorial (A Nossa História) — entrada cinética + parallax */
.hist-hero img { will-change: transform; }
.hist-hero h1 { animation: vm-fade-up .8s var(--ease-out) both; }
.hist-hero .hist-kicker { animation: vm-fade-up .7s var(--ease-out) both; animation-delay: .06s; }

/* ---------------- Reduzir movimento ---------------- */
@media (prefers-reduced-motion: reduce) {
  #preloader { display: none !important; }
  #splash .splash-kicker, #splash .splash-title, #splash .splash-actions, #splash .splash-official { opacity: 1 !important; transform: none !important; }
  .cat-grid.reveal .cat-tile { opacity: 1 !important; transform: none !important; }
  #screen.nav-anim { animation: none !important; }
  .reveal-img { clip-path: none !important; }
  .detail-hero .h-title h1, .detail-hero .h-title .badge, .detail-body > * { animation: none !important; }
  .detail-hero img, .hist-hero img { transform: none !important; }
  .vm-ghost { display: none !important; }
  .vista-card.reveal img, .story-card.reveal img, .event-card.reveal .ph img { transform: none !important; }
  .hist-hero h1, .hist-hero .hist-kicker { animation: none !important; }
}