/* ═══════════════════════════════════════════════════════════
 * Verbitir motion system
 * Tier A (CSS/IO), Tier B (canvas), Tier C (none this pass)
 * Every animation tagged so a Next.js developer can port 1:1.
 * Global motion gate: .vb-anim-off | .vb-anim-subtle | .vb-anim-lively
 * Default = subtle. .vb-anim-off respects prefers-reduced-motion.
 * ═════════════════════════════════════════════════════════ */

/* ─── REDUCED-MOTION HARD GATE ─── */
/* Both the explicit "off" tweak and the OS-level pref disable everything. */
.vb-anim-off *,
.vb-anim-off *::before,
.vb-anim-off *::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  body * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
 * BAND A PNG ICONS — replaced VbPxIcon blink in Rev F.2
 * Same Tier A "page-alive" feel via whole-icon brightness pulse
 * ═══════════════════════════════════════════════════════════ */
/* [TIER A | 3s loop | infinite] BAND A PNG icon ambient pulse —
   gentle brightness tick + tiny scale, inherits the role the
   per-pixel blink played on the abstract VbPxIcon icons. */
.vb-band-a-icon {
  display: block;
  width: 88px;
  height: 88px;
  margin-bottom: 4px;
  object-fit: contain;
  image-rendering: pixelated;
  animation: vb-icon-pulse 3s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes vb-icon-pulse {
  0%, 100% { transform: scale(1.000); filter: brightness(1.00); }
  50%      { transform: scale(1.030); filter: brightness(1.04); }
}
.vb-anim-off .vb-band-a-icon { animation: none; }
.vb-anim-lively .vb-band-a-icon { animation-duration: 2.2s; }

/* ═══════════════════════════════════════════════════════════
 * SCROLL REVEALS — IntersectionObserver flips .is-in.
 * Initial state hides content; .is-in resets to natural state.
 * ═══════════════════════════════════════════════════════════ */

/* [TIER A | 600ms | scroll-into-view] BAND A card stagger-fade-up */
.vb-reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}
.vb-reveal-up.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* [TIER A | 600ms | scroll-into-view] BAND B flow tile slide-in (alternating sides) */
.vb-reveal-left,
.vb-reveal-right {
  opacity: 0;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 100ms);
}
.vb-reveal-left  { transform: translateX(-32px); }
.vb-reveal-right { transform: translateX( 32px); }
.vb-reveal-left.is-in,
.vb-reveal-right.is-in {
  opacity: 1;
  transform: translateX(0);
}

/* ═══════════════════════════════════════════════════════════
 * HERO ILLUSTRATION — star + 3 coins + sparkle layer
 * Each coin is its own absolutely-positioned element.
 * Bbox centers (from 1024px source) drive the position %s.
 * ═══════════════════════════════════════════════════════════ */
.vb-hero-art-stage {
  position: relative;
  width: 480px;
  height: 480px;
}

/* Sparkle canvas — [TIER B | canvas-2D | autoplay] hero ambient gold-sparkle layer */
.vb-hero-sparkles {
  position: absolute;
  inset: -40px;
  z-index: 0;
  pointer-events: none;
}

.vb-hero-star,
.vb-hero-coin {
  position: absolute;
  image-rendering: pixelated;
  will-change: transform;
  z-index: 1;
}
.vb-hero-star {
  inset: 0;
  width: 100%;
  height: 100%;
  /* [TIER A | 3s | infinite] Hero star ambient pulse — scale 1.0 → 1.02 → 1.0 + brightness tick */
  animation: vb-star-pulse 3s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes vb-star-pulse {
  0%, 100% { transform: scale(1.000); filter: brightness(1.00); }
  50%      { transform: scale(1.020); filter: brightness(1.04); }
}

/* Coin positions — center % of 480px container (derived from 1024px source centers) */
.vb-hero-coin-1 { left: 67.0%; top: 16.0%; width: 13.0%; height: 13.0%; }
.vb-hero-coin-2 { left: 50.6%; top: 24.3%; width: 16.6%; height: 16.5%; }
.vb-hero-coin-3 { left: 65.3%; top: 33.4%; width: 18.9%; height: 18.8%; }

/* [TIER A | 6s | infinite] Per-coin drift loop — staggered starts via -animation-delay */
.vb-hero-coin { animation: vb-coin-drift 6s linear infinite; }
.vb-hero-coin-1 { animation-delay: 0ms;   }
.vb-hero-coin-2 { animation-delay: -200ms; } /* negative = pre-rolled into loop, no startup jump */
.vb-hero-coin-3 { animation-delay: -400ms; }
@keyframes vb-coin-drift {
  0%   { transform: translate(  0px,   0px); }
  25%  { transform: translate(  3px, -12px); }
  50%  { transform: translate( -2px, -20px); }
  75%  { transform: translate( -3px, -10px); }
  100% { transform: translate(  0px,   0px); }
}
/* Lively intensifies the drift */
.vb-anim-lively .vb-hero-coin { animation-duration: 4s; }
.vb-anim-lively @keyframes vb-coin-drift {
  50% { transform: translate(-4px, -28px); }
}

/* ═══════════════════════════════════════════════════════════
 * PIXEL-BLINK on the 3 principle cards' icons
 * Each pixel cell gets a staggered opacity loop — "pixels coming to life".
 * Total cycle 2s. Stagger by index up to 80%.
 * ═══════════════════════════════════════════════════════════ */
.vb-px-icon.vb-blink i {
  /* [TIER A | 2s | infinite] Per-pixel blink in pixel-art icons */
  animation: vb-pixel-blink 2s ease-in-out infinite;
  animation-delay: calc(var(--pi, 0) * 31ms);
}
@keyframes vb-pixel-blink {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1.00; }
}
/* When a transparent cell — keep it transparent (override via :empty / inline style takes priority anyway) */
.vb-anim-off  .vb-px-icon.vb-blink i { animation: none; opacity: 1; }

