/**
 * Ecommerce Methodology — Premium Horizontal
 *
 * Design system:
 *   - Background: white / light
 *   - Fonts: Manrope 700 (headings), Helvetica (body)
 *   - Container: 1120px
 *   - border-radius: 0
 *   - Palette: #050507 headings, rgba(0,0,0,x) body
 *   - Layout: 3 cards + arrows (5-day journey) → full-width ongoing card
 *   - Big editorial watermark numbers, generous padding, scroll animations
 */

/* ------------------------------------------------
   Section
   ------------------------------------------------ */

section.stg-ecmethod {
	position: relative;
	padding: 80px 24px;
	width: 100%;
	box-sizing: border-box;
}

.stg-ecmethod .stg-ecmethod__inner {
	max-width: 1120px;
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 48px;
	box-sizing: border-box;
}

/* ------------------------------------------------
   Header
   ------------------------------------------------ */

.stg-ecmethod .stg-ecmethod__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}

.stg-ecmethod .stg-ecmethod__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.5);
	background: rgba(0, 0, 0, 0.03);
	border: 1px solid rgba(0, 0, 0, 0.08);
	padding: 10px 22px;
}

.stg-ecmethod .stg-ecmethod__badge-dot {
	width: 5px;
	height: 5px;
	background: #050507;
	border-radius: 50%;
	opacity: 0.3;
}

.stg-ecmethod .stg-ecmethod__title {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: clamp(28px, 4vw, 40px);
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: #050507;
	margin: 0;
	text-transform: uppercase;
}

.stg-ecmethod .stg-ecmethod__title em {
	font-style: italic;
	font-weight: 700;
}

.stg-ecmethod .stg-ecmethod__subtitle {
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.45);
	margin: 0;
	max-width: 560px;
}

/* ------------------------------------------------
   Journey Row (3 cards + arrows)
   ------------------------------------------------ */

.stg-ecmethod .stg-ecmethod__journey {
	display: flex;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.stg-ecmethod .stg-ecmethod__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 48px;
	color: rgba(0, 0, 0, 0.12);
	transition: color 0.4s ease;
}

.stg-ecmethod--visible .stg-ecmethod__arrow {
	color: rgba(0, 0, 0, 0.25);
}

/* ------------------------------------------------
   Day Card
   ------------------------------------------------ */

.stg-ecmethod .stg-ecmethod__card {
	position: relative;
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px 28px 28px;
	border: 1px solid rgba(0, 0, 0, 0.06);
	background: rgba(0, 0, 0, 0.012);
	overflow: hidden;
	box-sizing: border-box;
	transition: border-color 0.3s ease, background 0.3s ease;
}

.stg-ecmethod .stg-ecmethod__card:hover {
	border-color: rgba(0, 0, 0, 0.12);
	background: rgba(0, 0, 0, 0.02);
}

/* Watermark number */
.stg-ecmethod .stg-ecmethod__card-watermark {
	position: absolute;
	top: -8px;
	right: 12px;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 96px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(0, 0, 0, 0.03);
	pointer-events: none;
	user-select: none;
}

/* Timing badge */
.stg-ecmethod .stg-ecmethod__card-top {
	display: flex;
	align-items: center;
}

.stg-ecmethod .stg-ecmethod__card-timing {
	display: inline-flex;
	align-items: center;
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.35);
	background: rgba(0, 0, 0, 0.03);
	border: 1px solid rgba(0, 0, 0, 0.06);
	padding: 5px 12px;
}

/* Title */
.stg-ecmethod .stg-ecmethod__card-title {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: #050507;
	margin: 0;
	position: relative;
}

/* Description */
.stg-ecmethod .stg-ecmethod__card-desc {
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.42);
	margin: 0;
	position: relative;
}

/* Checklist */
.stg-ecmethod .stg-ecmethod__card-items {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
	position: relative;
}

.stg-ecmethod .stg-ecmethod__card-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.45;
	color: rgba(0, 0, 0, 0.5);
}

