/* ============================================================
   RIWAJ — BLOG MOTION POLISH  v1.0.0
   Figma-style micro-interactions LAYERED on top of the existing
   blog design. NO layout/visual structure changes — pure motion.
   Pairs with riwaj-blog-pro.css; loaded after it.

   What this adds:
     1. Page entry fade-up
     2. data-reveal scroll choreography (with stagger)
     3. Top scroll-progress bar (3px brand-gradient, RTL fill)
     4. Section-title underline draw on reveal
     5. Hero image slow Ken Burns zoom
     6. Hero card eyebrow → title → sub stagger entrance
     7. Live search: focus glow ring + bouncy clear button
     8. Recipe card: image zoom + lift + brand glow on hover
     9. Recipe card: subtle 3D tilt (desktop+hover only)
    10. Recipe card: category pill scale, title color shift
    11. "See all →" link: arrow nudge in flow direction
    12. Mini chips: springy press
    13. Newsletter form: button shimmer + magnetic effect
    14. No-results illustration: gentle float; chips: spring press
    15. prefers-reduced-motion safety
   ============================================================ */

/* ─── Local tokens (scoped to blog page) ─────────────────── */
body.riwajfood .rf-blog-page {
  --rf-blog-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rf-blog-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rf-blog-brand: #D4511E;
  --rf-blog-brand-2: #FF7B3A;
  overflow-x: clip;
}

/* ─── 1. Page entry fade-up ──────────────────────────────── */
body.riwajfood.riwajfood .rf-blog-page {
  animation: rfBlogPageIn 540ms var(--rf-blog-ease-out) both;
}
@keyframes rfBlogPageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 2. Scroll-reveal pattern + stagger ─────────────────── */
body.riwajfood.riwajfood .rf-blog-page [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 620ms var(--rf-blog-ease-out),
              transform 620ms var(--rf-blog-ease-out);
  will-change: opacity, transform;
}
body.riwajfood.riwajfood .rf-blog-page [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* Stagger children of [data-reveal-stagger] containers */
body.riwajfood.riwajfood .rf-blog-page [data-reveal-stagger] > [data-reveal]:nth-child(1) { transition-delay: 60ms; }
body.riwajfood.riwajfood .rf-blog-page [data-reveal-stagger] > [data-reveal]:nth-child(2) { transition-delay: 130ms; }
body.riwajfood.riwajfood .rf-blog-page [data-reveal-stagger] > [data-reveal]:nth-child(3) { transition-delay: 200ms; }
body.riwajfood.riwajfood .rf-blog-page [data-reveal-stagger] > [data-reveal]:nth-child(4) { transition-delay: 270ms; }
body.riwajfood.riwajfood .rf-blog-page [data-reveal-stagger] > [data-reveal]:nth-child(5) { transition-delay: 340ms; }
body.riwajfood.riwajfood .rf-blog-page [data-reveal-stagger] > [data-reveal]:nth-child(6) { transition-delay: 410ms; }
body.riwajfood.riwajfood .rf-blog-page [data-reveal-stagger] > [data-reveal]:nth-child(7) { transition-delay: 480ms; }
body.riwajfood.riwajfood .rf-blog-page [data-reveal-stagger] > [data-reveal]:nth-child(8) { transition-delay: 550ms; }
body.riwajfood.riwajfood .rf-blog-page [data-reveal-stagger] > [data-reveal]:nth-child(9) { transition-delay: 620ms; }

/* ─── 3. Top scroll-progress bar ─────────────────────────── */
body.riwajfood.riwajfood .rf-blog-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(212, 81, 30, 0.06);
  z-index: 9999;
  pointer-events: none;
}
body.riwajfood.riwajfood .rf-blog-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #D4511E 0%, #FF7B3A 100%);
  transform: scaleX(0);
  transform-origin: right center;       /* RTL: fill from the right */
  transition: transform 120ms linear;
  box-shadow: 0 0 12px rgba(212, 81, 30, 0.45);
}

