/* ============================================================
   SHIRT-EXPRESS.CH · DESIGN-LAYER v2 «Aurora»
   Additiv zum Customizer-CSS v1.0 – nutzt dessen Tokens (--se-*).
   Ätherisch, glasig, schimmernd, beweglich. Nur transform/opacity-
   Animationen (GPU), respektiert prefers-reduced-motion.
   ============================================================ */

/* ---------- 1. Aurora-Hero: animierter Mesh-Gradient ---------- */

.se-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(52% 44% at 12% 18%, rgba(255, 78, 31, .16), transparent 66%),
		radial-gradient(46% 52% at 88% 12%, rgba(70, 56, 230, .17), transparent 64%),
		radial-gradient(60% 60% at 78% 92%, rgba(255, 78, 31, .10), transparent 70%),
		linear-gradient(180deg, #FFFFFF 0%, #F7F6FB 100%);
}

/* Zwei treibende Aurora-Schleier */
.se-hero::before,
.se-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 55vw;
	height: 55vw;
	min-width: 480px;
	min-height: 480px;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .55;
	pointer-events: none;
}

.se-hero::before {
	top: -22%;
	left: -12%;
	background: conic-gradient(from 120deg, rgba(255, 78, 31, .32), rgba(255, 179, 71, .22), rgba(255, 78, 31, .05), rgba(255, 78, 31, .32));
	animation: se-aurora-a 26s linear infinite;
}

.se-hero::after {
	right: -18%;
	bottom: -28%;
	background: conic-gradient(from 300deg, rgba(70, 56, 230, .30), rgba(112, 100, 255, .18), rgba(70, 56, 230, .04), rgba(70, 56, 230, .30));
	animation: se-aurora-b 32s linear infinite;
}

@keyframes se-aurora-a {
	0%   { transform: rotate(0deg) translateX(3%) scale(1); }
	50%  { transform: rotate(180deg) translateX(-3%) scale(1.12); }
	100% { transform: rotate(360deg) translateX(3%) scale(1); }
}

@keyframes se-aurora-b {
	0%   { transform: rotate(0deg) translateY(-2%) scale(1.08); }
	50%  { transform: rotate(-180deg) translateY(3%) scale(.96); }
	100% { transform: rotate(-360deg) translateY(-2%) scale(1.08); }
}

