/* ==========================================================================
   GOSHOPCARA — ROTATING HERO
   Every slide is in the DOM and crawlable; only opacity/transform animate,
   so the rotation runs on the compositor and holds frame rate.
   ========================================================================== */

/* Stacked slides share one box. Height comes from the deck, not from each
   slide, so the stage never jumps as the image changes. */
.gsc-hero__deck {
	position: relative;
	width: min(100%, 520px);
	aspect-ratio: 1 / 1;
	display: grid;
}

.gsc-hero__deck .gsc-hero__watch {
	grid-area: 1 / 1;
	width: 100%;
	aspect-ratio: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transform: scale(.94) translateY(12px);
	transition: opacity .72s var(--m-out),
	            transform .86s var(--m-out),
	            visibility .72s;
	will-change: opacity, transform;
	pointer-events: none;
}

.gsc-hero__deck .gsc-hero__watch.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* Outgoing slide drifts the other way, so the two never look like a blink. */
.gsc-hero__deck .gsc-hero__watch.is-out {
	opacity: 0;
	visibility: visible;
	transform: scale(1.04) translateY(-10px);
}

/* --------------------------------------------------------------------------
   INFO PANEL — cross-fades with the image
   -------------------------------------------------------------------------- */

/* Panels are stacked in one grid cell, so the card is always as tall as its
   tallest slide and never resizes mid-rotation — a jumping card next to a
   fading image is the thing that reads as cheap. */
.gsc-float__stack {
	display: grid;
}

.gsc-float__panel {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .44s var(--m-out),
	            transform .5s var(--m-out),
	            visibility .44s;
	pointer-events: none;
}

.gsc-float__panel.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* --------------------------------------------------------------------------
   PROGRESS DOTS
   The fill is driven by a CSS animation rather than a per-frame write, so the
   timer costs nothing on the main thread.
   -------------------------------------------------------------------------- */

.gsc-hero__dots {
	display: flex;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
	padding-top: var(--sp-4);
	border-top: 1px solid var(--border);
}

.gsc-hero__dot {
	position: relative;
	flex: 1;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: var(--border-strong);
	cursor: pointer;
	overflow: hidden;
	transition: background var(--m-base) var(--m-out);
}

.gsc-hero__dot:hover { background: var(--burgundy-300); }

/* A larger invisible hit area — 3px is too thin to tap reliably. */
.gsc-hero__dot::after {
	content: "";
	position: absolute;
	inset: -10px 0;
}

.gsc-hero__dot-fill {
	position: absolute;
	inset: 0;
	background: var(--burgundy-700);
	transform: scaleX(0);
	transform-origin: left;
	border-radius: inherit;
}

.gsc-hero__dot.is-on .gsc-hero__dot-fill {
	animation: gsc-dot-fill var(--hero-dur, 6s) linear forwards;
}

/* Slides already seen stay filled rather than resetting to empty. */
.gsc-hero__dot.is-done .gsc-hero__dot-fill { transform: scaleX(1); }

.gsc-hero__dots.is-paused .gsc-hero__dot.is-on .gsc-hero__dot-fill {
	animation-play-state: paused;
}

@keyframes gsc-dot-fill {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   NO SCRIPT / REDUCED MOTION
   -------------------------------------------------------------------------- */

/* Without JS the first slide is the hero and the rest stay out of the way. */
html.no-js .gsc-hero__deck .gsc-hero__watch:not(.is-on),
html.no-js .gsc-float__panel:not(.is-on) { display: none; }
html.no-js .gsc-hero__dots { display: none; }

@media (prefers-reduced-motion: reduce) {
	.gsc-hero__deck .gsc-hero__watch,
	.gsc-float__panel {
		transition-duration: .001ms !important;
		transform: none !important;
	}

	.gsc-hero__dot-fill { animation: none !important; transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.gsc-float { position: static; }

	.gsc-hero__deck {
		width: min(78%, 330px);
		margin: 0 auto;
	}
}