/* ==========================================================================
   motion-enhance.css — Premium interaction/motion layer (light SCS clone)
   Elevation pass: 21st.dev-grade micro-interactions + best-practice motion,
   applied WITHIN the shipped light theme. GPU-only (transform/opacity),
   150–300ms, single brand accent. Fully prefers-reduced-motion-safe.
   Auto-enqueued via functions.php glob. Owns NO markup — pure enhancement.
   ========================================================================== */

:root {
	--ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* reveal / settle */
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);/* chips / toggles */
	--dur-fast: 150ms;   /* hover, focus */
	--dur-base: 260ms;   /* card lift, reveal */
	--dur-slow: 500ms;   /* hero, section (cap) */
}

/* --------------------------------------------------------------------------
   1. Scroll progress bar (thin brand-red beam, top of viewport) — premium cue
   -------------------------------------------------------------------------- */
.scs-progress {
	/* Logical inset so the scroll beam anchors to the writing-mode start edge:
	   grows from the LEFT in LTR, from the RIGHT in RTL (Hebrew). */
	position: fixed;
	inset-block-start: 0; inset-block-end: auto;
	inset-inline-start: 0; inset-inline-end: auto;
	height: 3px; width: 0;
	background: linear-gradient(90deg, var(--scs-red, #24E35A), #6BFF88);
	z-index: 300; pointer-events: none;
	box-shadow: 0 0 8px rgba(36,227,90,.5);
	transition: width 90ms linear;
}

/* --------------------------------------------------------------------------
   2. Cards — deeper hover elevation + image zoom + red accent underline grow
      Applies to every card family used across the site.
   -------------------------------------------------------------------------- */
.scs-card, .scs-matcard, .scs-pricecard, .scs-review, .scsq-tcard {
	transition: transform var(--dur-base) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-out),
	            border-color var(--dur-base) var(--ease-out);
	position: relative;
}
/* Image zoom needs an overflow clip on the media wrapper */
.scs-card .wp-block-post-featured-image,
.scs-card > a:first-child,
.scs-matcard__media,
.scs-card figure {
	overflow: hidden; border-radius: 8px; display: block;
}
.scs-card .wp-block-post-featured-image img,
.scs-matcard__media img,
.scs-card figure img {
	transition: transform 450ms var(--ease-out);
	will-change: transform;
}
.scs-card:hover .wp-block-post-featured-image img,
.scs-matcard:hover .scs-matcard__media img,
.scs-card:hover figure img {
	transform: scale(1.055);
}
/* Growing red accent bar along the card bottom on hover */
.scs-card::after, .scs-matcard::after {
	/* Anchor the growing accent bar to the logical start edge (bottom corners
	   are symmetric, so border-radius needs no mirroring). */
	content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 3px; width: 0;
	background: var(--scs-red, #24E35A); border-radius: 0 0 8px 8px;
	transition: width var(--dur-base) var(--ease-out);
}
.scs-card:hover::after, .scs-matcard:hover::after { width: 100%; }
.scs-card:hover, .scs-matcard:hover { border-color: rgba(36,227,90,.35); }

/* --------------------------------------------------------------------------
   3. Buttons — refined micro-interaction: hover lift + light sheen sweep,
      crisp active press. (Base transition already set in main.css.)
   -------------------------------------------------------------------------- */
.wp-block-button__link, .wp-element-button {
	position: relative; overflow: hidden;
	transition: transform var(--dur-fast) var(--ease-out),
	            box-shadow var(--dur-fast) var(--ease-out),
	            filter var(--dur-fast) var(--ease-out);
}
.wp-block-button__link:hover, .wp-element-button:hover {
	box-shadow: 0 6px 18px rgba(36,227,90,.28);
}
.wp-block-button__link:active, .wp-element-button:active {
	transform: translateY(0) scale(.97);
}
/* Sheen sweep for filled brand buttons — travels from the start edge across
   the button on hover. Uses logical inset so it enters from the correct side
   in both LTR (from left) and RTL (from right). */
.has-brand-red-background-color::before {
	content: ""; position: absolute; top: 0; inset-inline-start: -60%; width: 40%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
	transform: skewX(-18deg); transition: inset-inline-start var(--dur-slow) var(--ease-out);
	pointer-events: none;
}
.has-brand-red-background-color:hover::before { inset-inline-start: 130%; }

/* --------------------------------------------------------------------------
   4. Nav links — animated underline sweep on hover/focus (desktop)
   -------------------------------------------------------------------------- */
.scs-header .wp-block-navigation a {
	position: relative; text-decoration: none;
}
.scs-header .wp-block-navigation a::after {
	content: ""; position: absolute; inset-inline-start: 0; bottom: -4px; height: 2px; width: 0;
	background: var(--scs-blue, #24E35A);
	transition: width var(--dur-base) var(--ease-out);
}
.scs-header .wp-block-navigation a:hover::after,
.scs-header .wp-block-navigation a:focus-visible::after { width: 100%; }

/* --------------------------------------------------------------------------
   5. Hero — entrance choreography + brand-red accent line drawn under H1
   -------------------------------------------------------------------------- */
.scs-hero-content > * { opacity: 0; transform: translateY(16px); }
.js .scs-hero-content > * { animation: scs-hero-in var(--dur-slow) var(--ease-out) forwards; }
.js .scs-hero-content > *:nth-child(1) { animation-delay: 80ms; }
.js .scs-hero-content > *:nth-child(2) { animation-delay: 170ms; }
.js .scs-hero-content > *:nth-child(3) { animation-delay: 260ms; }
.js .scs-hero-content > *:nth-child(4) { animation-delay: 350ms; }
@keyframes scs-hero-in { to { opacity: 1; transform: none; } }

/* Red "laser cut" line that draws under the hero H1 */
.scs-hero-content h1 { position: relative; padding-bottom: .35em; }
.scs-hero-content h1::after {
	content: ""; position: absolute; inset-inline-start: 0; bottom: .1em; height: 4px; width: 0;
	background: linear-gradient(90deg, var(--scs-red, #24E35A), #6BFF88);
	border-radius: 3px; box-shadow: 0 0 12px rgba(36,227,90,.7);
}
.js .scs-hero-content h1::after {
	animation: scs-hero-line var(--dur-slow) var(--ease-out) 520ms forwards;
}
@keyframes scs-hero-line { to { width: 88px; } }

/* --------------------------------------------------------------------------
   6. FAQ — smooth reveal of the answer body + summary hover affordance
   -------------------------------------------------------------------------- */
.scs-faq summary { transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.scs-faq summary:hover { background: var(--scs-surface, #F5F5F5); }
.scs-faq details[open] .scs-faq__body { animation: scs-faq-in var(--dur-base) var(--ease-out); }
@keyframes scs-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   7. Section reveal — richer default (kept compatible with main.css .scs-reveal)
   -------------------------------------------------------------------------- */
.js .scs-reveal { transition-duration: var(--dur-base); }

/* --------------------------------------------------------------------------
   8. Cursor affordance (ui-ux-pro-max checklist) + consistent link transitions
   -------------------------------------------------------------------------- */
a, button, summary, [role="button"], .scs-card, label { cursor: pointer; }
a { transition: color var(--dur-fast) var(--ease-out); }

/* --------------------------------------------------------------------------
   9. prefers-reduced-motion — strip every non-essential motion, keep states
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.scs-progress { display: none; }
	.scs-card img, .scs-matcard__media img, .scs-card figure img { transition: none; }
	.scs-card:hover img, .scs-matcard:hover img { transform: none; }
	.has-brand-red-background-color::before { display: none; }
	.scs-hero-content > * { opacity: 1; transform: none; animation: none; }
	.scs-hero-content h1::after { animation: none; width: 88px; }
	.scs-faq details[open] .scs-faq__body { animation: none; }
	.wp-block-button__link:active, .wp-element-button:active { transform: none; }
}