/* ── Landing cinematic animations ──
   Layered: (1) Intro curtain reveal, (2) staggered hero entrance,
   (3) ambient hero ornaments (orbiting dots, drifting grid, breathing aura),
   (4) marquee already exists, (5) hover micro-interactions. */

/* ─────────────── 1. INTRO CURTAIN ─────────────── */
.rf-intro {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--ink-1);
  overflow: hidden;
  pointer-events: none;
  animation: rf-intro-out 600ms cubic-bezier(.7,0,.3,1) 2400ms forwards;
}
.rf-intro::before,
.rf-intro::after {
  content: ""; position: absolute; left: 0; right: 0; height: 51%;
  background: var(--ink-1);
}
.rf-intro::before { top: 0; animation: rf-curtain-up 800ms cubic-bezier(.7,0,.3,1) 2300ms forwards; }
.rf-intro::after  { bottom: 0; animation: rf-curtain-down 800ms cubic-bezier(.7,0,.3,1) 2300ms forwards; }
@keyframes rf-curtain-up   { to { transform: translateY(-100%); } }
@keyframes rf-curtain-down { to { transform: translateY(100%); } }
@keyframes rf-intro-out    { to { opacity: 0; visibility: hidden; } }

/* Centered logo mark + word reveal */
.rf-intro-mark {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 18px;
  z-index: 2;
}
.rf-intro-mark .square,
.rf-intro-mark .rf-intro-logo {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  position: relative;
  /* (1) entrada com scale+rotate; (2) “localização encontrada” shake ao final */
  animation:
    rf-mark-in 700ms cubic-bezier(.2,.8,.2,1) forwards,
    rf-mark-ping 700ms cubic-bezier(.36,.07,.19,.97) 1500ms;
  opacity: 0; transform: scale(.6) rotate(-8deg);
  transform-origin: 50% 60%;
}
.rf-intro-mark .square {
  border-radius: 14px;
  background: var(--bg); color: var(--ink-1);
  font-family: var(--font-display); font-weight: 700; font-size: 32px;
}
.rf-intro-mark .rf-intro-logo img {
  width: 64px; height: 64px;
  object-fit: contain;
  border-radius: 14px;
  display: block;
}

/* "Localização encontrada" — pulse-ring que expande do ícone após as letras subirem */
.rf-intro-mark .rf-intro-logo::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 14px;
  border: 2px solid var(--p);
  opacity: 0;
  animation: rf-mark-pulse 900ms cubic-bezier(.2,.8,.2,1) 1550ms 2;
  pointer-events: none;
}
.rf-intro-mark .square::after,
.rf-intro-mark .rf-intro-logo::after {
  content: ""; position: absolute; inset: -6px; border-radius: 20px;
  border: 1.5px solid var(--p);
  animation: rf-ring-in 900ms cubic-bezier(.2,.8,.2,1) 200ms backwards;
}
@keyframes rf-mark-in { to { opacity: 1; transform: scale(1) rotate(0); } }

/* Chacoalhada estilo "encontrei a localização" — depois de scale+rotate entrar */
@keyframes rf-mark-ping {
  0%   { transform: scale(1)    rotate(0deg);   }
  15%  { transform: scale(1.12) rotate(-8deg);  }
  30%  { transform: scale(1.05) rotate(8deg);   }
  45%  { transform: scale(1.08) rotate(-5deg);  }
  60%  { transform: scale(1.02) rotate(4deg);   }
  75%  { transform: scale(1.05) rotate(-2deg);  }
  100% { transform: scale(1)    rotate(0deg);   }
}

/* Onda concêntrica que se expande do ícone (efeito ping de GPS) */
@keyframes rf-mark-pulse {
  0%   { opacity: 0.8; transform: scale(1);   }
  100% { opacity: 0;   transform: scale(1.9); }
}
@keyframes rf-ring-in {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: .55; transform: scale(1); }
}

