/* =========================================================================
   FreshPen — animation variety pass (2026-07-17)
   Dedicated file (not appended to main.css) to avoid collisions with other
   agents editing main.css/main.js on the live site tonight. Loaded via
   wp_enqueue_style() AFTER freshpen-main so these rules win the cascade on
   equal specificity, and no changes to main.js were needed — every effect
   below rides the existing html.fp2-reveal / .fp2-in class toggles already
   set by initMotion() in assets/js/main.js.

   BEFORE state audited in main.css: almost every scroll-reveal section
   (.fh2__wrap hero, .fp2s__wrap, .fp2rt__wrap, .fp2t__card testimonials,
   .fp-reveal generic) used the identical "opacity 0->1 + translateY" fade,
   just with different pixel distances/durations — genuinely monotonous.
   Two sections (.fp-ts__item trust badges, .fp-shop__card catalog grid)
   already had JS-driven stagger classes wired up (see the staggerGroups
   array in main.js) but NO matching CSS state, so their reveal was
   silently a no-op — fixed below as part of this pass.

   Same easing family as the rest of the theme throughout:
   cubic-bezier(.16,1,.3,1). Only the movement/effect varies per section.
   Everything here is scoped under html.fp2-reveal, which initMotion()
   never adds when prefers-reduced-motion: reduce is set, so all of this
   is already motion-safe by construction; the explicit media query at the
   bottom is defense-in-depth matching main.css's existing pattern.
   ========================================================================= */

/* ---------------------------------------------------------------------
   HERO — was a single block fade+translateY(10px). Now a staggered
   entrance: eyebrow, then title+media together, then subtext, then CTA,
   then trust row — with a subtle scale-settle on the product photo.
   --------------------------------------------------------------------- */
html.fp2-reveal .fh2__wrap{opacity:1;transform:none;transition:none;}

html.fp2-reveal .fh2__wrap .fh2__eyebrow,
html.fp2-reveal .fh2__wrap .fh2__title,
html.fp2-reveal .fh2__wrap .fh2__media,
html.fp2-reveal .fh2__wrap .fh2__sub,
html.fp2-reveal .fh2__wrap .fh2__cta,
html.fp2-reveal .fh2__wrap .fh2__trust{
  opacity:0;
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
}
html.fp2-reveal .fh2__wrap .fh2__eyebrow{transform:translateY(14px);transition-delay:0s;}
html.fp2-reveal .fh2__wrap .fh2__title{transform:translateY(18px);transition-delay:.07s;transition-duration:.65s;}
html.fp2-reveal .fh2__wrap .fh2__media{transform:translateY(20px) scale(1.025);transition-delay:.04s;transition-duration:.8s;}
html.fp2-reveal .fh2__wrap .fh2__sub{transform:translateY(14px);transition-delay:.16s;}
html.fp2-reveal .fh2__wrap .fh2__cta{transform:translateY(12px);transition-delay:.24s;transition-duration:.55s;}
html.fp2-reveal .fh2__wrap .fh2__trust{transform:translateY(10px);transition-delay:.32s;transition-duration:.5s;}

html.fp2-reveal .fh2__wrap.fp2-in .fh2__eyebrow,
html.fp2-reveal .fh2__wrap.fp2-in .fh2__title,
html.fp2-reveal .fh2__wrap.fp2-in .fh2__media,
html.fp2-reveal .fh2__wrap.fp2-in .fh2__sub,
html.fp2-reveal .fh2__wrap.fp2-in .fh2__cta,
html.fp2-reveal .fh2__wrap.fp2-in .fh2__trust{
  opacity:1;transform:none;
}

/* ---------------------------------------------------------------------
   TRUST BADGE ROW (catalog page) — main.js already staggers .fp-ts__item
   with the fp2-in class 90ms apart (see the staggerGroups array), but no
   CSS gave that class any visual effect. Small discrete icon+label items
   suit a "pop" scale-in, not a slide, so that's what they get here.
   --------------------------------------------------------------------- */
html.fp2-reveal .fp-shop__trust .fp-ts__item{
  opacity:0;
  transform:scale(.7);
  transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1);
}
html.fp2-reveal .fp-shop__trust .fp-ts__item.fp2-in{opacity:1;transform:scale(1);}

/* ---------------------------------------------------------------------
   CATALOG GRID CARDS — same fix as the trust row: main.js already
   staggers .fp-shop__card 90ms apart on page-load scroll-reveal, but
   there was no matching CSS state. Deliberately uses opacity+blur only
   (no transform) so it can never fight the hover lift transform already
   defined on .fp-shop__card (translateY(-2px) on :hover, see main.css
   ~line 924 and the cubic-bezier timing-function swap ~line 1090) —
   those stay untouched. Blur-in also reads as a distinct "focus" effect
   rather than another slide, which is the point of this pass.
   --------------------------------------------------------------------- */
