/* ============================================================
   Rootworth motion layer — rw-motion.css
   Additive, reversible polish: scroll reveals + hover micro-
   interactions + animated tree watermark. Loaded as a separate
   enqueued asset (NOT baked into the generated child style.css),
   so it survives independently and can be dequeued at any time.

   Aesthetic intent: keep Rootworth's warm classical apothecary
   identity. Borrow only the *mechanics* of a premium site
   (subtle scroll-reveal fade-ups, restrained hover states),
   never the white/sans-serif look of the Shopify reference.

   All motion is gated behind prefers-reduced-motion and behind
   the `.js` flag set by rw-motion.js — if JS never runs, nothing
   is hidden and the page renders exactly as before.
   Source of truth: domain/rootworth/theme/rw-motion.css
   ============================================================ */

/* ----- Scroll reveal --------------------------------------- */
/* Only hide elements once JS has confirmed it's running AND the
   user hasn't asked to reduce motion. rw-motion.js adds the
   `rw-reveal` class; `.rw-in` is added when the element scrolls
   into view. */
html.rw-motion .rw-reveal {
  opacity: 0;
  transform: translateY(44px) scale(0.985);
  transition:
    opacity 1.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--rw-delay, 0ms);
  will-change: opacity, transform;
}

html.rw-motion .rw-reveal.rw-in {
  opacity: 1;
  transform: none;
}

/* ----- Image hover treatments ------------------------------ */
/* Soft zoom on framed imagery — condition hero + gallery pieces.
   Wrappers get overflow:hidden so the scaled image stays inside. */
.rw-condition-hero,
.rw-gallery-piece {
  overflow: hidden;
}

