/* ══════════════════════════════════════════════════════════════
   Shared CSS — PresConnect
   Loaded by every page via <link rel="stylesheet" href="shared/shared.css">
   ══════════════════════════════════════════════════════════════ */

/* ── Navbar ─────────────────────────────────────────────── */
#navbar {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 32px); max-width: 1100px; z-index: 50;
  border-radius: 30px; overflow: hidden;
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 1px 0 rgba(255,255,255,0.10) inset;
}
/* Desktop nav links — each button adapts independently via --btn-fg */
.nav-link { --btn-fg: 255,255,255; --btn-alpha: 0.88; color: rgba(var(--btn-fg), var(--btn-alpha)); transition: color 0.3s ease; }
.nav-link:hover { color: #E84B1E; }
.nav-active { color: #fff !important; background: #E84B1E; border-radius: 9999px; padding: 4px 14px; }
/* Hamburger — adapts independently via --btn-fg */
#hamburger-btn { --btn-fg: 255,255,255; --btn-alpha: 0.88; }
.mobile-nav-section { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.32s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease; }
#navbar.menu-open .mobile-nav-section { opacity: 1; }
@media (orientation: landscape) and (max-width: 1023px) {
  #navbar.menu-open .mobile-nav-section {
    overflow-y: auto;
    max-height: calc(100vh - 100px) !important;
  }
}
.mob-link {
  --btn-fg: 255,255,255;
  --btn-alpha: 0.88;
  display: block; padding: 14px 20px; border-radius: 30px;
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(var(--btn-fg), 0.9);
  text-align: center;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s cubic-bezier(0.4,0,0.2,1);
}
.mob-link:hover {
  background: rgba(var(--btn-fg), 0.08); color: rgba(var(--btn-fg), 1);
  transform: scale(1.02);
}
.mob-link:active { transform: scale(0.97); }
.mob-active {
  background: #E84B1E !important; color: #fff !important;
  box-shadow: 0 4px 20px rgba(232,75,30,0.3);
}
.hamburger-icon { width: 22px; height: 16px; display: flex; flex-direction: column; justify-content: space-between; }
.hamburger-icon span { display: block; height: 2px; width: 100%; background: rgba(var(--btn-fg), var(--btn-alpha)); border-radius: 2px; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s ease; transform-origin: center; }
#navbar.menu-open .hamburger-icon span:first-child { transform: translateY(7px) rotate(45deg); }
#navbar.menu-open .hamburger-icon span:last-child  { transform: translateY(-7px) rotate(-45deg); }

/* ── Hero grain (shared noise texture overlay) ────────── */
.hero-grain::after {
  content: ''; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* ── Hero entrance animation ──────────────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-in {
  opacity: 0; will-change: transform, opacity;
  animation: heroFadeUp 0.7s cubic-bezier(0.4,0,0.2,1) forwards;
}

/* ── Ambient orb drift ────────────────────────────────── */
@keyframes orbDrift {
  0%, 100% { transform: translateY(0px) scale(1); }
  50%      { transform: translateY(-18px) scale(1.04); }
}
.orb-drift-1 { animation: orbDrift 9s ease-in-out infinite; }
.orb-drift-2 { animation: orbDrift 12s ease-in-out infinite reverse; }

/* ── Scroll reveal — fade + gentle scale pop ──────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  will-change: transform, opacity;
  transition-property: opacity, transform !important;
  transition-duration: 0.8s !important;
  transition-timing-function: cubic-bezier(0.22,1,0.36,1) !important;
  pointer-events: none;
}
.reveal.visible { opacity: 1; transform: none; pointer-events: auto; }

/* ── Scroll reveal — animation variants (data-anim) ── */
.reveal[data-anim="fade-down"]  { transform: translateY(-20px) scale(0.98); }
.reveal[data-anim="fade-left"]  { transform: translateX(-30px) scale(0.98); }
.reveal[data-anim="fade-right"] { transform: translateX(30px) scale(0.98); }
.reveal[data-anim="zoom-in"]    { transform: scale(0.85); }
.reveal[data-anim="none"]       { opacity: 1; transform: none; transition: none !important; pointer-events: auto; }
.reveal[data-anim="none"].visible { opacity: 1; transform: none; }

/* ── Scroll reveal — speed variants (data-anim-speed) ── */
.reveal[data-anim-speed="slow"] { transition-duration: 1.2s !important; }
.reveal[data-anim-speed="fast"] { transition-duration: 0.4s !important; }

/* ── Persistent float animation (applied after reveal completes) ── */
@keyframes sectionFloat {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}
.reveal.visible[data-anim-float="gentle"] { animation: sectionFloat 6s ease-in-out infinite; }
.reveal.visible[data-anim-float="slow"]   { animation: sectionFloat 9s ease-in-out infinite; }
.reveal.visible[data-anim-float="fast"]   { animation: sectionFloat 3.5s ease-in-out infinite; }

/* ── Footer ──────────────────────────────────────────── */
.footer-link { display: inline-block; transition: color 0.18s ease, transform 0.18s ease; }
.footer-link:hover { transform: translateX(4px); }

/* ── Base page styles (shared by all pages) ──────────── */
html { background: #fff; overscroll-behavior: none; scroll-behavior: smooth; }
body { font-family: 'Barlow', sans-serif; background: #fff; overflow-x: hidden; max-width: 100%; }

/* ── WhatsApp icon pulse ─────────────────────────────── */
@keyframes waPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 8px 32px rgba(232,75,30,0.35); }
  50%      { transform: scale(1.08); box-shadow: 0 14px 44px rgba(232,75,30,0.55); }
}
.wa-pulse { animation: waPulse 3.5s ease-in-out infinite; }

/* ── Hero entrance delay utility classes ─────────────── */
.hero-in-d1 { animation-delay: 0.10s; }
.hero-in-d2 { animation-delay: 0.22s; }
.hero-in-d3 { animation-delay: 0.34s; }
.hero-in-d4 { animation-delay: 0.46s; }
.hero-in-d5 { animation-delay: 0.58s; }

/* ── Hero mobile min-height override ─────────────────── */
@media (max-width: 639px) {
  #page-hero { min-height: 724px !important; }
}

/* ── Reduce motion for accessibility ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-in { animation: none; opacity: 1; }
  .reveal, .reveal[data-anim] { transition: none; opacity: 1; transform: none; pointer-events: auto; }
  .reveal.visible[data-anim-float] { animation: none; }
  .orb-drift-1, .orb-drift-2 { animation: none; }
  .wa-pulse { animation: none; }
}

/* ── Cross-document page transitions (View Transitions API, MPA) ── */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-fade-out 0.35s cubic-bezier(0.4,0,0.2,1) forwards;
}
::view-transition-new(root) {
  animation: vt-fade-in 0.4s cubic-bezier(0.22,1,0.36,1) forwards;
}
@keyframes vt-fade-out {
  from { opacity:1; }
  to   { opacity:0; }
}
@keyframes vt-fade-in {
  from { opacity:0; }
  to   { opacity:1; }
}
/* Keep navbar static during page transitions */
#navbar { view-transition-name: navbar; }
::view-transition-old(navbar) { display: none; }
::view-transition-new(navbar) { animation: none; }

/* Nav active pill spring pop-in */
@keyframes navPillPop {
  from { opacity:0; transform:scale(0.7); }
  60%  { opacity:1; transform:scale(1.08); }
  to   { opacity:1; transform:scale(1); }
}
.nav-active { animation: navPillPop 0.38s cubic-bezier(0.34,1.56,0.64,1) both; }
.mob-active { animation: navPillPop 0.38s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay:0.05s; }