/* =========================================================================
   GameCosmos Premium — "Controller Upgrades" page.
   Loads only on the page-upgrades.php template, after home.css and system.css
   which supply the tokens, type scale, buttons, cards and the shared HUD
   signature. Everything here is scoped under .gc-up so it never leaks.

   No new colours, radii or easings are introduced: every value below resolves
   to an existing --gc-* token. The one page-specific idea is the "bench pool",
   a soft elliptical light under each component so the cut-outs read as hardware
   photographed on a bench rather than PNGs floating on a dark page.
   ========================================================================= */

.gc-up {
	--up-pool: radial-gradient(60% 52% at 50% 62%, rgba(106, 13, 173, 0.30), rgba(106, 13, 173, 0.07) 46%, transparent 72%);
	--up-rowgap: clamp(2.5rem, 5vw, 4.5rem);
	position: relative;
	overflow-x: clip; /* belt and braces: no page-level horizontal scroll */
}

/* ---------------------------------------------------------------------------
   Specificity note. home.css resets `.gc-home h1, h2, h3 { margin: 0 }` and
   `.gc-home p { margin: 0 }` at (0,1,1), which outranks any single-class rule
   below and silently flattens the vertical rhythm. system.css hits the same
   wall and solves it by scoping (see its .gc-final__box comment), so every
   heading and paragraph margin on this page is scoped with .gc-up to win.
   Doing it here rather than weakening the global reset keeps other pages
   untouched.
   --------------------------------------------------------------------------- */
.gc-up .gc-section__title { margin-top: 1.35rem; }
.gc-up .gc-lead { margin-top: 1.35rem; }

/* Component stills sit on the pool, never inside a box. Shadow does the depth. */
.gc-up picture { display: block; }
.gc-up picture img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.62));
}

/* ============================== HERO ============================== */
.gc-up-hero {
	position: relative;
	padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 7rem);
	overflow: hidden;
}
.gc-up-hero__wash {
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 78%;
	background:
		radial-gradient(46% 60% at 68% 34%, rgba(106, 13, 173, 0.20), transparent 68%),
		radial-gradient(38% 48% at 14% 8%, rgba(79, 70, 229, 0.14), transparent 70%);
	pointer-events: none;
}
.gc-up-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.gc-up .gc-up-hero__title {
	margin: 1.35rem 0 0;
	font-family: var(--gc-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	font-size: clamp(2.35rem, 5.6vw, 4.1rem);
	line-height: 1;
	text-wrap: balance;
}
.gc-up-hero__title span {
	display: block;
	background: var(--gc-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.gc-up .gc-up-hero__lede {
	margin: 1.5rem 0 0;
	max-width: 40ch;
	color: var(--gc-muted);
	font-size: 1.03rem;
	line-height: 1.78;
}
.gc-up-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.1rem; }

/* Spec rail: the page's one structural device. Each cell is a fact the page
   goes on to prove, not decoration. */
.gc-up-hero__rail {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0 clamp(1.4rem, 3vw, 2.6rem);
	margin: 2.6rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--gc-border);
}
.gc-up-hero__rail li {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: var(--gc-mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gc-muted);
}
.gc-up-hero__rail span {
	font-family: var(--gc-display);
	font-size: 1.32rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--gc-text);
}

.gc-up-hero__stage { position: relative; display: grid; place-items: center; padding-block: 1rem; }
.gc-up-hero__pool {
	position: absolute;
	inset: 8% 2% 4%;
	background: var(--up-pool);
	filter: blur(6px);
	pointer-events: none;
}
.gc-up-hero__part { position: relative; width: min(78%, 340px); }
.gc-up-hero__caption {
	position: relative;
	margin-top: 0.6rem;
	font-family: var(--gc-mono);
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--gc-muted);
	opacity: 0.75;
}

