/* ============================================================
   225 Face Care — global layer (ported 1:1 from colors_and_type.css)
   Resets · responsive token overrides · reveal-on-scroll core · keyframes
   ============================================================ */

/* ---------- Base / resets ---------- */
html {
  font-family: var(--font-sans);
  color: var(--text-dark);
  background: var(--color-soft-sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 300; }
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
a { color: inherit; }
:focus:not(:focus-visible) { outline: none; }
html { scroll-behavior: smooth; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { text-transform: none !important; }

/* ---------- Responsive token overrides ---------- */
@media (max-width: 1024px) {
  :root:root { --page-px: 44px; --grid-gap: 24px; }
}
@media (max-width: 860px) {
  :root:root { --page-px: 24px; --grid-gap: 16px; --sec-head-mb: 24px; --sec-eyebrow-mb: 10px; }
}

/* ---------- Reveal-on-scroll (blur-up) — shared core ---------- */
[data-reveal] {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(28px);
  transition:
    opacity 900ms cubic-bezier(.19,1,.22,1),
    filter 900ms cubic-bezier(.19,1,.22,1),
    transform 900ms cubic-bezier(.19,1,.22,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, filter, transform;
}
[data-reveal].is-in { opacity: 1; filter: blur(0); transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; filter: none; transform: none; transition: none; }
}

/* Carousel/grid rails: desktop container reveal inert (children stagger);
   mobile rail slides in from the right once. */
.pcarousel[data-reveal] { opacity: 1; filter: none; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .pcarousel[data-reveal], .pcarousel > [data-reveal] {
    opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important;
  }
}
@media (max-width: 860px) {
  .pcarousel > [data-reveal] { opacity: 1 !important; filter: none !important; transform: none !important; }
  .pcarousel[data-reveal] {
    opacity: 0; transform: translateX(34px); filter: blur(6px);
    transition: opacity 700ms cubic-bezier(.19,1,.22,1),
                transform 700ms cubic-bezier(.19,1,.22,1),
                filter 700ms cubic-bezier(.19,1,.22,1);
  }
  .pcarousel[data-reveal].is-in { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- Keyframes ---------- */
@keyframes stepPulse {
  0%   { transform: scale(1);    opacity: 0.35; }
  60%  { transform: scale(1.85); opacity: 0;    }
  100% { transform: scale(1.85); opacity: 0;    }
}
@keyframes marquee225 { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@keyframes cartFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cartSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes revFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes revPop  { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes popupScrimIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes popupCardIn {
  from { opacity: 0; filter: blur(14px); transform: translateY(28px) scale(0.98); }
  to   { opacity: 1; filter: blur(0);    transform: translateY(0) scale(1); }
}
@keyframes sheetScrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ---------- Runtime state classes (JS-toggled; not builder-assigned) ---------- */
.pr-step--inactive:hover .pr-step-circle { transform: scale(1.12); border-color: var(--color-brand-navy); color: var(--color-brand-navy); box-shadow: 0 0 0 8px var(--color-soft-sand), 0 8px 20px rgba(28,28,46,0.10); }
.pr-step--inactive.pr-zigstep { opacity: 0.85; cursor: pointer; }
.pr-step--inactive .pr-zig-circle { background: var(--color-soft-sand-85); border: 1px solid var(--border-soft); box-shadow: 0 0 0 8px var(--color-soft-sand-85); color: var(--text-medium); }
.pr-step--inactive:hover .pr-zig-circle { border-color: var(--border-soft); color: var(--text-medium); box-shadow: 0 0 0 8px var(--color-soft-sand-85); }
.pr-step--active .pr-step-circle { transition: transform 400ms cubic-bezier(.19,1,.22,1); }
.pr-step--active:hover .pr-step-circle { transform: scale(1.08); }
.pr-step--active.pr-zigstep { opacity: 1; cursor: default; }
.pr-step--active .pr-zig-circle { background: var(--product-accent, var(--color-brand-navy)); border: 1px solid var(--product-accent, var(--color-brand-navy)); box-shadow: 0 8px 24px rgba(28,28,46,0.10); color: var(--color-pure-white); }
.pr-step--active .pr-zig-name { color: var(--color-brand-navy); }
.pr-step--active .pr-step-name { color: var(--color-brand-navy); }
.pr-zig-pulse--delay { animation-delay: 1.7s; }
.pr-pulse--delay { animation-delay: 1.7s; }
.faq-tab--active { color: var(--color-brand-navy); }
.faq-tab--active:hover { color: var(--color-brand-navy); }
.faq-tab--active .faq-tab-underline { transform: scaleX(1); }
.chip--active { background: var(--color-brand-navy); color: var(--color-pure-white); border-color: var(--color-brand-navy); }
.chip--active:hover { background: var(--color-brand-navy); color: var(--color-pure-white); border-color: var(--color-brand-navy); }
.is-teorija .ab-klinika-tag { color: var(--text-light); }
.is-teorija .ab-klinika-text { color: var(--text-medium); }
.is-praksa .ab-klinika-tag { color: rgba(240,234,225,0.6); }
.is-praksa .ab-klinika-text { color: var(--text-on-dark); }

/* ---------- Footer + product-page mobile hooks (ported from ≤860 layer) ---------- */
@media (max-width: 860px) {
  #footer > div { padding-top: 40px !important; padding-bottom: 24px !important; }
  #footer [data-reveal-stagger] { gap: 20px !important; }
  #footer ul { gap: 0px !important; }
  [data-screen-label] h2 { font-size: 26px !important; }
  [data-screen-label="01b O proizvodu"] > div,
  [data-screen-label="02 Tri rečenice"] > div,
  [data-screen-label="03 Za koga je"] > div,
  [data-screen-label="04 Gde se uklapa"] > div,
  [data-screen-label="05 Kako se koristi"] > div,
  [data-screen-label="06 Aktivni sastojci"] > div,
  [data-screen-label="07 Kako radi"] > div,
  [data-screen-label="08 FAQ"] > div,
  [data-screen-label="09 Video"] > div,
  [data-screen-label="10 Uparite sa"] > div { padding-top: 40px !important; padding-bottom: 40px !important; padding-left: 24px !important; padding-right: 24px !important; }
  [data-screen-label="05 Kako se koristi"],
  [data-screen-label="06 Aktivni sastojci"],
  [data-screen-label="10 Uparite sa"] { overflow-x: clip; }
  [data-screen-label="10 Uparite sa"] .pcard__reveal { max-height: none !important; opacity: 1 !important; margin-top: 12px !important; }
}
[data-screen-label="10 Uparite sa"] .pcard__reveal .pcard__revealbtn { display: none !important; }

/* ---------- Nav burger icon swap (aria-expanded driven) ---------- */
.nav-burger .icon-close { display: none; }
.nav-burger[aria-expanded="true"] .icon-close { display: block; }
.nav-burger[aria-expanded="true"] .icon-open { display: none; }