/* fx.css — Crochet by Julia motion & 3D layer (modular, safe to remove).
   Dusty-rose palette. Honors prefers-reduced-motion. */

/* ── Scroll reveal (fade + slight 3D rise) ───────────────────────────── */
.fx-reveal{
  opacity:0;
  transform:translateY(30px) rotateX(7deg);
  transform-origin:50% 100%;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),
             transform .7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.fx-reveal.fx-in{opacity:1;transform:none;}
.fx-reveal.fx-d1{transition-delay:.08s}
.fx-reveal.fx-d2{transition-delay:.16s}
.fx-reveal.fx-d3{transition-delay:.24s}

/* ── 3D tilt cards ───────────────────────────────────────────────────── */
.fx-tilt{
  transform-style:preserve-3d;
  transition:transform .18s ease, box-shadow .3s ease;
  will-change:transform;
}
.fx-tilt .featured-img,
.fx-tilt .featured-body{transform:translateZ(0);}
.fx-tilt:hover{box-shadow:0 26px 50px rgba(110,59,78,.28);}

/* ── Floating 3D yarn ball in the hero ───────────────────────────────── */
.fx-yarn{
  position:absolute;right:6%;top:18%;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #e3a3ab 0%, #c97b84 45%, #6e3b4e 100%);
  box-shadow:inset -10px -12px 22px rgba(110,59,78,.55), 0 18px 40px rgba(110,59,78,.30);
  animation:fxYarnFloat 6s ease-in-out infinite;
  pointer-events:none;z-index:0;opacity:.9;
}
.fx-yarn::before,.fx-yarn::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(251,243,241,.35);
}
.fx-yarn::before{transform:rotate(28deg) scaleX(.55);}
.fx-yarn::after{transform:rotate(-32deg) scaleX(.4);}
@keyframes fxYarnFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-22px) rotate(8deg);}
}
@media (max-width:760px){.fx-yarn{width:74px;height:74px;right:5%;top:10%;opacity:.7;}}

/* ── Animated hero gradient sheen ────────────────────────────────────── */
.fx-sheen{position:relative;overflow:hidden;}
.fx-sheen::after{
  content:"";position:absolute;top:-50%;left:-60%;width:60%;height:200%;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);
  transform:rotate(8deg);animation:fxSheen 7s ease-in-out infinite;pointer-events:none;
}
@keyframes fxSheen{0%{left:-60%}55%{left:130%}100%{left:130%}}

/* ── CTA button depth + shine ────────────────────────────────────────── */
.cta-button,.submit-button,.pattern-btn{
  transition:transform .15s ease, box-shadow .25s ease, filter .25s ease;
}
.cta-button:hover,.submit-button:hover,.pattern-btn:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 12px 26px rgba(110,59,78,.32);
}
.cta-button:active,.submit-button:active{transform:translateY(0) scale(.99);}

/* ── Trust strip items gentle pop on hover ───────────────────────────── */
.trust-item{transition:transform .2s ease;}
.trust-item:hover{transform:translateY(-3px);}

/* ── Hookvibes-style colorful illustrated card grid ──────────────────── */
.hv-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:26px;max-width:1180px;margin:44px auto 0;padding:0 20px;
}
@media (min-width:1024px){.hv-cards{grid-template-columns:repeat(3,1fr);}}
.hv-card{
  position:relative;border-radius:22px;padding:34px 28px;text-align:center;
  border:2px solid rgba(110,59,78,.10);
  box-shadow:0 10px 28px rgba(110,59,78,.10);
  transform-style:preserve-3d;
  transition:transform .2s ease, box-shadow .3s ease;
  will-change:transform;
}
.hv-card:hover{box-shadow:0 26px 50px rgba(110,59,78,.24);}
.hv-illustration{
  font-size:3rem;line-height:1;margin:0 auto 16px;width:84px;height:84px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.65);box-shadow:0 8px 18px rgba(110,59,78,.14);
  transform:translateZ(40px);
}
.hv-card-title{
  font-family:'Playfair Display','Oswald',serif;font-weight:700;
  font-size:1.28rem;color:#6e3b4e;margin:0 0 10px;transform:translateZ(22px);
}
.hv-card-text{
  font-family:'Nunito','Oswald',sans-serif;font-size:.98rem;line-height:1.6;
  color:#5b4750;opacity:.92;margin:0;transform:translateZ(12px);
}
.hv-rose{background:#fbe7ea;}
.hv-peach{background:#fdeadd;}
.hv-lilac{background:#efe7f7;}
.hv-mint{background:#e4f3ec;}
.hv-sky{background:#e3f0f6;}
.hv-butter{background:#fbf1da;}

@media (prefers-reduced-motion:reduce){
  .hv-card,.hv-illustration,.hv-card-title,.hv-card-text{transform:none!important;transition:none!important;}
  .fx-reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .fx-yarn,.fx-sheen::after{animation:none!important;}
  .fx-tilt{transition:none!important;}
}