/* ==========================================================
   ADÉMA AFRIK — Visual signature layer
   Non-destructive enhancement: loader, hero depth, logo presence,
   micro-interactions, footer signature, mobile polish.
   ========================================================== */

:root {
  --adema-blue: #0f4ba8;
  --adema-blue-deep: #071b3d;
  --adema-gold: #d4a646;
  --adema-gold-light: #f0c96f;
  --adema-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Premium loader ---------- */
#page-loader {
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 28% 20%, rgba(38, 103, 209, .28), transparent 34%),
    radial-gradient(circle at 78% 82%, rgba(212, 166, 70, .23), transparent 32%),
    linear-gradient(145deg, #06152f 0%, #0a2e6a 48%, #0f4ba8 100%);
  transition: opacity .52s var(--adema-ease), visibility .52s ease, transform .72s var(--adema-ease);
  animation: adema-loader-safety 0s linear 3s forwards;
}
#page-loader::before,
#page-loader::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
#page-loader::before {
  width: 42vw;
  height: 42vw;
  min-width: 340px;
  min-height: 340px;
  left: -13vw;
  top: -18vw;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 46px rgba(255,255,255,.025), 0 0 0 92px rgba(255,255,255,.018);
}
#page-loader::after {
  width: 28vw;
  height: 28vw;
  min-width: 260px;
  min-height: 260px;
  right: -8vw;
  bottom: -12vw;
  border: 1px solid rgba(240,201,111,.2);
  box-shadow: 0 0 80px rgba(212,166,70,.1);
}
#page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.018);
}
.loader-box {
  width: min(440px, calc(100vw - 38px));
  padding: 30px 28px 26px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.055));
  box-shadow: 0 30px 90px rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform-origin: center;
  animation: adema-loader-card .75s var(--adema-ease) both;
}
.loader-box img {
  width: 132px;
  height: 126px;
  object-fit: contain;
  margin: 0 auto 16px;
  background: #fff;
  border-radius: 26px;
  padding: 12px;
  box-shadow: 0 18px 46px rgba(0,0,0,.2);
  animation: adema-logo-reveal .72s .08s var(--adema-ease) both;
}
.loader-box strong {
  font-size: clamp(1.35rem, 4vw, 1.75rem);
  letter-spacing: -.025em;
  animation: adema-loader-copy .7s .18s var(--adema-ease) both;
}
.loader-box > span:not(.loader-percent) {
  display: block;
  color: rgba(255,255,255,.78);
  animation: adema-loader-copy .7s .24s var(--adema-ease) both;
}
.loader-line {
  width: 100%;
  height: 6px;
  margin: 20px auto 8px;
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  position: relative;
}
.loader-line span {
  width: var(--loader-progress, 0%);
  transform: none;
  animation: none;
  background: linear-gradient(90deg, var(--adema-gold), #fff4c8, var(--adema-gold-light));
  box-shadow: 0 0 18px rgba(240,201,111,.42);
  transition: width .16s ease-out;
}
.loader-percent {
  display: block;
  text-align: right;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: .78rem;
  color: rgba(255,255,255,.68);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
@keyframes adema-loader-card {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes adema-logo-reveal {
  from { opacity: 0; transform: translateY(12px) scale(.82) rotate(-2deg); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes adema-loader-copy {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: none; }
}
@keyframes adema-loader-safety {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* ---------- Header & logo presence ---------- */
.logo-wrap {
  position: relative;
  transition: transform .35s var(--adema-ease);
}
.logo-wrap:hover { transform: translateY(-2px); }
.logo-wrap img {
  filter: drop-shadow(0 8px 15px rgba(15,75,168,.08));
  transition: transform .45s var(--adema-ease), filter .45s ease;
}
.logo-wrap:hover img {
  transform: scale(1.045);
  filter: drop-shadow(0 12px 22px rgba(15,75,168,.14));
}
.site-header.is-scrolled .logo-wrap img { transform: scale(.96); }

/* ---------- Exceptional but restrained hero ---------- */
.hero,
.page-hero {
  isolation: isolate;
  position: relative;
  overflow: hidden;
}
.hero::after,
.page-hero::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -210px;
  top: 12%;
  border-radius: 50%;
  border: 1px solid rgba(15,75,168,.08);
  box-shadow: 0 0 0 70px rgba(15,75,168,.025), 0 0 0 140px rgba(212,166,70,.018);
  pointer-events: none;
  z-index: -1;
}
.hero-copy h1,
.page-hero h1 {
  position: relative;
  text-wrap: balance;
}
.hero-copy h1::after,
.page-hero h1::after {
  content: "";
  display: block;
  width: 112px;
  height: 4px;
  margin-top: 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--adema-gold), rgba(212,166,70,.15));
  transform-origin: left;
  animation: adema-title-line .9s .65s var(--adema-ease) both;
}
@keyframes adema-title-line {
  from { opacity: 0; transform: scaleX(.08); }
  to { opacity: 1; transform: scaleX(1); }
}
.hero-media {
  --hero-depth-x: 0px;
  --hero-depth-y: 0px;
  position: relative;
  transform: translate3d(var(--hero-depth-x), var(--hero-depth-y), 0);
  transition: transform .7s var(--adema-ease);
}
.hero-media::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: -10px 18px 18px -10px;
  border: 1px solid rgba(212,166,70,.55);
  border-radius: 36px;
  pointer-events: none;
  opacity: .72;
  transform: translate(12px, 12px);
}
.hero-media::after {
  content: "";
  position: absolute;
  z-index: 5;
  right: -14px;
  top: 28px;
  width: 86px;
  height: 86px;
  border-radius: 22px;
  background: #fff url('/assets/images/favicon-source.png') center/68% no-repeat;
  box-shadow: 0 18px 42px rgba(8,35,79,.18);
  border: 1px solid rgba(15,75,168,.12);
  pointer-events: none;
  animation: adema-hero-logo-float 5.5s ease-in-out infinite;
}
.hero-card,
.page-hero-media {
  position: relative;
  box-shadow: 0 32px 80px rgba(12,31,68,.16);
}
.hero-card::after,
.page-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(145deg, rgba(255,255,255,.08), transparent 35%, rgba(7,27,61,.08));
  mix-blend-mode: soft-light;
}
.hero-float {
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 24px 52px rgba(7,27,61,.28);
}
.hero-float::before {
  content: "";
  position: absolute;
  left: 18px;
  top: -2px;
  width: 58px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--adema-gold), #f7df9b);
}
@keyframes adema-hero-logo-float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(.6deg); }
}


