/* =========================================================================
   Shared "Apple-sleek" motion layer — additive, site-wide.
   Included on every page via <link rel="stylesheet" href="motion.css">
   placed at the END of <head>, after each page's own <style> blocks, so
   it can layer tactile/scroll polish on top without fighting page-specific
   layout rules. It intentionally never touches position/layout properties
   — only transitions, transforms and easing.
   ========================================================================= */

:root{
  --hl-ez-spring: cubic-bezier(.16,1,.3,1);      /* Apple-style spring-out */
  --hl-ez-smooth: cubic-bezier(.22,.8,.32,1);    /* smooth deceleration */
  --hl-ez-tap:    cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

/* ---- Tactile press feedback on interactive elements ---- */
@media (prefers-reduced-motion: no-preference){
  button, a, .btn, .cta, .like-btn, .blog-card, .photo-card, [role="button"], .tap-scale{
    transition: transform .18s var(--hl-ez-tap), opacity .18s var(--hl-ez-tap);
  }
  button:active, a:active, .btn:active, .cta:active, .like-btn:active,
  .blog-card:active, .photo-card:active, [role="button"]:active, .tap-scale:active{
    transform: scale(.96);
  }
  @media (hover:hover){
    .blog-card:hover, .photo-card:hover{
      transform: translateY(-4px);
    }
  }
}

/* ---- Generic scroll-reveal utility: opt in with data-reveal ---- */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
}
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{
    transition: opacity .8s var(--hl-ez-smooth), transform .8s var(--hl-ez-smooth);
  }
}
[data-reveal].in{
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-group] > [data-reveal]{ transition-delay: calc(var(--hl-reveal-i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; }
}

/* ---- Refined mobile nav drawer feel (transition/blur only, no layout) ---- */
@media (max-width: 780px){
  .mobile-nav{
    transition-timing-function: var(--hl-ez-spring) !important;
  }
  .mobile-nav-overlay{
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
  }
}

/* ---- Momentum-friendly touch scrolling for horizontal/scrollable rails ---- */
.hl-momentum-scroll{
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
