/* ============================================================
   ARSENAL HOSPITALITY · MOTION SYSTEM (additions)
   carregar APÓS design-system.css
   ============================================================ */

/* ------- Easing tokens ------- */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast: 240ms;
  --dur-base: 480ms;
  --dur-slow: 800ms;
  --dur-xslow: 1200ms;
}

/* ------- Reveal primitives -------
   Padrão: marque o elemento com .reveal e ele inicia invisível.
   O motion-system.js adiciona .is-in quando ele entra no viewport. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--dur-slow) var(--ease-out-expo),
    transform var(--dur-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

.reveal-fade { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out-expo); }
.reveal-fade.is-in { opacity: 1; }

.reveal-scale { opacity: 0; transform: scale(0.96); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); }
.reveal-scale.is-in { opacity: 1; transform: none; }

.reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); }
.reveal-left.is-in { opacity: 1; transform: none; }

.reveal-right { opacity: 0; transform: translateX(32px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); }
.reveal-right.is-in { opacity: 1; transform: none; }

/* Stagger: aplique data-stagger="80" no container; filhos com .reveal entram em cascata */
[data-stagger] > .reveal { transition-delay: calc(var(--stagger-i, 0) * 1ms); }

/* ------- Word-by-word reveal (split text) ------- */
.split-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  transition:
    opacity var(--dur-base) var(--ease-out-expo),
    transform var(--dur-base) var(--ease-out-expo);
}
.split-words.is-in .word { opacity: 1; transform: none; }

/* ------- Underline draw-in (em headings) -------
   Use <h2 class="ink-rule">…</h2> para um filete oliva crescendo da esquerda */
.ink-rule { position: relative; display: inline-block; padding-bottom: 0.4em; }
.ink-rule::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform var(--dur-slow) var(--ease-out-expo);
}
.ink-rule.is-in::after { transform: scaleX(1); }

/* ------- Hover-lift cards ------- */
.lift {
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    box-shadow var(--dur-base) var(--ease-out-expo),
    border-color var(--dur-base) var(--ease-out-expo);
  will-change: transform;
}
@media (hover: hover) {
  .lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-3); }
}

/* ------- Magnetic CTA wrapper ------- */
.magnet {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out-expo);
  will-change: transform;
}

/* ------- Number counter (no visual jump while ticking) ------- */
.counter { font-variant-numeric: tabular-nums; }

/* ------- Marquee de trust ------- */
.marquee {
  --marquee-speed: 38s;
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--s-7, 3rem);
  flex-shrink: 0;
  min-width: 100%;
  animation: marquee-scroll var(--marquee-speed) linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ------- Bento grid (12-col com áreas variáveis) ------- */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-4);
}
.bento > * {
  grid-column: span 12;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: var(--s-6);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.bento .bento-tall  { min-height: 22rem; }
.bento .bento-wide  { min-height: 14rem; }
.bento .bento-small { min-height: 11rem; }
@media (min-width: 760px) {
  .bento { gap: var(--s-5); }
  .bento .b-6 { grid-column: span 6; }
  .bento .b-5 { grid-column: span 5; }
  .bento .b-7 { grid-column: span 7; }
  .bento .b-4 { grid-column: span 4; }
  .bento .b-8 { grid-column: span 8; }
  .bento .b-3 { grid-column: span 3; }
  .bento .b-9 { grid-column: span 9; }
}

/* Bento card — hover & inner motion ready */
.bento > * .bento-glow {
  position: absolute; inset: -1px;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(217,119,87,0.10), transparent 60%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-expo);
  pointer-events: none;
}
@media (hover: hover) {
  .bento > *:hover .bento-glow { opacity: 1; }
}

