/* ==========================================================================
   MOTION SYSTEM — Seita Orlandista
   Revelações por scroll, gravura animada, grão, marquee, selos e desenho SVG.
   Tudo degrada com elegância sob prefers-reduced-motion.
   ========================================================================== */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --dur-fast: 320ms;
  --dur-base: 720ms;
  --dur-slow: 1100ms;
}

/* --------------------------------------------------------------------------
   1. REVELAÇÃO POR SCROLL
   Uso: <div data-reveal> | data-reveal="mask" | "left" | "right" | "scale"
   Escalonamento: style="--d: 120ms"  ou  data-stagger no elemento pai
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 22px), 0);
  transition:
    opacity var(--dur-base) var(--ease-out-expo) var(--d, 0ms),
    transform var(--dur-base) var(--ease-out-expo) var(--d, 0ms),
    clip-path var(--dur-slow) var(--ease-out-expo) var(--d, 0ms);
  will-change: opacity, transform;
}

[data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

[data-reveal="left"]  { transform: translate3d(-28px, 0, 0); }
[data-reveal="right"] { transform: translate3d(28px, 0, 0); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="scale"].is-in { transform: scale(1); }

/* Máscara tipográfica: a linha sobe por trás de um recorte (kinetic type) */
[data-reveal="mask"] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, 0.35em, 0);
}
[data-reveal="mask"].is-in {
  clip-path: inset(0 0 -12% 0);
  transform: translate3d(0, 0, 0);
}

/* Filete que se estende da esquerda para a direita */
[data-reveal="rule"] {
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-out-expo) var(--d, 0ms);
}
[data-reveal="rule"].is-in { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   2. DESENHO DE TRAÇO SVG (gravura que se desenha sozinha)
   -------------------------------------------------------------------------- */
[data-draw] {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset var(--draw-dur, 1600ms) var(--ease-out-expo) var(--d, 0ms);
}
.is-in [data-draw],
[data-draw].is-in {
  stroke-dashoffset: 0;
}

/* Nós do diagrama, que acendem depois do traço chegar */
[data-node] {
  opacity: 0;
  transform: scale(0.4);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 420ms var(--ease-out-expo) var(--d, 0ms),
              transform 520ms var(--ease-out-expo) var(--d, 0ms);
}
.is-in [data-node] { opacity: 1; transform: scale(1); }

/* --------------------------------------------------------------------------
   3. GRÃO / TEXTURA DE IMPRESSÃO
   -------------------------------------------------------------------------- */
.grain { position: relative; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  animation: grain-shift 6s steps(6) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-3%, -2%); }
  33%  { transform: translate(2%, -4%); }
  50%  { transform: translate(-2%, 3%); }
  66%  { transform: translate(3%, 1%); }
  83%  { transform: translate(-1%, -3%); }
  100% { transform: translate(0, 0); }
}

/* --------------------------------------------------------------------------
   4. MARQUEE / TARJA CORRIDA
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  overflow: hidden;
  display: flex;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  animation: marquee-run var(--marquee-dur, 48s) linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee--reverse .marquee__track { animation-direction: reverse; }

@keyframes marquee-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.marquee__sep {
  color: var(--color-primary);
  font-size: 0.68rem;
}

/* --------------------------------------------------------------------------
   5. SELO GIRATÓRIO (carimbo de fundador / lacre)
   -------------------------------------------------------------------------- */
.seal { position: relative; display: inline-grid; place-items: center; }

.seal__ring {
  animation: seal-spin 26s linear infinite;
  transform-origin: 50% 50%;
}

.seal--reverse .seal__ring { animation-direction: reverse; }

@keyframes seal-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   6. GRAVURA DE FUNDO (guilhoché lento do hero)
   -------------------------------------------------------------------------- */
.engraving {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.engraving__rosette {
  transform-origin: 50% 50%;
  animation: rosette-turn 120s linear infinite;
}

.engraving__rosette--counter {
  animation-duration: 90s;
  animation-direction: reverse;
}

@keyframes rosette-turn {
  to { transform: rotate(360deg); }
}

/* Varredura de luz que passa devagar sobre a gravura */
.engraving__sweep {
  position: absolute;
  inset: -20% -60%;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 204, 0, 0.07) 50%, transparent 58%);
  animation: sweep-pass 11s var(--ease-in-out-quint) infinite;
}

@keyframes sweep-pass {
  0%, 65%  { transform: translateX(-60%); opacity: 0; }
  72%      { opacity: 1; }
  100%     { transform: translateX(60%); opacity: 0; }
}

/* --------------------------------------------------------------------------
   7. MICRO-INTERAÇÕES
   -------------------------------------------------------------------------- */

/* Brilho que atravessa o botão primário */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-18deg);
  transition: left 700ms var(--ease-out-expo);
}
.btn-primary:hover::after { left: 130%; }

/* Ponto pulsante "ao vivo" */
.pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  position: relative;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-primary);
  animation: dot-ping 2.4s var(--ease-out-expo) infinite;
}

@keyframes dot-ping {
  0%   { transform: scale(1);   opacity: 0.75; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* Cursor de rolagem do hero */
.scroll-cue__line {
  animation: cue-drop 2.2s var(--ease-in-out-quint) infinite;
  transform-origin: top center;
}

@keyframes cue-drop {
  0%, 100% { transform: scaleY(0.25); opacity: 0.3; }
  45%      { transform: scaleY(1);    opacity: 1; }
  75%      { transform: scaleY(0.25); opacity: 0.3; }
}

/* Contador numérico: evita "pulo" de largura enquanto conta */
[data-count] { font-variant-numeric: tabular-nums; }

/* Barra de progresso de leitura no header */
.scroll-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  background: var(--color-primary);
  z-index: 5;
}

/* --------------------------------------------------------------------------
   8. ACESSIBILIDADE — respeitar quem pediu menos movimento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal="mask"],
  [data-reveal="rule"] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  [data-draw] { stroke-dashoffset: 0 !important; transition: none !important; }
  [data-node] { opacity: 1 !important; transform: none !important; }
  .grain::after,
  .seal__ring,
  .engraving__rosette,
  .engraving__sweep,
  .marquee__track,
  .pulse-dot::after,
  .scroll-cue__line {
    animation: none !important;
  }
  .btn-primary::after { display: none; }
  html { scroll-behavior: auto; }
}