/* ============================================================
   WebPixie — "Parcours / Décollage" animation (Concept A)
   Self-contained classes for the embedded interactive method module.
   ============================================================ */

/* entrance — resting state visible, animation only enriches */
.cc-reveal { opacity: 1; animation: ccReveal 480ms var(--ease-out); }
@keyframes ccReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* dark-section ambience */
.cc-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; pointer-events: none; z-index: 1; }
.cc-blob-a { width: 460px; height: 460px; background: radial-gradient(circle, rgba(173,190,26,.5), transparent 68%); top: -120px; right: -80px; animation: ccDriftA 16s ease-in-out infinite; }
.cc-blob-b { width: 380px; height: 380px; background: radial-gradient(circle, rgba(194,214,59,.32), transparent 70%); bottom: -120px; left: -60px; animation: ccDriftB 19s ease-in-out infinite; }
@keyframes ccDriftA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px,38px); } }
@keyframes ccDriftB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(46px,-30px); } }

.cc-twinkle { z-index: 2; animation: ccTwinkle 3.4s ease-in-out infinite; }
@keyframes ccTwinkle { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* nodes */
.cc-node-a { position: absolute; width: 44px; height: 44px; border-radius: 50%; border: 2px solid; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: transform .22s var(--ease-out), background .3s, box-shadow .3s, border-color .3s; }
.cc-node-a:hover { transform: translate(-50%,-50%) scale(1.14) !important; }
.cc-node-label { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-display); font-weight: 700; font-size: 12px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.cc-node-a:hover .cc-node-label { opacity: 1; }
.cc-rocket { animation: ccRocketGlow 2.6s ease-in-out infinite; }
@keyframes ccRocketGlow { 0%,100% { filter: drop-shadow(0 0 6px rgba(173,190,26,.5)); } 50% { filter: drop-shadow(0 0 16px rgba(173,190,26,.85)); } }

/* arrows */
.cc-arrow-a { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s var(--ease-out); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: var(--fg-on-dark); }
.cc-arrow-a:hover:not(:disabled) { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.cc-arrow-a-go { background: var(--lime-500); border-color: var(--lime-500); color: var(--ink-900); }
.cc-arrow-a-go:hover:not(:disabled) { box-shadow: 0 8px 20px rgba(173,190,26,.45); }
.cc-arrow-a:disabled { opacity: .35; cursor: not-allowed; }

/* ===== Enhanced dynamics ===== */
/* ambient comet glow traveling the path */
.cc-comet { filter: drop-shadow(0 0 7px var(--lime-300)); }

/* expanding pulse rings on the active node */
.cc-ring { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--lime-400); transform: translate(-50%,-50%); pointer-events: none; animation: ccRing 2.1s ease-out infinite; }
.cc-ring.d2 { animation-delay: 1.05s; }
@keyframes ccRing { 0% { opacity: .65; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.6); } }

/* sparkle burst when a step becomes active */
.cc-burst-p { position: absolute; left: 50%; top: 50%; color: var(--lime-300); animation: ccBurst .9s var(--ease-out) forwards; }
@keyframes ccBurst { 0% { opacity: 1; transform: translate(-50%,-50%) scale(.3) rotate(0deg); } 100% { opacity: 0; transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(1.1) rotate(var(--br)); } }

/* rocket flame / exhaust */
.cc-flame { animation: ccFlame .42s ease-in-out infinite; transform-origin: top center; }
@keyframes ccFlame { 0%,100% { transform: scaleY(1) scaleX(1); opacity: .9; } 50% { transform: scaleY(1.45) scaleX(.82); opacity: .55; } }

/* checklist staggered reveal */
.cc-item { animation: ccItem .5s var(--ease-out) both; }
@keyframes ccItem { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

/* progress shimmer */
.cc-prog-fill { background-image: linear-gradient(90deg, var(--lime-600), var(--lime-300), var(--lime-600)); background-size: 200% 100%; animation: ccShim 2.2s linear infinite; }
@keyframes ccShim { from { background-position: 0% 0; } to { background-position: -200% 0; } }

/* autoplay pill */
.cc-auto { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 8px 15px; font-family: var(--font-display); font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s var(--ease-out); border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: var(--fg-on-dark); }
.cc-auto:hover { background: rgba(255,255,255,.1); }
.cc-auto.on { background: var(--lime-500); border-color: var(--lime-500); color: var(--ink-900); box-shadow: 0 6px 18px rgba(173,190,26,.4); }

@media (prefers-reduced-motion: reduce) {
  .cc-reveal, .cc-blob, .cc-twinkle, .cc-rocket, .cc-ring, .cc-burst-p, .cc-flame, .cc-item, .cc-prog-fill, .cc-comet { animation: none !important; }
}
@media print {
  .cc-reveal, .cc-item { animation: none !important; opacity: 1 !important; transform: none !important; }
}