/* Creative Growth — site interactions (layered on design system v1.0).
   Everything here is progressive: content is fully visible without JS, and
   all motion stops under prefers-reduced-motion. */

/* Cross-page transitions (supporting browsers only; no JS) */
@view-transition { navigation: auto; }

/* Reading progress bar (scroll-driven, no JS) */
.cg-progress { position: fixed; inset: 0 0 auto; height: 3px; background: var(--pink); transform-origin: 0 50%; transform: scaleX(0); z-index: 50; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .cg-progress { animation: cg-progress linear both; animation-timeline: scroll(root); }
  @keyframes cg-progress { to { transform: scaleX(1); } }
}

/* Hero motif: the wordmark's rising corner, drawn in and floating */
.cg-hero { position: relative; }
.cg-hero > :not(.cg-hero-art) { position: relative; z-index: 1; }
.cg-hero-art { position: absolute; right: 0; top: 50%; translate: 0 -50%; display: grid; grid-template-columns: repeat(3, 56px); gap: 36px; pointer-events: none; }
.cg-hero-art span { width: 32px; height: 32px; border-top: 8px solid var(--pink); border-right: 8px solid var(--pink); opacity: .9; }
.cg-hero-art span:nth-child(5) { border-color: var(--paper); }
@media (max-width: 1000px) { .cg-hero-art { display: none; } }

/* Buttons and links: small, purposeful motion */
.cg-btn .cg-icon { transition: transform var(--duration-fast) var(--easing-standard); }
.cg-btn:hover .cg-icon { transform: translate(3px, -3px); }
.cg-link { transition: text-decoration-thickness var(--duration-fast), text-decoration-color var(--duration-fast); }

/* Cards: lift and reveal the rising corner on hover */
.cg-card { position: relative; transition: transform var(--duration-base) var(--easing-standard), border-color var(--duration-base); }
.cg-card::after { content: ""; position: absolute; top: 14px; right: 14px; width: 14px; height: 14px; border-top: 3px solid var(--pink); border-right: 3px solid var(--pink); opacity: 0; transform: translate(-4px, 4px); transition: opacity var(--duration-base), transform var(--duration-base) var(--easing-standard); }
.cg-card:hover { transform: translateY(-4px); border-color: var(--border-strong); }
.cg-card:hover::after { opacity: 1; transform: none; }
.cg-icon-tile { transition: background var(--duration-base), color var(--duration-base), transform var(--duration-base) var(--easing-standard); }
.cg-stack:hover > .cg-icon-tile { background: var(--pink); color: var(--paper); transform: rotate(-6deg); }

/* Scroll reveal: only applied by site.js to elements below the fold */
.cg-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--easing-standard), transform .6s var(--easing-standard); transition-delay: var(--d, 0ms); }
.cg-reveal.is-in { opacity: 1; transform: none; }

/* Workflow demo */
.cg-flow__step { transition: background var(--duration-base), color var(--duration-base), transform var(--duration-base) var(--easing-standard), border-color var(--duration-base); }
.cg-flow__step.is-active { background: var(--pink); border-color: var(--pink); color: var(--paper); transform: translateY(-4px); }
.cg-flow__step.is-active::before, .cg-flow__step.is-active .cg-flow__tool { color: var(--paper); }
.cg-flow__step.is-done { border-color: var(--pink); }
.cg-flow-demo { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-6); }
.cg-flow-demo__note { margin: 0; font-weight: 600; min-height: 1.5em; }

