/**
 * base.css — Appcademic design-system layer.
 * Loaded on every eStore page after style.css / page CSS. Consolidates what
 * used to be a copy-pasted <style> block inside index.html, and adds the
 * modern motion / typography / responsive fixes for the 2026 revamp.
 */

:root {
  --brand-primary: #2d71a1;
  --brand-primary-dark: #1f4f79;
  --brand-accent: #3db3c5;
  --brand-accent-2: #274685;
  --brand-ink: #1c1f26;
  --brand-muted: #6b7280;
  --brand-surface: #f7f9fc;
  --motion-fast: 180ms;
  --motion-base: 400ms;
  --motion-slow: 800ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Smooth in-page scrolling (anchors, skip link) — off for reduced-motion users */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Accessible skip-link, hidden until focused */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 2000;
  background: var(--brand-primary-dark);
  color: #fff;
  padding: 0.75em 1.25em;
  border-radius: 0 0 8px 0;
}

.skip-link:focus {
  left: 0;
  top: 0;
  width: auto;
  height: auto;
}

/* -------------------------------------------------------------
   Scroll-reveal utility (paired with assets/js/reveal.js)
   ------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -------------------------------------------------------------
   Hover-lift for cards / feature tiles
   ------------------------------------------------------------- */
.hover-lift {
  transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
}

.hover-lift:hover, .hover-lift:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -20px rgba(31, 79, 121, 0.35);
}

/* Buttons get a little more presence */
.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent-2));
  border: none;
  transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.btn-primary:hover, .btn-primary:focus {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(45, 113, 161, 0.5);
}

a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------
   CSS/SVG animated hero background (replaces Vanta.js/three.js)
   ------------------------------------------------------------- */
.hero-animated-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  background: linear-gradient(120deg, #eef4fb 0%, #dfeaf7 45%, #e7f6f8 100%);
}

.hero-animated-bg .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
  animation: blob-float 18s ease-in-out infinite;
}

.hero-animated-bg .blob--1 {
  width: 420px;
  height: 420px;
  top: -120px;
  left: -100px;
  background: radial-gradient(circle at 30% 30%, var(--brand-accent), transparent 70%);
  animation-duration: 22s;
}

.hero-animated-bg .blob--2 {
  width: 520px;
  height: 520px;
  bottom: -180px;
  right: -140px;
  background: radial-gradient(circle at 60% 40%, var(--brand-primary), transparent 70%);
  animation-duration: 26s;
  animation-delay: -6s;
}

.hero-animated-bg .blob--3 {
  width: 300px;
  height: 300px;
  top: 30%;
  right: 12%;
  background: radial-gradient(circle at 50% 50%, var(--brand-accent-2), transparent 70%);
  animation-duration: 20s;
  animation-delay: -3s;
}

@keyframes blob-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -20px) scale(1.08); }
  66% { transform: translate(-20px, 25px) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-animated-bg .blob {
    animation: none;
  }
}

/* -------------------------------------------------------------
   Responsive fixes for fixed-pixel legacy hero/carousel markup
   ------------------------------------------------------------- */
.hero-section .carousel-inner,
.hero-section .carousel-item {
  height: clamp(420px, 78vh, 800px) !important;
}

.hero-section .carousel-control-prev,
.hero-section .carousel-control-next {
  height: clamp(420px, 78vh, 650px) !important;
}

.hero-section .carousel-caption {
  top: clamp(70px, 14vh, 165px) !important;
}

.hero-section img[style*="width:500px"],
.hero-section img[style*="width: 500px"] {
  width: 100% !important;
  max-width: 420px !important;
  height: auto !important;
}

@media (max-width: 768px) {
  .hero-section .carousel-caption {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    /* Bootstrap's own .carousel-caption sets left/right:15%, which under
       position:relative offsets the box instead of sizing it — pushing it
       partly off-screen (clipped by html{overflow-x:hidden}, which is why
       the paragraph text was getting cut off mid-word). left/right:0 above
       cancels that. padding-top clears the 80px fixed header (was only
       2rem, so the heading rendered underneath/behind the header). */
    padding: 6.5rem 1.25rem 2rem !important;
  }
  .hero-section .carousel-inner,
  .hero-section .carousel-item {
    height: auto !important;
    min-height: clamp(480px, 100vh, 720px) !important;
  }
  .hero-section .row {
    text-align: center !important;
  }
  .hero-section img {
    margin: 0 auto;
  }
}

img {
  max-width: 100%;
  height: auto;
}