/* ------- Fake browser chrome ------- */
.browser {
  border-radius: var(--r-2);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.browser__bar {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0.7rem var(--s-4);
  background: var(--cream-deep);
  border-bottom: 1px solid var(--line);
}
.browser__dots { display: flex; gap: 0.4rem; }
.browser__dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--line); }
.browser__url {
  flex: 1; font-family: var(--font-mono); font-size: 0.78rem;
  background: var(--paper); padding: 0.45rem 0.7rem;
  border-radius: var(--r-1); color: var(--gray-dark);
  border: 1px solid var(--line);
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.browser__url .caret {
  display: inline-block; width: 1px; height: 0.9em; vertical-align: -0.1em;
  background: var(--accent); margin-left: 1px;
  animation: caret-blink 1.1s steps(2, end) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.browser__body { padding: var(--s-5); min-height: 18rem; background: var(--paper); }

/* ------- Code typing block ------- */
.codetype {
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.65;
  background: var(--ink); color: var(--paper);
  padding: var(--s-5); border-radius: var(--r-1);
  white-space: pre-wrap; word-break: break-word;
  border: 1px solid var(--line);
}
.codetype .tok-key { color: oklch(0.78 0.10 60); }
.codetype .tok-str { color: oklch(0.82 0.08 130); }
.codetype .tok-com { color: oklch(0.55 0.02 80); font-style: italic; }
.codetype .caret-tip { display: inline-block; width: 0.55ch; height: 1em; background: var(--accent); vertical-align: -0.15em; animation: caret-blink 1s steps(2) infinite; }

/* ------- Live scan line ------- */
.scanlist { display: grid; gap: 0.55rem; }
.scanlist .scan-row {
  display: grid; grid-template-columns: 1.1rem 1fr auto;
  gap: 0.7rem; align-items: center;
  padding: 0.5rem 0.7rem; background: var(--cream);
  border-radius: var(--r-1);
  font-size: 0.86rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 360ms var(--ease-out-expo), transform 360ms var(--ease-out-expo);
}
.scanlist .scan-row.is-in { opacity: 1; transform: none; }
.scanlist .scan-row .badge-dot {
  width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--gray-light);
  transition: background var(--dur-base) var(--ease-out-expo);
}
.scanlist .scan-row.ok .badge-dot { background: var(--olive); }
.scanlist .scan-row.no .badge-dot { background: var(--accent); }
.scanlist .scan-row .stamp {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  color: var(--gray); text-transform: uppercase;
}

/* ------- Score ring with reveal ------- */
.ring-anim {
  --score: 0;
  width: 14rem; height: 14rem; border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--score) * 1%), var(--cream-deep) 0);
  display: grid; place-items: center;
  position: relative;
  transition: background 1.4s var(--ease-out-expo);
}
.ring-anim::before {
  content: ""; position: absolute; inset: 1.1rem; border-radius: 50%;
  background: var(--paper); box-shadow: var(--shadow-2) inset;
}
.ring-anim .ring-inner { position: relative; text-align: center; }
.ring-anim .ring-inner .v {
  font-family: var(--font-serif); font-weight: 700;
  font-size: 3.5rem; letter-spacing: -0.022em; line-height: 1;
}

/* ------- Countdown blocks ------- */
.countdown { display: flex; gap: var(--s-3); }
.countdown__cell {
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-1); padding: 0.7rem 0.9rem;
  min-width: 4.2rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.countdown__cell .num {
  font-family: var(--font-serif); font-weight: 700; font-size: 2rem;
  line-height: 1; letter-spacing: -0.022em; display: block;
}
.countdown__cell .lbl {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  color: var(--gray-light); text-transform: uppercase; margin-top: 0.3rem; display: block;
}

/* ------- Vagas dots progress ------- */
.dots-grid { display: grid; grid-template-columns: repeat(11, 1fr); gap: 0.4rem; max-width: 22rem; }
.dots-grid .dot-cell {
  aspect-ratio: 1; border-radius: 50%;
  background: var(--cream-deep);
  transform: scale(0);
  transition: transform 360ms var(--ease-out-expo), background 360ms var(--ease-out-expo);
}
.dots-grid.is-in .dot-cell { transform: scale(1); }
.dots-grid .dot-cell.filled { background: var(--accent); }
.dots-grid .dot-cell.taken  { background: var(--olive); }

/* ------- Sticky narrative scaffold ------- */
.sticky-stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; }
.sticky-track { position: relative; }

/* ------- Cursor follower ------- */
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  pointer-events: none; z-index: 9999;
  transform: translate3d(-100px, -100px, 0);
  transition: width 220ms var(--ease-out-expo), height 220ms var(--ease-out-expo), background 220ms var(--ease-out-expo), opacity 220ms;
  mix-blend-mode: multiply;
}
.cursor-dot.is-link { width: 36px; height: 36px; background: rgba(217,119,87,0.18); }
@media (max-width: 760px), (hover: none) { .cursor-dot { display: none; } }

/* ------- Section ambient gradients (transição entre seções) ------- */
.amb {
  position: relative;
}
.amb::before {
  content: ""; position: absolute; inset: -1px 0 auto 0; height: 8rem;
  background: linear-gradient(180deg, var(--from, transparent), transparent);
  pointer-events: none;
}

/* ------- Reduced motion override ------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-fade, .reveal-scale, .reveal-left, .reveal-right,
  .split-words .word, .scanlist .scan-row, .dots-grid .dot-cell {
    opacity: 1 !important; transform: none !important;
  }
  .ink-rule::after { transform: scaleX(1) !important; }
  .marquee__track { animation: none !important; }
  .cursor-dot { display: none !important; }
}

/* ------- Performance flag · kill switch -------
   adicione data-no-motion no <html> para desativar tudo */
html[data-no-motion] *,
html[data-no-motion] *::before,
html[data-no-motion] *::after {
  animation: none !important;
  transition: none !important;
}
html[data-no-motion] .reveal,
html[data-no-motion] .reveal-fade,
html[data-no-motion] .reveal-scale,
html[data-no-motion] .reveal-left,
html[data-no-motion] .reveal-right,
html[data-no-motion] .split-words .word,
html[data-no-motion] .scanlist .scan-row,
html[data-no-motion] .dots-grid .dot-cell {
  opacity: 1 !important; transform: none !important;
}
html[data-no-motion] .ink-rule::after { transform: scaleX(1) !important; }