/* ============================================================
   Mercia Marketing Site – Custom Styles
   (Supplements Tailwind Play CDN)
   ============================================================ */

/* --- Base ----------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scrollbar-color: #B8AD9E #FAF7F2;
  scrollbar-width: thin;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Custom scrollbar ----------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #FAF7F2;
}
::-webkit-scrollbar-thumb {
  background: #B8AD9E;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #8C7E6A;
}

/* --- Nav blur transition -------------------------------------- */
.nav-blur {
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, height 0.3s ease;
}
.nav-blur.scrolled {
  background-color: rgba(250, 247, 242, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 8px rgba(44, 36, 24, 0.08);
}

/* --- Gradient accent blob ------------------------------------- */
@keyframes blob-drift {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -20px) scale(1.05);
  }
  66% {
    transform: translate(-20px, 15px) scale(0.95);
  }
}

.accent-blob {
  animation: blob-drift 8s ease-in-out infinite;
  filter: blur(60px);
  opacity: 0.35;
}

/* --- Phone mockup frame (iPhone 15-style) -------------------- */
.phone-frame {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 3rem;
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 40%, #111 100%);
  box-shadow:
    /* outer titanium bezel */
    0 0 0 1.5px #555,
    0 0 0 3px #222,
    /* right side edge highlight (depth) */
    4px 2px 6px -1px rgba(80, 80, 80, 0.5),
    /* left side edge shadow */
    -2px 0 4px rgba(0, 0, 0, 0.3),
    /* bottom edge */
    0 3px 6px rgba(0, 0, 0, 0.4),
    /* ambient shadow */
    0 25px 60px rgba(44, 36, 24, 0.3),
    0 10px 30px rgba(44, 36, 24, 0.2);
  overflow: visible;
}

/* Side buttons */
.phone-frame::after {
  content: '';
  position: absolute;
  /* Volume buttons — left side */
  top: 22%;
  left: -3px;
  width: 2.5px;
  height: 12%;
  background: linear-gradient(180deg, #444, #333, #444);
  border-radius: 2px 0 0 2px;
  box-shadow:
    0 -18px 0 0 #3a3a3a,  /* silent toggle above */
    0 40px 0 0 #3a3a3a;   /* second volume button below */
}

/* Power button — right side */
.phone-frame::before {
  content: '';
  position: absolute;
  top: 25%;
  right: -3px;
  width: 2.5px;
  height: 14%;
  background: linear-gradient(180deg, #444, #333, #444);
  border-radius: 0 2px 2px 0;
  z-index: 2;
}

.phone-screen {
  position: absolute;
  inset: 4px;
  border-radius: 2.75rem;
  background: linear-gradient(160deg, #FAF7F2 0%, #FFF8EE 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dynamic Island */
.phone-screen::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 22px;
  background: #111;
  border-radius: 20px;
  z-index: 3;
}

.phone-screen-placeholder {
  color: #B8AD9E;
  font-size: 0.875rem;
  text-align: center;
  padding: 1rem;
}

/* --- Hero phone tilt ------------------------------------------ */
.hero-phone-tilt {
  transform: perspective(800px) rotateY(-8deg);
  transition: transform 0.4s ease;
}
.hero-phone-tilt:hover {
  transform: perspective(800px) rotateY(-4deg);
}

/* --- Gradient top bar ----------------------------------------- */
.gradient-top-bar {
  height: 3px;
  background: linear-gradient(90deg, #FFC857, #F5A623, #E8961E);
}

/* --- CTA gradient banner -------------------------------------- */
.cta-gradient {
  background: linear-gradient(135deg, #FFC857 0%, #F5A623 50%, #E8961E 100%);
}

/* --- Stats counter (before GSAP populates) -------------------- */
[data-count] {
  font-variant-numeric: tabular-nums;
}

/* --- Step card hover ------------------------------------------ */
.step-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.step-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(44, 36, 24, 0.1);
}

/* --- Screenshot stagger --------------------------------------- */
.screenshot-stagger:nth-child(2) {
  margin-top: 3rem;
}
.screenshot-stagger:nth-child(3) {
  margin-top: 1.5rem;
}

/* --- App store badge ------------------------------------------ */
.store-badge {
  height: 64px;
  width: auto;
  transition: opacity 0.2s ease;
}
.store-badge:hover {
  opacity: 0.85;
}

/* --- Focus-visible styles ------------------------------------- */
a:focus-visible {
  outline: 2px solid #F5A623;
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Reduced motion ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .accent-blob { animation: none; }
  .step-card { transition: none; }
  .hero-phone-tilt { transition: none; }
}

/* --- Responsive tweaks ---------------------------------------- */
@media (max-width: 768px) {
  .hero-phone-tilt {
    transform: perspective(800px) rotateY(0deg);
  }
  .screenshot-stagger:nth-child(2),
  .screenshot-stagger:nth-child(3) {
    margin-top: 0;
  }
}