/**
 * Cyber Career Lab — minimal motion for the marketing/landing pages.
 *
 * Loaded on normal site pages (not inside the simulator app). Targets the
 * landing-page classes (.ccs-timeline, .ccs-tl-dot …) and the opt-in utility
 * class .ccs-reveal. Everything is disabled for prefers-reduced-motion, and
 * nothing is hidden unless JavaScript has added .ccs-motion to <html>.
 */

@keyframes ccs-m-ping   { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
@keyframes ccs-m-breath { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } 50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, .16); } }
@keyframes ccs-m-line   { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ccs-m-blink  { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* Live "Shift started" dot: soft green ping, like an on-air light. */
.ccs-timeline li.is-start .ccs-tl-dot::after {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: var(--ccs-green, #22c55e);
	animation: ccs-m-ping 2.2s cubic-bezier(0, 0, .2, 1) infinite;
	pointer-events: none;
}
.ccs-timeline li.is-start strong { animation: ccs-m-blink 2.2s ease-in-out infinite; }

/* Escalation: slow red breathing on the dot and card edge. */
.ccs-timeline li.is-escalation .ccs-tl-dot { animation: ccs-m-breath 2.6s ease-in-out infinite; }

/* Timeline reveal (only once JS confirms motion is OK). */
.ccs-motion .ccs-timeline::before { transform-origin: top; transform: scaleY(0); }
.ccs-motion .ccs-timeline.is-in::before { animation: ccs-m-line 1.4s cubic-bezier(.4, 0, .2, 1) forwards; }
.ccs-motion .ccs-timeline li { opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i, 0) * 140ms + 120ms); }
.ccs-motion .ccs-timeline.is-in li { opacity: 1; transform: none; }

/* Opt-in: add class "ccs-reveal" to any Elementor container/widget. */
.ccs-motion .ccs-reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--ccs-delay, 0s); }
.ccs-motion .ccs-reveal.is-in { opacity: 1; transform: none; }

/* Gentle hover lift for landing cards and icon tiles. */
.ccs-value-item, .ccs-eco > *, .ccs-career-card { transition: transform .25s ease, border-color .25s ease; }
.ccs-value-item:hover, .ccs-career-card:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
	.ccs-timeline li.is-start .ccs-tl-dot::after,
	.ccs-timeline li.is-start strong,
	.ccs-timeline li.is-escalation .ccs-tl-dot { animation: none; }
	.ccs-motion .ccs-timeline::before,
	.ccs-motion .ccs-timeline li,
	.ccs-motion .ccs-reveal { opacity: 1; transform: none; animation: none; transition: none; }
}

/* ==========================================================================
   [ccs_hero_visual] — SOC command hub
   ========================================================================== */
@keyframes ccs-hub-spin    { to { transform: rotate(360deg); } }
@keyframes ccs-hub-spin-r  { to { transform: rotate(-360deg); } }
@keyframes ccs-hub-twinkle { 0%, 100% { opacity: .15; transform: scale(.5); } 50% { opacity: .95; transform: scale(1.2); } }
@keyframes ccs-hub-float   { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 5px)); } }
@keyframes ccs-hub-core    { from { box-shadow: 0 0 28px 4px rgba(56, 189, 248, .22), inset 0 0 36px rgba(56, 189, 248, .14); } to { box-shadow: 0 0 46px 10px rgba(56, 189, 248, .38), inset 0 0 48px rgba(56, 189, 248, .26); } }
@keyframes ccs-hub-glow    { 0%, 100% { text-shadow: 0 0 8px rgba(125, 211, 252, .55); } 50% { text-shadow: 0 0 20px rgba(125, 211, 252, .95); } }
@keyframes ccs-hub-scan    { from { top: -25%; } to { top: 115%; } }
@keyframes ccs-hub-alert   { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.9); opacity: 0; } }

