/* ============================================
   ANIMATIONS.CSS — Advanced Visual Effects
   Rebel Co. Group — 2026 Redesign
   ============================================ */

/* ──────────────────────────────────────────
   HERO BLOB BACKGROUND
   ────────────────────────────────────────── */
.hero-blobs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-blobs::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.55);
  z-index: 1;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.blob--1 {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(255,215,0,0.65) 0%, rgba(255,180,0,0.2) 60%, transparent 100%);
  top: -10%; left: -5%;
  animation: blob-float-1 28s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
}
.blob--2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(204,153,0,0.5) 0%, rgba(255,120,0,0.15) 60%, transparent 100%);
  top: 20%; right: -5%;
  animation: blob-float-2 34s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
}
.blob--3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(30,30,60,0.7) 0%, rgba(10,10,30,0.3) 60%, transparent 100%);
  bottom: -10%; left: 40%;
  animation: blob-float-3 40s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
}

@keyframes blob-float-1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(4%, 6%) scale(1.08); }
  66%  { transform: translate(-3%, 3%) scale(0.95); }
  100% { transform: translate(5%, -4%) scale(1.12); }
}
@keyframes blob-float-2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-5%, 3%) scale(1.1); }
  66%  { transform: translate(3%, -4%) scale(0.93); }
  100% { transform: translate(-4%, 5%) scale(1.07); }
}
@keyframes blob-float-3 {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate(-6%, -4%) scale(1.15) rotate(4deg); }
  100% { transform: translate(4%, 6%) scale(0.9) rotate(-3deg); }
}

/* ──────────────────────────────────────────
   GRADIENT TEXT
   ────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(90deg, #FFD700 0%, #FFE333 30%, #CC9900 60%, #FFD700 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-sweep 5s ease infinite;
}
@keyframes gradient-sweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ──────────────────────────────────────────
   WORD-BY-WORD HERO TITLE REVEAL
   ────────────────────────────────────────── */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  filter: blur(8px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-word.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ──────────────────────────────────────────
   3D TILT CARDS
   ────────────────────────────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.08s linear, box-shadow 0.3s ease;
  will-change: transform;
}
.tilt-card:hover {
  box-shadow: var(--shadow-lg);
}

/* Glow spotlight on card surface */
.tilt-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 215, 0, 0.08),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.tilt-card:hover::after {
  opacity: 1;
}

/* ──────────────────────────────────────────
   MAGNETIC BUTTONS
   ────────────────────────────────────────── */
.btn[data-magnetic] {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

/* ──────────────────────────────────────────
   PULSE INDICATOR (status dot)
   ────────────────────────────────────────── */
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: #00D66F;
  border-radius: 50%;
  animation: pulse-ring 2s ease infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(0, 214, 111, 0.4); }
  50%  { box-shadow: 0 0 0 7px rgba(0, 214, 111, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 214, 111, 0); }
}

/* ──────────────────────────────────────────
   NOISE TEXTURE OVERLAY
   ────────────────────────────────────────── */
.noise-overlay {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  mix-blend-mode: overlay;
}

/* ──────────────────────────────────────────
   OFFICE GLOBE / LOCATIONS SECTION
   ────────────────────────────────────────── */
.offices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-12);
}
.office-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}
.office-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06);
  border-color: rgba(255, 215, 0, 0.4);
}
.office-card::before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.10) 0%, transparent 70%);
  left: calc(var(--glow-x, 50%) - 140px);
  top: calc(var(--glow-y, 50%) - 140px);
  pointer-events: none;
  transition: left 0.05s linear, top 0.05s linear;
  z-index: 0;
}
.office-card__glow {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.12) 0%, transparent 70%);
  top: -60px; right: -60px;
  pointer-events: none;
}
.office-card__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-4);
}
.office-card__city {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-black);
  margin-bottom: var(--space-2);
}
.office-card__country {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}
.office-card__address {
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  line-height: 1.5;
  margin-bottom: var(--space-3);
  font-style: normal;
}
.office-card__role {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: 1.6;
}
.office-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,215,0,0.1);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-gray-700);
  margin-top: var(--space-4);
}

/* ──────────────────────────────────────────
   FLOATING STATS BAR ANIMATION
   ────────────────────────────────────────── */
.stat-item__number {
  font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────
   SECTION DIVIDER — GOLD GRADIENT LINE
   ────────────────────────────────────────── */
.divider-gold {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--color-gold), transparent);
  border-radius: 2px;
  margin: var(--space-6) 0;
}

/* ──────────────────────────────────────────
   BENTO GRID (for about/index highlight sections)
   ────────────────────────────────────────── */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: auto;
  gap: var(--space-4);
  margin-top: var(--space-12);
}
.bento-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: 20px;
  padding: var(--space-8);
  overflow: hidden;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease;
}
.bento-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.09);
}
.bento-card--wide    { grid-column: span 7; }
.bento-card--narrow  { grid-column: span 5; }
.bento-card--half    { grid-column: span 6; }
.bento-card--third   { grid-column: span 4; }
.bento-card--full    { grid-column: span 12; }
.bento-card--dark {
  background: var(--color-gray-900);
  border-color: rgba(255,215,0,0.15);
  color: var(--color-white);
}
.bento-card--gold {
  background: var(--color-gold);
  border-color: var(--color-gold-dark);
  color: var(--color-black);
}
.bento-card__icon {
  width: 48px; height: 48px;
  background: rgba(255,215,0,0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
}
.bento-card__icon svg {
  width: 24px; height: 24px;
  stroke: var(--color-gold);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bento-card--dark .bento-card__icon {
  background: rgba(255,215,0,0.15);
}
.bento-card__title {
  font-family: var(--font-primary);
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: inherit;
}
.bento-card__desc {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  line-height: 1.65;
}
.bento-card--dark .bento-card__desc {
  color: rgba(255,255,255,0.55);
}
.bento-card--gold .bento-card__desc {
  color: rgba(0,0,0,0.65);
}
.bento-card__big-number {
  font-family: var(--font-primary);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}
.bento-card--dark .bento-card__big-number {
  color: var(--color-gold);
}

/* ──────────────────────────────────────────
   UNDERLINE ANIMATION (hero title)
   ────────────────────────────────────────── */
.underline-anim {
  position: relative;
  display: inline-block;
}
.underline-anim::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--gold, #FFD700);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: underline-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}
@keyframes underline-grow {
  to { transform: scaleX(1); }
}

/* ──────────────────────────────────────────
   SCROLL REVEAL IMPROVEMENTS
   ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-stagger.reveal--visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.reveal-stagger.reveal--visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.reveal-stagger.reveal--visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.reveal-stagger.reveal--visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.reveal-stagger.reveal--visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.reveal-stagger.reveal--visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }

/* ──────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────── */
@media (max-width: 768px) {
  .offices-grid { grid-template-columns: 1fr; }
  .bento-card--wide, .bento-card--narrow,
  .bento-card--half, .bento-card--third { grid-column: span 12; }
  .blob--1 { width: 300px; height: 300px; }
  .blob--2 { width: 250px; height: 250px; }
  .blob--3 { width: 200px; height: 200px; }
}

@media (max-width: 1023px) {
  .offices-grid { grid-template-columns: 1fr 1fr; }
  .bento-card--wide  { grid-column: span 12; }
  .bento-card--narrow { grid-column: span 12; }
  .bento-card--half  { grid-column: span 6; }
  .bento-card--third { grid-column: span 6; }
}

/* ──────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  .gradient-text { animation: none; }
  .hero-word { transition: none; }
  .underline-anim::after { animation: none; transform: scaleX(1); }
  .pulse-dot { animation: none; }
}