/* ============================================
   AGORA HUP — Pixel-perfect Figma stylesheet
   Generated to match Desktop-1 (1440×4288) exactly.
   ============================================ */

/* Fonts used by Figma — must match for pixel rendering */
@font-face {
  font-family: 'Rabar_021';
  src: url('./assets/fonts/Rabar_021.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Baloo Bhai';
  src: url('./assets/fonts/BalooBhai2-ExtraBold.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'BalooBhai2';
  src: url('./assets/fonts/BalooBhai2-ExtraBold.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: block;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #EBEBEB;
  color: #000;
  font-family: 'Rabar_021', 'Baloo Bhai', sans-serif;
}

body.figma-pixel-body {
  min-height: 100vh;
  /* The canvas is fixed 1440×4288. Scale down on narrower viewports so the
     entire design always fits horizontally — same proportions everywhere. */
  overflow-x: hidden;
}

.figma-pixel-canvas {
  transform-origin: top center;
}

/* Auto-scale for narrower viewports (responsive that preserves pixel-perfect proportions) */
@media (max-width: 1440px) {
  .figma-pixel-canvas {
    transform: scale(calc(100vw / 1440));
  }
  body.figma-pixel-body {
    /* When the canvas is scaled down, its rendered height shrinks too. We need to
       collapse the gap below it so the page doesn't have giant empty space. */
    height: auto;
  }
}

/* Default text rendering for absolutely-positioned text nodes */
.fnode-text {
  user-select: text;
  pointer-events: auto;
}

/* Links / anchors: ensure click-through where we add interactivity later */
.fnode a {
  text-decoration: none;
  color: inherit;
}

/* Images render crisply */
.fnode-img {
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

/* Vectors / lines are skipped by the generator currently — placeholders */
.fnode-vector, .fnode-line {
  display: none;
}

/* Clickable overlay layer — transparent <a> tags sit on top of the design at
   exact Figma positions. They give us working nav and CTAs without altering
   the rendered visuals. */
.fclick {
  display: block;
  background: transparent;
  text-decoration: none;
  color: transparent;
  cursor: pointer;
  z-index: 100;
  border-radius: 14px;
  transition:
    background 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, background;
}

.fclick:hover {
  background: rgba(14, 110, 168, 0.10);
  transform: scale(1.02);
}

.fclick:active {
  transform: scale(0.97);
  transition-duration: 90ms;
}

.fclick:focus-visible {
  outline: 2px solid #0E6BA8;
  outline-offset: 2px;
}

/* ============================================
   Motion system — duration & easing tokens
   ============================================ */
:root {
  --motion-fast: 150ms;
  --motion-base: 240ms;
  --motion-slow: 380ms;
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);   /* smooth, decelerating */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);     /* material standard */
}

/* ============================================
   Page-load entrance — body fade-in
   ============================================ */
.figma-pixel-body {
  animation: page-fade-in var(--motion-slow) var(--ease-out-quint) both;
}

@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   Hero phones — subtle float on load
   ============================================ */
.fnode-img[src*="727cfa8996dc"] {
  animation: hero-phones-in 900ms var(--ease-out-quint) both;
  animation-delay: 120ms;
}

@keyframes hero-phones-in {
  from { opacity: 0; transform: translateX(-32px) rotate(-2deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0); }
}

/* ============================================
   Scroll-triggered entrances
   .reveal starts hidden; .reveal.in animates in.
   Set by IntersectionObserver in script.js.
   ============================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--motion-slow) var(--ease-out-quint),
    transform var(--motion-slow) var(--ease-out-quint);
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger via inline --i custom property (set by JS) */
.reveal[style*="--i"] {
  transition-delay: calc(var(--i, 0) * 40ms);
}

/* ============================================
   Interactive elements — hover/press
   ============================================ */

/* Testimonial photos: subtle zoom on hover */
.fnode-img[alt*="diego"],
.fnode-img[alt*="alex"],
.fnode-img[alt*="nicolas"],
.fnode-img[alt*="testimonial"] {
  transition: transform 400ms var(--ease-out-quint), filter 400ms var(--ease-out-quint);
}
.figma-pixel-canvas:not(:has(.fclick:hover)) .fnode-img[alt*="diego"]:hover,
.figma-pixel-canvas:not(:has(.fclick:hover)) .fnode-img[alt*="alex"]:hover,
.figma-pixel-canvas:not(:has(.fclick:hover)) .fnode-img[alt*="nicolas"]:hover {
  transform: scale(1.04);
  filter: brightness(1.05);
}

/* Value-card icons (delivery/profit/briefcase/etc) get a tiny breathe on hover */
.fnode-img[alt*="briefcase"],
.fnode-img[alt*="delivery"],
.fnode-img[alt*="money"],
.fnode-img[alt*="google-play"] {
  transition: transform 220ms var(--ease-spring);
}

/* Footer social icons — color-shift / scale on hover */
.fnode-img[alt*="youtube"],
.fnode-img[alt*="instagram"],
.fnode-img[alt*="telegram"],
.fnode-img[alt*="facebook"] {
  transition: transform 220ms var(--ease-spring), filter 220ms ease-out;
}

/* Hover proxy: JS adds .fclick-hover-target to the icon under a hovered overlay */
.fnode-img.fclick-hover-target {
  transform: scale(1.12) translateZ(0);
  filter: brightness(1.1) drop-shadow(0 4px 12px rgba(14, 110, 168, 0.35));
}

/* ============================================
   Reduced motion — disable all transitions and animations
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}