/* ─── 4. Section-title underline draws on reveal ─────────── */
body.riwajfood.riwajfood .rf-blog-page .rf-blog-section-title {
  position: relative;
}
body.riwajfood.riwajfood .rf-blog-page .rf-blog-section-title::after {
  content: '';
  display: block;
  width: 0;
  height: 4px;
  margin: 12px 0 0;                      /* start-aligned underline */
  border-radius: 2px;
  background: linear-gradient(120deg, #D4511E 0%, #FF7B3A 100%);
  box-shadow: 0 4px 12px rgba(212, 81, 30, 0.28);
  transition: width 820ms var(--rf-blog-ease-out) 240ms;
}
body.riwajfood.riwajfood .rf-blog-page .rf-blog-section-header.is-visible .rf-blog-section-title::after {
  width: 56px;
}

/* ─── 5. Hero image — slow Ken Burns zoom ────────────────── */
body.riwajfood.riwajfood .rf-blog-hero-image {
  animation: rfBlogKenBurns 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes rfBlogKenBurns {
  0%   { transform: scale(1)    translate(0,0); }
  100% { transform: scale(1.06) translate(-8px, 4px); }
}

/* ─── 6. Hero card stagger entrance ──────────────────────── */
body.riwajfood.riwajfood .rf-blog-hero-card {
  position: relative;
}
body.riwajfood.riwajfood .rf-blog-hero.is-visible .rf-blog-eyebrow,
body.riwajfood.riwajfood .rf-blog-hero.is-visible .rf-blog-hero-title,
body.riwajfood.riwajfood .rf-blog-hero.is-visible .rf-blog-hero-sub,
body.riwajfood.riwajfood .rf-blog-hero.is-visible .rf-blog-livesearch {
  animation: rfBlogHeroChild 620ms var(--rf-blog-ease-out) both;
}
body.riwajfood.riwajfood .rf-blog-hero.is-visible .rf-blog-eyebrow      { animation-delay: 80ms; }
body.riwajfood.riwajfood .rf-blog-hero.is-visible .rf-blog-hero-title   { animation-delay: 160ms; }
body.riwajfood.riwajfood .rf-blog-hero.is-visible .rf-blog-hero-sub     { animation-delay: 240ms; }
body.riwajfood.riwajfood .rf-blog-hero.is-visible .rf-blog-livesearch   { animation-delay: 320ms; }
@keyframes rfBlogHeroChild {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── 7. Live search: focus glow + bouncy clear button ───── */
body.riwajfood.riwajfood .rf-blog-livesearch {
  transition: box-shadow 280ms var(--rf-blog-ease-out),
              border-color 240ms ease,
              transform 240ms var(--rf-blog-ease-out);
}
body.riwajfood.riwajfood .rf-blog-livesearch:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 0 0 4px rgba(212, 81, 30, 0.16),
              0 12px 32px rgba(212, 81, 30, 0.18);
}
body.riwajfood.riwajfood .rf-blog-livesearch-clear {
  transition: transform 320ms var(--rf-blog-spring),
              background-color 220ms ease,
              color 220ms ease;
}
body.riwajfood.riwajfood .rf-blog-livesearch-clear:hover {
  transform: rotate(90deg);
}

/* ─── 8 + 9 + 10. Recipe card: lift + image zoom + tilt ──── */
body.riwajfood.riwajfood .rf-recipe-card {
  transition: transform 320ms var(--rf-blog-ease-out),
              box-shadow 320ms ease,
              border-color 240ms ease;
  will-change: transform;
}
/* Image zoom on hover (smooth Ken-Burns-like effect) */
body.riwajfood.riwajfood .rf-recipe-card .rf-recipe-card-media {
  overflow: hidden;
}
body.riwajfood.riwajfood .rf-recipe-card .rf-recipe-card-media img,
body.riwajfood.riwajfood .rf-recipe-card .rf-recipe-card-placeholder {
  transition: transform 700ms var(--rf-blog-ease-out);
  will-change: transform;
}
@media (hover: hover) {
  body.riwajfood.riwajfood .rf-recipe-card:hover .rf-recipe-card-media img,
  body.riwajfood.riwajfood .rf-recipe-card:hover .rf-recipe-card-placeholder {
    transform: scale(1.06);
  }
  /* Title brand-color shift on hover */
  body.riwajfood.riwajfood .rf-recipe-card .rf-recipe-card-title {
    transition: color 240ms ease;
  }
  body.riwajfood.riwajfood .rf-recipe-card:hover .rf-recipe-card-title {
    color: var(--rf-blog-brand);
  }
  /* Category pill scale */
  body.riwajfood.riwajfood .rf-recipe-card .rf-recipe-card-cat {
    transition: transform 320ms var(--rf-blog-spring), background-color 240ms ease;
    transform-origin: right center;       /* RTL anchor */
  }
  body.riwajfood.riwajfood .rf-recipe-card:hover .rf-recipe-card-cat {
    transform: scale(1.05);
  }
}

/* 3D tilt scaffolding (CSS vars set by JS) — desktop+hover only */
body.riwajfood.riwajfood .rf-recipe-card.rf-blog-tilt {
  transform-style: preserve-3d;
  transform: perspective(1100px)
             rotateX(var(--rf-tilt-x, 0deg))
             rotateY(var(--rf-tilt-y, 0deg))
             translateZ(0);
  transition: transform 220ms var(--rf-blog-ease-out),
              box-shadow 220ms ease,
              border-color 220ms ease;
}
@media (hover: hover) {
  body.riwajfood.riwajfood .rf-recipe-card.rf-blog-tilt:hover {
    transform: perspective(1100px)
               rotateX(var(--rf-tilt-x, 0deg))
               rotateY(var(--rf-tilt-y, 0deg))
               translateZ(8px);
  }
}
/* Touch-aware: scale-down on tap instead of hover lift */
@media (hover: none) {
  body.riwajfood.riwajfood .rf-recipe-card:active {
    transform: scale(0.99);
  }
}

/* ─── 11. "See all →" link: arrow nudge ──────────────────── */
body.riwajfood.riwajfood .rf-blog-section-link {
  transition: color 220ms ease, transform 240ms var(--rf-blog-ease-out);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
@media (hover: hover) {
  body.riwajfood.riwajfood .rf-blog-section-link:hover {
    transform: translateX(-3px);     /* nudge in RTL flow direction */
  }
}

/* ─── 12. Mini chips: springy press ──────────────────────── */
body.riwajfood.riwajfood .rf-blog-mini-chip {
  transition: background-color 220ms ease,
              color 220ms ease,
              transform 220ms var(--rf-blog-spring),
              box-shadow 220ms ease;
}
body.riwajfood.riwajfood .rf-blog-mini-chip:active {
  transform: scale(0.95);
}

/* ─── 13. Newsletter form: shimmer + magnetic ───────────── */
body.riwajfood.riwajfood .rf-blog-newsletter-form-v2 button,
body.riwajfood.riwajfood .rf-blog-footer-news-form button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 260ms var(--rf-blog-ease-out),
              box-shadow 260ms ease,
              background-color 220ms ease;
}
body.riwajfood.riwajfood .rf-blog-newsletter-form-v2 button::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.36) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  animation: rfBlogShimmer 4.4s ease-in-out 1.4s infinite;
}
@keyframes rfBlogShimmer {
  0%   { inset-inline-start: -120%; }
  60%  { inset-inline-start: 140%; }
  100% { inset-inline-start: 140%; }
}
body.riwajfood.riwajfood .rf-blog-newsletter-form-v2 button > * {
  position: relative;
  z-index: 1;
}
/* Magnetic offset (CSS vars set by JS) */
body.riwajfood.riwajfood .rf-blog-newsletter-form-v2 button.rf-blog-mag {
  transform: translate(var(--rf-mag-x, 0), var(--rf-mag-y, 0));
}
body.riwajfood.riwajfood .rf-blog-newsletter-form-v2 button.rf-blog-mag:hover {
  transform: translate(var(--rf-mag-x, 0), calc(var(--rf-mag-y, 0) - 2px));
}
body.riwajfood.riwajfood .rf-blog-newsletter-form-v2 button.rf-blog-mag:active {
  transform: translate(var(--rf-mag-x, 0), var(--rf-mag-y, 0)) scale(0.98);
}

