/* ──────────────────────────────────────────────────────────────
   newu-fit-shoe.css
   Studio photobooth presentation layer for NEW-U.FIT shoe cards.
   Loaded AFTER newu-fit.css on /newu-fit, /newu-fit/collection,
   and /newu-fit/<slug>. Layered polish only — never duplicates
   or fights the base rules defined in newu-fit.css.
   ────────────────────────────────────────────────────────────── */

/* ── animatable custom props (progressive enhancement) ── */
@supports (background: paint(something)) {
  @property --shoe-tilt-x  { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  @property --shoe-tilt-y  { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
  @property --shoe-tilt-px { syntax: '<length>'; inherits: false; initial-value: 0px; }
  @property --shoe-tilt-py { syntax: '<length>'; inherits: false; initial-value: 0px; }
}

/* ── local tokens (reuse brand palette without overriding) ── */
.nuf-card,
.nuf-pdp-main-image {
  --shoe-cyan:    rgba(0, 229, 255, 1);
  --shoe-blue:    rgba(79, 183, 255, 1);
  --shoe-purple:  rgba(176, 96, 255, 1);
  --shoe-green:   rgba(90, 255, 178, 1);
  --shoe-floor:   rgba(255, 255, 255, 0.06);
  --shoe-wall:    rgba(5, 8, 12, 0.55);
  --shoe-shadow:  0 1px 2px rgba(0,0,0,.35),
                  0 10px 24px rgba(0,0,0,.35),
                  0 28px 60px rgba(0,0,0,.45);
  --shoe-shadow-hover:
                  0 1px 2px rgba(0,0,0,.40),
                  0 14px 34px rgba(0,0,0,.45),
                  0 38px 80px rgba(0,229,255,.14),
                  0 48px 120px rgba(176,96,255,.10);
}

/* ── card shell: layered soft shadow + smooth lift ── */
.nuf-card {
  box-shadow: var(--shoe-shadow);
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s cubic-bezier(.2,.7,.2,1),
    border-color .35s ease;
}
.nuf-card:hover,
.nuf-card:focus-within {
  box-shadow: var(--shoe-shadow-hover);
}

/* ── photobooth backdrop inside the image wrap ── */
.nuf-image-wrap,
.nuf-pdp-main-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 112%,
      rgba(0, 229, 255, 0.05) 0%,
      rgba(0, 229, 255, 0.00) 55%),
    radial-gradient(120% 70% at 12% -10%,
      rgba(176, 96, 255, 0.06) 0%,
      rgba(176, 96, 255, 0.00) 60%),
    linear-gradient(180deg, #0b1016 0%, #070a10 62%, #05080c 100%);
}

/* the "floor sweep" key-light puddle under the shoe */
.nuf-image-wrap::before,
.nuf-pdp-main-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 28% at 50% 78%,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 45%,
      rgba(255, 255, 255, 0.00) 70%),
    radial-gradient(42% 16% at 50% 62%,
      rgba(0, 229, 255, 0.07) 0%,
      rgba(0, 229, 255, 0.00) 80%);
  mix-blend-mode: screen;
  transition: opacity .35s ease;
}

/* subtle brand ring inlay + hover ring boost (::after) */
.nuf-image-wrap::after,
.nuf-pdp-main-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, 0.10);
  background:
    linear-gradient(135deg,
      rgba(0, 229, 255, 0.00) 0%,
      rgba(0, 229, 255, 0.00) 45%,
      rgba(176, 96, 255, 0.00) 100%);
  transition: box-shadow .35s ease, background .35s ease, opacity .35s ease;
}
.nuf-card:hover .nuf-image-wrap::after,
.nuf-card:focus-within .nuf-image-wrap::after,
.nuf-pdp-main-image:hover::after {
  box-shadow:
    inset 0 0 0 1px rgba(0, 229, 255, 0.28),
    inset 0 0 28px rgba(0, 229, 255, 0.10),
    inset 0 -40px 60px rgba(176, 96, 255, 0.08);
}

/* ── images sit above the backdrop layers ── */
.nuf-image-wrap > img,
.nuf-pdp-main-image > img {
  position: relative;
  z-index: 1;
}

/* ── richer crossfade: primary / secondary ── */
.nuf-image-wrap .primary,
.nuf-image-wrap .secondary {
  transition:
    opacity .35s cubic-bezier(.2,.7,.2,1),
    transform .35s cubic-bezier(.2,.7,.2,1),
    filter .35s ease;
}
.nuf-card:hover .nuf-image-wrap .primary,
.nuf-card:focus-within .nuf-image-wrap .primary {
  filter: brightness(1.04) saturate(1.04);
}
.nuf-card:hover .nuf-image-wrap .secondary,
.nuf-card:focus-within .nuf-image-wrap .secondary {
  filter: brightness(1.06) saturate(1.06);
}

/* ── 3D tilt readiness (JS sets data-shoe-tilt + --shoe-tilt-* vars) ── */
.nuf-image-wrap[data-shoe-tilt],
.nuf-pdp-main-image[data-shoe-tilt] {
  transform-style: preserve-3d;
  perspective: 1100px;
  will-change: transform;
}
.nuf-image-wrap[data-shoe-tilt] > img,
.nuf-pdp-main-image[data-shoe-tilt] > img {
  transform:
    translate3d(
      var(--shoe-tilt-px, 0px),
      var(--shoe-tilt-py, 0px),
      0)
    rotateX(var(--shoe-tilt-y, 0deg))
    rotateY(var(--shoe-tilt-x, 0deg))
    scale(1.01);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), opacity .35s ease, filter .35s ease;
  backface-visibility: hidden;
  transform-origin: 50% 55%;
}

