/* ==========================================================
   PAWLINE · spruce.css
   Motion layer added Jul 13, 2026. Remove this file plus
   js/spruce.js and the .tag-rig block in index.html to revert.
   ========================================================== */

/* ---------- scroll progress ---------- */
.sp-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;
  background:var(--tan);pointer-events:none;
  transition:width .15s linear;
}

/* ---------- sitewide paw trail ---------- */
.hero{position:relative}
.hero .hero-content{position:relative;z-index:3}
.sp-paw{
  position:fixed;width:26px;z-index:1500;pointer-events:none;opacity:0;
  color:rgba(155,127,101,.5);
  animation:spPawLife 1.5s ease-out both;
}
.sp-paw.on-dark{color:rgba(245,239,230,.5)}
.sp-paw svg{width:100%;height:auto;display:block}
@keyframes spPawLife{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--ang)) scale(.7)}
  12%{opacity:.55;transform:translate(-50%,-50%) rotate(var(--ang)) scale(1)}
  60%{opacity:.45}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--ang)) scale(1)}
}

/* ---------- hanging tag (hero, desktop only) ---------- */
.tag-rig{
  position:absolute;top:0;right:10vw;width:0;height:100%;z-index:4;pointer-events:none;
}
.tag-leash{
  position:absolute;left:0;top:-8px;width:26px;height:24vh;margin-left:-13px;
  background:var(--tan);transform-origin:50% 0;border-radius:0 0 3px 3px;
}
.tag-leash::before,.tag-leash::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;
  background:repeating-linear-gradient(180deg,rgba(250,246,239,.75) 0 6px,transparent 6px 12px);
}
.tag-leash::before{left:5px}
.tag-leash::after{right:5px}
.tag-ring{
  position:absolute;left:50%;bottom:-26px;width:30px;height:30px;margin-left:-15px;
  border:4px solid #b9b2a4;border-radius:50%;
}
.tag-holder{
  position:absolute;left:50%;bottom:-216px;width:176px;margin-left:-88px;
  perspective:800px;pointer-events:auto;
}
.tag-card{
  position:relative;width:176px;height:176px;transform-style:preserve-3d;cursor:grab;
  transition:transform .7s cubic-bezier(.3,.9,.3,1);
}
.tag-card:active{cursor:grabbing}
.tag-card.flipped{transform:rotateY(180deg)}
.tag-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:50%;overflow:hidden;
  box-shadow:0 22px 46px rgba(22,36,27,.38), 0 4px 10px rgba(22,36,27,.2);
}
.tag-front{border:6px solid var(--cream);background:#fff}
.tag-front img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.tag-band{
  position:absolute;left:0;right:0;bottom:0;padding:8px 0 10px;text-align:center;
  background:rgba(31,51,39,.85);color:var(--cream);
  font-weight:700;font-size:9px;letter-spacing:.32em;text-transform:uppercase;padding-left:.32em;
}
.tag-back{
  background:var(--hunter);border:6px solid var(--cream);transform:rotateY(180deg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--cream);text-align:center;
}
.tag-back b{font-family:var(--font-display);font-weight:400;font-size:24px;letter-spacing:.06em}
.tag-back i{font-style:normal;font-weight:700;font-size:7.5px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(245,239,230,.65)}
.tag-pawicon{width:26px;color:rgba(245,239,230,.85)}
.tag-pawicon svg{width:100%;height:auto;display:block}

@media (max-width:1080px){
  .tag-rig{display:none}
}

/* ---------- gallery tilt ---------- */
@media (hover:hover) and (pointer:fine){
  .insta-tile{
    transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .3s ease-out, box-shadow .3s ease-out;
  }
  .insta-tile:hover{box-shadow:0 22px 44px rgba(22,36,27,.18);z-index:3}
}

/* ---------- magnetic CTAs ---------- */
@media (hover:hover) and (pointer:fine){
  .sp-magnet{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
}

/* ---------- shake before/after (transformations) ---------- */
.shake-stage{
  position:relative;width:min(420px,86vw);margin:0 auto;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.shake-photo{
  aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 26px 60px rgba(22,36,27,.22);
}
.shake-photo img{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}
.shake-stage.shaking .shake-photo{animation:spShake .95s ease-in-out}
@keyframes spShake{
  0%{transform:rotate(0)}12%{transform:rotate(7deg)}25%{transform:rotate(-8deg)}
  38%{transform:rotate(6deg)}52%{transform:rotate(-5deg)}66%{transform:rotate(3.5deg)}
  80%{transform:rotate(-2deg)}100%{transform:rotate(0)}
}
.shake-tag{
  position:absolute;top:14px;left:14px;z-index:4;
  font-weight:700;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  padding:8px 12px;border-radius:4px;background:rgba(31,51,39,.78);color:var(--cream);
}
.sp-drop{
  position:absolute;width:7px;height:10px;border-radius:50% 50% 55% 55%;
  background:rgba(155,127,101,.55);pointer-events:none;opacity:0;z-index:3;
}
@media (prefers-reduced-motion:reduce){
  .shake-stage.shaking .shake-photo{animation:none}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .sp-paw{display:none}
  .tag-rig{display:none}
  .sp-progress{transition:none}
  .insta-tile{transform:none !important}
}