/* rosan website — page chrome shared by every kit page.
   Not a token file; linked directly by each page after styles.css. */

html, body { margin: 0; background: var(--surface); }

/* page-load: the whole page settles in once, gently */
@media (prefers-reduced-motion: no-preference) {
  body { opacity: 1; }
  body.reveal-ready { animation: see-page-in 1100ms var(--ease-out) both; }
  @keyframes see-page-in { from { opacity: 0; } to { opacity: 1; } }
}

/* gentle fade-up reveal; visible end-state is the base (print / reduced-motion safe) */
[data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    filter: blur(6px);
    transition:
      opacity 900ms var(--ease-out),
      transform 1100ms var(--ease-out),
      filter 900ms var(--ease-out);
    will-change: opacity, transform, filter;
  }
  .reveal-ready [data-reveal].is-in {
    opacity: 1; transform: none; filter: blur(0);
  }

  /* staggered children: each direct child eases in a beat after the last */
  .reveal-ready [data-reveal-group]:not(.is-in) > * { opacity: 0; }
  .reveal-ready [data-reveal-group].is-in > * {
    animation: see-rise 1000ms var(--ease-out) both;
  }
  .reveal-ready [data-reveal-group] > *:nth-child(1) { animation-delay: 60ms; }
  .reveal-ready [data-reveal-group] > *:nth-child(2) { animation-delay: 150ms; }
  .reveal-ready [data-reveal-group] > *:nth-child(3) { animation-delay: 240ms; }
  .reveal-ready [data-reveal-group] > *:nth-child(4) { animation-delay: 330ms; }
  .reveal-ready [data-reveal-group] > *:nth-child(5) { animation-delay: 420ms; }
  .reveal-ready [data-reveal-group] > *:nth-child(6) { animation-delay: 510ms; }
  @keyframes see-rise {
    from { opacity: 0; transform: translateY(12px); filter: blur(5px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }

  /* portrait: image breathes in with a slow scale settle */
  .reveal-ready [data-portrait] img { transform: scale(1.06); transition: transform 1600ms var(--ease-out); will-change: transform; }
  .reveal-ready [data-portrait].is-in img { transform: scale(1); }

  /* a hairline that draws itself out as its section reveals (eyebrow rules,
     dividers). Reusable across pages; the visible end-state is the base, so it
     stays print / reduced-motion safe. */
  .reveal-ready [data-reveal] .see-rule,
  .reveal-ready [data-reveal-group] .see-rule {
    transform: scaleX(0);
    transform-origin: left center;
  }
  .reveal-ready [data-reveal].is-in .see-rule,
  .reveal-ready [data-reveal-group].is-in .see-rule {
    transform: scaleX(1);
    transition: transform 1000ms var(--ease-out) 260ms;
  }
}

/* responsive: nav + content collapse together at the same 900px breakpoint */
@media (max-width: 900px) {
  /* hand the links to the drop-down sheet; show the menu button, hide the inline pill */
  [data-nav-desktop] { display: none !important; }
  [data-nav-action]  { display: none !important; }
  [data-nav-toggle]  { display: inline-flex !important; }
  [data-nav-sheet][data-open="true"] { display: block !important; }
}
/* the sheet is a small-screen affordance only */
@media (min-width: 901px) {
  [data-nav-sheet] { display: none !important; }
}
@media (max-width: 900px) {
  [data-hero-grid], [data-why-grid], [data-pillars-grid],
  [data-protocol-grid], [data-work-grid], [data-about-grid],
  [data-split] {
    grid-template-columns: 1fr !important;
  }
  [data-hero-grid] > div[aria-hidden] { position: relative !important; inset: auto !important; height: 320px; }
  [data-footer-grid] { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 560px) {
  [data-needs] { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem 1rem !important; }
  [data-footer-grid] { grid-template-columns: 1fr !important; }
  [data-stat] { grid-template-columns: 1fr !important; gap: 1rem !important; }
  [data-terms] { grid-template-columns: 1fr !important; }
}

/* The process "journey" graphic: a left-to-right path on wide screens,
   a stacked vertical list on narrow ones. */
@media (max-width: 760px) {
  [data-journey] { grid-template-columns: 1fr !important; gap: 0 !important; }
  [data-journey] .jcol { align-items: flex-start !important; text-align: left !important; position: relative; padding: 0 0 1.75rem 1.75rem; }
  [data-journey] .jcol::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: -2px; width: 2px; background: var(--border-strong); }
  [data-journey] .jcol:last-child::before { display: none; }
  [data-journey] .jdot { margin-bottom: 0.75rem !important; position: absolute; left: 0; top: 0; }
  [data-journey-rail], [data-journey-ends] { display: none !important; }
}

/* In-page section jumps (the Why-page contents bar): clear the sticky nav +
   contents bar so an anchored heading isn't hidden underneath. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
section[id] { scroll-margin-top: 9rem; }

/* contents bar: hide the horizontal scrollbar (it scrolls on narrow screens) */
[data-toc-scroll] { scrollbar-width: none; -ms-overflow-style: none; }
[data-toc-scroll]::-webkit-scrollbar { display: none; }

/* contact form fields — underlined, transparent; the underline darkens on focus */
.cf-input {
  width: 100%; appearance: none; -webkit-appearance: none; background: transparent;
  border: none; border-bottom: 1px solid var(--border-strong); border-radius: 0;
  padding: 0.65rem 0; font-family: var(--font-body); font-size: var(--type-body);
  color: var(--text-strong); transition: border-color var(--dur-fast) var(--ease-out);
}
.cf-input:focus { outline: none; border-bottom-color: var(--color-ink); }
.cf-input::placeholder { color: var(--text-faint); }
textarea.cf-input { resize: vertical; min-height: 6rem; line-height: var(--leading-body); }

/* hero scroll cue — a gentle bob, stilled under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .hero-cue-bob { animation: see-cue-bob 2.1s var(--ease-out) infinite; will-change: transform; }
  @keyframes see-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
}

/* "places & paths" glyph strip — ink by default, gently to the accent on hover */
.pp-item { color: var(--text-strong); transition: color var(--dur-fast) var(--ease-out); }
.pp-item svg { transition: stroke var(--dur-fast) var(--ease-out); }
.pp-item .pp-lbl { color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out); }
.pp-item:hover, .pp-item:hover .pp-lbl { color: var(--accent); }