.stg-ecmethod .stg-ecmethod__item-check {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	color: rgba(0, 0, 0, 0.18);
	margin-top: 3px;
}

/* Output */
.stg-ecmethod .stg-ecmethod__card-output {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 10px 14px;
	background: rgba(0, 0, 0, 0.025);
	border-top: 1px solid rgba(0, 0, 0, 0.05);
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.015em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.4);
}

.stg-ecmethod .stg-ecmethod__output-icon {
	color: rgba(0, 0, 0, 0.2);
	font-size: 12px;
}

/* ------------------------------------------------
   Ongoing Card (full width)
   ------------------------------------------------ */

.stg-ecmethod .stg-ecmethod__ongoing {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 40px 36px;
	border: 1px solid rgba(5, 5, 7, 0.1);
	background: rgba(5, 5, 7, 0.02);
	overflow: hidden;
	box-sizing: border-box;
	transition: border-color 0.3s ease;
}

.stg-ecmethod .stg-ecmethod__ongoing:hover {
	border-color: rgba(5, 5, 7, 0.16);
}

/* Watermark */
.stg-ecmethod .stg-ecmethod__ongoing-watermark {
	position: absolute;
	top: -12px;
	right: 24px;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 120px;
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(0, 0, 0, 0.025);
	pointer-events: none;
	user-select: none;
}

/* Head */
.stg-ecmethod .stg-ecmethod__ongoing-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 600px;
}

.stg-ecmethod .stg-ecmethod__ongoing-timing {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #050507;
}

.stg-ecmethod .stg-ecmethod__ongoing-icon {
	width: 16px;
	height: 16px;
	color: #050507;
}

.stg-ecmethod .stg-ecmethod__ongoing-title {
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: -0.025em;
	color: #050507;
	margin: 0;
}

.stg-ecmethod .stg-ecmethod__ongoing-desc {
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(0, 0, 0, 0.45);
	margin: 0;
}

/* Items grid: 2 or 3 columns */
.stg-ecmethod .stg-ecmethod__ongoing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px 24px;
}

.stg-ecmethod .stg-ecmethod__ongoing-item {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-weight: 400;
	font-size: 13.5px;
	line-height: 1.45;
	color: rgba(0, 0, 0, 0.55);
}

.stg-ecmethod .stg-ecmethod__ongoing .stg-ecmethod__item-check {
	color: rgba(5, 5, 7, 0.35);
}

/* Output */
.stg-ecmethod .stg-ecmethod__ongoing-output {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: rgba(5, 5, 7, 0.035);
	border-top: 1px solid rgba(5, 5, 7, 0.08);
	font-family: 'Helvetica', 'Arial', sans-serif;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.015em;
	text-transform: uppercase;
	color: #050507;
}

.stg-ecmethod .stg-ecmethod__ongoing-output .stg-ecmethod__output-icon {
	color: #050507;
}

/* ------------------------------------------------
   Scroll Animations
   ------------------------------------------------ */

/* Cards: visible by default, hidden only when JS --init fires */
.stg-ecmethod--init .stg-ecmethod__card {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		border-color 0.3s ease,
		background 0.3s ease;
}

.stg-ecmethod--init .stg-ecmethod__card:nth-child(1) { transition-delay: 0.1s; }
.stg-ecmethod--init .stg-ecmethod__card:nth-child(3) { transition-delay: 0.3s; }
.stg-ecmethod--init .stg-ecmethod__card:nth-child(5) { transition-delay: 0.5s; }

.stg-ecmethod--init .stg-ecmethod__arrow {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.stg-ecmethod--init .stg-ecmethod__arrow:nth-child(2) { transition-delay: 0.25s; }
.stg-ecmethod--init .stg-ecmethod__arrow:nth-child(4) { transition-delay: 0.45s; }

.stg-ecmethod--init .stg-ecmethod__ongoing {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
		border-color 0.3s ease;
	transition-delay: 0.65s;
}

/* Reveal */
.stg-ecmethod--visible .stg-ecmethod__card,
.stg-ecmethod--visible .stg-ecmethod__arrow,
.stg-ecmethod--visible .stg-ecmethod__ongoing {
	opacity: 1;
	transform: translateY(0);
}

/* Watermark subtle scale on reveal */
.stg-ecmethod--init .stg-ecmethod__card-watermark {
	transform: scale(0.85);
	opacity: 0;
	transition: transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.9s ease;
}

.stg-ecmethod--init .stg-ecmethod__card:nth-child(1) .stg-ecmethod__card-watermark { transition-delay: 0.2s; }
.stg-ecmethod--init .stg-ecmethod__card:nth-child(3) .stg-ecmethod__card-watermark { transition-delay: 0.4s; }
.stg-ecmethod--init .stg-ecmethod__card:nth-child(5) .stg-ecmethod__card-watermark { transition-delay: 0.6s; }

.stg-ecmethod--visible .stg-ecmethod__card-watermark {
	transform: scale(1);
	opacity: 1;
}

/* Ongoing watermark */
.stg-ecmethod--init .stg-ecmethod__ongoing-watermark {
	transform: scale(0.85);
	opacity: 0;
	transition: transform 0.9s ease, opacity 0.9s ease;
	transition-delay: 0.75s;
}

.stg-ecmethod--visible .stg-ecmethod__ongoing-watermark {
	transform: scale(1);
	opacity: 1;
}

/* Ongoing subtle pulse on the timing icon */
.stg-ecmethod--visible .stg-ecmethod__ongoing-icon {
	animation: ecmethod-pulse 3s ease-in-out 1.5s infinite;
}

@keyframes ecmethod-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}

/* ------------------------------------------------
   Responsive — Tablet
   ------------------------------------------------ */

@media (max-width: 1024px) {
	.stg-ecmethod .stg-ecmethod__journey {
		flex-direction: column;
		gap: 16px;
	}

	.stg-ecmethod .stg-ecmethod__arrow {
		width: auto;
		height: 32px;
		transform: rotate(90deg);
	}

	.stg-ecmethod .stg-ecmethod__card {
		padding: 28px 24px 24px;
	}

	.stg-ecmethod .stg-ecmethod__card-watermark {
		font-size: 80px;
	}

	.stg-ecmethod .stg-ecmethod__ongoing-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ------------------------------------------------
   Responsive — Mobile
   ------------------------------------------------ */

@media (max-width: 767px) {
	section.stg-ecmethod {
		padding: 48px 20px;
	}

	.stg-ecmethod .stg-ecmethod__inner {
		gap: 36px;
	}

	.stg-ecmethod .stg-ecmethod__card {
		padding: 24px 20px 20px;
	}

	.stg-ecmethod .stg-ecmethod__card-watermark {
		font-size: 64px;
		top: -4px;
		right: 8px;
	}

	.stg-ecmethod .stg-ecmethod__card-title {
		font-size: 16px;
	}

	.stg-ecmethod .stg-ecmethod__arrow {
		height: 24px;
	}

	.stg-ecmethod .stg-ecmethod__ongoing {
		padding: 28px 20px;
	}

	.stg-ecmethod .stg-ecmethod__ongoing-watermark {
		font-size: 72px;
		right: 10px;
	}

	.stg-ecmethod .stg-ecmethod__ongoing-title {
		font-size: 19px;
	}

	.stg-ecmethod .stg-ecmethod__ongoing-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
}

/* ------------------------------------------------
   Reduced Motion
   ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.stg-ecmethod--init .stg-ecmethod__card,
	.stg-ecmethod--init .stg-ecmethod__arrow,
	.stg-ecmethod--init .stg-ecmethod__ongoing,
	.stg-ecmethod--init .stg-ecmethod__card-watermark,
	.stg-ecmethod--init .stg-ecmethod__ongoing-watermark {
		opacity: 1;
		transform: none;
		transition: border-color 0.3s ease, background 0.3s ease;
	}

	.stg-ecmethod--visible .stg-ecmethod__ongoing-icon {
		animation: none;
	}
}