body.site-loaded .hero-media {
  animation: adema-hero-settle .82s .06s var(--adema-ease) both;
}
@keyframes adema-hero-settle {
  from { opacity: .78; transform: translate3d(var(--hero-depth-x), calc(var(--hero-depth-y) + 12px), 0) scale(.992); }
  to { opacity: 1; transform: translate3d(var(--hero-depth-x), var(--hero-depth-y), 0) scale(1); }
}

/* ---------- Buttons, links & cards ---------- */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 24px rgba(11,31,68,.07);
}
.btn::before {
  content: "";
  position: absolute;
  inset: -2px auto -2px -48%;
  width: 38%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transition: left .65s var(--adema-ease);
  z-index: -1;
}
.btn:hover::before { left: 118%; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 17px 34px rgba(11,31,68,.14); }
.btn:active { transform: translateY(-1px) scale(.992); }
.nav a { transition: color .25s ease, transform .3s var(--adema-ease); }
.nav a:hover { transform: translateY(-1px); }
.icon-badge {
  transition: transform .42s var(--adema-ease), background-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.card:hover .icon-badge,
.value-card:hover .icon-badge {
  transform: translateY(-3px) rotate(-2deg) scale(1.05);
  box-shadow: 0 10px 24px rgba(15,75,168,.12);
}
.gallery .item::after,
.feature-card .media::after,
.media-slab::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(130deg, transparent 40%, rgba(255,255,255,.14) 52%, transparent 64%);
  transform: translateX(-130%);
  transition: transform .95s var(--adema-ease);
}
.gallery .item:hover::after,
.feature-card:hover .media::after,
.media-slab:hover::after { transform: translateX(130%); }
.gallery .item,
.feature-card .media,
.media-slab { position: relative; }

/* ---------- Footer signature ---------- */
.footer-logo {
  transition: transform .45s var(--adema-ease), box-shadow .45s ease;
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}
.footer-logo:hover { transform: translateY(-4px) scale(1.025); box-shadow: 0 18px 42px rgba(0,0,0,.2); }
.footer-bottom { align-items: center; }
.signature {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .78rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.055);
}
.signature::before {
  content: "✦";
  color: var(--adema-gold-light);
  font-size: .85rem;
}
.signature a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  position: relative;
}
.signature a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--adema-gold), transparent);
  transform-origin: left;
  transform: scaleX(.52);
  transition: transform .35s var(--adema-ease);
}
.signature a:hover::after { transform: scaleX(1); }

/* ---------- Mobile ---------- */
@media (max-width: 860px) {
  .loader-box { padding: 24px 20px 22px; border-radius: 24px; }
  .loader-box img { width: 105px; height: 102px; border-radius: 21px; }
  .hero::after, .page-hero::after { width: 280px; height: 280px; right: -180px; }
  .hero-media::before { inset: -5px 10px 10px -5px; border-radius: 30px; }
  .hero-media::after { width: 62px; height: 62px; border-radius: 17px; right: -4px; top: 20px; }
  .hero-copy h1::after, .page-hero h1::after { width: 78px; margin-top: 14px; }
  .btn:hover, .card:hover, .metric:hover, .value-card:hover, .contact-item:hover, .testimonial:hover, .process .step:hover, .blog-card:hover, .side-item:hover { transform: none; }
}

@media (max-width: 560px) {
  .hero-media::after { display: none; }
  .hero-media::before { opacity: .45; }
  .signature { width: 100%; justify-content: center; }
}

/* Motion and accessibility: no endless floating / loader lock for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  #page-loader { animation-delay: .7s !important; }
  .hero-media::after, .hero-copy h1::after, .page-hero h1::after { animation: none !important; }
  .hero-media { transform: none !important; }
}


/* ---------- Final public QA safeguards ---------- */
.footer-links a,
.contact-item a,
.contact-item span,
.logo-text { overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .header-inner { gap: 8px; }
  .logo-wrap { gap: 9px; min-width: 0; }
  .logo-wrap img { width: 56px; flex: 0 0 auto; }
  .logo-text { min-width: 0; }
  .logo-text strong { font-size: 1rem; white-space: nowrap; }
  .logo-text span { display: none; }
  .menu-toggle { width: 44px; height: 44px; flex: 0 0 auto; }
}