/* Website health-check quiz */
.cg-quiz { display: grid; gap: var(--space-6); max-width: 760px; }
.cg-quiz__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: q; }
.cg-quiz__q fieldset { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4) var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; justify-content: space-between; background: var(--surface-raised); transition: border-color var(--duration-base); }
.cg-quiz__q legend { float: left; padding: 0; font-weight: 600; max-width: 46ch; counter-increment: q; }
.cg-quiz__q legend::before { content: counter(q) ". "; color: var(--text-muted); }
.cg-quiz__opts { display: flex; gap: var(--space-2); }
.cg-quiz__opts label { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--border-control); border-radius: var(--radius-pill); cursor: pointer; font-weight: 600; transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast); }
.cg-quiz__opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cg-quiz__opts label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cg-quiz__opts label:has(input[value="1"]:checked) { background: var(--pink); border-color: var(--pink); }
.cg-quiz__opts label:has(input:focus-visible) { outline: var(--border-focus) solid var(--focus-ring); outline-offset: 3px; }
.cg-quiz__opts label:active { transform: scale(.96); }
.cg-quiz__q fieldset:has(input:checked) { border-color: var(--border-strong); }
.cg-quiz__meter { height: 10px; border-radius: var(--radius-pill); background: var(--surface); overflow: hidden; }
.cg-quiz__meter span { display: block; height: 100%; width: 0; background: var(--pink); border-radius: inherit; transition: width .5s var(--easing-standard); }
.cg-quiz__progress { margin: 0; font-size: 14px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cg-quiz__result { border-radius: var(--radius-card); padding: var(--space-8); background: var(--ink); color: var(--paper); display: grid; gap: var(--space-3); animation: cg-pop .45s var(--easing-standard); }
.cg-quiz__score { margin: 0; font: 700 clamp(40px, 6vw, 64px)/1 var(--font-display); letter-spacing: -.04em; color: var(--pink); font-variant-numeric: tabular-nums; }
.cg-quiz__msg { margin: 0; font-size: 19px; font-weight: 700; max-width: 52ch; }
.cg-quiz__result .cg-btn { justify-self: start; }
@keyframes cg-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* Hero entrance (above the fold, CSS only, short) */
@media (prefers-reduced-motion: no-preference) {
  .cg-hero > * { animation: cg-rise .7s var(--easing-standard) both; }
  .cg-hero > :nth-child(2) { animation-delay: 80ms; }
  .cg-hero > :nth-child(3) { animation-delay: 160ms; }
  .cg-hero > :nth-child(4) { animation-delay: 240ms; }
  .cg-hero-art { animation: none; }
  .cg-hero-art span { animation: cg-draw .7s var(--easing-standard) both, cg-float 6s ease-in-out 1s infinite alternate; }
  .cg-hero-art span:nth-child(3n+2) { animation-delay: .1s, 1.4s; }
  .cg-hero-art span:nth-child(3n) { animation-delay: .2s, 1.8s; }
  .cg-hero-art span:nth-child(n+4) { animation-duration: .7s, 7s; }
  @keyframes cg-rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes cg-draw { from { opacity: 0; transform: translate(-10px, 10px) scale(.6); } }
  @keyframes cg-float { to { transform: translate(4px, -6px); } }
}
@media (prefers-reduced-motion: reduce) {
  .cg-reveal { opacity: 1; transform: none; }
  .cg-card:hover, .cg-flow__step.is-active { transform: none; }
}

/* Card grids: three columns at most so prices and buttons have room */
.cg-grid:has(> .cg-card) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }

/* Outlined SVG wordmark (header and footer); "growth" follows the text colour */
.cg-logo { display: block; height: auto; max-width: 100%; color: var(--text); }
.cg-footer .cg-logo { color: var(--paper); }

/* Founder portrait: square photo, not cropped */
.cg-photo__media--portrait { aspect-ratio: 1; max-width: 360px; background: var(--grey-100); }

/* Long-form text: articles and the privacy notice */
.cg-prose { max-width: 68ch; font: 400 18px/1.7 var(--font-body); color: var(--text); }
.cg-prose > * { margin: 0; }
.cg-prose > * + * { margin-top: 1.1em; }
.cg-prose h2 { font: 700 clamp(26px, 3vw, 34px)/1.15 var(--font-display); letter-spacing: -.03em; margin-top: 2em; }
.cg-prose h3 { font: 700 21px/1.3 var(--font-display); letter-spacing: -.02em; margin-top: 1.6em; }
.cg-prose h2 + *, .cg-prose h3 + * { margin-top: .6em; }
.cg-prose ul, .cg-prose ol { padding-left: 1.3em; }
.cg-prose li + li { margin-top: .5em; }
.cg-prose li::marker { color: var(--pink); }
.cg-prose strong { font-weight: 700; }
.cg-prose blockquote { border-left: 4px solid var(--pink); padding-left: 1em; }

/* Testimonials */
.cg-quotes { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.cg-quote { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); }
.cg-quote blockquote { margin: 0; }
.cg-quote blockquote p { font-size: 18px; line-height: 1.6; }
.cg-quote figcaption { display: grid; gap: 2px; }
.cg-quote figcaption .cg-link { margin-top: var(--space-2); font-size: 15px; }

/* Contact form: sent state */
form.is-sent [data-cg-form-note] { color: var(--text); font-weight: 600; }

/* Case study screenshot above the text */
.cg-figure { margin: 0 0 var(--space-12, 48px); max-width: 1000px; }
.cg-figure .cg-photo__media { aspect-ratio: auto; }

/* Footer: five columns and the newsletter sign-up */
.cg-footer__grid { grid-template-columns: 1.8fr repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .cg-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cg-footer__grid > :first-child { grid-column: 1 / -1; } }
.cg-news { position: relative; display: grid; gap: var(--space-2); margin-top: var(--space-4); max-width: 420px; }
.cg-news__label { font-weight: 700; color: var(--paper); }
.cg-news__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cg-news__row .cg-input { flex: 1 1 200px; background: #111; color: var(--paper); border-color: var(--grey-600, #555); }
.cg-news__note { margin: 0; font-size: 14px; color: var(--grey-300); }