/* ===== AYDO Shared Styles ===== */

body { font-family: 'Work Sans', sans-serif; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.glass-card { background: rgba(0, 51, 64, 0.4); backdrop-filter: blur(12px); border: 1px solid rgba(0, 90, 110, 0.3); }

/* ===== Reveal & Stagger Animations ===== */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; }
.stagger.active > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.active > *:nth-child(2) { transition-delay: 0.1s; }
.stagger.active > *:nth-child(3) { transition-delay: 0.15s; }
.stagger.active > *:nth-child(4) { transition-delay: 0.2s; }
.stagger.active > *:nth-child(5) { transition-delay: 0.25s; }
.stagger.active > *:nth-child(6) { transition-delay: 0.3s; }
.stagger.active > *:nth-child(7) { transition-delay: 0.35s; }
.stagger.active > *:nth-child(8) { transition-delay: 0.4s; }
.stagger.active > *:nth-child(9) { transition-delay: 0.45s; }
.stagger.active > *:nth-child(10) { transition-delay: 0.5s; }
.stagger.active > * { opacity: 1; transform: translateY(0); }

/* ===== Keyframe Animations ===== */
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
.animate-float { animation: float 6s ease-in-out infinite; }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px rgba(255, 165, 64, 0.1); } 50% { box-shadow: 0 0 40px rgba(255, 165, 64, 0.25); } }
.animate-glow { animation: pulse-glow 3s ease-in-out infinite; }
@keyframes count-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.counter-animate { animation: count-up 0.6s ease-out forwards; }
html { scroll-behavior: smooth; }

/* ===== Mobile Utilities ===== */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

@media (max-width: 767px) {
  video.bg-video { display: none; }
  /* Ensure 44px min touch targets on mobile */
  footer a { min-height: 44px; display: inline-flex; align-items: center; }
  #main-header .flex.items-center > a:first-child { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ===== Hero Entrance ===== */
@keyframes hero-fade-in {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-fade { animation: hero-fade-in 0.8s ease-out forwards; }
.hero-fade-delay-1 { animation: hero-fade-in 0.8s 0.2s ease-out forwards; opacity: 0; }
.hero-fade-delay-2 { animation: hero-fade-in 0.8s 0.4s ease-out forwards; opacity: 0; }

/* ===== Team Photos (about page) ===== */
.team-photo { filter: grayscale(40%); transition: filter 0.4s ease, transform 0.4s ease; }
.team-photo:hover { filter: grayscale(0%); transform: scale(1.03); }

/* ===== Accessibility ===== */
*:focus-visible { outline: 2px solid #006A99; outline-offset: 2px; }

/* Skip-to-content link */
.skip-to-content { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); z-index: 100; background: #006A99; color: #FAF8F5; padding: 8px 24px; border-radius: 0 0 8px 8px; font-size: 14px; font-weight: 600; transition: top 0.2s; }
.skip-to-content:focus { top: 0; }

/* Reduced motion */
@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; }
  .stagger > * { opacity: 1; transform: none; }
}

/* ===== Showcase Component (reusable) ===== */
.showcase-tab { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer; border-radius: 10px 10px 0 0; background: #003340; color: #7A8E94; transition: all 0.25s; position: relative; bottom: -1px; border: 1px solid rgba(0,90,110,0.3); border-bottom: none; margin-right: 2px; white-space: nowrap; flex-shrink: 0; }
.showcase-tab:hover:not(.active) { color: #FAF8F5; background: #004050; }
.showcase-tab.active { background: #00252D; color: #FFA540; border-color: rgba(0,90,110,0.4); border-bottom: 1px solid #00252D; z-index: 2; }
.showcase-tab .material-symbols-outlined { font-size: 16px; }

/* ===== Showcase Box (reusable component) ===== */
.showcase-box { position: relative; }
.showcase-box-glow { position: absolute; inset: -12px; background: linear-gradient(to right, rgba(255,165,64,0.15), rgba(0,106,153,0.10), rgba(255,165,64,0.15)); border-radius: 16px; filter: blur(24px); opacity: 0.5; transition: opacity 1s; pointer-events: none; }
.showcase-box:hover .showcase-box-glow { opacity: 0.7; }
.showcase-box-inner { position: relative; background: rgba(0,51,64,0.60); border-radius: 16px; border: 1px solid rgba(0,90,110,0.30); padding: 12px; backdrop-filter: blur(4px); }
.showcase-box-footnote { text-align: right; color: #7A8E94; font-size: 11px; margin-top: 8px; margin-right: 4px; }

/* ===== Scroll-to-top ===== */
#scroll-top { position: fixed; bottom: 2rem; right: 2rem; z-index: 50; width: 44px; height: 44px; border-radius: 12px; background: #FFA540; color: #00252D; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(255,165,64,0.3); opacity: 0; transform: translateY(20px); transition: opacity 0.3s, transform 0.3s, background-color 0.2s; pointer-events: none; cursor: pointer; border: none; }
#scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#scroll-top:hover { background: #E8932E; transform: translateY(-2px); }