/*!
 * Barbaariye — Public Site Animation & Decoration Layer (Phase 4)
 * Loads AFTER brand-barbaariye.css. Purely additive: new utility
 * classes and refinements to existing .bar-phone / .bar-hero rules —
 * nothing here is required by any page, so pages that don't use these
 * classes are completely unaffected. Respects prefers-reduced-motion
 * throughout (see bottom of file).
 */

/* ------------------------------------------------------------------ */
/* Scroll reveal — sections fade/slide up once, the first time they   */
/* enter the viewport. Applied via public-animations.js.               */
/* ------------------------------------------------------------------ */
.bar-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.bar-reveal.is-visible { opacity: 1; transform: translateY(0); }
.bar-reveal.bar-reveal-1 { transition-delay: .05s; }
.bar-reveal.bar-reveal-2 { transition-delay: .15s; }
.bar-reveal.bar-reveal-3 { transition-delay: .25s; }
.bar-reveal.bar-reveal-4 { transition-delay: .35s; }

/* ------------------------------------------------------------------ */
/* Decorative connecting lines / particles — hero background layer.   */
/* Purely decorative <svg>/<span> elements, absolutely positioned,    */
/* z-index below content, pointer-events disabled.                    */
/* ------------------------------------------------------------------ */
.bar-hero-deco {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.bar-hero-deco svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35; }
.bar-hero-deco .bar-line { stroke: var(--bar-gold); stroke-width: 1; fill: none; opacity: .45; stroke-dasharray: 6 8; }
.bar-hero-deco .bar-node { fill: var(--bar-gold); opacity: .6; }

.bar-hero .container { position: relative; z-index: 1; }

.bar-particle {
  position: absolute; border-radius: 50%; background: var(--bar-gold);
  opacity: .35; pointer-events: none; animation: bar-particle-drift 9s ease-in-out infinite;
}
@keyframes bar-particle-drift {
  0%, 100% { transform: translate(0, 0); opacity: .25; }
  50% { transform: translate(6px, -14px); opacity: .55; }
}

/* Floating icon chips scattered around the hero — small, restrained. */
.bar-hero-icon-chip {
  position: absolute; z-index: 1; pointer-events: none;
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(201,154,59,.35);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  color: var(--bar-gold); font-size: 1.1rem;
  animation: bar-float-slow 7s ease-in-out infinite;
}

/* ------------------------------------------------------------------ */
/* Premium smartphone mockup refinements                              */
/* ------------------------------------------------------------------ */
.bar-phone {
  position: relative;
  border: 2px solid rgba(201,154,59,.4);
  box-shadow:
    0 40px 70px -25px rgba(0,0,0,.55),
    0 0 0 8px rgba(255,255,255,.03),
    0 0 0 1px rgba(201,154,59,.3);
}
/* Side buttons — purely decorative, flagship-phone detail */
.bar-phone::before, .bar-phone::after {
  content: ""; position: absolute; background: #06110b; border-radius: 2px;
}
.bar-phone::before { left: -3px; top: 90px; width: 3px; height: 46px; }
.bar-phone::after { right: -3px; top: 130px; width: 3px; height: 70px; }
/* Screen glass shine sweep */
.bar-phone .bar-phone-screen::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 24%);
  pointer-events: none;
}
.bar-phone .bar-phone-screen { position: relative; }

.bar-phone-ayah-card {
  background: #fff; border: 1px solid var(--bar-gold-100); border-radius: 14px;
  padding: 12px 14px; box-shadow: 0 6px 14px rgba(18,53,36,.08);
}
.bar-phone-ayah-card + .bar-phone-ayah-card { margin-top: 8px; }
.bar-phone-ayah-card .ayah-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; background: var(--bar-green-100);
  color: var(--bar-green-700); font-size: .65rem; font-weight: 700; flex-shrink: 0;
}
.bar-phone-ayah-card .arabic {
  font-size: 1.05rem; line-height: 2; color: var(--bar-green-700); font-weight: 700;
  direction: rtl; text-align: right;
}
.bar-phone-ayah-card .translation { font-size: .68rem; color: #6b7a71; margin-top: 4px; }
.bar-phone-surah-label {
  font-size: .68rem; text-align: center; color: var(--bar-gold-600); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px;
}

/* ------------------------------------------------------------------ */
/* Generic long-form content card (Privacy, Terms, Objective, Vision, */
/* Mission, Refund, Download, Help Center) — no hover-lift, since it  */
/* wraps static prose rather than a clickable feature tile.           */
/* ------------------------------------------------------------------ */
.bar-content-card {
  border: 1px solid var(--bar-green-100); border-radius: 18px; padding: 40px;
  background: #fff; box-shadow: 0 10px 30px rgba(18,53,36,.06);
}
.bar-content-card h2, .bar-content-card h3 { color: var(--bar-green-700); margin-top: 1.6em; }
.bar-content-card h2:first-child, .bar-content-card h3:first-child { margin-top: 0; }
.bar-content-card p { line-height: 1.75; }
.bar-content-card ul, .bar-content-card ol { line-height: 1.75; }
.bar-content-card a { color: var(--bar-green-700); text-decoration: underline; text-decoration-color: var(--bar-gold); text-underline-offset: 2px; }
@media (max-width: 576px) {
  .bar-content-card { padding: 24px; }
}

/* ------------------------------------------------------------------ */
/* Section eyebrow underline accent — small "connecting line" touch   */
/* ------------------------------------------------------------------ */
.bar-eyebrow-line {
  display: inline-flex; align-items: center; gap: 10px;
}
.bar-eyebrow-line::before, .bar-eyebrow-line::after {
  content: ""; height: 1px; width: 28px; background: var(--bar-gold); opacity: .5;
}

/* ------------------------------------------------------------------ */
/* Motion preference: disable non-essential animation/transition      */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bar-reveal { transition: none; opacity: 1; transform: none; }
  .bar-phone, .bar-phone-float, .bar-particle, .bar-hero-icon-chip,
  .bar-phone-progress span, .bar-whatsapp-float {
    animation: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* Phase 8 — responsive / bilingual QA fixes                          */
/* ------------------------------------------------------------------ */

/* Quran text deserves a proper Arabic typeface, not the Latin display
   font falling back to whatever the OS happens to substitute. Amiri is
   a classic Naskh-style face designed for Quranic typography. */
.bar-phone-ayah .arabic,
.bar-phone-ayah-card .arabic {
  font-family: 'Amiri', 'Traditional Arabic', serif;
}

/* Somali translations can run longer than the English they replace —
   guard the narrow phone-mockup screen against overflow rather than
   letting a long word push the card wider than the phone frame. */
.bar-phone-ayah-card .arabic,
.bar-phone-ayah-card .translation,
.bar-phone-surah-label {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Belt-and-braces: nothing on the public site should ever cause
   horizontal scroll, regardless of language or viewport. */
body { overflow-x: hidden; }

/* Somali nav/footer labels run longer than their English equivalents
   ("Nala Soo Xiriir" vs "Contact"), and the new language toggle adds
   another item — give the navbar breathing room in the narrow end of
   the "expanded" range instead of letting items crowd or clip. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-expand-lg .navbar-nav .nav-link { padding-left: .5rem; padding-right: .5rem; }
  .bar-lang-switch { margin-left: .25rem !important; }
}
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse { flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }
}