/* ==========================================================================
   Royal Space — Hero animado: mensagem segmentada em 3D
   «Na Royal, você encontra o espaço ideal → agenda a sua reserva →
    usufrui dos melhores espaços da banda»
   Prisma triangular (3 faces) que roda no eixo X; telemóvel e cartões
   acompanham cada passo. Sem movimento com prefers-reduced-motion.
   ========================================================================== */

:root { --ease-roll: cubic-bezier(.65, 0, .2, 1); --story-ms: 4200ms; }

.hero-title { margin-bottom: 22px; font-size: clamp(2.2rem, 4.6vw, 3.9rem); }
.ht-lead { display: block; }

/* ---------- Prisma 3D ---------- */
.prism {
  --h: 2.35em;                         /* altura de cada face (2 linhas) */
  --r: calc(var(--h) * .2887);         /* apótema do triângulo: h / (2·tan 60°) */
  display: block; position: relative; height: var(--h); margin-top: .04em;
  font-size: .8em;                     /* a face mais longa cabe em 2 linhas */
  perspective: 1100px; perspective-origin: 50% 50%;
}
.prism-rot {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateZ(calc(var(--r) * -1)) rotateX(var(--angle, 0deg));
  transition: transform 1.1s var(--ease-roll);
}
.prism-face {
  position: absolute; inset: 0; display: flex; align-items: flex-start;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  color: var(--blue); line-height: 1.12;
  transition: opacity .6s var(--ease-out), filter .6s var(--ease-out);
}
.prism-face:nth-child(1) { transform: rotateX(0deg) translateZ(var(--r)); }
.prism-face:nth-child(2) { transform: rotateX(120deg) translateZ(var(--r)); }
.prism-face:nth-child(3) { transform: rotateX(240deg) translateZ(var(--r)); }
.prism-face:not(.is-active) { opacity: .35; filter: blur(1px); }
.prism-face .mark { position: relative; white-space: nowrap; }
.prism-face .mark::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .06em; height: .22em; z-index: -1;
  background: var(--yellow); border-radius: 6px; transform-origin: left; transform: scaleX(0);
  transition: transform .7s var(--ease-out) .55s;
}
.prism-face.is-active .mark::after { transform: scaleX(1); }

/* ---------- Passos explicativos ---------- */
.hero-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 30px; }
.hero-step {
  position: relative; width: 100%; text-align: left; padding: 14px 14px 16px; border-radius: 18px;
  background: var(--bg-soft); color: var(--ink); overflow: hidden;
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out), translate .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.hero-step:hover { translate: 0 -2px; }
.hero-step .hs-top { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .92rem; }
.hero-step .hs-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--blue); flex: none; transition: background-color .4s var(--ease-out), color .4s var(--ease-out), rotate .6s var(--ease-out); }
.hero-step .hs-ic svg { width: 17px; height: 17px; }
.hero-step small { display: block; margin-top: 6px; font-size: .76rem; line-height: 1.4; color: var(--muted); transition: color .4s var(--ease-out); }
.hero-step .hs-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(2, 60, 200, .08); }
.hero-step .hs-bar i { position: absolute; inset: 0; background: var(--yellow); transform-origin: left; transform: scaleX(0); }
.hero-step.is-active { background: var(--blue); color: #fff; box-shadow: 0 14px 30px -14px rgba(2, 60, 200, .8); }
.hero-step.is-active small { color: rgba(255, 255, 255, .78); }
.hero-step.is-active .hs-ic { background: var(--yellow); color: var(--blue-900); rotate: -8deg; }
.hero-step.is-active .hs-bar i { animation: hs-progress var(--story-ms) linear forwards; }
.hero-step.is-done .hs-bar i { transform: scaleX(1); }
.hero.is-paused .hero-step.is-active .hs-bar i { animation-play-state: paused; }
@keyframes hs-progress { to { transform: scaleX(1); } }

/* ---------- Telemóvel: ecrãs com flip 3D ---------- */
.phone-screens { position: relative; width: 100%; height: 100%; border-radius: 33px; overflow: hidden; perspective: 900px; background: var(--bg-soft); }
.phone-screens img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 33px;
  opacity: 0; transform: rotateY(-70deg) scale(.92); transform-origin: left center;
  transition: opacity .5s var(--ease-out), transform .9s var(--ease-out);
}
.phone-screens img.is-active { opacity: 1; transform: none; transform-origin: right center; }
.phone-screens img.is-leaving { opacity: 0; transform: rotateY(55deg) scale(.94); transform-origin: right center; }

/* ---------- Cartões flutuantes com estados ---------- */
.float-card .fc-states { position: relative; display: grid; perspective: 400px; }
.float-card .fc-state {
  grid-area: 1 / 1; opacity: 0; transform: translateY(10px) rotateX(-50deg); transform-origin: 50% 0;
  transition: opacity .45s var(--ease-out), transform .6s var(--ease-out);
}
.float-card .fc-state.is-active { opacity: 1; transform: none; transition-delay: .25s; }
.float-card .fc-ic-swap { position: relative; }
.float-card .fc-ic-swap svg { position: absolute; inset: 0; margin: auto; opacity: 0; scale: .6; transition: opacity .35s var(--ease-out), scale .5s var(--ease-out); }
.float-card .fc-ic-swap svg.is-active { opacity: 1; scale: 1; transition-delay: .25s; }
.float-card.pulse-in { animation: card-pop .7s var(--ease-out); }
@keyframes card-pop { 30% { scale: 1.06; } }

/* Entrada do título na primeira visita */
.hero-title .ht-lead { animation: ht-in .9s var(--ease-out) both; }
.hero-title .prism { animation: ht-in 1s var(--ease-out) .15s both; }
@keyframes ht-in { from { opacity: 0; transform: translateY(24px); filter: blur(6px); } }

/* ---------- Responsivo ---------- */
@media (max-width: 1024px) {
  .hero-steps { max-width: 620px; }
}
@media (max-width: 560px) {
  .hero-title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .prism { --h: 2.4em; }               /* 2 linhas também em ecrãs estreitos */
  .hero-steps { grid-template-columns: 1fr; gap: 8px; }
  .hero-step { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; padding: 12px 14px; }
  .hero-step small { margin-top: 0; }
}

/* ---------- Movimento reduzido: faces empilhadas, sem rotação ---------- */
@media (prefers-reduced-motion: reduce) {
  .prism { height: auto; perspective: none; }
  .prism-rot { position: static; transform: none !important; }
  .prism-face { position: static; display: none; transform: none !important; opacity: 1; filter: none; }
  .prism-face.is-active { display: flex; }
  .prism-face .mark::after { transform: scaleX(1); transition: none; }
  .phone-screens img { transition: none; transform: none; }
  .float-card .fc-state, .float-card .fc-ic-swap svg { transition: none; transform: none; scale: 1; }
  .hero-title .ht-lead, .hero-title .prism, .float-card.pulse-in { animation: none; }
  .hero-step.is-active .hs-bar i { animation: none; transform: scaleX(1); }
}