/* =====================================================================
   Reform MD Rx — UI enhancement layer (motion, depth, polish).
   Layered on top of main.css; uses the existing --r-* palette tokens.
   All motion respects prefers-reduced-motion. Added by site refresh.
   ===================================================================== */

/* Anchor offset so #glp-options and other targets clear the sticky header */
html { scroll-padding-top: 96px; }
:where(h1,h2,h3,[id]) { scroll-margin-top: 96px; }

/* Sticky header: refine + elevate once the page is scrolled */
.site-header { transition: box-shadow .3s ease, background .3s ease, border-color .3s ease; }
.header-inner { transition: padding .3s ease; }
.site-header.is-scrolled {
  box-shadow: 0 10px 30px color-mix(in srgb, var(--r-heading) 12%, transparent);
  border-bottom-color: transparent;
}
.site-header.is-scrolled .header-inner { padding-top: 9px; padding-bottom: 9px; }

/* Hero: soft ambient glow + staggered entrance */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: -12% -18% auto -18%; height: 150%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 58% at 82% 6%, color-mix(in srgb, var(--r-border) 46%, transparent), transparent 70%),
    radial-gradient(44% 56% at 4% 94%, color-mix(in srgb, var(--r-soft) 70%, transparent), transparent 72%);
  animation: rHeroGlow 16s ease-in-out infinite alternate;
}
@keyframes rHeroGlow { from { transform: translate3d(0,0,0) scale(1); opacity:.8 } to { transform: translate3d(0,-16px,0) scale(1.06); opacity:1 } }
.hero .badge  { animation: fadeUp .8s ease .15s both; }
.hero-text    { animation: fadeUp .9s ease .45s both; }
.hero-actions { animation: fadeUp .9s ease .6s both; }
.hero-media   { animation: fadeUp 1s  ease .4s both; }

/* Buttons: lift + deeper shadow on hover, gentle press */
.btn, .wp-block-button__link, .r-form button[type="submit"] { will-change: transform; }
.btn:hover, .wp-block-button__link:hover, .r-form button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--r-accent) 30%, transparent);
}
.btn:active, .wp-block-button__link:active, .r-form button[type="submit"]:active { transform: translateY(0); }
.is-style-outline .wp-block-button__link:hover, .btn--outline:hover {
  background: color-mix(in srgb, var(--r-soft) 70%, transparent);
  border-color: var(--r-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--r-accent) 15%, transparent);
}

/* Cards: gentle lift + image zoom */
.r-product, .r-card { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.r-product:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 64px color-mix(in srgb, var(--r-heading) 16%, transparent);
  border-color: var(--r-accent);
}
.r-product .r-product-media { overflow: hidden; border-radius: calc(var(--r-card-radius) - 10px); }
.r-product .r-product-media img { transition: transform .5s ease; }
.r-product:hover .r-product-media img { transform: scale(1.05); }

/* Nav links: animated underline */
.site-nav a { position: relative; transition: color .18s; }
.site-nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 1.5px;
  background: var(--r-accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.site-nav a:hover::after, .site-nav .current-menu-item > a::after { transform: scaleX(1); }

/* Scroll reveal for block-content pages (applied via enhance.js) */
.r-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.r-reveal.is-in { opacity: 1; transform: none; }
/* staggered cascade for cards within a revealed row */
.r-reveal.is-in .wp-block-column { animation: fadeUp .6s ease both; }
.r-reveal.is-in .wp-block-column:nth-child(2) { animation-delay: .12s; }
.r-reveal.is-in .wp-block-column:nth-child(3) { animation-delay: .24s; }

/* FAQ details: smoother reveal of the answer */
.wp-block-details { transition: background .2s ease; border-radius: 14px; }
.wp-block-details[open] > *:not(summary) { animation: fadeUp .35s ease; }

/* Extend the homepage r-anim stagger a little further */
.r-anim:nth-child(5){transition-delay:.4s}.r-anim:nth-child(6){transition-delay:.5s}.r-anim:nth-child(7){transition-delay:.6s}

/* Mobile polish */
@media (max-width: 780px) {
  .hero::before { display: none; }
  .r-product:hover { transform: none; box-shadow: 0 20px 50px rgba(0,0,0,.08); }
  html { scroll-padding-top: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero .badge, .hero-text, .hero-actions, .hero-media,
  .wp-block-details[open] > *:not(summary), .r-reveal.is-in .wp-block-column { animation: none !important; }
  .r-reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .btn:hover, .wp-block-button__link:hover, .r-form button[type="submit"]:hover { transform: none; }
}

/* =====================================================================
   Homepage block hero (.r-home-hero) — dedicated cinematic entrance.
   ===================================================================== */
.r-home-hero { position: relative; isolation: isolate; overflow: clip; }
.r-home-hero::before {
  content: ""; position: absolute; z-index: -1; inset: -22% -15% auto -25%; height: 155%; pointer-events: none;
  background:
    radial-gradient(42% 55% at 78% 8%, color-mix(in srgb, var(--r-border) 52%, transparent), transparent 70%),
    radial-gradient(40% 52% at 0% 98%, color-mix(in srgb, var(--r-soft) 72%, transparent), transparent 72%);
  animation: rHeroGlow 16s ease-in-out infinite alternate;
}
.r-home-hero::after {
  content: ""; position: absolute; z-index: -1; width: min(44vw, 540px); aspect-ratio: 1; right: -5%; top: 6%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--r-accent) 13%, transparent), transparent 68%);
  filter: blur(4px); animation: rHeroFloat 13s ease-in-out infinite alternate;
}
@keyframes rHeroFloat { from { transform: translate3d(0,0,0); } to { transform: translate3d(-24px,28px,0); } }

.r-home-hero .badge            { animation: rHeroIn .7s cubic-bezier(.2,.8,.2,1) .10s both; }
.r-home-hero .r-hero-title     { animation: rHeroIn .8s cubic-bezier(.2,.8,.2,1) .24s both; }
.r-home-hero .r-hero-title em  { opacity: 0; animation: rHeroIn .8s cubic-bezier(.2,.8,.2,1) .56s both; }
.r-home-hero .hero-text        { animation: rHeroIn .8s cubic-bezier(.2,.8,.2,1) .70s both; }
.r-home-hero .wp-block-buttons { animation: rHeroIn .8s cubic-bezier(.2,.8,.2,1) .86s both; }
.r-home-hero > .wp-block-columns > .wp-block-column:last-child { animation: rHeroCard 1s cubic-bezier(.2,.8,.2,1) .5s both; }
@keyframes rHeroIn   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes rHeroCard { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }

/* Primary hero button: subtle sheen sweep to draw the eye */
.r-home-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link { position: relative; overflow: hidden; }
.r-home-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, #fff 32%, transparent), transparent);
  transform: skewX(-18deg); animation: rSheen 5.5s ease-in-out 2s infinite;
}
@keyframes rSheen { 0% { left: -60%; } 22%,100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
  .r-home-hero::before, .r-home-hero::after,
  .r-home-hero .badge, .r-home-hero .r-hero-title, .r-home-hero .r-hero-title em,
  .r-home-hero .hero-text, .r-home-hero .wp-block-buttons,
  .r-home-hero > .wp-block-columns > .wp-block-column:last-child,
  .r-home-hero .wp-block-button__link::after { animation: none !important; opacity: 1 !important; transform: none !important; }
}