/* ============================ WHY UPGRADE ========================== */
.gc-up-why__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: end;
}
.gc-up-why__grid {
	margin-top: var(--gc-space-head);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

/* ====================== HALL EFFECT (flagship) ===================== */
.gc-up-hall {
	position: relative;
	padding-block: var(--gc-space-section);
	background:
		radial-gradient(64% 74% at 26% 44%, rgba(106, 13, 173, 0.16), transparent 66%),
		var(--gc-bg-2);
	border-block: 1px solid var(--gc-border);
}
.gc-up-hall__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}
.gc-up-hall__media { position: relative; margin: 0; }
.gc-up-hall__media picture img {
	border-radius: var(--gc-radius-lg);
	filter: none; /* real photograph: keep it flat, the frame supplies the depth */
	box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
}
/* Hairline frame + HUD tick, matching the card signature in system.css. */
.gc-up-hall__frame {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--gc-radius-lg);
	border: 1px solid var(--gc-glass-line);
	pointer-events: none;
}
.gc-up-hall__frame::before {
	content: "";
	position: absolute;
	top: 13px; left: 13px;
	width: 18px; height: 18px;
	border-top: 1px solid var(--gc-accent-soft);
	border-left: 1px solid var(--gc-accent-soft);
	opacity: 0.7;
}
.gc-up-hall__cap {
	margin-top: 0.85rem;
	font-family: var(--gc-mono);
	font-size: 10.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gc-muted);
	opacity: 0.8;
}
.gc-up .gc-up-hall__lede {
	margin: 1.3rem 0 0;
	font-family: var(--gc-display);
	font-size: clamp(1.05rem, 2vw, 1.28rem);
	font-weight: 500;
	line-height: 1.5;
	color: var(--gc-text);
	max-width: 34ch;
}
.gc-up .gc-up-hall__body { margin: 1.05rem 0 0; max-width: 46ch; color: var(--gc-muted); font-size: 0.99rem; line-height: 1.78; }
.gc-up-hall__points { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.gc-up-hall__points li {
	position: relative;
	padding-left: 1.7rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--gc-muted);
}
.gc-up-hall__points li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.52em;
	width: 8px; height: 8px;
	border-top: 1px solid var(--gc-accent-soft);
	border-left: 1px solid var(--gc-accent-soft);
}
.gc-up .gc-up-hall__note { margin: 1.7rem 0 0; font-size: 0.88rem; line-height: 1.65; color: var(--gc-muted); }
.gc-up-hall__note a { color: var(--gc-accent-soft); text-decoration: none; border-bottom: 1px solid rgba(185, 140, 232, 0.4); }
.gc-up-hall__note a:hover, .gc-up-hall__note a:focus-visible { border-bottom-color: var(--gc-accent-soft); }

/* ========================== COMPONENT ROWS ========================= */
.gc-up-parts > .gc-container:first-child { margin-bottom: var(--gc-space-head); }
.gc-up-part { padding-block: var(--up-rowgap); }
.gc-up-part + .gc-up-part { border-top: 1px solid var(--gc-border); }
.gc-up-part__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.75rem, 5vw, 4.5rem);
	align-items: center;
}
.gc-up-part--flip .gc-up-part__media { order: 2; }

.gc-up-part__media { position: relative; margin: 0; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.2rem) 0; }
.gc-up-part__pool {
	position: absolute;
	inset: 12% 0 8%;
	background: var(--up-pool);
	filter: blur(4px);
	pointer-events: none;
}
/* Technical sweep: a single narrow highlight that crosses the part once as it
   enters. Driven by a CSS custom property so GSAP can scrub it. */
.gc-up-part__sweep {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(105deg, transparent 42%, rgba(196, 181, 253, 0.16) 50%, transparent 58%);
	transform: translateX(calc(var(--up-sweep, 0) * 130% - 65%));
}
.gc-up-part__still { position: relative; width: min(88%, 460px); }
.gc-up-part[data-gc-up-part="press"] .gc-up-part__still { width: min(100%, 560px); }
.gc-up-part[data-gc-up-part="stack"] .gc-up-part__still { width: min(58%, 250px); }
.gc-up-part[data-gc-up-part="seat"] .gc-up-part__still { width: min(94%, 500px); }