html.fp2-reveal .fp-shop__card{
  opacity:0;
  filter:blur(6px);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),filter .5s cubic-bezier(.16,1,.3,1);
}
html.fp2-reveal .fp-shop__card.fp2-in{opacity:1;filter:blur(0);}

/* ---------------------------------------------------------------------
   TESTIMONIALS GRID — was a uniform translateY(16px) fade with plain
   "ease" (inconsistent with the site's cubic-bezier(.16,1,.3,1) family,
   fixed here too). Independent cards in a grid read better with an
   alternating direction than one flowing block, so odd/even cards now
   slide in from opposite sides.
   --------------------------------------------------------------------- */
html.fp2-reveal .fp2t__card{
  transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);
}
html.fp2-reveal .fp2t__card:nth-child(odd){transform:translate(-20px,12px);}
html.fp2-reveal .fp2t__card:nth-child(even){transform:translate(20px,12px);}

/* ---------------------------------------------------------------------
   SECTION HEADINGS (eyebrow + h2 pairs) — give the small uppercase
   eyebrow label its own letter-spacing "tightening" arrival, distinct
   from the translateY used on surrounding body copy/media. Left off the
   h2 itself on purpose: these headlines wrap to 2-3 lines on mobile and
   an animated letter-spacing delta risks visible reflow/line-wrap jank
   there, so the h2 instead just gets a tiny extra opacity delay so it
   reads as arriving a beat after its eyebrow, no layout-affecting motion.
   --------------------------------------------------------------------- */
html.fp2-reveal .fp2s__ey,
html.fp2-reveal .fp2rt__ey,
html.fp2-reveal .fp2g__ey,
html.fp2-reveal .fp2t__ey,
html.fp2-reveal .fpr__ey{
  opacity:0;
  letter-spacing:.08em;
  transition:opacity .5s cubic-bezier(.16,1,.3,1),letter-spacing .5s cubic-bezier(.16,1,.3,1);
}
html.fp2-reveal .fp2s__h,
html.fp2-reveal .fp2rt__h,
html.fp2-reveal .fp2g__h,
html.fp2-reveal .fp2t__h,
html.fp2-reveal .fpr__h{
  opacity:0;
  transition:opacity .55s cubic-bezier(.16,1,.3,1);
  transition-delay:.06s;
}
html.fp2-reveal .fp2-in .fp2s__ey, html.fp2-reveal .fp2-in .fp2s__h,
html.fp2-reveal .fp2-in .fp2rt__ey, html.fp2-reveal .fp2-in .fp2rt__h,
html.fp2-reveal .fp2-in .fp2g__ey, html.fp2-reveal .fp2-in .fp2g__h,
html.fp2-reveal .fp2-in .fp2t__ey, html.fp2-reveal .fp2-in .fp2t__h,
html.fp2-reveal .fp2-in .fpr__ey, html.fp2-reveal .fp2-in .fpr__h{
  opacity:1;letter-spacing:normal;
}

/* ---------------------------------------------------------------------
   Easing consistency fix: the "Meet the Pen" / footer-style wraps used
   plain "ease" instead of the site's established cubic-bezier(.16,1,.3,1)
   — same movement (opacity-only fade, left alone: this section leads
   into the drag-to-spin interaction, which already has its own dedicated
   motion and isn't part of this pass), just the correct curve.
   --------------------------------------------------------------------- */
html.fp2-reveal .fp2f__wrap,
html.fp2-reveal .fpr__wrap{transition:opacity .6s cubic-bezier(.16,1,.3,1);}

/* ---------------------------------------------------------------------
   Reduced motion: html.fp2-reveal is never added by initMotion() when
   prefers-reduced-motion is set, so none of the above can fire in that
   case — this block is defensive, matching the existing pattern in
   main.css, in case any future code path applies the class regardless.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  html.fp2-reveal .fh2__wrap .fh2__eyebrow,
  html.fp2-reveal .fh2__wrap .fh2__title,
  html.fp2-reveal .fh2__wrap .fh2__media,
  html.fp2-reveal .fh2__wrap .fh2__sub,
  html.fp2-reveal .fh2__wrap .fh2__cta,
  html.fp2-reveal .fh2__wrap .fh2__trust,
  html.fp2-reveal .fp-shop__trust .fp-ts__item,
  html.fp2-reveal .fp-shop__card,
  html.fp2-reveal .fp2t__card,
  html.fp2-reveal .fp2s__ey, html.fp2-reveal .fp2s__h,
  html.fp2-reveal .fp2rt__ey, html.fp2-reveal .fp2rt__h,
  html.fp2-reveal .fp2g__ey, html.fp2-reveal .fp2g__h,
  html.fp2-reveal .fp2t__ey, html.fp2-reveal .fp2t__h,
  html.fp2-reveal .fpr__ey, html.fp2-reveal .fpr__h{
    opacity:1;transform:none;filter:none;letter-spacing:normal;transition:none;
  }
}