.ccs-hub { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1 / 1; margin: 0 auto; color: #e2e8f0; font-family: inherit; isolation: isolate; }
.ccs-hub__stars { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ccs-hub__stars i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #7dd3fc; box-shadow: 0 0 6px rgba(125, 211, 252, .8); animation: ccs-hub-twinkle var(--d) ease-in-out var(--w) infinite; }
.ccs-hub__svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.ccs-hub__ring { transform-origin: 320px 320px; transform-box: view-box; }
.ccs-hub__ring--a { animation: ccs-hub-spin 14s linear infinite; }
.ccs-hub__ring--b { animation: ccs-hub-spin-r 22s linear infinite; }
.ccs-hub__packet { filter: drop-shadow(0 0 4px rgba(125, 211, 252, .9)); }
.ccs-hub__packet--alert { filter: drop-shadow(0 0 5px rgba(248, 113, 113, .95)); }

.ccs-hub__node { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -50%); animation: ccs-hub-float 4s ease-in-out var(--f) infinite; }
.ccs-hub__bubble { position: relative; display: inline-flex; align-items: center; justify-content: center; width: clamp(40px, 10.5%, 58px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 25%, #16233a, #0b1220 70%); border: 1px solid rgba(56, 189, 248, .35); color: #7dd3fc; box-shadow: 0 0 18px rgba(56, 189, 248, .18); }
.ccs-hub__bubble svg { width: 46% !important; height: 46% !important; }
.ccs-hub__label { padding: 1px 7px; border-radius: 999px; background: rgba(8, 11, 18, .78); color: #cbd5e1; font-size: clamp(10px, 2.1vw, 12px); font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.ccs-hub__node.is-alert .ccs-hub__bubble { border-color: rgba(248, 113, 113, .6); color: #fca5a5; }
.ccs-hub__node.is-alert .ccs-hub__bubble::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid #f87171; animation: ccs-hub-alert 2.2s ease-out infinite; }

.ccs-hub__core { position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 36%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); overflow: hidden; text-align: center; background: radial-gradient(circle at 50% 35%, #12233d, #080d18 72%); border: 1.5px solid rgba(56, 189, 248, .55); animation: ccs-hub-core 2.4s ease-in-out infinite alternate; }
.ccs-hub__scan { position: absolute; left: 0; right: 0; height: 22%; background: linear-gradient(180deg, transparent, rgba(56, 189, 248, .16), transparent); animation: ccs-hub-scan 3.6s linear infinite; pointer-events: none; }
.ccs-hub__title { font-size: clamp(12px, 3vw, 17px); font-weight: 700; color: #f8fafc; }
.ccs-hub__label2 { font-size: clamp(9px, 1.9vw, 11px); color: #7dd3fc; letter-spacing: .04em; }
.ccs-hub__score { display: flex; align-items: baseline; gap: 2px; line-height: 1; margin-top: 4px; }
.ccs-hub__score b { font-size: clamp(30px, 8.5vw, 52px); font-weight: 800; color: #7dd3fc; animation: ccs-hub-glow 3s ease-in-out infinite; font-variant-numeric: tabular-nums; }
.ccs-hub__score small { font-size: clamp(10px, 2vw, 13px); color: #94a3b8; }
.ccs-hub__trend { margin-top: 4px; font-size: clamp(9px, 1.9vw, 11px); font-weight: 700; color: #4ade80; }

@media (prefers-reduced-motion: reduce) {
	.ccs-hub *, .ccs-hub *::after { animation: none !important; }
	.ccs-hub__packet { display: none; }
}


/* ==========================================================================
   [ccs_career_picker] — website career chooser
   ========================================================================== */
.ccs-cpick { max-width: 1200px; margin: 0 auto; color: #e2e8f0; }
.ccs-cpick__title { margin: 0 0 8px; color: #f8fafc; font-size: clamp(24px, 3.4vw, 36px); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; text-align: center; }
.ccs-cpick__sub { max-width: 640px; margin: 0 auto 32px; color: #94a3b8; font-size: 16px; line-height: 1.6; text-align: center; }
.ccs-cpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ccs-cpick__card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid #202938; border-radius: 14px; background: #111620; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.ccs-cpick__card:hover { transform: translateY(-3px); border-color: rgba(56, 189, 248, .45); box-shadow: 0 10px 30px rgba(56, 189, 248, .08); }
.ccs-cpick__card.is-soon { opacity: .6; }
.ccs-cpick__card.is-soon:hover { transform: none; border-color: #202938; box-shadow: none; }
.ccs-cpick__top { display: flex; align-items: center; justify-content: space-between; }
.ccs-cpick__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; background: rgba(59, 130, 246, .1); border: 1px solid rgba(59, 130, 246, .25); color: #60a5fa; }
.ccs-cpick__icon svg { width: 20px !important; height: 20px !important; }
.ccs-cpick__tag { padding: 3px 10px; border-radius: 999px; background: rgba(148, 163, 184, .12); color: #94a3b8; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.ccs-cpick__tag.is-free { background: rgba(34, 197, 94, .12); color: #4ade80; }
.ccs-cpick__tag.is-pro { background: rgba(56, 189, 248, .12); color: #38bdf8; }
.ccs-cpick__name { margin: 4px 0 0; color: #f8fafc; font-size: 18px; font-weight: 700; }
.ccs-cpick__desc { flex: 1; margin: 0; color: #94a3b8; font-size: 14px; line-height: 1.55; }
.ccs-cpick__meta { margin: 0; color: #64748b; font-size: 12px; }
.ccs-cpick__btn { display: inline-flex; justify-content: center; margin-top: 6px; padding: 10px 14px; border-radius: 9px; background: #3b82f6; color: #fff !important; font-size: 14px; font-weight: 600; text-decoration: none !important; transition: background .2s ease; }
.ccs-cpick__btn:hover { background: #2563eb; }
@media (prefers-reduced-motion: reduce) { .ccs-cpick__card { transition: none; } .ccs-cpick__card:hover { transform: none; } }