.gc-up .gc-up-part__tag {
	display: inline-block;
	font-family: var(--gc-mono);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gc-accent-soft);
}
.gc-up .gc-up-part__title {
	margin: 1rem 0 0;
	font-family: var(--gc-display);
	font-weight: 600;
	letter-spacing: -0.022em;
	font-size: clamp(1.55rem, 3.2vw, 2.3rem);
	line-height: 1.08;
}
.gc-up .gc-up-part__lede {
	margin: 1rem 0 0;
	max-width: 38ch;
	font-size: 1.02rem;
	line-height: 1.62;
	color: var(--gc-text);
}
.gc-up .gc-up-part__body { margin: 0.95rem 0 0; max-width: 46ch; color: var(--gc-muted); font-size: 0.96rem; line-height: 1.78; }
.gc-up-part__points { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.gc-up-part__points li {
	position: relative;
	padding-left: 1.55rem;
	font-family: var(--gc-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	line-height: 1.6;
	color: var(--gc-muted);
}
.gc-up-part__points li::before {
	content: "";
	position: absolute;
	left: 0; top: 0.6em;
	width: 10px; height: 1px;
	background: var(--gc-accent-soft);
	opacity: 0.75;
}

/* ====================== ONE CONTROLLER (converge) ================== */
.gc-up-sum { border-top: 1px solid var(--gc-border); }
.gc-up-sum__inner { text-align: center; }
.gc-up .gc-up-sum__title { max-width: 22ch; margin-inline: auto; }
.gc-up .gc-up-sum__lead { margin-inline: auto; }

.gc-up-sum__stage {
	position: relative;
	height: clamp(300px, 44vw, 460px);
	margin: clamp(2rem, 5vw, 3.5rem) auto 0;
	max-width: 940px;
}
.gc-up-sum__core {
	position: absolute;
	top: 50%; left: 50%;
	width: clamp(180px, 26vw, 280px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(106, 13, 173, 0.34), rgba(106, 13, 173, 0.06) 52%, transparent 72%);
	border: 1px solid rgba(185, 140, 232, 0.22);
	box-shadow: inset 0 0 60px -18px rgba(185, 140, 232, 0.5);
}
.gc-up-sum__orb {
	position: absolute;
	top: 50%; left: 50%;
	width: clamp(78px, 12vw, 128px);
	/* --up-x / --up-y place the resting position; --up-c is the converge amount
	   (0 = resting, 1 = pulled to the core). GSAP scrubs --up-c only. */
	transform:
		translate(-50%, -50%)
		translate(calc(var(--up-x) * (1 - var(--up-c, 0))), calc(var(--up-y) * (1 - var(--up-c, 0))))
		scale(calc(1 - var(--up-c, 0) * 0.34));
	will-change: transform;
}
.gc-up-sum__orb picture img { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.6)); }
.gc-up-sum__orb--1 { --up-x: -300%; --up-y: -110%; width: clamp(58px, 8vw, 92px); }
.gc-up-sum__orb--2 { --up-x:  245%; --up-y: -118%; width: clamp(110px, 16vw, 176px); }
.gc-up-sum__orb--3 { --up-x:  310%; --up-y:   96%; }
.gc-up-sum__orb--4 { --up-x: -330%; --up-y:  108%; width: clamp(52px, 7vw, 82px); }
.gc-up-sum__orb--5 { --up-x:    0%; --up-y:  176%; width: clamp(96px, 14vw, 152px); }
.gc-up-sum__cta { margin-top: clamp(1.5rem, 4vw, 2.6rem); }

/* ============================== HOW ============================== */
.gc-up-how .gc-lead { margin-bottom: 0; }
.gc-up-how .gc-how__grid { margin-top: var(--gc-space-head); }

/* ============================ FINAL CTA ===========================
   system.css sizes .gc-final__cta for the homepage's single button. This page
   offers a primary and a secondary, so they need to be laid out as a pair. */
.gc-up .gc-final__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.85rem;
}

