/*!
 * Mia polish · v2 additions (non-destructive).
 * Everything in this file is NEW — nothing in v1 depends on these rules,
 * so removing this file restores v1 exactly.
 */

/* ============================================================
   0 · View Transitions (native MPA morph between language pages)
   Chrome/Safari animate a cross-fade when you navigate between
   same-origin pages. Firefox falls back to a normal load.
   ============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ============================================================
   1 · Reading progress bar
   ============================================================ */
.mia-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  background: transparent;
  overflow: hidden;
}
.mia-progress__bar {
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(
    90deg,
    var(--mia-terracotta, #B5634B) 0%,
    var(--mia-amber, #C27821) 100%
  );
  box-shadow: 0 0 12px rgba(194, 120, 33, 0.35);
  transition: transform 80ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .mia-progress__bar { transition: none; }
}

/* ============================================================
   2 · Magnetic CTA (desktop) — already tuned in v2.1
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .btn-primary {
    transform: translate(var(--mx, 0px), var(--my, 0px));
    transition:
      transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
      box-shadow 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
      background 0.3s;
  }
  .btn-primary.mia-magnet--near {
    box-shadow:
      0 10px 28px -8px rgba(181, 99, 75, 0.45),
      0 0 60px -15px rgba(194, 120, 33, 0.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary { transform: none !important; }
}

/* ============================================================
   3 · Cursor spotlight (desktop only)
   A soft radial halo that follows the cursor with lag. Uses
   position:fixed + conic-gradient fallback to radial. Blend-mode
   overlay = warms up the cream palette without tinting the ink.
   ============================================================ */
.mia-spotlight {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  mix-blend-mode: multiply;
  background: radial-gradient(
    420px circle at var(--sx, 50%) var(--sy, 50%),
    rgba(194, 120, 33, 0.10),
    rgba(181, 99, 75, 0.05) 35%,
    transparent 70%
  );
}
.mia-spotlight.on { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .mia-spotlight { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mia-spotlight { display: none; }
}

/* ============================================================
   4 · Section dots navigator (left edge, desktop)
   ============================================================ */
.mia-section-dots {
  position: fixed;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.mia-section-dots.ready { opacity: 1; }
.mia-section-dots a {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(28, 25, 23, 0.18);
  transition: all 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  text-decoration: none;
}
.mia-section-dots a::after {
  content: attr(data-label);
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  font-family: var(--mia-f-body, "Source Sans 3", sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mia-muted, #6B6259);
  white-space: nowrap;
  background: rgba(250, 248, 246, 0.92);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(28, 25, 23, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(28, 25, 23, 0.05);
}
.mia-section-dots a:hover {
  background: var(--mia-terracotta, #B5634B);
  transform: scale(1.25);
}
.mia-section-dots a:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.mia-section-dots a.active {
  background: var(--mia-terracotta, #B5634B);
  box-shadow: 0 0 0 4px rgba(181, 99, 75, 0.15);
}
@media (max-width: 1100px) { .mia-section-dots { display: none; } }

/* ============================================================
   5 · Deep-link icon on section <h2>
   ============================================================ */
[id] > h2::before,
h2.h-section::before {
  content: none; /* guard against accidental double-icons */
}
.mia-anchor-btn {
  position: absolute;
  right: -36px;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(181, 99, 75, 0.10);
  color: var(--mia-terracotta, #B5634B);
  border: 1px solid rgba(181, 99, 75, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
  cursor: pointer;
  padding: 0;
  font-size: 0;
}
.mia-anchor-btn::before {
  content: "";
  width: 12px; height: 12px;
  background: currentColor;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>") center/contain no-repeat;
}
h2.mia-anchorable { position: relative; }
h2.mia-anchorable:hover .mia-anchor-btn,
h2.mia-anchorable:focus-within .mia-anchor-btn {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.mia-anchor-btn:hover {
  background: var(--mia-terracotta, #B5634B);
  color: var(--mia-cream, #F3EDE7);
  transform: translateY(-50%) scale(1.08);
}
.mia-anchor-btn.copied {
  background: var(--mia-terracotta, #B5634B);
  color: var(--mia-cream, #F3EDE7);
  transform: translateY(-50%) scale(1);
  opacity: 1;
}
.mia-anchor-btn.copied::before {
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}
@media (max-width: 900px) {
  .mia-anchor-btn { right: auto; left: 0; top: auto; bottom: -32px; transform: scale(0.9); }
  h2.mia-anchorable:hover .mia-anchor-btn { transform: scale(1); }
}

/* 6 · 3D phone tilt · REMOVED — v1's scroll-linked phone animations
   are the authoritative behaviour. */

/* ============================================================
   7 · Border Beam (21st.dev / Aceternity) on .btn-primary
   Rotating conic gradient around the perimeter. Masked so only
   the border shows. Subtle by default, pulses on hover.
   ============================================================ */
.btn-primary {
  position: relative;
  isolation: isolate;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0deg,
    rgba(232, 195, 138, 0.55) 60deg,
    rgba(181, 99, 75, 0.35) 120deg,
    transparent 180deg,
    transparent 360deg
  );
  animation: beam-rotate 4.2s linear infinite;
  z-index: -1;
  opacity: 0.55;
  filter: blur(0.5px);
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  background: var(--mia-ink, #1C1917);
  z-index: -1;
}
.btn-primary:hover::before {
  opacity: 1;
  animation-duration: 2.2s;
}
.btn-primary:hover::after { background: var(--mia-terracotta, #B5634B); }
@keyframes beam-rotate {
  to { --beam-angle: 360deg; }
}
@property --beam-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@media (prefers-reduced-motion: reduce) {
  .btn-primary::before { animation: none; opacity: 0; }
}

/* ============================================================
   8 · Animated Beams in AI section (21st.dev / Magic UI)
   SVG beams pulse from the left edge toward each .ai-chip,
   giving the feeling of "Mia executing". Layer below chips.
   ============================================================ */
.ai-keys .ai-conv {
  position: relative;
  overflow: visible;
}
.ai-beam {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
}
.ai-beam svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ai-beam-path {
  fill: none;
  stroke: rgba(181, 99, 75, 0.35);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 120 400;
  stroke-dashoffset: 0;
  animation: beam-flow 3s linear infinite;
}
@keyframes beam-flow {
  to { stroke-dashoffset: -520; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-beam-path { animation: none; stroke-dasharray: 0; }
}

/* ============================================================
   9 · Meteors (21st.dev / Aceternity) in .final-cta
   Diagonal shooting stars in the dark background.
   ============================================================ */
.final-cta { position: relative; overflow: hidden; }
.mia-meteors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.mia-meteor {
  position: absolute;
  top: var(--my, -10%);
  left: var(--mx, 110%);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--mia-amber-light, #E8C38A);
  box-shadow: 0 0 6px 1px rgba(232, 195, 138, 0.7);
  animation: meteor-fall var(--md, 4s) linear infinite;
  animation-delay: var(--ml, 0s);
}
.mia-meteor::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 70px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 195, 138, 0.8));
  transform: translateY(-50%) rotate(215deg);
  transform-origin: left center;
}
@keyframes meteor-fall {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate3d(-120vw, 120vh, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mia-meteor { display: none; }
}

/* ============================================================
   11 · Mobile fixes (reported 2026-04-25)
   ------------------------------------------------------------
   a) Sticky nav was letting page content bleed through above the
      header on iOS — make it fully opaque on phones and ensure it
      extends through the entire safe-area inset.
   b) Hero felt too dense on the first viewport — reduce sizes and
      add breathing room without removing copy.
   ============================================================ */

/* (a) Nav — fully opaque on mobile, plus a top "filler" rect that
       guarantees the safe-area band has solid background even
       during iOS rubber-band overscroll. */
@media (max-width: 900px) {
  .nav {
    background: #F7F1E8 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav.scrolled {
    background: #F7F1E8 !important;
    box-shadow: 0 4px 18px rgba(28, 25, 23, 0.05);
  }
  /* Filler bar above the nav — covers the safe-area band so nothing
     ever leaks through during scroll. */
  .nav::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 100%;
    height: 200px; /* generous; only the visible safe-area portion shows */
    background: #F7F1E8;
    pointer-events: none;
  }
}

/* (b) Hero density on mobile */
@media (max-width: 640px) {
  /* Smaller, calmer eyebrow */
  .hero .hero-eyebrow {
    font-size: 11px;
    letter-spacing: 0.18em;
  }
  /* Tagline a touch smaller — still huge but breathable */
  .hero-tag {
    font-size: clamp(48px, 14vw, 78px) !important;
    line-height: 0.96;
    margin-top: 10px;
    margin-bottom: 22px;
  }
  /* Secondary line: stack the two parts, more readable */
  .hero-secondary {
    font-size: clamp(22px, 5.6vw, 28px) !important;
    line-height: 1.18;
    margin-bottom: 18px;
  }
  /* Lede: ease density, slightly smaller */
  .hero-lede {
    font-size: 15.5px !important;
    line-height: 1.55;
    margin-bottom: 22px;
  }
  /* Stats row: less heavy on mobile */
  .hero-stats {
    font-size: 12px;
    letter-spacing: 0.06em;
    margin-bottom: 24px;
  }
  /* Pull the whole hero up so it doesn't feel crammed under the nav */
  .hero {
    padding-top: 8px;
    padding-bottom: 40px;
  }
  .hero-inner {
    gap: 0;
  }
}

/* ============================================================
   10 · Loader — real logo, static with a soft breathing pulse.
   Fades out once the display font is ready (document.fonts.ready)
   or after a 2.5s hard-cap.
   ============================================================ */
.mia-loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--mia-cream, #F3EDE7);
  display: grid;
  place-items: center;
  transition: opacity 0.55s ease, visibility 0.55s;
}
.mia-loader.gone {
  opacity: 0;
  visibility: hidden;
}
.mia-loader__mark {
  width: 96px;
  height: 96px;
  display: block;
  opacity: 0;
  animation:
    loader-fade-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) forwards,
    loader-pulse 2.6s ease-in-out 0.5s infinite;
  filter: drop-shadow(0 6px 20px rgba(181, 99, 75, 0.22));
}
@keyframes loader-fade-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes loader-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.95; }
  50%      { transform: scale(1.04); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .mia-loader { display: none; }
  .mia-loader__mark { animation: none; opacity: 1; }
}