/* =========================================================
   SS Sublimation Page — SHARED design system
   Loaded by every widget in this plugin. Defines the color
   palette, shared resets, shared button/card language, and
   the common scroll-reveal animation system so all 18+ future
   sections stay visually harmonious even though each is a
   fully separate Elementor widget.
   ========================================================= */

:root {
	--sgp-black: #0e0d10;
	--sgp-black-soft: #18161b;
	--sgp-black-card: #201d24;
	--sgp-gold: #c9a24b;
	--sgp-gold-soft: #e3c98a;
	--sgp-red: #7c2430;
	--sgp-red-soft: #9c3341;
	--sgp-white: #f7f5f2;
	--sgp-lilac: #b9a3d9;
	--sgp-lilac-soft: #d6c9ec;
	--sgp-text-muted: #b9b3ad;
	--sgp-anim-duration: 700ms;
	--sgp-anim-stagger: 110ms;
}

.sgp-section { position: relative; direction: rtl; font-family: inherit; overflow: hidden; }
.sgp-section *, .sgp-section *::before, .sgp-section *::after { box-sizing: border-box; }
.sgp-section img { max-width: 100%; display: block; }
.sgp-section button { font-family: inherit; }
.sgp-section a { text-decoration: none; color: inherit; }
.sgp-section ul { margin: 0; padding: 0; list-style: none; }
.sgp-section p, .sgp-section h1, .sgp-section h2, .sgp-section h3, .sgp-section h4 { margin: 0; }

.sgp-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 13px; font-weight: 600; letter-spacing: 1px;
	color: var(--sgp-gold);
}
.sgp-eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--sgp-gold); display: inline-block; }

.sgp-heading-lg { font-size: clamp(28px, 4vw, 46px); font-weight: 800; line-height: 1.25; color: var(--sgp-white); }
.sgp-highlight { color: var(--sgp-gold); }

.sgp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 13px 28px; border-radius: 999px; font-size: 14px; font-weight: 700;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
	border: none; cursor: pointer;
}
.sgp-btn-primary { background: linear-gradient(135deg, var(--sgp-gold-soft), var(--sgp-gold)); color: var(--sgp-black); box-shadow: 0 10px 24px rgba(201,162,75,0.28); }
.sgp-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(201,162,75,0.4); }
.sgp-btn-outline { background: transparent; color: var(--sgp-white); border: 1.5px solid rgba(247,245,242,0.35); }
.sgp-btn-outline:hover { border-color: var(--sgp-gold); color: var(--sgp-gold); }
.sgp-btn-dark { background: var(--sgp-black-soft); color: var(--sgp-white); }
.sgp-btn-dark:hover { background: var(--sgp-black); }

.sgp-card {
	background: var(--sgp-black-card);
	border-radius: 18px;
	border: 1px solid rgba(255,255,255,0.06);
}

.sgp-icon-badge {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 14px;
	background: rgba(201,162,75,0.12); color: var(--sgp-gold); font-size: 20px; flex: none;
}

.sgp-scroll-cue {
	display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
	font-size: 11px; letter-spacing: 2px; color: var(--sgp-text-muted);
}
.sgp-scroll-cue-dot {
	width: 34px; height: 34px; border-radius: 50%;
	border: 1.5px solid rgba(247,245,242,0.3);
	display: flex; align-items: center; justify-content: center;
	color: var(--sgp-white);
	animation: sgp-bob 2.2s ease-in-out infinite;
}
@keyframes sgp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* =========================================================
   Shared scroll-reveal system (4 selectable animation styles)
   Every widget's wrapper carries data-anim-style + the timing
   vars; individual elements to animate get class "sgp-reveal"
   plus data-anim="<kind>" and, for grouped items, an inline
   --i (index) custom property for stagger.
   ========================================================= */
.sgp-reveal { transition: opacity var(--sgp-anim-duration) ease, transform var(--sgp-anim-duration) ease; }

[data-anim-style="classic"] .sgp-reveal { opacity: 0; transform: translateY(30px); }
[data-anim-style="classic"] .sgp-reveal.sgp-in-view { opacity: 1; transform: translateY(0); }
[data-anim-style="classic"] .sgp-reveal.sgp-in-view[data-anim="item"] { transition-delay: calc(var(--sgp-anim-stagger) * var(--i, 0)); }

[data-anim-style="cascade"] .sgp-reveal { opacity: 0; transform: translateY(45px) scale(0.96); }
[data-anim-style="cascade"] .sgp-reveal.sgp-in-view { opacity: 1; transform: translateY(0) scale(1); }
[data-anim-style="cascade"] .sgp-reveal.sgp-in-view[data-anim="item"] { transition-delay: calc(var(--sgp-anim-stagger) * (var(--i, 0) + 1)); }
[data-anim-style="cascade"] .sgp-reveal.sgp-in-view[data-anim="media"] { transition-delay: var(--sgp-anim-stagger); }

[data-anim-style="zoom"] .sgp-reveal { opacity: 0; transform: scale(0.87); }
[data-anim-style="zoom"] .sgp-reveal.sgp-in-view { opacity: 1; transform: scale(1); }
[data-anim-style="zoom"] .sgp-reveal.sgp-in-view[data-anim="item"] { transition-delay: calc(var(--sgp-anim-stagger) * var(--i, 0)); }

[data-anim-style="side"] .sgp-reveal[data-anim="title"] { opacity: 0; transform: translateX(40px); }
[data-anim-style="side"] .sgp-reveal[data-anim="media"] { opacity: 0; transform: translateX(-50px); }
[data-anim-style="side"] .sgp-reveal[data-anim="item"] { opacity: 0; transform: translateY(30px); }
[data-anim-style="side"] .sgp-reveal.sgp-in-view { opacity: 1; transform: translate(0,0); }
[data-anim-style="side"] .sgp-reveal.sgp-in-view[data-anim="item"] { transition-delay: calc(var(--sgp-anim-stagger) * var(--i, 0)); }

@media (prefers-reduced-motion: reduce) {
	.sgp-reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* Utility: visually-hidden but still readable by search engines / screen readers */
.sgp-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}