/* ═══════════════════════════════════════════════════════════
 * CTAs
 * ═══════════════════════════════════════════════════════════ */

/* [TIER A | 200ms | hover] CTA hover spring-scale */
.vb-btn { transition: background 150ms var(--ease-out), transform 200ms var(--ease-spring), box-shadow 200ms var(--ease-out); }
.vb-btn:hover { transform: translateY(-1px) scale(1.03); }
.vb-btn.gold:hover { box-shadow: 0 6px 16px rgba(255, 203, 31, 0.35); }

/* [TIER A | 4s | infinite] Gold primary CTA idle micro-pulse */
.vb-btn.gold.vb-pulse {
  animation: vb-cta-pulse 4s ease-in-out infinite;
}
@keyframes vb-cta-pulse {
  0%, 85%, 100% { transform: scale(1.000); box-shadow: 0 1px 2px rgba(26,46,26,.06); }
  92.5%         { transform: scale(1.020); box-shadow: 0 4px 12px rgba(255,203,31,.30); }
}
/* Stop pulse mid-interaction so hover/click read cleanly */
.vb-btn.gold.vb-pulse:hover,
.vb-btn.gold.vb-pulse:active { animation: none; }

/* ═══════════════════════════════════════════════════════════
 * LANGUAGE PILL — gold underline on hover
 * ═══════════════════════════════════════════════════════════ */
/* [TIER A | 200ms | hover] Lang pill underline draw-in left→right */
.vb-topbar .lang-pill button {
  position: relative;
  overflow: hidden;
  transition: background 300ms ease, color 300ms ease;
}
.vb-topbar .lang-pill button::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 4px;
  height: 2px;
  background: var(--verbitir-gold);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms var(--ease-out);
}
.vb-topbar .lang-pill button:hover::after { transform: scaleX(1); }
.vb-topbar .lang-pill button.active::after { display: none; } /* active already filled */

/* ═══════════════════════════════════════════════════════════
 * MODAL elastic enter
 * ═══════════════════════════════════════════════════════════ */