/* Schimmernder Verlaufstext im Hero-Titel */
.se-hero .se-h1 {
	background: linear-gradient(92deg,
		var(--se-ink, #17151F) 0%,
		var(--se-ink, #17151F) 38%,
		var(--se-primary, #FF4E1F) 52%,
		var(--se-secondary, #4638E6) 72%,
		var(--se-ink, #17151F) 88%);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: se-shimmer 9s var(--se-ease, ease) infinite;
}

@keyframes se-shimmer {
	0%, 12%  { background-position: 110% 0; }
	46%, 100% { background-position: -60% 0; }
}

/* ---------- 2. Glas-Karten ---------- */

.se-card {
	position: relative;
	background: rgba(255, 255, 255, .72);
	-webkit-backdrop-filter: blur(14px) saturate(1.35);
	backdrop-filter: blur(14px) saturate(1.35);
	border: 1px solid rgba(255, 255, 255, .65);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .8),
		0 4px 14px rgba(23, 21, 31, .06),
		0 14px 36px rgba(23, 21, 31, .08);
	transition:
		transform .35s var(--se-ease, ease),
		box-shadow .35s var(--se-ease, ease);
	will-change: transform;
}

/* Gradient-Kante, die beim Hover aufglüht */
.se-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, rgba(255, 78, 31, .55), rgba(70, 56, 230, .45));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .35s var(--se-ease, ease);
	pointer-events: none;
}

.se-card:hover {
	transform: translateY(-6px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 10px 28px rgba(23, 21, 31, .10),
		0 30px 70px rgba(70, 56, 230, .14);
}

.se-card:hover::after {
	opacity: 1;
}

/* Bilder in Karten: sanfter Zoom */
.se-card img {
	transition: transform .6s var(--se-ease, ease);
}

.se-card:hover img {
	transform: scale(1.05);
}

/* ---------- 3. Buttons: Glow + Lichtstreif ---------- */

.se-btn.wp-block-button .wp-block-button__link,
.se-btn .wp-block-button__link,
a.se-btn, button.se-btn {
	position: relative;
	overflow: hidden;
}

.se-btn--pulse .wp-block-button__link {
	background-image: linear-gradient(120deg, var(--se-primary, #FF4E1F), var(--se-primary-dark, #DE3708) 55%, var(--se-secondary, #4638E6) 130%);
	box-shadow: 0 8px 26px rgba(255, 78, 31, .35);
	transition: transform .25s var(--se-ease, ease), box-shadow .25s var(--se-ease, ease);
}

.se-btn--pulse .wp-block-button__link:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 14px 40px rgba(255, 78, 31, .45), 0 4px 18px rgba(70, 56, 230, .25);
}

/* Lichtstreif, der über den Button fährt */
.se-btn--pulse .wp-block-button__link::after {
	content: "";
	position: absolute;
	top: -40%;
	bottom: -40%;
	left: -70%;
	width: 38%;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-22deg);
	animation: se-shine 4.5s var(--se-ease, ease) infinite;
	pointer-events: none;
}

@keyframes se-shine {
	0%, 62%  { left: -70%; }
	88%, 100% { left: 140%; }
}

/* ---------- 4. USP-Bar: Glasband ---------- */

.se-usp-bar {
	background: rgba(255, 255, 255, .6);
	-webkit-backdrop-filter: blur(12px) saturate(1.3);
	backdrop-filter: blur(12px) saturate(1.3);
	border-block: 1px solid rgba(232, 230, 240, .9);
	box-shadow: 0 10px 30px rgba(23, 21, 31, .04);
}

/* ---------- 5. CTA-Banner: dunkle Aurora ---------- */

.se-cta-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(60% 90% at 8% 10%, rgba(255, 78, 31, .35), transparent 60%),
		radial-gradient(55% 80% at 92% 88%, rgba(70, 56, 230, .45), transparent 62%),
		linear-gradient(135deg, #1B1830 0%, #17151F 60%, #241640 100%);
}

.se-cta-banner::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -40%;
	background: conic-gradient(from 0deg,
		rgba(255, 78, 31, .0), rgba(255, 78, 31, .18),
		rgba(70, 56, 230, .22), rgba(255, 78, 31, .0));
	filter: blur(70px);
	animation: se-aurora-a 30s linear infinite;
	pointer-events: none;
}

/* ---------- 6. Sektionstitel: Unterstreich-Glanz ---------- */

.se-section .se-h2 {
	position: relative;
	display: inline-block;
}

.se-section .se-h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -.28em;
	height: .14em;
	width: 2.2em;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--se-primary, #FF4E1F), var(--se-secondary, #4638E6));
	opacity: .85;
}

/* ---------- 7. WooCommerce: Produktkarten & Galerie ---------- */

.woocommerce ul.products li.product,
[data-products] .product {
	border-radius: var(--se-radius-lg, 22px);
	overflow: hidden;
	background: rgba(255, 255, 255, .8);
	box-shadow: 0 4px 14px rgba(23, 21, 31, .06);
	transition: transform .35s var(--se-ease, ease), box-shadow .35s var(--se-ease, ease);
}

.woocommerce ul.products li.product:hover,
[data-products] .product:hover {
	transform: translateY(-6px);
	box-shadow: 0 16px 44px rgba(23, 21, 31, .12), 0 6px 20px rgba(70, 56, 230, .10);
}

.woocommerce ul.products li.product img,
[data-products] .product img {
	transition: transform .6s var(--se-ease, ease);
}

.woocommerce ul.products li.product:hover img,
[data-products] .product:hover img {
	transform: scale(1.06);
}

.woocommerce-product-gallery {
	border-radius: var(--se-radius-lg, 22px);
	overflow: hidden;
	box-shadow: 0 14px 36px rgba(23, 21, 31, .09);
}

/* Designer-Container erbt den Glas-Look */
.se-designer-container {
	background: rgba(247, 246, 251, .8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(232, 230, 240, .9);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 14px 36px rgba(23, 21, 31, .08);
}

/* ---------- 8. Sanftes Einschweben beim Scrollen ---------- */

@supports (animation-timeline: view()) {
	.se-section .se-card,
	.se-section .se-step {
		animation: se-rise both;
		animation-timeline: view();
		animation-range: entry 0% entry 42%;
	}

	@keyframes se-rise {
		from { opacity: 0; transform: translateY(26px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

/* ---------- 9. Reduzierte Bewegung: alles ruhigstellen ---------- */

@media (prefers-reduced-motion: reduce) {
	.se-hero::before,
	.se-hero::after,
	.se-cta-banner::before,
	.se-hero .se-h1,
	.se-btn--pulse .wp-block-button__link::after {
		animation: none !important;
	}

	.se-card,
	.se-card img,
	.woocommerce ul.products li.product {
		transition: none !important;
	}
}