/* ==========================================================================
   Royal Space — Efeitos: padrões da marca, profundidade 3D e parallax
   Os padrões derivam da geometria do «R» (quartos de círculo + barras).
   Movimento: apenas transform / translate / rotate / opacity / filter.
   Tudo é desligado com prefers-reduced-motion (ver fim do ficheiro).
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  /* Truchet de arcos — ecoa as curvas do «R» */
  --pat-arcs-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23ffffff' stroke-width='4'%3E%3Cpath d='M0 20A20 20 0 0 0 20 0M20 40A20 20 0 0 1 40 20M60 0A20 20 0 0 0 80 20M40 20A20 20 0 0 1 60 40M20 40A20 20 0 0 0 40 60M0 60A20 20 0 0 1 20 80M40 60A20 20 0 0 0 60 40M60 80A20 20 0 0 1 80 60'/%3E%3C/svg%3E");
  --pat-arcs-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23f5b501' stroke-width='4'%3E%3Cpath d='M0 20A20 20 0 0 0 20 0M20 40A20 20 0 0 1 40 20M60 0A20 20 0 0 0 80 20M40 20A20 20 0 0 1 60 40M20 40A20 20 0 0 0 40 60M0 60A20 20 0 0 1 20 80M40 60A20 20 0 0 0 60 40M60 80A20 20 0 0 1 80 60'/%3E%3C/svg%3E");
  --pat-arcs-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%2304185a' stroke-width='4'%3E%3Cpath d='M0 20A20 20 0 0 0 20 0M20 40A20 20 0 0 1 40 20M60 0A20 20 0 0 0 80 20M40 20A20 20 0 0 1 60 40M20 40A20 20 0 0 0 40 60M0 60A20 20 0 0 1 20 80M40 60A20 20 0 0 0 60 40M60 80A20 20 0 0 1 80 60'/%3E%3C/svg%3E");
  /* Grelha de pontos */
  --pat-dots-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='1.4' fill='%23023cc8'/%3E%3C/svg%3E");
  /* Anéis concêntricos */
  --pat-rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' fill='none' stroke='%23023cc8' stroke-width='1.5'%3E%3Ccircle cx='200' cy='200' r='60'/%3E%3Ccircle cx='200' cy='200' r='100'/%3E%3Ccircle cx='200' cy='200' r='140' stroke-dasharray='4 10'/%3E%3Ccircle cx='200' cy='200' r='180'/%3E%3C/svg%3E");
}

/* ---------- Camadas de padrão (estáticas, sem blur, sem eventos) ---------- */
.section.soft::before, .on-blue::before, .partner::before, .cta::after, .site-footer::before, .page-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.section > .container, .section > .gallery-wrap, .partner > *, .cta > *, .site-footer > .container { position: relative; z-index: 1; }
.site-footer { position: relative; overflow: hidden; }