.rf-intro-word {
  font-family: var(--font-display); font-weight: 600;
  font-size: 56px; letter-spacing: -0.035em; color: var(--bg);
  display: flex; overflow: hidden; padding-bottom: 6px;
}
.rf-intro-word span {
  display: inline-block;
  transform: translateY(110%);
  animation: rf-letter-up 700ms cubic-bezier(.2,.8,.2,1) forwards;
}
.rf-intro-word span:nth-child(1) { animation-delay: 350ms; }
.rf-intro-word span:nth-child(2) { animation-delay: 410ms; }
.rf-intro-word span:nth-child(3) { animation-delay: 470ms; }
.rf-intro-word span:nth-child(4) { animation-delay: 530ms; }
.rf-intro-word span:nth-child(5) { animation-delay: 590ms; }
.rf-intro-word span:nth-child(6) { animation-delay: 650ms; }
.rf-intro-word span:nth-child(7) { animation-delay: 710ms; }
.rf-intro-word span:nth-child(8) { animation-delay: 770ms; }
@keyframes rf-letter-up { to { transform: translateY(0); } }

/* Sub-line with sweep underline */
.rf-intro-tagline {
  position: absolute; left: 50%; top: calc(50% + 70px);
  transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.4em;
  color: color-mix(in oklch, var(--bg) 70%, transparent);
  opacity: 0;
  animation: rf-tag-in 600ms cubic-bezier(.2,.8,.2,1) 1100ms forwards;
}
@keyframes rf-tag-in { to { opacity: 1; } }

/* Scan-line sweep */
.rf-intro-scan {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--p);
  transform-origin: left center;
  transform: scaleX(0);
  animation: rf-scan 1200ms cubic-bezier(.7,0,.3,1) 1500ms forwards;
}
@keyframes rf-scan {
  0%   { transform: scaleX(0); transform-origin: left center; }
  50%  { transform: scaleX(1); transform-origin: left center; }
  51%  { transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

/* Tiny corner stamps */
.rf-intro-stamp {
  position: absolute;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  color: color-mix(in oklch, var(--bg) 50%, transparent);
  text-transform: uppercase;
  opacity: 0;
  animation: rf-stamp-in 500ms ease 1700ms forwards;
}
.rf-intro-stamp.tl { top: 22px; left: 22px; }
.rf-intro-stamp.tr { top: 22px; right: 22px; }
.rf-intro-stamp.bl { bottom: 22px; left: 22px; }
.rf-intro-stamp.br { bottom: 22px; right: 22px; }
@keyframes rf-stamp-in { to { opacity: 1; } }

/* Skip body scroll while intro plays */
body.rf-intro-on { overflow: hidden; }

/* ─────────────── 2. HERO STAGGER (override existing reveal) ─────────────── */
/* Make the existing .reveal start AFTER intro finishes (~3000ms) */
.reveal { animation-delay: calc(2900ms + (var(--rf-d, 0) * 100ms)) !important; }
.reveal[data-d="0"] { --rf-d: 1; }
.reveal[data-d="1"] { --rf-d: 2; }
.reveal[data-d="2"] { --rf-d: 3.5; }
.reveal[data-d="3"] { --rf-d: 5; }
.reveal[data-d="4"] { --rf-d: 6; }

/* Word-by-word reveal on h1 */
.hero h1 .w {
  display: inline-block; overflow: hidden; vertical-align: top;
}
.hero h1 .w > i {
  display: inline-block; font-style: inherit;
  transform: translateY(110%);
  animation: rf-letter-up 800ms cubic-bezier(.2,.8,.2,1) forwards;
}
.hero h1 .w:nth-child(1) > i { animation-delay: 3000ms; }
.hero h1 .w:nth-child(2) > i { animation-delay: 3100ms; }
.hero h1 .w:nth-child(3) > i { animation-delay: 3200ms; }
.hero h1 .w:nth-child(4) > i { animation-delay: 3300ms; }
.hero h1 .w:nth-child(5) > i { animation-delay: 3400ms; }

/* ─────────────── 3. AMBIENT HERO ORNAMENTS ─────────────── */
.hero { position: relative; isolation: isolate; }

/* Drifting grid */
.hero-grid-bg {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--ink-1) 6%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--ink-1) 6%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 80% 50%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 80% 50%, #000 0%, transparent 70%);
  animation: rf-grid-drift 24s linear infinite;
  z-index: -2;
  opacity: 0;
  animation-delay: 0s, 2700ms;
  animation-name: rf-grid-drift, rf-fade-in;
}
@keyframes rf-grid-drift { to { transform: translate(64px, 64px); } }
@keyframes rf-fade-in { to { opacity: 1; } }