.vb-modal-backdrop { animation: vb-fade 220ms var(--ease-out); }
/* [TIER A | 360ms spring | open] Modal elastic enter */
.vb-modal {
  animation: vb-modal-pop 360ms var(--ease-spring);
}
@keyframes vb-modal-pop {
  0%   { transform: scale(0.92) translateY(8px); opacity: 0; }
  60%  { transform: scale(1.020) translateY(0);  opacity: 1; }
  100% { transform: scale(1.000) translateY(0);  opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
 * PRICING TIER CARDS — hover lift with spring
 * ═══════════════════════════════════════════════════════════ */
.vb-tier-card {
  transition: transform 200ms var(--ease-spring), box-shadow 200ms var(--ease-out);
  will-change: transform;
}
/* [TIER A | 200ms spring | hover] Tier card hover-lift */
.vb-tier-card:hover { transform: translateY(-6px); }
.vb-tier-card.popular { transform: translateY(-8px); } /* default offset for Popular tier */
.vb-tier-card.popular:hover {
  transform: translateY(-14px);
  box-shadow: 0 20px 48px rgba(26,46,26,.22), 0 0 0 4px rgba(255,203,31,.18) !important;
}
.vb-tier-card:not(.popular):hover {
  box-shadow: 0 12px 28px rgba(26,46,26,.12) !important;
}

/* ═══════════════════════════════════════════════════════════
 * WORDMARK DRAW-IN (one-shot, first page load only)
 * Per-letter mask-reveal from left → right.
 * ═══════════════════════════════════════════════════════════ */
/* [TIER B | 700ms total / 80ms per letter | once-per-session] Wordmark draw-in */
.vb-wordmark.vb-draw {
  display: inline-flex;
  gap: 0;
}
.vb-wordmark.vb-draw span {
  display: inline-block;
  clip-path: inset(0 100% 0 0);
  animation: vb-letter-reveal 320ms var(--ease-out) forwards;
  animation-delay: calc(var(--li, 0) * 80ms);
}
@keyframes vb-letter-reveal {
  to { clip-path: inset(0 0 0 0); }
}
.vb-wordmark.vb-draw.vb-drawn span {
  /* Once drawn, leave letters fully visible; remove animation so re-mounts (e.g. nav) don't re-trigger. */
  animation: none;
  clip-path: inset(0 0 0 0);
}

/* ═══════════════════════════════════════════════════════════
 * BAND B PIXEL TILE BUILD-UP — each tile's icon "loads" pixel by pixel
 * ═══════════════════════════════════════════════════════════ */
/* [TIER B | 800ms per tile, 200ms stagger | scroll-into-view] BAND B pixel reveal */
.vb-band-b-tile .vb-px-icon i {
  opacity: 0;
  transition: opacity 60ms linear;
}
.vb-band-b-tile.is-in .vb-px-icon i {
  opacity: 1;
  transition-delay: calc(var(--reveal-i, 0) * 200ms + var(--pi, 0) * 12ms);
}
.vb-band-b-tile {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-spring);
  transition-delay: calc(var(--reveal-i, 0) * 200ms);
}
.vb-band-b-tile.is-in {
  opacity: 1;
  transform: scale(1);
}

/* ═══════════════════════════════════════════════════════════
 * SCROLL HINT ARROW for the canvas — gently bobs to suggest scroll
 * ═══════════════════════════════════════════════════════════ */
.vb-scroll-hint {
  animation: vb-bob 2.4s ease-in-out infinite;
}
@keyframes vb-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ═══════════════════════════════════════════════════════════
 * TWEAKS-DRIVEN STYLE HOOKS
 * ═══════════════════════════════════════════════════════════ */
.vb-tagline-bold     { font-weight: 700 !important; color: var(--verbitir-forest) !important; }
.vb-tagline-gold     {
  text-decoration: underline;
  text-decoration-color: var(--verbitir-gold-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  color: var(--verbitir-forest) !important;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════
 * RESPONSIVE ANIMATION BUDGET (Rev I7)
 * Mobile is battery + perf constrained; trim aggressively.
 * Tablet halfway; desktop full (existing rules above).
 * ═══════════════════════════════════════════════════════════ */

/* ═══ MOBILE: frame width < 768px ═══ */
@container vbframe (max-width: 767px) {
  /* [TIER B mobile gate] Sparkle canvas off — battery saver */
  .vb-hero-sparkles { display: none; }

  /* [TIER B mobile gate] Wordmark draw-in disabled; render static */
  .vb-wordmark.vb-draw span { animation: none; clip-path: inset(0 0 0 0); }

  /* [TIER C mobile] Video opacity lowered to 18% — smaller real-estate, lower perceptual weight */
  .vb-hero-video { opacity: 0.18; }
  .vb-anim-lively .vb-hero-video { opacity: 0.22; }

  /* [TIER A mobile] Keep scroll reveals + CTA pulse, but coin drift gets a smaller amplitude */
  .vb-hero-coin { animation-duration: 8s; }

  /* Tier card hover-lift disabled on touch (replaced by :active tap-press in site.css) */
  .vb-tier-card:hover {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(26,46,26,.06) !important;
  }
}

/* ═══ TABLET: 768–1023px — Tier B at 50% density / Tier C at 22% ═══ */
@container vbframe (min-width: 768px) and (max-width: 1023px) {
  /* Sparkle canvas remains visible; density tuning is done in JS via window
     check, not CSS — CSS marks the tablet context here so anim.jsx's
     ResizeObserver can pick it up. */
  .vb-hero-sparkles { opacity: 0.7; }

  /* [TIER B tablet] Wordmark draw-in speeds up to 50ms per letter (was 80ms) */
  .vb-wordmark.vb-draw span {
    animation-duration: 220ms;
    animation-delay: calc(var(--li, 0) * 50ms);
  }

  /* [TIER C tablet] Video opacity 22% baseline */
  .vb-hero-video { opacity: 0.22; }
  .vb-anim-lively .vb-hero-video { opacity: 0.28; }
}