/* ============ AutoLink: WebKit luxury layer ============
   Progressive enhancement only. Every rule below either uses a -webkit-
   prefixed property Safari understands, or sits inside @supports, or
   degrades silently in engines that ignore it. The base theme in
   autolink.css is complete without this file; nothing here changes
   layout, copy, colors, or touch-target sizes. Zero em dashes. */

/* 1. Richer frosted-glass sticky header: the iOS signature look.
      Deeper blur plus saturation lift reads as expensive glass. */
#al2.scrolled .topbar{
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  backdrop-filter:blur(20px) saturate(1.6);
  background:rgba(255,255,255,.72);
}

/* 2. Frosted mobile menu panel to match the header glass. */
@media(max-width:767px){
  #al2 .navmenu[open] .pagenav{
    background:rgba(255,255,255,.88);
    -webkit-backdrop-filter:blur(18px) saturate(1.5);
    backdrop-filter:blur(18px) saturate(1.5);
  }
}

/* 3. Gradient ink on the hero accent word: Carolina blue melting into
      deep navy. Falls back to the solid Carolina deep in autolink.css
      wherever background-clip:text is unsupported. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #al2 .hero h1 .accent{
    background-image:linear-gradient(115deg,#2E7BB8 0%,#13294B 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
  }
}

/* 4. Scroll progress hairline in Carolina blue across the top of the
      fixed header. Pure CSS scroll-driven animation (Safari 26+, Chrome 115+);
      absent everywhere else, and never required for comprehension. The 1s
      duration is required: a zero duration would pin the fill state instead
      of tracking scroll progress. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    #al2 .topbar::after{
      content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;
      background:linear-gradient(90deg,#7BAFD4,#2E7BB8);
      transform-origin:0 50%;transform:scaleX(0);
      animation:al-progress 1s linear both;
      animation-timeline:scroll(root);
    }
    @keyframes al-progress{to{transform:scaleX(1)}}
  }
}

/* 5. Scroll-linked hero settle RETIRED in 2.0.5. The drift on .hero-inner was
      removed so the Tesla photo band is the only scroll-driven placement
      (the progress hairline in §4 is the other authorized motion). The legacy
      rAF parallax on .hero-bg was removed in the same release, so the old
      comment naming JS as "the motion path for older engines" no longer
      applies either. */

/* 6. Squircle buttons where the engine draws them. Harmless elsewhere. */
@supports (corner-shape:squircle){
  #al2 .btn{corner-shape:squircle}
}

/* 7. iOS tap polish: no long-press callout on controls, no gray tap flash
      anywhere inside the page module. */
#al2 .btn,
#al2 .navtoggle,
#al2 .faq-q{-webkit-touch-callout:none}
#al2{-webkit-tap-highlight-color:transparent}

/* 8. Prettier paragraph wrapping where supported; balance stays the
      default for headlines in autolink.css. */
@supports (text-wrap:pretty){
  #al2 .hero-sub,
  #al2 .section-lede,
  #al2 .about-copy p{text-wrap:pretty}
}

/* 9. Crisp image rendering hint for WebKit on the Tesla proof photo. */
#al2 .photo-viewport img{image-rendering:-webkit-optimize-contrast}