/* Custom Stylesheet for AMAI - Redesign 2026 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  --amai-blue: #0a2540;
  --amai-gold: #C0272D;
  --amai-gold-hover: #9B1B1F;
  --real-gold: #cda869;
  --real-gold-hover: #b8955a;
  --amai-red: #C0272D;
  --amai-light-blue: #f0f4f8;
  --amai-dark-blue: #051424;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', sans-serif;
  scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Glassmorphism */
.glass-panel {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.3);
}
.glass-dark {
  background: rgba(10,37,64,0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Button transitions */
.btn-transition { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.btn-transition:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(10,37,64,0.3); }
.btn-transition svg { transition: transform 0.25s cubic-bezier(0.4,0,0.2,1); }
.btn-transition:hover svg { transform: translateX(4px); }

/* Card hover */
.card-hover { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 25px -5px rgb(0 0 0/0.1), 0 8px 10px -6px rgb(0 0 0/0.1); }

/* Partner logos */
.partner-logo { opacity: 0.85; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); }
.partner-logo:hover { opacity: 1; transform: scale(1.05); }

/* Nav dropdown */
.nav-dropdown { opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.25s cubic-bezier(0.4,0,0.2,1); }
.group:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

/* Image zoom */
.img-zoom-container { overflow: hidden; }
.img-zoom-container img { transition: transform 0.5s cubic-bezier(0.4,0,0.2,1); }
.card-hover:hover .img-zoom-container img { transform: scale(1.08); }

/* Tabs & Accordions */
.tab-btn-active { background-color: var(--amai-blue) !important; color: white !important; box-shadow: 0 4px 10px rgba(10,37,64,0.2); }
.accordion-btn-active { background-color: var(--amai-blue) !important; color: white !important; }
.accordion-btn-active svg { transform: rotate(180deg); color: var(--amai-gold) !important; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1); }
.accordion-content.open { max-height: 1000px; }

/* Alert pulse */
@keyframes pulse-border {
  0%, 100% { border-color: rgba(192, 39, 45, 0.4); }
  50%       { border-color: rgba(192, 39, 45, 1); }
}
.alert-pulse { animation: pulse-border 2.5s infinite; }

/* Scroll-to-top */
#btn-scroll-to-top {
  opacity: 0; visibility: hidden;
  transition: all 0.3s ease;
}
#btn-scroll-to-top.show { opacity: 1; visibility: visible; }

/* Ticker */
@keyframes ticker {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.ticker-container {
  overflow: hidden;
  white-space: nowrap;
  display: flex;
  align-items: center;
  width: 100%;
}

.ticker-wrap {
  display: inline-flex;
  white-space: nowrap;
  animation: ticker 30s linear infinite;
}

.ticker-wrap:hover {
  animation-play-state: paused;
}

/* Contact ticker speed */
.ticker-contacts {
  animation-duration: 25s;
}

/* Quotas ticker speed */
.ticker-quotas {
  animation-duration: 35s;
}

/* Tab pane fade */
.tab-pane-content { animation: tabPaneFade 0.35s ease; }
@keyframes tabPaneFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────
   SCROLL REVEAL  —  IntersectionObserver driven, Apple-style easing
   Usage: class="scroll-reveal"  +  optional data-delay="300" (ms)
   JS: js/modern.js adds .is-visible when element enters viewport
   ───────────────────────────────────────────────────────────────────────── */
.scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   1.1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────────────────
   HERO PAGE-LOAD ANIMATIONS  —  above-the-fold only, CSS keyframe
   ───────────────────────────────────────────────────────────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.anim-fade-up {
  opacity: 0;
  animation: heroFadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.anim-fade-in {
  opacity: 0;
  animation: heroFadeIn 1.0s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger delays */
.delay-100 { animation-delay: 0.15s; }
.delay-200 { animation-delay: 0.30s; }
.delay-300 { animation-delay: 0.45s; }
.delay-400 { animation-delay: 0.60s; }
.delay-500 { animation-delay: 0.75s; }
.delay-600 { animation-delay: 0.90s; }
.delay-700 { animation-delay: 1.05s; }
.delay-800 { animation-delay: 1.20s; }