/* ─── 14. No-results illustration float + chip spring ──── */
body.riwajfood.riwajfood .rf-blog-noresults-illustration {
  animation: rfBlogIllusFloat 4.6s ease-in-out infinite;
  will-change: transform;
}
@keyframes rfBlogIllusFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
body.riwajfood.riwajfood .rf-blog-noresults-chip {
  transition: background-color 220ms ease,
              color 220ms ease,
              transform 220ms var(--rf-blog-spring),
              box-shadow 220ms ease;
}
body.riwajfood.riwajfood .rf-blog-noresults-chip:active {
  transform: scale(0.95);
}
@media (hover: hover) {
  body.riwajfood.riwajfood .rf-blog-noresults-chip:hover {
    transform: translateY(-2px);
  }
}

/* "Show all articles" CTA below no-results — soft pulse */
body.riwajfood.riwajfood #rf-blog-noresults-clear {
  transition: transform 240ms var(--rf-blog-spring),
              background-color 220ms ease,
              box-shadow 220ms ease;
}
body.riwajfood.riwajfood #rf-blog-noresults-clear:hover {
  transform: translateY(-2px);
}

/* ─── Reading time icon: subtle clock pulse ──────────────── */
body.riwajfood.riwajfood .rf-recipe-card-time svg {
  animation: rfBlogTickPulse 5.2s ease-in-out infinite;
  transform-origin: center center;
}
@keyframes rfBlogTickPulse {
  0%, 90%, 100% { transform: scale(1); }
  95%           { transform: scale(1.12); }
}

/* ─── Focus rings (a11y polish) ──────────────────────────── */
body.riwajfood.riwajfood .rf-blog-page :is(a, button, input):focus-visible {
  outline: 3px solid var(--rf-blog-brand);
  outline-offset: 4px;
  border-radius: 12px;
}

/* ─── Reduced-motion safety ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.riwajfood.riwajfood .rf-blog-page,
  body.riwajfood.riwajfood .rf-blog-page *,
  body.riwajfood.riwajfood .rf-blog-page *::before,
  body.riwajfood.riwajfood .rf-blog-page *::after,
  body.riwajfood.riwajfood .rf-blog-progress-fill {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  body.riwajfood.riwajfood .rf-blog-page [data-reveal] {
    opacity: 1 !important;
  }
  body.riwajfood.riwajfood .rf-blog-page .rf-blog-section-header.is-visible .rf-blog-section-title::after {
    width: 56px !important;
  }
}

/* ========== END BLOG MOTION POLISH V1.0.0 ========== */