.section.soft::before {
  background: var(--pat-dots-blue) 0 0 / 22px 22px; opacity: .14;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 0%, transparent 75%);
}
.on-blue::before {
  background: var(--pat-arcs-white) 0 0 / 96px 96px; opacity: .08;
  -webkit-mask-image: linear-gradient(105deg, #000 0%, transparent 60%);
          mask-image: linear-gradient(105deg, #000 0%, transparent 60%);
}
.partner::before {
  background: var(--pat-arcs-yellow) 0 0 / 72px 72px; opacity: .1;
  -webkit-mask-image: radial-gradient(circle at 0% 100%, #000 0%, transparent 65%);
          mask-image: radial-gradient(circle at 0% 100%, #000 0%, transparent 65%);
}
.cta::after {
  background: var(--pat-arcs-navy) 0 0 / 84px 84px; opacity: .09;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
          mask-image: linear-gradient(90deg, transparent 30%, #000 100%);
}
.site-footer::before { background: var(--pat-arcs-white) 0 0 / 110px 110px; opacity: .04; }
.page-hero::before {
  background: var(--pat-dots-blue) 0 0 / 22px 22px; opacity: .12;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
          mask-image: linear-gradient(90deg, #000, transparent 70%);
}

/* ---------- Hero: camadas decorativas em profundidade ---------- */
.hero::before { display: none; }
.hero-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-orb {
  position: absolute; width: min(900px, 120vw); aspect-ratio: 1; border-radius: 50%;
  right: max(-360px, -30vw); top: -240px; background: var(--yellow); overflow: hidden;
}
.hero-orb::after {
  content: ''; position: absolute; inset: 0;
  background: var(--pat-arcs-white) 0 0 / 88px 88px; opacity: .25;
  -webkit-mask-image: radial-gradient(circle at 25% 75%, #000 0%, transparent 55%);
          mask-image: radial-gradient(circle at 25% 75%, #000 0%, transparent 55%);
}
.hero-rings {
  position: absolute; width: 520px; aspect-ratio: 1; left: 30%; top: 44%;
  background: var(--pat-rings) center / contain no-repeat; opacity: .14;
}
.hero-dots {
  position: absolute; width: 380px; height: 280px; left: -40px; top: 110px;
  background: var(--pat-dots-blue) 0 0 / 20px 20px; opacity: .2;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
          mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
.hero-mark { position: absolute; width: 170px; left: 44%; bottom: 30px; opacity: .16; rotate: -12deg; }

/* ---------- Cena 3D do hero ---------- */
.hero-visual { perspective: 1400px; }
.scene {
  position: relative; width: 100%; min-height: inherit; display: grid; place-items: center;
  transform-style: preserve-3d;
}
.fx .scene { will-change: transform; }
.scene .float-card.fc-1 { transform: translateZ(120px); }
.scene .float-card.fc-2 { transform: translateZ(90px); }
.phone::after {
  /* reflexo de vidro sobre o ecrã */
  content: ''; position: absolute; inset: 10px; border-radius: 33px; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%);
}

/* ---------- Entradas: opacidade + deslocamento + blur («materializar») ---------- */
.reveal {
  transform: translateY(24px); filter: blur(4px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}
.reveal.in { transform: none; filter: none; }
.btn:active, .store-btn:active { transform: scale(.97); transition-duration: .1s; }

/* ---------- Cartões com inclinação 3D ----------
   Usa as propriedades individuais `rotate` e `translate`,
   que se compõem com o `transform` das animações .reveal. */
.steps, .features, .contact-grid { perspective: 1200px; }
[data-tilt] {
  position: relative;
  transition: rotate .7s var(--ease-out), translate .7s var(--ease-out), box-shadow .3s var(--ease-out), border-color .25s var(--ease-out), opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
}
[data-tilt].is-tilting { transition-duration: .12s, .4s, .3s, .25s, .9s, .9s, .9s; }
[data-tilt]::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.32), transparent 45%);
  opacity: 0; transition: opacity .4s var(--ease-out);
}
[data-tilt].is-tilting::after { opacity: 1; }
.feature[data-tilt].is-tilting, .contact-card[data-tilt].is-tilting { box-shadow: var(--shadow); }
.step .step-shot { transition: translate .7s var(--ease-out); }
.step.is-tilting .step-shot { translate: 0 -10px; }

/* ---------- Galeria em coverflow 3D ---------- */
.gallery { perspective: 1400px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1024px) {
  .hero-orb { width: 520px; right: -300px; top: auto; bottom: 120px; }
  .hero-rings { left: 36%; top: 58%; width: 380px; }
  .hero-mark { display: none; }
}
@media (max-width: 760px) {
  .scene .float-card.fc-1, .scene .float-card.fc-2 { transform: none; }
  .hero-dots { display: none; }
}

/* ---------- Movimento reduzido: sem parallax, sem 3D, sem blur ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { filter: none; transform: none; }
  [data-parallax] { translate: none !important; }
  [data-tilt], [data-tilt] .step-shot { rotate: none !important; translate: none !important; }
  [data-tilt]::after { display: none; }
  .scene { transform: none !important; }
  .gallery figure { rotate: none !important; scale: none !important; translate: none !important; }
}