/* project.css: motion + design-system layer for project pages (pilot: podspace). Loads AFTER main.css + theme.css; pairs with project.js. */

/* ---- Lucide icons: inline 24x24 SVGs, one stroke recipe ---- */
.icon-lucide { fill: none; stroke: currentColor; stroke-width: var(--_ui---icon-stroke); stroke-linecap: round; stroke-linejoin: round; overflow: visible; width: var(--_ui---size--icon); height: var(--_ui---size--icon); flex: none; }
.button_icon { position: relative; width: var(--_ui---size--icon); height: var(--_ui---size--icon); flex-shrink: 0; overflow: hidden; }
.button_icon svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--_motion---duration--base) var(--_motion---ease-out); }
.button_icon svg + svg { transform: translate(-100%, 100%); }
@media (hover: hover) and (pointer: fine) {
  .button:hover .button_icon svg, .project-meta_link:hover .button_icon svg { transform: translate(100%, -100%); }
  .button:hover .button_icon svg + svg, .project-meta_link:hover .button_icon svg + svg { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .button_icon svg { transition: none; } }

/* ---- Buttons: primary + text link (legacy is-secondary / is-alternate unused), press feedback ---- */
.button.is-link { border-radius: var(--_ui---radius--base); padding-block: var(--_grid-and-spacing---space--12); }
.button[class] { transition: background-color var(--_motion---duration--fast) var(--_motion---ease-out), box-shadow var(--_motion---duration--fast) var(--_motion---ease-out), transform var(--_motion---duration--fast) var(--_motion---ease-out), border-color var(--_motion---duration--fast) var(--_motion---ease-out), color var(--_motion---duration--fast) var(--_motion---ease-out), scale var(--_motion---duration--press) var(--_motion---ease-out); }
.button:active { scale: .97; }
@media (prefers-reduced-motion: reduce) { .button:active { scale: none; } }

/* ---- Labels + section headers (H2 only, no eyebrow, no numbering) ---- */
.text-style-tagline, .stats_label { font-size: var(--_typography---size--label); font-weight: var(--_typography---weight--semibold); letter-spacing: var(--_typography---letter-spacing--tagline); }
.section_title { font-family: var(--_typography---family--heading); font-size: var(--_typography---size--section-title); font-weight: var(--_typography---weight--h2); letter-spacing: var(--_typography---letter-spacing--display); line-height: var(--_typography---height--display); color: var(--_theme---text--heading); margin: 0; }
.section_header { margin-bottom: var(--_grid-and-spacing---header-gap); }
.section_header > :last-child { margin-bottom: 0; }
.project-overview_aside .section_header { margin-bottom: 0; }
.project-narrative_block .text-style-tagline { margin-bottom: 0; }
.stats_grid.is-project-results { margin-top: 0; }

/* ---- Cards + panels: 1px border, 6px radius, border-only hover ---- */
.project-meta_grid, .stats_grid, .project-hero_image-wrapper { border: var(--_ui---border-width) solid var(--_theme---border--default); border-radius: var(--_ui---radius--base); }
.project-narrative_block, .testimonial-card_component, .project-next_link { border: var(--_ui---border-width) solid var(--_theme---border--default); border-radius: var(--_ui---radius--base); transition: border-color var(--_motion---duration--fast) var(--_motion---ease-out); }
.project-narrative_block:hover, .testimonial-card_component:hover, .project-next_link:hover { border-color: var(--_theme---border--strong); box-shadow: none; transform: none; color: inherit; }
.project-narrative_block:hover { background-color: var(--_theme---background--subtle); }
.testimonial-card_quote-icon .icon-lucide { width: 100%; height: 100%; }
.project-meta_item:hover, .section_project-results .stats_item:hover { background-color: var(--_theme---background--section); }
[data-theme="dark"] .section_project-results .stats_item:hover { background: var(--_theme---background--section) !important; }
.project-hero_image-wrapper { background-color: var(--_theme---background--subtle); }
.project-hero_image { scale: var(--reveal-scale, 1); }

/* ---- Inline links with Lucide icons ---- */
.project-hero_back-link { display: inline-flex; align-items: center; gap: var(--_grid-and-spacing---space--6); }
.project-meta_link .button_icon { width: var(--_ui---size--icon-sm); height: var(--_ui---size--icon-sm); }
.project-next_label { display: inline-flex; align-items: center; gap: var(--_grid-and-spacing---space--6); }
.project-next_link.is-next .project-next_label { align-self: flex-end; }
.project-next_link:hover .project-next_name { color: var(--_theme---text--heading); }
.project-next_link.is-prev:hover .project-next_label, .project-next_link.is-next:hover .project-next_label { transform: none; }

/* ---- Prev / next: two bordered cards around the All Work link ---- */
.project-next_component { border: 0; padding: 0; align-items: center; gap: var(--_ui---gap--card, 1.25rem); }
.project-next_link { flex: 1 1 0; padding: var(--_grid-and-spacing---space--24); }
.project-next_link.is-prev { align-items: flex-start; text-align: left; }
.project-next_link.is-next { align-items: flex-end; text-align: right; }
@media (max-width: 767px) {
  .project-next_component { align-items: stretch; }
  .project-next_link.is-prev, .project-next_link.is-next { align-items: flex-start; text-align: left; }
  .project-next_link.is-next .project-next_label { align-self: flex-start; }
  .project-next_all { align-self: center; }
}

/* ---- CTA: theme-subtle panel (not a dark panel); section padding + sticky-footer curtain match the homepage ---- */
.section_cta { padding-block: var(--_grid-and-spacing---section-padding); }
.page-wrapper { overflow: clip; }
.cta-panel_component { position: relative; overflow: hidden; text-align: center; padding: clamp(var(--_grid-and-spacing---space--56), 8vw, var(--_grid-and-spacing---space--96)) var(--_grid-and-spacing---space--24); border-radius: var(--_ui---radius--base); border: var(--_ui---border-width) solid var(--_theme---border--default); background: var(--_theme---background--subtle); }
.cta-panel_glow { position: absolute; inset: -20px 0; pointer-events: none; background: radial-gradient(ellipse 70% 90% at 50% 120%, color-mix(in srgb, var(--_theme---text--accent) 16%, transparent), transparent 60%); }
.cta-panel_title { position: relative; font-family: var(--_typography---family--heading); font-size: var(--_typography---size--display); font-weight: var(--_typography---weight--h2); letter-spacing: var(--_typography---letter-spacing--display); line-height: var(--_typography---height--display); color: var(--_theme---text--heading); margin: 0; }
.cta-panel_subtitle { position: relative; margin: var(--_grid-and-spacing---space--16) auto 0; max-width: var(--_ui---max-width--subtitle); color: var(--_theme---text--body); font-size: var(--_typography---size--subtitle); }
.cta-panel_actions { position: relative; display: flex; gap: var(--_grid-and-spacing---button-gap); justify-content: center; flex-wrap: wrap; margin-top: var(--_grid-and-spacing---cta-gap); }
@media (max-width: 479px) { .cta-panel_actions .button { flex: 1; justify-content: center; } }
.cta-panel_component .collab-marquee_component { position: relative; height: auto; margin-top: var(--_grid-and-spacing---space--40); width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, currentColor 8%, currentColor 92%, transparent); mask-image: linear-gradient(to right, transparent, currentColor 8%, currentColor 92%, transparent); }
.cta-panel_component .collab-marquee_track { flex-direction: row; width: max-content; padding-right: var(--_grid-and-spacing---space--12); animation: marquee-scroll var(--_motion---duration--marquee) linear infinite; }
.cta-panel_component .collab-marquee_item { border-radius: var(--_ui---radius--base); white-space: nowrap; background: transparent; border: var(--_ui---border-width) solid var(--_theme---border--default); }
@media (max-width: 767px) { .cta-panel_component .collab-marquee_component { margin-top: var(--_grid-and-spacing---space--32); } }
@media (prefers-reduced-motion: reduce) { .collab-marquee_track, .cta-panel_component .collab-marquee_track { animation: none; } }

