/* ===========================================================
   SECTION SCENES — small looping illustrations per project
   (Pac-Man chase · Thales mine-hunt · Statics range burst)
   Each pauses when its section is off-screen and freezes on a
   representative frame under prefers-reduced-motion.
   =========================================================== */
.thales-scene,
.statics-scene {
	width: 100%;
	max-width: 760px;
	margin: clamp(1.4rem, 3vw, 2.2rem) auto;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: rgba(19, 19, 22, 0.55);
	overflow: hidden;
}

.thales-scene svg,
.statics-scene svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------- Pac-Man: chased down the corridor, power pellet, tables turn ---------- */
.pacman-scene {
	--cycle: 16s;
	width: 100%;
	max-width: 760px;
	margin: clamp(1.4rem, 3vw, 2.2rem) auto;
	border: 2px solid rgba(80, 96, 235, 0.5);
	border-radius: 999px;
	overflow: hidden;
	background: rgba(8, 8, 20, 0.5);
}

.pacman-scene__track {
	position: relative;
	height: 56px;
	container-type: inline-size;
	overflow: hidden;
}

.pacman-scene__track > * {
	--end: calc(100cqw - 26px);
	position: absolute;
	left: 0;
	top: 15px;
	width: 26px;
	height: 26px;
}

.pacman-scene__dots {
	width: 100%;
	top: 26px;
	height: 4px;
	background-image: radial-gradient(circle, rgba(237, 237, 240, 0.55) 2px, transparent 2.6px);
	background-size: 26px 4px;
	background-position: 11px 0;
	animation: pm-dots var(--cycle) linear infinite;
}

.pacman-scene__pellet {
	left: auto;
	right: 13px;
	top: 22px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--pacman-brand-yellow);
	box-shadow: 0 0 8px var(--pacman-brand-yellow);
	animation: pm-pellet-vis var(--cycle) steps(1, end) infinite, pm-pulse 0.8s ease-in-out infinite;
}

.pacman-scene__pac {
	border-radius: 50%;
	background: var(--pacman-brand-yellow);
	clip-path: polygon(100% 74%, 45% 50%, 100% 26%, 100% 0, 0 0, 0 100%, 100% 100%);
	animation: pm-pac var(--cycle) linear infinite, pacman-chomp-mouth 0.34s steps(2, jump-none) infinite;
	z-index: 2;
}

.pacman-scene__ghost { color: var(--c); }
.pacman-scene__ghost svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pacman-scene__ghost .g-normal { animation: pm-vis-normal var(--cycle) steps(1, end) infinite; }
.pacman-scene__ghost .g-scared { animation: pm-vis-scared var(--cycle) steps(1, end) infinite; }
.pacman-scene__ghost--blinky { animation: pm-blinky var(--cycle) linear infinite; }
.pacman-scene__ghost--pinky { animation: pm-pinky var(--cycle) linear infinite; }
.pacman-scene__ghost--inky { animation: pm-inky var(--cycle) linear infinite; }

.pacman-scene__pop {
	width: auto;
	height: auto;
	top: 4px;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
	color: #5ce1e6;
	opacity: 0;
	animation: pm-pop var(--cycle) linear infinite;
	z-index: 3;
}
.pacman-scene__pop--1 { left: calc(var(--end) * 0.68 - 12.8px); animation-delay: calc(var(--cycle) * 0.62); }
.pacman-scene__pop--2 { left: calc(var(--end) * 0.48 - 20.8px); animation-delay: calc(var(--cycle) * 0.72); }
.pacman-scene__pop--3 { left: calc(var(--end) * 0.28 - 28.8px); animation-delay: calc(var(--cycle) * 0.82); }

@keyframes pm-pac {
	0%      { transform: translateX(-40px) scaleX(1); }
	44%     { transform: translateX(var(--end)) scaleX(1); }
	46%     { transform: translateX(var(--end)) scaleX(1); }
	46.01%  { transform: translateX(var(--end)) scaleX(-1); }
	96%     { transform: translateX(-40px) scaleX(-1); }
	96.01%  { transform: translateX(-40px) scaleX(1); }
	100%    { transform: translateX(-40px) scaleX(1); }
}