/* ── PDP main image: hero photobooth treatment ── */
.nuf-pdp-main-image {
  min-height: 520px;
  border-radius: 18px;
  background:
    radial-gradient(140% 80% at 50% 118%,
      rgba(0, 229, 255, 0.07) 0%,
      rgba(0, 229, 255, 0.00) 55%),
    radial-gradient(120% 80% at 10% -15%,
      rgba(176, 96, 255, 0.08) 0%,
      rgba(176, 96, 255, 0.00) 60%),
    linear-gradient(180deg, #0c121a 0%, #070a10 62%, #04070b 100%);
  box-shadow:
    0 2px 4px rgba(0,0,0,.4),
    0 20px 50px rgba(0,0,0,.5),
    0 60px 120px rgba(0, 229, 255, 0.06);
}
.nuf-pdp-main-image::before {
  background:
    radial-gradient(55% 30% at 50% 80%,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.02) 50%,
      rgba(255, 255, 255, 0.00) 75%),
    radial-gradient(40% 18% at 50% 60%,
      rgba(0, 229, 255, 0.10) 0%,
      rgba(0, 229, 255, 0.00) 80%);
}

/* PDP thumbnails get mini-booth treatment */
.nuf-pdp-thumbs .nuf-thumb {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(90% 60% at 50% 110%,
      rgba(0, 229, 255, 0.05) 0%,
      rgba(0, 229, 255, 0.00) 60%),
    linear-gradient(180deg, #0b1016 0%, #06090e 100%);
  box-shadow:
    0 1px 2px rgba(0,0,0,.35),
    0 6px 14px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(0, 229, 255, 0.08);
  transition: box-shadow .25s ease, transform .25s ease;
}
.nuf-pdp-thumbs .nuf-thumb:hover,
.nuf-pdp-thumbs .nuf-thumb.is-active {
  box-shadow:
    0 2px 4px rgba(0,0,0,.4),
    0 10px 22px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(0, 229, 255, 0.30);
}

/* ── best-seller featured cards: turn up the drama ── */
.nuf-best .nuf-card {
  --shoe-shadow:
    0 2px 4px rgba(0,0,0,.4),
    0 18px 36px rgba(0,0,0,.45),
    0 50px 100px rgba(0,0,0,.55);
  --shoe-shadow-hover:
    0 2px 4px rgba(0,0,0,.45),
    0 22px 50px rgba(0,0,0,.55),
    0 60px 130px rgba(0, 229, 255, 0.18),
    0 70px 160px rgba(176, 96, 255, 0.14);
}
.nuf-best .nuf-image-wrap::before {
  background:
    radial-gradient(70% 34% at 50% 80%,
      rgba(255, 255, 255, 0.11) 0%,
      rgba(255, 255, 255, 0.02) 50%,
      rgba(255, 255, 255, 0.00) 75%),
    radial-gradient(48% 20% at 50% 60%,
      rgba(0, 229, 255, 0.10) 0%,
      rgba(0, 229, 255, 0.00) 80%),
    radial-gradient(60% 40% at 12% -10%,
      rgba(176, 96, 255, 0.08) 0%,
      rgba(176, 96, 255, 0.00) 70%);
}

/* ── mobile dial-down ── */
@media (max-width: 720px) {
  .nuf-card {
    --shoe-shadow:
      0 1px 2px rgba(0,0,0,.3),
      0 6px 14px rgba(0,0,0,.3),
      0 14px 28px rgba(0,0,0,.35);
    --shoe-shadow-hover: var(--shoe-shadow);
  }
  .nuf-image-wrap[data-shoe-tilt] > img,
  .nuf-pdp-main-image[data-shoe-tilt] > img {
    /* clamp parallax range on small screens */
    transform:
      translate3d(
        clamp(-4px, var(--shoe-tilt-px, 0px), 4px),
        clamp(-4px, var(--shoe-tilt-py, 0px), 4px),
        0)
      rotateX(var(--shoe-tilt-y, 0deg))
      rotateY(var(--shoe-tilt-x, 0deg))
      scale(1.005);
  }
  .nuf-image-wrap::before,
  .nuf-pdp-main-image::before {
    background:
      radial-gradient(50% 22% at 50% 80%,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.00) 70%);
  }
  .nuf-pdp-main-image {
    min-height: 340px;
  }
}

/* ── reduced motion: kill tilt + filter motion, keep crossfade ── */
@media (prefers-reduced-motion: reduce) {
  .nuf-image-wrap[data-shoe-tilt] > img,
  .nuf-pdp-main-image[data-shoe-tilt] > img {
    transform: none !important;
    transition: opacity .35s ease !important;
  }
  .nuf-card:hover .nuf-image-wrap .primary,
  .nuf-card:focus-within .nuf-image-wrap .primary,
  .nuf-card:hover .nuf-image-wrap .secondary,
  .nuf-card:focus-within .nuf-image-wrap .secondary {
    filter: none !important;
  }
  .nuf-card {
    transition: box-shadow .2s ease !important;
  }
}

/* ── print: flatten for clean output ── */
@media print {
  .nuf-card,
  .nuf-pdp-main-image,
  .nuf-pdp-thumbs .nuf-thumb {
    background: #fff !important;
    box-shadow: none !important;
    border-color: #ddd !important;
  }
  .nuf-image-wrap,
  .nuf-pdp-main-image {
    background: #fff !important;
  }
  .nuf-image-wrap::before,
  .nuf-image-wrap::after,
  .nuf-pdp-main-image::before,
  .nuf-pdp-main-image::after {
    display: none !important;
  }
  .nuf-image-wrap[data-shoe-tilt] > img,
  .nuf-pdp-main-image[data-shoe-tilt] > img {
    transform: none !important;
    filter: none !important;
  }
}