/* Shared readability floor for the WOWCasa website. */
:root {
  --site-body-size: clamp(20px, 0.45vw + 18px, 22px);
  --site-small-size: 18px;
}

body {
  font-size: var(--site-body-size) !important;
  line-height: 1.8 !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

p,
li,
dd,
dt,
summary,
label,
input,
textarea,
select {
  font-size: max(18px, 1em) !important;
}

button,
.button,
.btn,
.text-link,
.next-action,
.reading-links a {
  font-size: max(17px, 1em) !important;
}

header nav,
header nav a,
.nav-links,
.topic-nav a,
.back,
.mobile-bar a {
  font-size: var(--site-small-size) !important;
}

.utility,
.eyebrow,
.kicker,
small,
figcaption,
.scene-tag,
.scene-clock,
.scene-tab,
.scene-tab span,
.scene-systems span,
.watch,
.locations,
.row-status,
.rhythm-point,
.light-note,
.evidence-note,
[class*="-meta"],
[class*="-label"],
[class*="-caption"],
[class*="-badge"] {
  font-size: var(--site-small-size) !important;
  line-height: 1.65;
}

.rhythm-point strong,
.climate-step strong,
.platform-point strong,
.next-action strong {
  font-size: clamp(19px, 0.35vw + 18px, 21px) !important;
}

@media (max-width: 640px) {
  :root {
    --site-body-size: 19px;
    --site-small-size: 18px;
  }

  p,
  li,
  dd,
  dt,
  summary {
    line-height: 1.85;
  }
}

/*
 * Shared entrance rhythm
 * Text and still imagery enter automatically when they reach the viewport.
 * Existing scene changes, film cards and hero motion keep their own choreography.
 */
html.site-motion-ready [data-site-motion="text"] {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(2px);
  transition:
    opacity 700ms ease var(--site-motion-delay, 0ms),
    transform 880ms cubic-bezier(.16, 1, .3, 1) var(--site-motion-delay, 0ms),
    filter 700ms ease var(--site-motion-delay, 0ms);
  will-change: opacity, transform, filter;
}

html.site-motion-ready [data-site-motion="image"] {
  opacity: 0;
  transform: scale(1.055) translateY(12px);
  clip-path: inset(0 0 12% 0);
  filter: brightness(.82) saturate(.78) blur(2px);
  transition:
    opacity 850ms ease var(--site-motion-delay, 0ms),
    transform 1150ms cubic-bezier(.16, 1, .3, 1) var(--site-motion-delay, 0ms),
    clip-path 1100ms cubic-bezier(.16, 1, .3, 1) var(--site-motion-delay, 0ms),
    filter 900ms ease var(--site-motion-delay, 0ms);
  transform-origin: center center;
  will-change: opacity, transform, clip-path, filter;
}

html.site-motion-ready [data-site-motion].site-motion-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
  filter: none;
}

@media (max-width: 640px) {
  html.site-motion-ready [data-site-motion="text"] {
    transform: translateY(17px);
    transition-duration: 620ms, 760ms, 620ms;
  }

  html.site-motion-ready [data-site-motion="image"] {
    transform: scale(1.04) translateY(9px);
    clip-path: inset(0 0 9% 0);
    transition-duration: 760ms, 980ms, 940ms, 780ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.site-motion-ready [data-site-motion],
  html.site-motion-ready [data-site-motion].site-motion-visible {
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
    transition: none;
  }
}