/* ---- Reveal: hidden states behind .js-motion (set in <head>, skipped for reduced motion); production .rv / .para-rv neutralised ---- */
.js-motion .rv, .js-motion .para-rv { opacity: 1; transform: none; transition: none; }
.js-motion [data-motion]:not(.is-revealed) { opacity: 0; transform: translateY(var(--_motion---rise)); }
.js-motion [data-motion="fade"]:not(.is-revealed) { transform: none; }
.js-motion [data-motion="header"]:not(.is-revealed) { opacity: 1; transform: none; }
.js-motion [data-motion="header"]:not(.is-revealed) h2 { opacity: 0; }
.motion_mask { display: block; overflow: clip; padding-bottom: .12em; margin-bottom: -.12em; }
.js-motion [data-motion="media"]:not(.is-revealed) { opacity: 1; transform: none; clip-path: inset(0 0 12% 0 round var(--_ui---radius--base)); }
.js-motion [data-motion="media"]:not(.is-revealed) .project-hero_image { --reveal-scale: 1.08; }
.js-motion [data-motion="cta"]:not(.is-revealed) { opacity: 0; transform: scale(.98); }
.js-motion [data-motion="cta"]:not(.is-revealed) :is(.cta-panel_glow, .cta-panel_title, .collab-marquee_component) { opacity: 0; }
.js-motion [data-motion="cta"]:not(.is-revealed) :is(.cta-panel_subtitle, .cta-panel_actions) { opacity: 0; transform: translateY(var(--_motion---rise)); }

