/* HP Mobile Detailing: smooth motion layer.
   Everything here is skipped for visitors who prefer reduced motion,
   and content stays visible if JavaScript does not run (.js is set by site.js). */
@media (prefers-reduced-motion: no-preference) {
  /* Hero entrance: staggered rise + soft blur-in */
  .hero-copy > *, .offer-card { animation: hp-enter .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero-copy > :nth-child(1) { animation-delay: .05s; }
  .hero-copy > :nth-child(2) { animation-delay: .15s; }
  .hero-copy > :nth-child(3) { animation-delay: .28s; }
  .hero-copy > :nth-child(4) { animation-delay: .38s; }
  .hero-copy > :nth-child(5) { animation-delay: .48s; }
  .hero-copy > :nth-child(6) { animation-delay: .58s; }
  .offer-card { animation-name: hp-enter-card; animation-delay: .3s; animation-duration: 1s; }
  @keyframes hp-enter { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  @keyframes hp-enter-card { from { opacity: 0; transform: translateY(30px) scale(.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

  /* Slow cinematic drift on the hero photo + breathing red glow */
  .hero-backdrop { animation: hp-kenburns 22s ease-in-out infinite alternate; transform-origin: 60% 50%; }
  @keyframes hp-kenburns { from { transform: scale(1.02); } to { transform: scale(1.1) translateX(-1.5%); } }
  .daylight-hero::after { animation: hp-glow 7s ease-in-out infinite alternate; }
  @keyframes hp-glow { from { opacity: .65; transform: translate(0,0) scale(1); } to { opacity: 1; transform: translate(60px,40px) scale(1.12); } }

  /* Price: gentle pop, then a light sweep across the numbers */
  .hero-copy .discount-offer > strong { position: relative; display: inline-block; background: linear-gradient(100deg, var(--accent) 40%, #ffd0d0 50%, var(--accent) 60%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: hp-shine 4.5s ease-in-out 1.2s infinite; }
  .hero-copy .discount-offer > strong > span { -webkit-text-fill-color: var(--red); }
  @keyframes hp-shine { 0%, 60% { background-position: 100% 0; } 100% { background-position: -50% 0; } }
  .status-dot { animation: hp-pulse 2s ease-out infinite; }
  @keyframes hp-pulse { 0% { box-shadow: 0 0 0 0 #ff5a5c80; } 100% { box-shadow: 0 0 0 10px #ff5a5c00; } }

  /* Scroll reveal (classes added by site.js) */
  .js .reveal { opacity: 0; transform: translateY(28px); filter: blur(4px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), filter .8s ease; transition-delay: var(--reveal-delay, 0s); }
  .js .reveal.is-visible { opacity: 1; transform: none; filter: none; }
  .js .reveal-zoom { transform: scale(.96) translateY(20px); }

  /* Buttons: lift + glossy light sweep */
  .button { position: relative; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, background .3s; }
  .button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; }
  .button:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 16px 34px -10px #be1c1e99; }
  .button:hover::after { transform: translateX(120%); }
  .button:active { transform: translateY(0) scale(.98); }
  .button > span { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .button:hover > span { transform: translate(3px,-3px); }
  .mobile-cta-button { animation: hp-cta-breathe 3.2s ease-in-out infinite; }
  @keyframes hp-cta-breathe { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 20px -8px #be1c1e88; } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 30px -4px #be1c1ecc; } }

  /* Cards: smooth lift on hover */
  .benefit, .reason, .review-card { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .3s; }
  .benefit:hover, .reason:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px #4a1b1c88, inset 0 1px 0 #fff; }
  .benefit-icon { transition: transform .5s cubic-bezier(.2,.7,.2,1), background .3s; }
  .benefit:hover .benefit-icon { transform: rotate(-8deg) scale(1.08); background: #be1c1e22; }
  .review-card:hover { transform: translateY(-4px); }

  /* Gallery + story photos: slow zoom inside the frame */
  .portfolio-grid figure { overflow: hidden; border-radius: 16px; }
  .portfolio-grid img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s; }
  .portfolio-grid figure:hover img { transform: scale(1.07); filter: saturate(1.12); }
  .portfolio-grid figcaption { transition: transform .5s cubic-bezier(.2,.7,.2,1), background .4s; }
  .portfolio-grid figure:hover figcaption { transform: translateY(-4px); background: rgba(190,28,30,.42); }
  .story-photo { overflow: hidden; }
  .story-photo img { transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
  .studio-statement:hover .story-photo img { transform: scale(1.05); }

  /* Review photos crossfade when a thumbnail is picked */
  .review-gallery .review-photo { transition: opacity .35s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .review-gallery .review-photo.is-swapping { opacity: 0; transform: scale(1.03); }
  .review-card:hover .review-photo { transform: scale(1.02); }

  /* Header: slimmer and more solid after scrolling */
  .site-header { transition: height .4s cubic-bezier(.2,.7,.2,1); }
  .brand img { transition: width .4s, height .4s, transform .6s cubic-bezier(.2,.7,.2,1); }
  .brand:hover img { transform: rotate(-10deg); }
  .sticky-header { transition: background .4s, box-shadow .4s; }
  .is-scrolled .sticky-header { background: rgba(11,11,12,.78); box-shadow: 0 10px 30px -12px #000c; }
  .is-scrolled .site-header { height: 74px; }
  .is-scrolled .site-header .brand img { width: 50px; height: 50px; }
  .desktop-nav a { position: relative; transition: color .25s; }
  .desktop-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .desktop-nav a:hover::after { transform: scaleX(1); }

  /* Mobile CTA slides up once the hero is passed */
  .mobile-cta { transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s; }
  .js .mobile-cta.is-hidden { transform: translateY(110%); opacity: 0; }

  /* FAQ: smooth open */
  details p { animation: none; }
  details[open] p { animation: hp-faq .45s cubic-bezier(.2,.7,.2,1); }
  @keyframes hp-faq { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  summary::after { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  details[open] summary::after { transform: rotate(180deg); }

}