/* Breathing aura behind stat collage */
.hero-stats { position: relative; }
.hero-stats::before {
  content: ""; position: absolute; inset: -40px;
  background: radial-gradient(ellipse at 50% 50%,
    color-mix(in oklch, var(--p) 30%, transparent) 0%,
    transparent 65%);
  filter: blur(40px);
  z-index: -1;
  animation: rf-aura 6s ease-in-out infinite;
  opacity: 0;
  animation-name: rf-aura, rf-fade-in;
  animation-duration: 6s, 1200ms;
  animation-delay: 0s, 3000ms;
  animation-iteration-count: infinite, 1;
  animation-fill-mode: none, forwards;
}
@keyframes rf-aura {
  0%, 100% { transform: scale(1); opacity: .55; }
  50%      { transform: scale(1.08); opacity: .85; }
}

/* Orbital dots around the dark stat card */
.hero-stat-card.dark { position: relative; }
.hero-stat-card.dark::before,
.hero-stat-card.dark::after {
  content: ""; position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--p);
  top: 50%; left: 50%;
  margin: -3px 0 0 -3px;
  box-shadow: 0 0 12px var(--p);
}
.hero-stat-card.dark::before { animation: rf-orbit-a 7s linear infinite; }
.hero-stat-card.dark::after  { animation: rf-orbit-b 9s linear infinite reverse; opacity: .55; }
@keyframes rf-orbit-a {
  from { transform: rotate(0) translateX(110px) rotate(0); }
  to   { transform: rotate(360deg) translateX(110px) rotate(-360deg); }
}
@keyframes rf-orbit-b {
  from { transform: rotate(0) translateX(140px) translateY(20px) rotate(0); }
  to   { transform: rotate(360deg) translateX(140px) translateY(20px) rotate(-360deg); }
}

/* Live counter pulse on hero stat */
.hero-stat-card .num.live {
  position: relative;
}
.hero-stat-card .num.live::after {
  content: ""; position: absolute; top: 8px; right: -14px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 var(--green);
  animation: rf-pulse 2s ease-out infinite;
}
@keyframes rf-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--green) 60%, transparent); }
  70%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Sparkline draw-on */
.hero-stat-card .spark path:nth-of-type(2) {
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: rf-draw 1800ms cubic-bezier(.6,.1,.2,1) 3400ms forwards;
}
@keyframes rf-draw { to { stroke-dashoffset: 0; } }

/* Floating "ticker" badges around hero */
.hero-floats {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
}
.hero-float {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-2);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  opacity: 0;
  animation: rf-float-in 700ms cubic-bezier(.2,.8,.2,1) forwards,
             rf-float-bob 6s ease-in-out infinite;
}
.hero-float .dot-mini { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; box-shadow: 0 0 8px var(--green); }
@keyframes rf-float-in { to { opacity: 1; transform: translateY(0); } }
@keyframes rf-float-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

.hero-float.f1 {
  top: 30%; right: 28%;
  animation-delay: 3500ms, 3500ms;
  animation-duration: 700ms, 7s;
  transform: translateY(20px);
}
.hero-float.f2 {
  bottom: 68%; right: 18%;
  animation-delay: 3700ms, 3700ms;
  animation-duration: 700ms, 6s;
  transform: translateY(20px);
}
/* "248 fornecedores online" — acima do card branco "Itens em SP", lado direito */
.hero-float.f3 {
  top: -34px; right: 54%;
  animation-delay: 3900ms, 3900ms;
  animation-duration: 700ms, 8s;
  transform: translateY(20px);
  z-index: 4;
}
@media (max-width: 980px) { .hero-floats { display: none; } }

/* ─────────────── 4. MICRO-INTERACTIONS ─────────────── */
.hero-search {
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.hero-search:focus-within {
  transform: translateY(-2px);
  box-shadow:
    0 1px 2px rgba(0,0,0,.06),
    0 32px 64px -20px color-mix(in oklch, var(--p) 26%, transparent),
    0 0 0 4px color-mix(in oklch, var(--p) 14%, transparent);
}

.feat-card { will-change: transform; }
.feat-card .feat-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, color-mix(in oklch, var(--ink-1) 35%, transparent));
  opacity: 0; transition: opacity var(--t-base);
}
.feat-card:hover .feat-img::after { opacity: 1; }

/* CTA button pulse */
.cta .btn-accent {
  position: relative; overflow: hidden;
}
.cta .btn-accent::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: rf-shine 3.5s ease-in-out infinite;
}
@keyframes rf-shine { 50%, 100% { transform: translateX(100%); } }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .rf-intro, .rf-intro * { animation-duration: 1ms !important; animation-delay: 0ms !important; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}