/* ============================ RESPONSIVE ========================== */
@media (max-width: 980px) {
	.gc-up-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.gc-up-hero__stage { order: -1; }
	.gc-up-hero__part { width: min(58%, 260px); }
	.gc-up-hall__grid { grid-template-columns: 1fr; gap: 2.25rem; }
	.gc-up-why__head { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
	.gc-up-why__grid { grid-template-columns: 1fr; }
	.gc-up-part__grid { grid-template-columns: 1fr; gap: 1.5rem; }
	/* Image first on every row when stacked: order overrides must be cleared or
	   the flipped rows put the copy above the part on mobile. */
	.gc-up-part--flip .gc-up-part__media { order: 0; }
	.gc-up-part__still,
	.gc-up-part[data-gc-up-part="press"] .gc-up-part__still,
	.gc-up-part[data-gc-up-part="seat"] .gc-up-part__still { width: min(78%, 420px); }
	.gc-up-part[data-gc-up-part="stack"] .gc-up-part__still { width: min(46%, 190px); }
	.gc-up-part__lede, .gc-up-part__body, .gc-up-hall__body, .gc-up-hall__lede { max-width: none; }
}

@media (max-width: 620px) {
	.gc-up-hero__rail { gap: 1.1rem 1.6rem; }
	/* Both CTA pairs stack full width rather than squeezing side by side, which
	   otherwise wraps each label onto three lines. max-width pins the second
	   pair inside the CTA panel's padding.

	   Deploy note: WP-Optimize serves these rules from its own minified bundle
	   under wp-content/cache/wpo-minify/, and that bundle is NOT rebuilt by a
	   theme upload or by a LiteSpeed purge. If a CSS change appears to have no
	   effect on the live site, check the bundle filename first, then reset it
	   via WP-Optimize > Minify > "Reset the minified files". */
	.gc-up-hero__ctas .gc-btn { flex: 1 1 100%; }
	.gc-up .gc-final__cta .gc-btn { flex: 1 1 100%; max-width: 100%; }
	.gc-up-sum__stage { height: clamp(260px, 66vw, 340px); }
	/* Tighter orbit so nothing reaches outside the viewport on a phone. The
	   percentages are of each orb's own width, so the two widest ones (triggers
	   and paddles) need the smallest offsets to stay fully visible. */
	.gc-up-sum__orb--1 { --up-x: -190%; --up-y: -104%; }
	.gc-up-sum__orb--2 { --up-x:  100%; --up-y: -110%; }
	.gc-up-sum__orb--3 { --up-x:  150%; --up-y:   92%; }
	.gc-up-sum__orb--4 { --up-x: -205%; --up-y:  100%; }
	.gc-up-sum__orb--5 { --up-x:    0%; --up-y:  150%; }
}

/* ========================== REDUCED MOTION ========================
   The JS bails out entirely under reduced motion, which leaves every part at
   its resting transform. These rules make sure nothing depends on a scrubbed
   value to be visible or correctly placed. */
@media (prefers-reduced-motion: reduce) {
	.gc-up-part__sweep { display: none; }
	.gc-up-sum__orb { --up-c: 0; }
	.gc-up picture img { transition: none; }
}

/* ============================== FAQ ==============================
   Native <details> accordions, same pattern and marks as the /faq/ page so the
   two feel like one system. No JS: disclosure is a browser primitive and stays
   keyboard accessible and readable with scripting off. */
.gc-up-faq { border-top: 1px solid var(--gc-border); }
.gc-up-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
	gap: clamp(1.75rem, 5vw, 4rem);
	align-items: start;
}
.gc-up .gc-up-faq__intro .gc-lead a { color: var(--gc-accent-soft); text-decoration: none; border-bottom: 1px solid rgba(185, 140, 232, 0.4); }
.gc-up .gc-up-faq__intro .gc-lead a:hover,
.gc-up .gc-up-faq__intro .gc-lead a:focus-visible { border-bottom-color: var(--gc-accent-soft); }

.gc-up-faq__list { border-top: 1px solid var(--gc-border); }
.gc-up-faq__item { border-bottom: 1px solid var(--gc-border); }
.gc-up-faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	padding: 1.35rem 0;
	font-family: var(--gc-display);
	font-size: 1.02rem;
	color: var(--gc-text);
	cursor: pointer;
	list-style: none;
}
.gc-up-faq__item summary::-webkit-details-marker { display: none; }
.gc-up-faq__mark { position: relative; flex: 0 0 18px; width: 18px; height: 18px; }
.gc-up-faq__mark::before,
.gc-up-faq__mark::after { content: ""; position: absolute; background: var(--gc-muted); transition: transform 0.25s var(--gc-ease); }
.gc-up-faq__mark::before { top: 8px; left: 0; width: 18px; height: 2px; }
.gc-up-faq__mark::after { top: 0; left: 8px; width: 2px; height: 18px; }
.gc-up-faq__item[open] .gc-up-faq__mark::after { transform: scaleY(0); }
.gc-up .gc-up-faq__answer p { margin: 0; padding: 0 2.5rem 1.4rem 0; font-size: 0.95rem; line-height: 1.75; color: var(--gc-muted); }

@media (max-width: 900px) {
	.gc-up-faq__grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.gc-up .gc-up-faq__answer p { padding-right: 0; }
}