.rw-condition-hero .rw-condition-hero-img,
.rw-gallery-piece img {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rw-condition-hero:hover .rw-condition-hero-img,
.rw-gallery-piece:hover img {
  transform: scale(1.045);
}

/* ----- Chamber accent card lift ---------------------------- */
.rw-chamber-accent {
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.35s ease;
}

.rw-chamber-heading:hover .rw-chamber-accent {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(26, 26, 26, 0.18);
  opacity: 1;
}

/* ----- Content + nav link underline slide ------------------ */
/* A brass underline that wipes in on hover, replacing the plain
   color swap. Scoped to content + primary nav so it doesn't
   touch buttons (which carry their own hover) or the radio bar. */
.entry-content a:not(.rw-intake-button):not(.button-primary):not(.button-secondary),
.ast-primary-menu > .menu-item > a,
.main-header-menu > .menu-item > a {
  background-image: linear-gradient(var(--brass, #8A7E54), var(--brass, #8A7E54));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1.5px;
  transition: background-size 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.2s ease;
  padding-bottom: 1px;
}

.entry-content a:not(.rw-intake-button):not(.button-primary):not(.button-secondary):hover,
.ast-primary-menu > .menu-item > a:hover,
.main-header-menu > .menu-item > a:hover {
  background-size: 100% 1.5px;
}

/* ----- Animated tree watermark ----------------------------- */
/* The oak/juniper/mustard hero watermark already exists; give it
   a slow fade-and-settle on load so the hero feels alive without
   distracting. */
html.rw-motion .rw-tree-accent {
  opacity: 0;
  transform: translateY(-8px) scale(1.01);
  transition: opacity 1.4s ease, transform 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.rw-motion .rw-tree-accent.rw-in {
  /* settle to the per-page opacity defined in the base stylesheet
     (0.18 desktop / 0.12 mobile) — re-stated here so the animation
     end-state matches. */
  opacity: 0.18;
  transform: none;
}

@media (max-width: 768px) {
  html.rw-motion .rw-tree-accent.rw-in {
    opacity: 0.12;
  }
}

/* ----- Intake CTA — slightly richer affordance ------------- */
.rw-intake-button {
  transition: background 0.2s, transform 0.12s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s;
}
.rw-intake-button:hover {
  box-shadow: 0 6px 16px rgba(160, 64, 32, 0.28);
}

/* ----- Dropdown dock / "genie" magnification --------------- */
/* Desktop submenus (esp. the long Conditions list) get a compact
   resting state so they're less tall, then a macOS-Dock-style
   magnify on hover: the focused item scales up, its immediate
   neighbours scale a little (falloff), and the rest recede + fade.
   Pure transform/opacity → no reflow, no cursor jitter. */
@media (min-width: 922px) {
  .main-header-menu .sub-menu .menu-item > .menu-link,
  .ast-nav-menu .sub-menu .menu-item > .menu-link {
    transition:
      transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
      opacity 0.2s ease,
      background-color 0.2s ease;
    transform-origin: left center;
    /* compact, smaller resting state — unselected items stay small
       by default; they only grow to full size when hovered. */
    font-size: 0.8em;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 1.2;
  }

  /* When the cursor is anywhere in the submenu, unfocused items recede
     further — bigger size gap vs. the focused item. */
  .main-header-menu .sub-menu:hover .menu-item > .menu-link,
  .ast-nav-menu .sub-menu:hover .menu-item > .menu-link {
    opacity: 0.4;
    transform: scale(0.82);
  }

  /* Focused item — magnified centerpiece (grows back past full size). */
  .main-header-menu .sub-menu .menu-item:hover > .menu-link,
  .ast-nav-menu .sub-menu .menu-item:hover > .menu-link {
    opacity: 1;
    transform: scale(1.45);
    font-weight: 600;
  }

  /* Immediate neighbours — partial magnify for the Dock falloff feel. */
  .main-header-menu .sub-menu .menu-item:hover + .menu-item > .menu-link,
  .main-header-menu .sub-menu .menu-item:has(+ .menu-item:hover) > .menu-link,
  .ast-nav-menu .sub-menu .menu-item:hover + .menu-item > .menu-link,
  .ast-nav-menu .sub-menu .menu-item:has(+ .menu-item:hover) > .menu-link {
    opacity: 0.75;
    transform: scale(1.12);
  }
}

/* ----- Home hero "why we're here" statement ---------------- */
/* The mission line under the oak — centered, enlarged, brand-colour
   highlighted, since it's the landing page's reason-for-being. */
.rw-hero-home .rw-subtitle {
  text-align: center;
  max-width: 760px;
  margin: -0.5rem auto 3rem;   /* raise toward the oak; more gap below */
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.3;
  font-weight: 500;
  color: var(--oxblood, #5C2A2A);
  letter-spacing: 0.005em;
}

/* Keep it on a single line on tablet/desktop; allow wrap on phones. */
@media (min-width: 768px) {
  .rw-hero-home .rw-subtitle {
    white-space: nowrap;
    max-width: none;
  }
}

/* ----- Unified illustration framing ------------------------ */
/* Consistent rounded corners + soft shadow so the painterly
   illustrations read as one cohesive, intentional set. */
.rw-chamber-cover img,
.rw-chamber-body figure img,
.rw-chamber-pivot figure img,
.rw-gallery-piece img {
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(26, 26, 26, 0.12);
}

.rw-condition-hero-img {
  box-shadow: 0 8px 26px rgba(26, 26, 26, 0.14);
}

/* ----- Lightbox (click illustration to view large) -------- */
.rw-zoomable {
  cursor: zoom-in;
}

.rw-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  cursor: zoom-out;
}

.rw-lightbox.rw-open {
  opacity: 1;
  pointer-events: auto;
}

.rw-lightbox img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 6px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  transform: scale(0.95);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rw-lightbox.rw-open img {
  transform: scale(1);
}

/* ----- Footer social navigation ---------------------------- */
.rw-social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(138, 126, 84, 0.25);
}

.rw-social a {
  color: var(--brass, #8A7E54);
  line-height: 0;
  background: none;
  padding: 0;
  transition: color 0.2s ease, transform 0.2s ease;
}

.rw-social a:hover,
.rw-social a:focus {
  color: var(--oxblood, #5C2A2A);
  transform: translateY(-2px);
}

.rw-social svg {
  display: block;
}

/* ----- Reduced-motion: hard off --------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.rw-motion .rw-reveal,
  html.rw-motion .rw-reveal.rw-in,
  html.rw-motion .rw-tree-accent,
  html.rw-motion .rw-tree-accent.rw-in {
    opacity: inherit;
    transform: none;
    transition: none;
  }
  html.rw-motion .rw-tree-accent { opacity: 0.18; }
  .rw-condition-hero .rw-condition-hero-img,
  .rw-gallery-piece img,
  .rw-chamber-accent,
  .entry-content a,
  .ast-primary-menu > .menu-item > a,
  .main-header-menu > .menu-item > a {
    transition: none;
  }
  .main-header-menu .sub-menu .menu-item > .menu-link,
  .ast-nav-menu .sub-menu .menu-item > .menu-link {
    transition: none;
    transform: none !important;
    opacity: 1 !important;
  }
}