/* North Shore Sign Co — subtle motion layer
   Keeps the existing visual system intact while adding polished interaction. */
:root{
  --nss-ease:cubic-bezier(.22,.61,.36,1);
  --nss-ease-spring:cubic-bezier(.2,.75,.3,1.15);
  --nss-focus:#C97F52;
}

html{scroll-behavior:smooth;}

/* Scroll-in reveals. Applied only after JS is active so content never disappears without JS. */
html.nss-motion-ready [data-nss-reveal]{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .68s var(--nss-ease), transform .68s var(--nss-ease);
  transition-delay:var(--nss-delay,0ms);
  will-change:opacity,transform;
}
html.nss-motion-ready [data-nss-reveal].is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
  will-change:auto;
}

/* Cards lift without drawing decorative lines across their content. */
[data-nss-card]{
  transition:transform .3s var(--nss-ease), box-shadow .3s var(--nss-ease), border-color .3s var(--nss-ease);
  transform:translateZ(0);
}

/* Existing photo frames get a restrained editorial zoom. */
[data-nss-image-wrap]{
  isolation:isolate;
  transform:translateZ(0);
  transition:transform .38s var(--nss-ease), box-shadow .38s var(--nss-ease);
}
[data-nss-image-wrap] > img{
  transition:transform .7s var(--nss-ease), filter .45s ease;
  transform:scale(1.001);
  will-change:transform;
}

/* Buttons/CTA pills retain their colors; motion is tactile rather than flashy. */
[data-nss-cta]{
  transition:transform .22s var(--nss-ease), box-shadow .25s var(--nss-ease), border-color .22s ease, background-color .22s ease, color .22s ease !important;
  transform:translateZ(0);
}
[data-nss-cta]:active{
  transform:translateY(1px) scale(.985) !important;
  transition-duration:.08s !important;
}

/* Sticky header settles into a slightly stronger surface once the page moves. */
[data-nss-header]{
  transition:box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}
[data-nss-header].is-scrolled{
  box-shadow:0 12px 32px rgba(38,51,44,.08);
}

/* Logo micro-interaction. */
[data-nss-logo]{
  transition:transform .32s var(--nss-ease), opacity .25s ease;
  transform-origin:left center;
}

/* Keyboard focus stays clear and on-brand. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid rgba(201,127,82,.36) !important;
  outline-offset:3px !important;
}

/* FAQ/details: make opening feel less abrupt without animating layout height. */
details > summary{
  transition:color .22s ease, background-color .22s ease;
}
details[open] > summary{
  color:#1F3A2E;
}

@media (hover:hover) and (pointer:fine){
  [data-nss-card]:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 38px rgba(38,51,44,.09) !important;
  }
  [data-nss-image-wrap]:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 42px rgba(38,51,44,.11);
  }
  [data-nss-image-wrap]:hover > img{
    transform:scale(1.035);
  }
  [data-nss-cta]:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(38,51,44,.13);
  }
  [data-nss-logo]:hover{
    transform:translateY(-1px) scale(1.018);
  }
}

/* Phones: preserve the reveals but reduce travel and remove expensive hover-only effects. */
@media (max-width:720px){
  html.nss-motion-ready [data-nss-reveal]{
    transform:translate3d(0,12px,0);
    transition-duration:.56s;
  }
  html.nss-motion-ready [data-nss-reveal].is-visible{transform:none;}
  [data-nss-card],[data-nss-image-wrap],[data-nss-cta]{will-change:auto;}
}

/* Accessibility and battery-friendly fallback. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html.nss-motion-ready [data-nss-reveal],
  html.nss-motion-ready [data-nss-reveal].is-visible{
    opacity:1 !important;
    transform:none !important;
  }
}