/* =========================================================
   Saad Guild — Motion & Effects Layer (v1.1)
   Cheap, always-on polish applies everywhere. The heavy 3D work
   (tilt, perspective stacks, hover depth) is limited to devices with a
   real hover pointer, so phones and tablets stay smooth, and it all
   stands down for prefers-reduced-motion.
   ========================================================= */

:root{
  --sg-perspective: 1400px;
  --sg-ease-3d: cubic-bezier(.22,.8,.28,1);
}

/* ---------- Hero ---------- */
.sg-hero{position:relative;overflow:hidden;}
.sg-hero img{
  transform:scale(1.08);
  transition:transform 1.2s var(--sg-ease-3d);
}
.sg-hero.sg-hero-loaded img{transform:scale(1.02);}

/* simple, GPU-cheap rise-in (no 3D rotation) */
.sg-hero-content .eyebrow,
.sg-hero-content h1,
.sg-hero-content p,
.sg-hero-actions{animation:sg-hero-rise .9s var(--sg-ease-3d) both;}
.sg-hero-content .eyebrow{animation-delay:.05s;}
.sg-hero-content h1{animation-delay:.2s;}
.sg-hero-content p{animation-delay:.35s;}
.sg-hero-actions{animation-delay:.5s;}
@keyframes sg-hero-rise{
  from{opacity:0; transform:translate3d(0,24px,0);}
  to{opacity:1; transform:translate3d(0,0,0);}
}

.sg-scroll-cue{animation:sg-scroll-bob 2.2s ease-in-out infinite;}
@keyframes sg-scroll-bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(10px);}
}

/* ---------- Reveal on scroll (only hidden when JS is running) ---------- */
.js .reveal{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:opacity 800ms var(--sg-ease-3d), transform 800ms var(--sg-ease-3d);
}
.js .reveal.is-shown{opacity:1; transform:none;}

/* stagger grid children (pure CSS) — capped so phones never wait long */
.sg-categories-grid .reveal:nth-child(2),
.sg-product-grid .reveal:nth-child(2),
.sg-benefits .reveal:nth-child(2){transition-delay:90ms;}
.sg-categories-grid .reveal:nth-child(3),
.sg-product-grid .reveal:nth-child(3),
.sg-benefits .reveal:nth-child(3){transition-delay:180ms;}
.sg-benefits .reveal:nth-child(4){transition-delay:270ms;}
@media (min-width:640px){
  .sg-product-grid .reveal:nth-child(4){transition-delay:270ms;}
  .sg-product-grid .reveal:nth-child(5){transition-delay:360ms;}
  .sg-product-grid .reveal:nth-child(6){transition-delay:450ms;}
}

/* Star rating — subtle sequential pop */
.sg-stars svg{display:inline-block;animation:sg-star-pop .5s var(--sg-ease-3d) both;}
.sg-stars svg:nth-child(1){animation-delay:.05s;}
.sg-stars svg:nth-child(2){animation-delay:.15s;}
.sg-stars svg:nth-child(3){animation-delay:.25s;}
.sg-stars svg:nth-child(4){animation-delay:.35s;}
.sg-stars svg:nth-child(5){animation-delay:.45s;}
@keyframes sg-star-pop{
  from{opacity:0; transform:scale(.2) rotate(-40deg);}
  to{opacity:1; transform:scale(1) rotate(0);}
}

/* Header depth on solidify */
.sg-header.is-solid{box-shadow:0 10px 30px -20px rgba(33,29,26,.25);}

/* Buttons — press feedback works on touch too */
.btn-base{transition:transform .2s ease, background-color 250ms ease, color 250ms ease, border-color 250ms ease, box-shadow .35s ease;}
.btn-base:active{transform:scale(.98);}

/* Tilt targets only exist on fine-pointer devices (see effects.js) */
.sg-cat-card,.sg-product-card .sg-media{position:relative;}
.sg-cat-card{overflow:hidden;}
.sg-tilt-glare{display:none;}

/* =========================================================
   Desktop / mouse-only 3D depth
   ========================================================= */
@media (hover:hover) and (pointer:fine){
  .sg-hero,.sg-cat-card,.sg-product-card .sg-media,.sg-editorial .sg-media,.sg-story .sg-media{perspective:var(--sg-perspective);}

  .js .reveal{transform:translate3d(0,36px,-60px) rotateX(6deg);transform-origin:center bottom;}
  .js .reveal.is-shown{transform:none;}

  [data-tilt]{
    transform-style:preserve-3d;
    transform:perspective(var(--sg-perspective)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));
    transition:transform .5s var(--sg-ease-3d), box-shadow .5s var(--sg-ease-3d);
    will-change:transform;
  }
  [data-tilt].is-tilting{transition:transform .08s linear;}

  .sg-cat-card{box-shadow:0 0 0 rgba(33,29,26,0);}
  .sg-cat-card.is-tilting{box-shadow:0 28px 45px -18px rgba(33,29,26,.35);}
  .sg-cat-card img{transition:transform .7s var(--sg-ease-3d);}
  .sg-cat-card.is-tilting img{transform:scale(1.06) translateZ(30px);}

  [data-tilt] .sg-tilt-glare{
    display:block;position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.35), transparent 55%);
    opacity:0; transition:opacity .4s ease; mix-blend-mode:soft-light;
  }
  [data-tilt].is-tilting .sg-tilt-glare{opacity:1;}

  .sg-product-card{transition:transform .5s var(--sg-ease-3d);}
  .sg-product-card:hover{transform:translateY(-6px);}

  .sg-editorial .sg-media,.sg-story .sg-media{transition:box-shadow .6s var(--sg-ease-3d);}
  .sg-editorial .sg-media img,.sg-story .sg-media img{transition:transform .8s var(--sg-ease-3d);}
  .sg-editorial .sg-media:hover img,.sg-story .sg-media:hover img{transform:scale(1.06);}

  .btn-base:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(33,29,26,.45);}
  .btn-base:active{transform:scale(.98);}

  .sg-benefit svg{transition:transform .5s var(--sg-ease-3d);}
  .sg-benefit:hover svg{transform:rotateY(180deg);}

  .sg-nav a{display:inline-block;transition:color .4s, transform .3s var(--sg-ease-3d);}
  .sg-nav a:hover{transform:translateY(-2px);}
}

/* =========================================================
   Accessibility — reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-tilt]{transform:none !important;}
  .sg-hero img{transform:none !important;}
  .js .reveal{opacity:1;transform:none !important;}
}