@keyframes pm-dots {
	0%      { clip-path: inset(0 0 0 0); opacity: 1; }
	44%     { clip-path: inset(0 0 0 100%); opacity: 1; }
	96%     { clip-path: inset(0 0 0 100%); opacity: 1; }
	96.1%   { clip-path: inset(0 0 0 0); opacity: 0; }
	100%    { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes pm-pellet-vis { 0% { opacity: 1; } 44% { opacity: 0; } 97% { opacity: 1; } }
@keyframes pm-pulse { 50% { transform: scale(1.35); } }
@keyframes pm-vis-normal { 0% { opacity: 1; } 44% { opacity: 0; } 97% { opacity: 1; } }
@keyframes pm-vis-scared { 0% { opacity: 0; } 44% { opacity: 1; } 97% { opacity: 0; } }

@keyframes pm-blinky {
	0%      { transform: translateX(calc(-40px - var(--o))) scale(1); opacity: 1; }
	44%     { transform: translateX(calc(var(--end) - var(--o))) scale(1); opacity: 1; }
	62%     { transform: translateX(calc(var(--end) * (1 - var(--k)) - var(--x))) scale(1); opacity: 1; }
	62.1%   { transform: translateX(calc(var(--end) * (1 - var(--k)) - var(--x))) scale(0); opacity: 0; }
	97%     { transform: translateX(calc(-40px - var(--o))) scale(0); opacity: 0; }
	97.1%   { transform: translateX(calc(-40px - var(--o))) scale(1); opacity: 1; }
	100%    { transform: translateX(calc(-40px - var(--o))) scale(1); opacity: 1; }
}
@keyframes pm-pinky {
	0%      { transform: translateX(calc(-40px - var(--o))) scale(1); opacity: 1; }
	44%     { transform: translateX(calc(var(--end) - var(--o))) scale(1); opacity: 1; }
	72%     { transform: translateX(calc(var(--end) * (1 - var(--k)) - var(--x))) scale(1); opacity: 1; }
	72.1%   { transform: translateX(calc(var(--end) * (1 - var(--k)) - var(--x))) scale(0); opacity: 0; }
	97%     { transform: translateX(calc(-40px - var(--o))) scale(0); opacity: 0; }
	97.1%   { transform: translateX(calc(-40px - var(--o))) scale(1); opacity: 1; }
	100%    { transform: translateX(calc(-40px - var(--o))) scale(1); opacity: 1; }
}
@keyframes pm-inky {
	0%      { transform: translateX(calc(-40px - var(--o))) scale(1); opacity: 1; }
	44%     { transform: translateX(calc(var(--end) - var(--o))) scale(1); opacity: 1; }
	82%     { transform: translateX(calc(var(--end) * (1 - var(--k)) - var(--x))) scale(1); opacity: 1; }
	82.1%   { transform: translateX(calc(var(--end) * (1 - var(--k)) - var(--x))) scale(0); opacity: 0; }
	97%     { transform: translateX(calc(-40px - var(--o))) scale(0); opacity: 0; }
	97.1%   { transform: translateX(calc(-40px - var(--o))) scale(1); opacity: 1; }
	100%    { transform: translateX(calc(-40px - var(--o))) scale(1); opacity: 1; }
}

@keyframes pm-pop {
	0%   { opacity: 0; transform: translateY(0); }
	1.5% { opacity: 1; transform: translateY(-4px); }
	7%   { opacity: 0; transform: translateY(-14px); }
	100% { opacity: 0; transform: translateY(-14px); }
}

/* ---------- Thales: find the contact, deploy the UUV, image it ---------- */
.thales-scene { --cycle: 18s; }

.th-seabed { fill: rgba(237, 237, 240, 0.05); stroke: var(--line-strong); stroke-width: 1; }
.th-waves path { fill: none; stroke: var(--thales-brand-blue); stroke-width: 1.4; opacity: 0.75; }
.th-waves { animation: th-wave 3s linear infinite; }
@keyframes th-wave { to { transform: translateX(40px); } }

.th-tether { stroke: var(--ink-faint); stroke-width: 1.2; stroke-dasharray: 3 3; }
.th-anchor { fill: var(--surface-2); stroke: var(--line-strong); }
.th-mine { animation: th-bob 4s ease-in-out infinite alternate; }
@keyframes th-bob { to { transform: translateY(-3px); } }
.th-mine-body { fill: #131316; stroke: var(--ink); stroke-width: 1.6; }
.th-mine-core { fill: var(--ink-dim); }
.th-spikes { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; }

.th-lock {
	fill: none;
	stroke: #ff6b6b;
	stroke-width: 1.6;
	stroke-linecap: round;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: th-lock var(--cycle) ease-out infinite;
}
@keyframes th-lock {
	0%, 35%   { opacity: 0; transform: scale(1.35); }
	38%       { opacity: 1; transform: scale(1); }
	92%       { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(1); }
}

.th-hull { fill: var(--ink); }
.th-cabin { fill: var(--ink-dim); }
.th-mast { fill: none; stroke: var(--ink-dim); stroke-width: 1.4; stroke-linecap: round; }
.th-usv { animation: th-usv var(--cycle) ease-in-out infinite; }
@keyframes th-usv {
	0%   { transform: translateX(-70px); }
	28%  { transform: translateX(200px); }
	80%  { transform: translateX(200px); }
	100% { transform: translateX(720px); }
}

.th-ping {
	fill: none;
	stroke: var(--thales-brand-blue);
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: th-ping var(--cycle) ease-out infinite;
}
.th-ping--1 { animation-delay: calc(var(--cycle) * 0.28); }
.th-ping--2 { animation-delay: calc(var(--cycle) * 0.31); }
.th-ping--3 { animation-delay: calc(var(--cycle) * 0.34); }
@keyframes th-ping {
	0%   { transform: scale(1); opacity: 0.9; }
	8%   { transform: scale(32); opacity: 0; }
	100% { transform: scale(32); opacity: 0; }
}

.th-cable {
	fill: none;
	stroke: var(--thales-brand-blue);
	stroke-width: 1.2;
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
	opacity: 0.85;
	animation: th-cable var(--cycle) ease-in-out infinite;
}
@keyframes th-cable {
	0%, 40% { stroke-dashoffset: 1; }
	52%     { stroke-dashoffset: 0; }
	66%     { stroke-dashoffset: 0; }
	78%     { stroke-dashoffset: 1; }
	100%    { stroke-dashoffset: 1; }
}

.th-uuv { opacity: 0; animation: th-uuv var(--cycle) ease-in-out infinite; }
@keyframes th-uuv {
	0%, 40%   { transform: translate(0, 0); opacity: 0; }
	41%       { transform: translate(0, 0); opacity: 1; }
	52%       { transform: translate(152px, 46px); opacity: 1; }
	66%       { transform: translate(155px, 51px); opacity: 1; }
	78%       { transform: translate(0, 0); opacity: 1; }
	79%, 100% { transform: translate(0, 0); opacity: 0; }
}
.th-uuv-body, .th-uuv-fin { fill: #131316; stroke: var(--thales-brand-blue); stroke-width: 1.5; stroke-linejoin: round; }
.th-uuv-lens { fill: var(--thales-brand-blue); }

.th-cone { fill: var(--thales-brand-blue); opacity: 0; animation: th-cone var(--cycle) linear infinite; }
@keyframes th-cone {
	0%, 52%   { opacity: 0; }
	54%, 64%  { opacity: 0.22; }
	66%, 100% { opacity: 0; }
}

.th-flash { fill: #fff; opacity: 0; animation: th-flash var(--cycle) linear infinite; }
@keyframes th-flash {
	0%, 55.5%   { opacity: 0; }
	56%         { opacity: 0.8; }
	57.5%       { opacity: 0; }
	59.5%       { opacity: 0; }
	60%         { opacity: 0.8; }
	61.5%, 100% { opacity: 0; }
}

.th-photo {
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	animation: th-photo var(--cycle) ease-out infinite;
}
@keyframes th-photo {
	0%, 55%   { opacity: 0; transform: scale(0.85); }
	58%       { opacity: 1; transform: scale(1); }
	92%       { opacity: 1; transform: scale(1); }
	96%, 100% { opacity: 0; transform: scale(1); }
}
.th-photo rect { fill: rgba(10, 10, 11, 0.88); stroke: var(--thales-brand-blue); stroke-width: 1.2; }
.th-photo-corners { fill: none; stroke: var(--thales-brand-blue); stroke-width: 1.2; }
.th-photo-mine { fill: #131316; stroke: var(--ink); stroke-width: 1.4; }
.th-photo-spikes { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; }

.th-hud { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; fill: var(--ink-dim); }
.th-st { opacity: 0; animation-duration: var(--cycle); animation-iteration-count: infinite; animation-timing-function: steps(1, end); }
.th-st--1 { animation-name: th-st1; }
.th-st--2 { animation-name: th-st2; }
.th-st--3 { animation-name: th-st3; }
.th-st--4 { animation-name: th-st4; }
.th-warn { fill: #ff6b6b; font-weight: 700; }
@keyframes th-st1 { 0% { opacity: 1; } 36% { opacity: 0; } 100% { opacity: 0; } }
@keyframes th-st2 { 0% { opacity: 0; } 36% { opacity: 1; } 52% { opacity: 0; } 100% { opacity: 0; } }
@keyframes th-st3 { 0% { opacity: 0; } 52% { opacity: 1; } 66% { opacity: 0; } 100% { opacity: 0; } }
@keyframes th-st4 { 0% { opacity: 0; } 66% { opacity: 1; } 93% { opacity: 0; } 100% { opacity: 0; } }

/* ---------- Statics: a three-round burst on the practice range ---------- */
.statics-scene { --cycle: 7s; }

.st-floor { fill: none; stroke: var(--line-strong); }
.st-grid { fill: none; stroke: var(--line); }
.st-gun { fill: #131316; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.st-rifle { animation: st-recoil var(--cycle) ease-out infinite; }
@keyframes st-recoil {
	0%, 19.5% { transform: translateX(0); }
	20.5%     { transform: translateX(-6px); }
	24%       { transform: translateX(0); }
	25.5%     { transform: translateX(0); }
	26.5%     { transform: translateX(-6px); }
	30%       { transform: translateX(0); }
	31.5%     { transform: translateX(0); }
	32.5%     { transform: translateX(-6px); }
	36%, 100% { transform: translateX(0); }
}

.st-flash { fill: var(--statics-brand-red); opacity: 0; animation: st-flash var(--cycle) linear infinite; }
@keyframes st-flash {
	0%, 20%   { opacity: 0; }
	20.4%     { opacity: 1; }
	22%       { opacity: 0; }
	26%       { opacity: 0; }
	26.4%     { opacity: 1; }
	28%       { opacity: 0; }
	32%       { opacity: 0; }
	32.4%     { opacity: 1; }
	34%, 100% { opacity: 0; }
}

.st-tracer {
	stroke: #ff9aa2;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 0.08 1;
	stroke-dashoffset: 0.08;
	opacity: 0;
	animation: st-trace var(--cycle) linear infinite;
}
.st-tracer--1 { animation-delay: calc(var(--cycle) * 0.20); }
.st-tracer--2 { animation-delay: calc(var(--cycle) * 0.26); }
.st-tracer--3 { animation-delay: calc(var(--cycle) * 0.32); }
@keyframes st-trace {
	0%          { stroke-dashoffset: 0.08; opacity: 1; }
	3%          { stroke-dashoffset: -1; opacity: 1; }
	3.01%, 100% { stroke-dashoffset: -1; opacity: 0; }
}

.st-cross { fill: var(--statics-brand-red); stroke: var(--statics-brand-red); stroke-width: 1.6; stroke-linecap: round; }
.st-hit { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: 0; animation: st-hit var(--cycle) linear infinite; }
@keyframes st-hit {
	0%, 23%   { opacity: 0; }
	23.2%     { opacity: 1; }
	25.5%     { opacity: 0; }
	29%       { opacity: 0; }
	29.2%     { opacity: 1; }
	31.5%     { opacity: 0; }
	35%       { opacity: 0; }
	35.2%     { opacity: 1; }
	38%, 100% { opacity: 0; }
}

.st-callout {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	fill: var(--statics-brand-red);
	text-anchor: middle;
	opacity: 0;
	animation: st-callout var(--cycle) ease-out infinite;
}
@keyframes st-callout {
	0%, 35% { opacity: 0; transform: translateY(0); }
	37%     { opacity: 1; transform: translateY(-4px); }
	52%     { opacity: 0; transform: translateY(-16px); }
	100%    { opacity: 0; transform: translateY(-16px); }
}

.st-bot { transform-origin: 540px 172px; animation: st-bot var(--cycle) ease-in infinite; }
@keyframes st-bot {
	0%, 23%    { transform: rotate(0); opacity: 1; }
	24%        { transform: rotate(-3deg); opacity: 1; }
	26%        { transform: rotate(0); opacity: 1; }
	29%        { transform: rotate(0); opacity: 1; }
	30%        { transform: rotate(-3deg); opacity: 1; }
	32%        { transform: rotate(0); opacity: 1; }
	35%        { transform: rotate(0); opacity: 1; }
	40%        { transform: rotate(-84deg); opacity: 1; }
	66%        { transform: rotate(-84deg); opacity: 1; }
	72%        { transform: rotate(-84deg); opacity: 0; }
	72.1%, 88% { transform: rotate(0); opacity: 0; }
	94%, 100%  { transform: rotate(0); opacity: 1; }
}
.st-bot-head, .st-bot-torso { fill: #131316; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.st-bot-visor { fill: none; stroke: var(--statics-brand-red); stroke-width: 2; stroke-linecap: round; }
.st-bot-neck { fill: none; stroke: var(--ink); stroke-width: 1.5; }

.st-feed { opacity: 0; animation: st-feed var(--cycle) ease-out infinite; }
@keyframes st-feed {
	0%, 36%   { opacity: 0; transform: translateX(40px); }
	40%       { opacity: 1; transform: translateX(0); }
	82%       { opacity: 1; transform: translateX(0); }
	88%, 100% { opacity: 0; transform: translateX(0); }
}
.st-feed rect { fill: rgba(10, 10, 11, 0.85); stroke: var(--statics-brand-red); stroke-width: 1.2; }
.st-feed text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; fill: var(--ink); }
.st-feed-icon { fill: none; stroke: var(--statics-brand-red); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shared: pause off-screen, freeze on a good frame for reduced motion ---------- */
#pacman-experience:not(.pacman-visible) .pacman-scene *,
#thales-experience:not(.thales-visible) .thales-scene *,
#statics-experience:not(.statics-visible) .statics-scene * {
	animation-play-state: paused;
}

@media (max-width: 640px) {
	.th-st { font-size: 19px; }
	.th-hud--img { display: none; }
	.st-feed { display: none; }
	.st-callout { font-size: 20px; }
	.pacman-scene__pop { font-size: 0.62rem; }
}

@media (prefers-reduced-motion: reduce) {
	.pacman-scene *,
	.thales-scene *,
	.statics-scene * {
		animation-play-state: paused !important;
	}
	.pacman-scene * { animation-delay: calc(var(--cycle) * -0.3) !important; }
	.thales-scene * { animation-delay: calc(var(--cycle) * -0.6) !important; }
	.statics-scene * { animation-delay: calc(var(--cycle) * -0.45) !important; }
}