/* LoveInPaw motion layer: restrained, cinematic movement without visual redesign. */
:root{--motion-ease:cubic-bezier(.22,.61,.36,1);--motion-soft:cubic-bezier(.16,1,.3,1)}

/* Page opening */
.hero{isolation:isolate;background:#f4eee7 url(/images/hero.webp) 53% center/cover no-repeat}
.hero-media{z-index:0;pointer-events:none;background:url(/images/hero.webp) 53% center/cover no-repeat;position:absolute;inset:-1.5%;transform:scale(1);transform-origin:58% 48%}
.hero::before,.hero::after{z-index:1}
.site-header,.hero__content,.hero__quote{z-index:2}
.hero-line{display:inline-block;color:inherit!important}
.hero-highlight{color:#ae8266!important}
.motion-ready .hero-media{animation:hero-memory-in 1.8s var(--motion-ease) both,hero-memory-drift 20s 1.8s ease-in-out infinite alternate}
.motion-ready .site-header{animation:gentle-entrance 1.15s .18s var(--motion-soft) both}
.motion-ready .hero__content>.eyebrow{animation:gentle-entrance 1s .42s var(--motion-soft) both}
.motion-ready .hero-line{animation:hero-line-in 1.1s var(--motion-soft) both}
.motion-ready .hero-line:first-child{animation-delay:.58s}
.motion-ready .hero-line:nth-of-type(2){animation-delay:.76s}
.motion-ready .hero-highlight{display:inline-block;animation:hero-line-in 1.05s .94s var(--motion-soft) both}
.motion-ready .hero__copy{animation:gentle-entrance 1.05s 1.08s var(--motion-soft) both}
.motion-ready .hero__buttons{animation:gentle-entrance 1s 1.3s var(--motion-soft) both}
.motion-ready .hero__community,.motion-ready .promise,.motion-ready .hero__quote{animation:gentle-entrance 1s 1.5s var(--motion-soft) both}
@keyframes hero-memory-in{from{opacity:.62;filter:blur(3px)}to{opacity:1;filter:blur(0)}}
@keyframes hero-memory-drift{to{transform:scale(1.03)}}
@keyframes gentle-entrance{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes hero-line-in{from{opacity:0;transform:translateY(20px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}

/* Refined interaction details */
.desktop-nav a{transition:color 360ms ease,transform 360ms var(--motion-ease)}
.desktop-nav a::after{transform:scaleX(0);transform-origin:left;right:0;transition:transform 380ms var(--motion-ease)}
.desktop-nav a:hover{color:#93684f;transform:translateY(-1px)}
.desktop-nav a:hover::after{transform:scaleX(1)}
.button{transition:background-color 360ms ease,transform 360ms var(--motion-ease),box-shadow 360ms ease}
.button svg{transition:transform 360ms var(--motion-ease)}
.button:hover svg{transform:translateX(4px)}
.feature-card{transition:transform 520ms var(--motion-soft),box-shadow 520ms ease}
.feature-card>img{transition:transform 700ms var(--motion-soft)}
.feature-card .round-icon{transition:transform 500ms var(--motion-soft),box-shadow 500ms ease,filter 500ms ease}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 28px 62px #4b312129}
.feature-card:hover>img{transform:scale(1.04)}
.feature-card:hover .round-icon{transform:scale(1.035);filter:saturate(1.08);box-shadow:0 13px 28px #5b3c2a33}
.feature-card a svg{transition:transform 360ms var(--motion-ease)}
.feature-card a:hover svg{transform:translateX(4px)}
.photo-grid img,.timeline__item img,.pet-profile img{transition:transform 650ms var(--motion-soft)}
.photo-grid img:hover,.timeline__item img:hover,.pet-profile img:hover{transform:scale(1.025)}

/* Viewport reveals only apply after JavaScript has enhanced the page. */
.motion-ready .reveal-item{opacity:0;transform:translateY(20px);filter:blur(4px);transition:opacity 950ms var(--motion-soft),transform 1100ms var(--motion-soft),filter 950ms ease;transition-delay:var(--reveal-delay,0ms)}
.motion-ready .reveal-item.is-visible{opacity:1;transform:translateY(0);filter:blur(0)}
.motion-ready .feature-card.reveal-item{transform:translateY(26px)}
.motion-ready .feature-card.reveal-item.is-visible{transform:translateY(0)}
.motion-ready .feature-card.reveal-item.is-visible:hover{transform:translateY(-6px)}
.motion-ready .phones.reveal-item{opacity:0;transform:translateY(50px) scale(.97);filter:blur(6px);transition-duration:1200ms}
.motion-ready .phones.reveal-item.is-visible{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.motion-ready .waitlist .reveal-item{transform:translateY(14px);transition-duration:1100ms}
.tribute{background-position:50% calc(45% + var(--tribute-depth,0px));transition:background-position .12s linear}

/* The existing phone angles remain; cursor motion only adds a restrained offset. */
.phone{will-change:transform;transition:transform 700ms var(--motion-soft)}
.phone--profile{transform:rotate(calc(-5deg + var(--tilt-x,0deg))) rotateY(var(--tilt-y,0deg)) scale(.95)}
.phone--timeline{transform:rotate(calc(3deg + var(--tilt-x,0deg))) rotateY(var(--tilt-y,0deg)) scale(.95)}

@media (max-width:840px){.hero-media{background-position:61% center}.phone{will-change:auto}}
@media (max-width:560px){.hero-media{background-position:62% center}}
@media (hover:none),(pointer:coarse){.feature-card:hover{transform:none}.feature-card:hover>img{transform:none}}
@media (prefers-reduced-motion:reduce){.hero-media{opacity:1;filter:none;transform:none!important;animation:none!important}.reveal-item,.hero-line{opacity:1!important;filter:none!important;transform:none!important;animation:none!important;transition:none!important}.phone{will-change:auto;transition:none}.tribute{background-position:50% 45%}.button svg,.desktop-nav a,.feature-card,.feature-card>img{transition:none}}