/* Hero entrance (one timeline in project.js); hidden until .is-loaded is added */
.js-motion .section_project-hero:not(.is-loaded) :is(.project-hero_back-link, .project-hero_content .text-style-tagline, .project-hero_heading, .project-hero_summary, .project-meta_grid) { opacity: 0; }
.js-motion .section_project-hero:not(.is-loaded) :is(.project-hero_back-link, .project-hero_content .text-style-tagline) { transform: translateY(var(--_motion---rise--small)); }
.js-motion .section_project-hero:not(.is-loaded) .project-hero_summary { transform: translateY(var(--_motion---rise)); }
.js-motion .section_project-hero:not(.is-loaded) .project-meta_item { opacity: 0; transform: translateY(var(--_motion---rise--small)); }
.js-motion .section_project-hero:not(.is-loaded) .project-hero_image-wrapper { clip-path: inset(0 0 12% 0 round var(--_ui---radius--base)); }
.js-motion .section_project-hero:not(.is-loaded) .project-hero_image { --reveal-scale: 1.08; }
.js-motion .navbar_component:not(.is-entered) .navbar_container { opacity: 0; transform: translateY(-8px); }

/* Contact hero entrance (same timeline in project.js) */
.js-motion .section_contact-hero:not(.is-loaded) :is(.contact-hero_heading, .contact-hero_subheading) { opacity: 0; }
.js-motion .section_contact-hero:not(.is-loaded) .contact-hero_subheading { transform: translateY(var(--_motion---rise)); }

/* ---- Contact: form panel, fields and aside cards (1px border, 6px radius, border-only hover, visible focus) ---- */
.contact-form_component, .contact-aside_card { border: var(--_ui---border-width) solid var(--_theme---border--default); border-radius: var(--_ui---radius--base); }
.contact-aside_card { transition: border-color var(--_motion---duration--fast) var(--_motion---ease-out); }
.contact-aside_card:hover { border-color: var(--_theme---border--strong); transform: none; }
.form_input, .form_select, .form_textarea { border: var(--_ui---border-width) solid var(--_theme---border--default); border-radius: var(--_ui---radius--base); box-shadow: none; }
.form_input:hover, .form_select:hover, .form_textarea:hover { border-color: var(--_theme---border--strong); }
.form_input:focus, .form_select:focus, .form_textarea:focus { border-color: var(--_theme---text--accent); box-shadow: none; }
.form_input:focus-visible, .form_select:focus-visible, .form_textarea:focus-visible { outline: var(--_ui---focus-ring--width) solid var(--_theme---text--accent); outline-offset: var(--_ui---focus-ring--offset); }
.contact-form_form .button { width: fit-content; align-self: flex-start; justify-content: center; margin-top: var(--_grid-and-spacing---space--4); cursor: pointer; }
.contact-form_form .button[disabled] { opacity: var(--_ui---opacity--disabled); cursor: not-allowed; transform: none; box-shadow: none; }
.contact-form_status { border-radius: var(--_ui---radius--base); }
.contact-aside_link { display: inline-flex; align-items: center; gap: var(--_grid-and-spacing---space--4); }
.contact-aside_link .button_icon { width: var(--_ui---size--icon-xs); height: var(--_ui---size--icon-xs); }
@media (hover: hover) and (pointer: fine) {
  .contact-aside_link:hover .button_icon svg { transform: translate(100%, -100%); }
  .contact-aside_link:hover .button_icon svg + svg { transform: none; }
}

/* Lenis base rules */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }