/**
 * SLTC Website Launch Countdown — Frontend Stylesheet
 *
 * ISOLATION GUARANTEE: Every rule is scoped under .sltc-countdown-wrapper
 * to prevent any collision with the existing theme or plugin CSS.
 *
 * Approach:
 *   - CSS custom properties (variables) for easy theming
 *   - Glass-morphism countdown cards
 *   - Animated ambient orbs (CSS-only, no JS)
 *   - Smooth flip/fade transitions on number changes
 *   - Full responsive: 320 px → 1920 px
 *
 * @version 1.0.0
 * @package SLTC_Coming_Soon_Countdown
 */

/* ============================================================
   0. BASE RESET — scoped to avoid leaking into the theme
   ============================================================ */
.sltc-countdown-wrapper *,
.sltc-countdown-wrapper *::before,
.sltc-countdown-wrapper *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ============================================================
   1. CSS CUSTOM PROPERTIES (all values live here — easy to edit)
   ============================================================ */
.sltc-countdown-wrapper {

	/* Colours */
	--sltc-bg:            #ffffff;
	--sltc-orb-1:         rgba(186, 210, 240, 0.45);   /* soft blue  */
	--sltc-orb-2:         rgba(210, 195, 245, 0.40);   /* soft purple */
	--sltc-orb-3:         rgba(200, 235, 215, 0.30);   /* soft mint  */
	--sltc-text-primary:  #0d1b2a;
	--sltc-text-secondary:#3d5166;
	--sltc-text-muted:    #7a8fa6;
	--sltc-accent:        #1e4d8c;
	--sltc-accent-light:  #2a6abf;

	/* Glass card */
	--sltc-card-bg:       rgba(255, 255, 255, 0.72);
	--sltc-card-border:   rgba(255, 255, 255, 0.90);
	--sltc-card-shadow:   0 8px 32px rgba(30, 77, 140, 0.10), 0 2px 8px rgba(30, 77, 140, 0.06);
	--sltc-card-radius:   20px;

	/* Typography */
	--sltc-font:          Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Spacing */
	--sltc-gap-sm:        0.75rem;
	--sltc-gap-md:        1.5rem;
	--sltc-gap-lg:        2.5rem;

	/* Button */
	--sltc-btn-bg:        #1e4d8c;
	--sltc-btn-hover:     #153870;
	--sltc-btn-radius:    100px;
	--sltc-btn-shadow:    0 4px 18px rgba(30, 77, 140, 0.35);
}

/* ============================================================
   2. WRAPPER — full-viewport centred layout
   ============================================================ */
.sltc-countdown-wrapper {
	position: relative;
	min-height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--sltc-bg);
	font-family: var(--sltc-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
	padding: 2rem 1.25rem;
}

/* ============================================================
   3. AMBIENT BACKGROUND ORBS (pure CSS animation)
   ============================================================ */
.sltc-countdown-wrapper__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	overflow: hidden;
}

.sltc-bg-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	will-change: transform;
}

.sltc-bg-orb--1 {
	width: 55vmax;
	height: 55vmax;
	top: -20%;
	left: -15%;
	background: var(--sltc-orb-1);
	animation: sltc-orb-drift-1 18s ease-in-out infinite alternate;
}

.sltc-bg-orb--2 {
	width: 50vmax;
	height: 50vmax;
	bottom: -20%;
	right: -15%;
	background: var(--sltc-orb-2);
	animation: sltc-orb-drift-2 22s ease-in-out infinite alternate;
}

.sltc-bg-orb--3 {
	width: 35vmax;
	height: 35vmax;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: var(--sltc-orb-3);
	animation: sltc-orb-drift-3 14s ease-in-out infinite alternate;
}

@keyframes sltc-orb-drift-1 {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(4%, 6%) scale(1.05); }
	100% { transform: translate(-3%, 3%) scale(0.97); }
}
@keyframes sltc-orb-drift-2 {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(-5%, -4%) scale(1.08); }
	100% { transform: translate(3%, -6%) scale(0.96); }
}
@keyframes sltc-orb-drift-3 {
	0%   { transform: translate(-50%, -50%) scale(1); }
	50%  { transform: translate(-52%, -48%) scale(1.12); }
	100% { transform: translate(-48%, -52%) scale(0.95); }
}

/* ============================================================
   4. CONTENT CARD
   ============================================================ */
.sltc-countdown-wrapper__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: 860px;
	padding: var(--sltc-gap-lg) var(--sltc-gap-md);
	animation: sltc-fade-in-up 0.9s cubic-bezier(.22,1,.36,1) both;
}

@keyframes sltc-fade-in-up {
	from { opacity: 0; transform: translateY(28px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   5. LOGO
   ============================================================ */
.sltc-countdown-wrapper__logo {
	margin-bottom: var(--sltc-gap-md);
}

.sltc-countdown-wrapper__logo-img {
	height: auto;
	display: block;
	object-fit: contain;
	animation: sltc-fade-in-down 0.7s cubic-bezier(.22,1,.36,1) both 0.1s;
}

@keyframes sltc-fade-in-down {
	from { opacity: 0; transform: translateY(-16px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   6. EYEBROW DIVIDER
   ============================================================ */
.sltc-countdown-wrapper__eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: var(--sltc-gap-md);
}

.sltc-eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sltc-accent-light);
	opacity: 0.5;
}

.sltc-eyebrow-line {
	width: 60px;
	height: 1.5px;
	background: linear-gradient(90deg, transparent, var(--sltc-accent-light), transparent);
	opacity: 0.4;
}

/* ============================================================
   7. HEADLINE & SUBTITLE
   ============================================================ */
.sltc-countdown-wrapper__title {
	font-size: clamp(1.9rem, 5vw, 3.2rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.15;
	color: var(--sltc-text-primary);
	margin-bottom: 1rem;
	animation: sltc-fade-in-up 0.9s cubic-bezier(.22,1,.36,1) both 0.15s;

	/* Subtle gradient on the heading */
	background: linear-gradient(135deg, #0d1b2a 0%, #1e4d8c 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.sltc-countdown-wrapper__subtitle {
	font-size: clamp(0.9rem, 2.2vw, 1.15rem);
	color: var(--sltc-text-secondary);
	line-height: 1.7;
	max-width: 560px;
	margin: 0 auto var(--sltc-gap-lg);
	font-weight: 400;
	animation: sltc-fade-in-up 0.9s cubic-bezier(.22,1,.36,1) both 0.25s;
}

/* ============================================================
   8. COUNTDOWN CLOCK
   ============================================================ */
.sltc-countdown-wrapper__clock {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: clamp(8px, 2vw, 20px);
	margin-bottom: var(--sltc-gap-lg);
	flex-wrap: wrap;
	animation: sltc-fade-in-up 0.9s cubic-bezier(.22,1,.36,1) both 0.35s;
}

/* --- Unit (card + label pair) --- */
.sltc-clock-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

/* --- Glass card --- */
.sltc-clock-unit__card {
	position: relative;
	min-width: clamp(68px, 12vw, 130px);
	padding: clamp(16px, 3vw, 30px) clamp(10px, 2vw, 20px);
	background: var(--sltc-card-bg);
	border: 1.5px solid var(--sltc-card-border);
	border-radius: var(--sltc-card-radius);
	box-shadow: var(--sltc-card-shadow);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sltc-clock-unit__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 48px rgba(30, 77, 140, 0.15), 0 4px 16px rgba(30, 77, 140, 0.08);
}

/* Subtle inner shimmer */
.sltc-clock-unit__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(150deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.0) 60%);
	pointer-events: none;
	border-radius: inherit;
}

/* --- Number --- */
.sltc-clock-unit__number {
	display: block;
	font-size: clamp(2rem, 6vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--sltc-accent);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-align: center;
	transition: transform 0.18s cubic-bezier(.34,1.56,.64,1), opacity 0.18s ease;
	will-change: transform, opacity;
}

.sltc-clock-unit__number.sltc-flip {
	animation: sltc-number-flip 0.3s cubic-bezier(.34,1.56,.64,1);
}

@keyframes sltc-number-flip {
	0%   { transform: scale(1.18) translateY(-6px); opacity: 0.5; }
	60%  { transform: scale(1.04) translateY(0); opacity: 1; }
	100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* --- Label --- */
.sltc-clock-unit__label {
	font-size: clamp(0.6rem, 1.5vw, 0.78rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sltc-text-muted);
}

/* --- Separator --- */
.sltc-clock-separator {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: clamp(20px, 3vw, 38px);
}

.sltc-clock-separator__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sltc-accent);
	opacity: 0.35;
	animation: sltc-sep-blink 1s step-start infinite;
}

.sltc-clock-separator__dot:last-child { animation-delay: 0.5s; }

@keyframes sltc-sep-blink {
	0%, 100% { opacity: 0.35; }
	50%       { opacity: 0.08; }
}

/* ============================================================
   9. LAUNCHED MESSAGE (shown when countdown hits zero)
   ============================================================ */
.sltc-countdown-wrapper__launched {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-bottom: var(--sltc-gap-lg);
	animation: sltc-launched-in 0.8s cubic-bezier(.22,1,.36,1) both;
}

.sltc-countdown-wrapper__launched[hidden] { display: none; }

@keyframes sltc-launched-in {
	from { opacity: 0; transform: scale(0.85); }
	to   { opacity: 1; transform: scale(1); }
}

.sltc-launched-icon {
	font-size: 3.5rem;
	line-height: 1;
	animation: sltc-bounce 0.6s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes sltc-bounce {
	from { transform: scale(0); }
	to   { transform: scale(1); }
}

.sltc-launched-text {
	font-size: clamp(1rem, 2.5vw, 1.35rem);
	font-weight: 700;
	color: var(--sltc-text-primary);
	max-width: 480px;
	line-height: 1.5;
}

/* ============================================================
   10. CTA BUTTON
   ============================================================ */
.sltc-countdown-wrapper__cta {
	margin-bottom: var(--sltc-gap-md);
	animation: sltc-fade-in-up 0.9s cubic-bezier(.22,1,.36,1) both 0.45s;
}

.sltc-countdown-wrapper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0.85rem 2.2rem;
	background: var(--sltc-btn-bg);
	color: #ffffff;
	font-family: var(--sltc-font);
	font-size: clamp(0.85rem, 1.5vw, 0.95rem);
	font-weight: 600;
	letter-spacing: 0.015em;
	border-radius: var(--sltc-btn-radius);
	box-shadow: var(--sltc-btn-shadow);
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
	-webkit-tap-highlight-color: transparent;
}

.sltc-countdown-wrapper__btn:hover,
.sltc-countdown-wrapper__btn:focus-visible {
	background: var(--sltc-btn-hover);
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(30, 77, 140, 0.40);
	color: #fff;
	text-decoration: none;
}

.sltc-countdown-wrapper__btn:active {
	transform: translateY(0);
}

.sltc-countdown-wrapper__btn--primary {
	background: linear-gradient(135deg, #1e4d8c 0%, #2a6abf 100%);
	font-size: clamp(0.9rem, 1.6vw, 1rem);
	padding: 1rem 2.5rem;
}

/* ============================================================
   11. FOOTER
   ============================================================ */
.sltc-countdown-wrapper__footer {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding: 1.5rem var(--sltc-gap-md) 1rem;
	text-align: center;
}

.sltc-countdown-wrapper__footer p {
	font-size: 0.75rem;
	color: var(--sltc-text-muted);
	letter-spacing: 0.02em;
}

/* ============================================================
   12. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* --- Tablet: ≤ 768 px --- */
@media (max-width: 768px) {
	.sltc-countdown-wrapper {
		padding: 2rem 1rem;
	}
	.sltc-countdown-wrapper__content {
		padding: var(--sltc-gap-md) var(--sltc-gap-sm);
	}
	.sltc-countdown-wrapper__clock {
		gap: 10px;
	}
	.sltc-clock-separator {
		padding-top: clamp(16px, 4vw, 28px);
	}
}

/* --- Small mobile: ≤ 414 px --- */
@media (max-width: 414px) {
	.sltc-countdown-wrapper__clock {
		gap: 6px;
	}
	.sltc-clock-unit__card {
		min-width: 64px;
	}
}

/* --- Extra small: ≤ 320 px --- */
@media (max-width: 320px) {
	.sltc-countdown-wrapper__clock {
		gap: 4px;
		flex-wrap: wrap;
	}
	.sltc-clock-unit__card {
		min-width: 58px;
	}
	.sltc-clock-separator { display: none; }
}

/* ============================================================
   13. ACCESSIBILITY — focus styles & reduced-motion
   ============================================================ */
.sltc-countdown-wrapper a:focus-visible,
.sltc-countdown-wrapper button:focus-visible {
	outline: 3px solid var(--sltc-accent-light);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.sltc-bg-orb,
	.sltc-countdown-wrapper__content,
	.sltc-countdown-wrapper__logo-img,
	.sltc-countdown-wrapper__title,
	.sltc-countdown-wrapper__subtitle,
	.sltc-countdown-wrapper__clock,
	.sltc-countdown-wrapper__cta,
	.sltc-clock-unit__number,
	.sltc-clock-separator__dot {
		animation: none !important;
		transition: none !important;
	}
}