/* ============================================================= Celebration overlays — shared tokens and per-celebration blocks. Each type uses a unique class prefix to avoid collisions: cel-diff-* difficulty_complete cel-section-* section_mastered cel-track-* track_complete cel-daily-* daily_goal cel-evo-* evolution Each overlay is appended to and self-contained. ============================================================= */ :root { --cel-font-display: 'Fredoka One', 'Fredoka', 'Nunito', sans-serif; --cel-font-body: 'Fredoka', 'Nunito', sans-serif; } /* ============================================================ difficulty_complete ============================================================ */ .cel-diff-stage { position: fixed; inset: 0; z-index: 9500; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 20px 72px; background: #0C0714; color: #fff; font-family: var(--cel-font-body); animation: celFadeIn 320ms ease-out; } .cel-diff-stage.cel-leaving { animation: celFadeOut 280ms ease-in forwards; } @keyframes celFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes celFadeOut { from { opacity: 1; } to { opacity: 0; } } .cel-diff-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .cel-diff-stage[data-diff="easy"] .cel-diff-glow { background: radial-gradient(circle at 50% 45%, rgba(88, 204, 2, 0.22) 0%, transparent 55%); } .cel-diff-stage[data-diff="medium"] .cel-diff-glow { background: radial-gradient(circle at 50% 45%, rgba(255, 150, 0, 0.25) 0%, transparent 55%); } .cel-diff-stage[data-diff="hard"] .cel-diff-glow { background: radial-gradient(circle at 50% 45%, rgba(230, 60, 60, 0.24) 0%, transparent 55%); } .cel-diff-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%); } .cel-diff-fx { position: absolute; inset: 0; pointer-events: none; } .cel-diff-fx.ambient { z-index: 3; } .cel-diff-fx.sparks { z-index: 13; } .cel-diff-content { position: relative; z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 400px; width: 100%; text-align: center; } .cel-diff-label { font-family: var(--cel-font-display); font-size: var(--type-h2); letter-spacing: 4px; opacity: 0; text-transform: uppercase; text-shadow: 0 0 14px currentColor, 0 2px 8px rgba(0,0,0,0.4); } .cel-diff-label.on { animation: celDiffLabelFade 440ms ease-out forwards; } @keyframes celDiffLabelFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .cel-diff-stage[data-diff="easy"] .cel-diff-label { color: #8FD66A; } .cel-diff-stage[data-diff="medium"] .cel-diff-label { color: #FFB347; } .cel-diff-stage[data-diff="hard"] .cel-diff-label { color: #FF6B6B; } .cel-diff-badge-wrap { position: relative; width: 160px; height: 170px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0); } .cel-diff-badge-wrap.on { animation: celDiffBadgePop 620ms cubic-bezier(0.22, 1.4, 0.36, 1) forwards; } @keyframes celDiffBadgePop { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.2); } 80% { transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } } .cel-diff-badge-wrap svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.5)); } .cel-diff-stage[data-diff="easy"] .cel-diff-hexfill { fill: url(#celDiffEasy); } .cel-diff-stage[data-diff="medium"] .cel-diff-hexfill { fill: url(#celDiffMedium); } .cel-diff-stage[data-diff="hard"] .cel-diff-hexfill { fill: url(#celDiffHard); } .cel-diff-stars { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; } .cel-diff-star { width: 22px; height: 22px; color: #FFE08A; opacity: 0; transform: scale(0.4) rotate(-20deg); filter: drop-shadow(0 0 6px rgba(255, 215, 120, 0.85)); } .cel-diff-star.on { animation: celDiffStarPop 420ms cubic-bezier(0.22, 1.4, 0.36, 1) forwards; } @keyframes celDiffStarPop { 0% { opacity: 0; transform: scale(0.4) rotate(-20deg); } 60% { opacity: 1; transform: scale(1.15) rotate(5deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } } .cel-diff-star svg { width: 100%; height: 100%; filter: none; } .cel-diff-shock { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; border: 2px solid rgba(255, 220, 120, 0.9); border-radius: 50%; transform: translate(-50%, -50%) scale(0.3); opacity: 0; pointer-events: none; } .cel-diff-shock.on { animation: celDiffShock 760ms ease-out forwards; } @keyframes celDiffShock { 0% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.3); border-width: 2px; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); border-width: 0; } } .cel-diff-title { font-family: var(--cel-font-display); font-size: var(--type-h1); color: #FFFFFF; letter-spacing: 0.5px; opacity: 0; transform: scale(0); text-shadow: 0 0 16px rgba(255, 220, 140, 0.4), 0 2px 10px rgba(0,0,0,0.4); } .cel-diff-title.on { animation: celDiffTitlePop 540ms cubic-bezier(0.22, 1.4, 0.36, 1) forwards; } @keyframes celDiffTitlePop { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.15); } 80% { transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } } .cel-diff-meta { font-family: var(--cel-font-body); font-weight: 600; font-size: var(--type-body-sm); color: rgba(255, 255, 255, 0.72); letter-spacing: 0.5px; opacity: 0; } .cel-diff-meta.on { animation: celFadeUp 420ms ease-out forwards; } @keyframes celFadeUp { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .cel-diff-row { display: flex; align-items: center; gap: 14px; justify-content: center; margin-top: 6px; } .cel-diff-jk { position: relative; width: 160px; height: 140px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateX(-30px) scale(0.85); } .cel-diff-jk.on { opacity: 1; transform: translateX(0) scale(1); animation: celDiffJkSlide 520ms cubic-bezier(0.22, 1.4, 0.36, 1); } @keyframes celDiffJkSlide { from { opacity: 0; transform: translateX(-30px) scale(0.85); } to { opacity: 1; transform: translateX(0) scale(1); } } .cel-diff-jk canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)); } .cel-bubble-side { position: relative; background: #FFFFFF; color: #3D3D3A; font-family: var(--cel-font-body); font-weight: 600; font-size: var(--type-body-sm); line-height: 1.35; padding: 10px 16px; border-radius: 16px; max-width: 220px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38); opacity: 0; transform: translateY(-2px) scale(0.92); } .cel-bubble-side.on { animation: celBubbleIn 320ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .cel-bubble-side::before { content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid #FFFFFF; } @keyframes celBubbleIn { from { opacity: 0; transform: translateY(-2px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } .cel-diff-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; } .cel-diff-btn { font-family: var(--cel-font-display); font-size: var(--type-body); color: #FFFFFF; border: none; border-radius: 999px; padding: 14px 52px; cursor: pointer; letter-spacing: 0.6px; opacity: 0; transform: translateY(10px); transition: transform 150ms ease; } .cel-diff-stage[data-diff="easy"] .cel-diff-btn { background: linear-gradient(135deg, #7DD35F 0%, #4CAE2B 100%); box-shadow: 0 12px 26px rgba(76, 174, 43, 0.45); } .cel-diff-stage[data-diff="medium"] .cel-diff-btn { background: linear-gradient(135deg, #FFC36A 0%, #F07A1A 100%); box-shadow: 0 12px 26px rgba(240, 122, 26, 0.45); } .cel-diff-stage[data-diff="hard"] .cel-diff-btn { background: linear-gradient(135deg, #FF7A7A 0%, #E83535 100%); box-shadow: 0 12px 26px rgba(232, 53, 53, 0.45); } .cel-diff-btn.on { animation: celCtaIn 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .cel-diff-btn:active { transform: scale(0.97); } @keyframes celCtaIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .cel-diff-hint { font-family: var(--cel-font-body); font-weight: 600; font-size: var(--type-micro); letter-spacing: 2px; color: rgba(255, 200, 90, 0.85); opacity: 0; text-transform: uppercase; } .cel-diff-hint.on { animation: celFadeUp 420ms ease-out forwards, celHintFlicker 2.2s ease-in-out 500ms infinite; } @keyframes celHintFlicker { 0%, 100% { opacity: 0.65; } 50% { opacity: 1; } } /* ============================================================ section_mastered ============================================================ */ .cel-section-stage { position: fixed; inset: 0; z-index: 9500; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 20px 72px; background: #06030B; color: #fff; font-family: var(--cel-font-body); animation: celFadeIn 420ms ease-out; } .cel-section-stage.cel-leaving { animation: celFadeOut 360ms ease-in forwards; } .cel-section-dawn { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #06030B 0%, #15091E 30%, #2D122A 60%, #4D1E22 85%, #1F0A08 100%); transition: background 3000ms ease-in-out; } .cel-section-stage.risen .cel-section-dawn { background: linear-gradient(180deg, #23122C 0%, #4D2138 20%, #9A482E 48%, #E68A3A 72%, #F0C060 92%, #3A1A00 100%); } .cel-section-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(10, 4, 0, 0.5) 100%); } .cel-section-rays { position: absolute; left: 50%; top: 50%; width: 780px; height: 780px; max-width: 120vmax; max-height: 120vmax; z-index: 3; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; } .cel-section-rays.on { opacity: 1; animation: celSectionRays 40s linear infinite, celSectionRaysPulse 4s ease-in-out infinite; } @keyframes celSectionRays { 0% { transform: translate(-50%, -50%) rotate(0); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes celSectionRaysPulse { 0%, 100% { filter: brightness(1) opacity(0.55); } 50% { filter: brightness(1.2) opacity(0.85); } } .cel-section-rays svg { width: 100%; height: 100%; } .cel-section-fx { position: absolute; inset: 0; pointer-events: none; } .cel-section-fx.stars { z-index: 3; } .cel-section-fx.embers { z-index: 4; } .cel-section-fx.burst { z-index: 14; } .cel-section-fx.confetti { z-index: 14; } .cel-section-content { position: relative; z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 400px; width: 100%; text-align: center; } .cel-section-triple { position: relative; width: 280px; height: 180px; display: flex; align-items: center; justify-content: center; } .cel-section-mini { position: absolute; width: 60px; height: 64px; opacity: 0; transform: translate(var(--dx, 0), 0) scale(0); transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1), opacity 520ms ease; } .cel-section-mini svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)); } .cel-section-mini.on { opacity: 1; transform: translate(var(--dx, 0), 0) scale(1); } .cel-section-mini.merge { transform: translate(0, 0) scale(0); opacity: 0; } .cel-section-mini.easy .hexf { fill: url(#celSectionEasy); } .cel-section-mini.medium .hexf { fill: url(#celSectionMedium); } .cel-section-mini.hard .hexf { fill: url(#celSectionHard); } .cel-section-gold { position: absolute; width: 0; height: 0; opacity: 0; transition: width 520ms cubic-bezier(0.22, 1.4, 0.36, 1), height 520ms cubic-bezier(0.22, 1.4, 0.36, 1), opacity 420ms ease; } .cel-section-gold.on { width: 170px; height: 184px; opacity: 1; } .cel-section-gold svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 26px rgba(120, 60, 0, 0.6)) drop-shadow(0 0 20px rgba(255, 210, 110, 0.55)); } .cel-section-gold .gtext { font-family: var(--cel-font-display); font-size: var(--type-section); fill: #1F1000; letter-spacing: 2px; } .cel-section-gold .gstar { fill: #FFF2C0; } .cel-section-crown { position: absolute; left: 50%; top: 50%; width: 110px; height: 80px; transform: translate(-50%, calc(-50% - 240px)); opacity: 0; z-index: 16; pointer-events: none; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.55)); } .cel-section-crown svg { width: 100%; height: 100%; display: block; } .cel-section-crown.on { animation: celCrownDrop 620ms cubic-bezier(0.22, 1.5, 0.36, 1) forwards; } @keyframes celCrownDrop { 0% { opacity: 0; transform: translate(-50%, calc(-50% - 240px)); } 50% { opacity: 1; } 80% { transform: translate(-50%, calc(-50% - 88px)); } 100% { opacity: 1; transform: translate(-50%, calc(-50% - 78px)); } } .cel-section-crownflash { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 240, 170, 0.85), rgba(240, 180, 80, 0.2) 45%, transparent 70%); transform: translate(-50%, -50%) scale(0); z-index: 15; pointer-events: none; opacity: 0; filter: blur(10px); } .cel-section-crownflash.on { animation: celCrownFlash 440ms ease-out; } @keyframes celCrownFlash { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); } 40% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } } .cel-section-title { font-family: var(--cel-font-display); font-size: 42px; color: #FFE08A; letter-spacing: 2px; opacity: 0; transform: scale(0); text-shadow: 0 0 22px rgba(255, 220, 140, 0.8), 0 0 44px rgba(240, 180, 60, 0.55), 0 2px 14px rgba(0, 0, 0, 0.5); } .cel-section-title.on { animation: celTitlePop 680ms cubic-bezier(0.22, 1.4, 0.36, 1) forwards; } @keyframes celTitlePop { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.15); } 80% { transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } } .cel-section-mastered { font-family: var(--cel-font-display); font-size: var(--type-h1); color: #FFFFFF; letter-spacing: 6px; min-height: 28px; margin-top: -4px; text-shadow: 0 0 14px rgba(255, 220, 140, 0.55), 0 2px 10px rgba(0,0,0,0.5); } .cel-section-mastered span { display: inline-block; opacity: 0; transform: translateY(4px); } .cel-section-mastered span.on { animation: celLetterFade 260ms ease-out forwards; } @keyframes celLetterFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .cel-section-meta { font-family: var(--cel-font-body); font-weight: 600; font-size: var(--type-caption); color: rgba(255, 245, 215, 0.78); letter-spacing: 1.2px; text-transform: uppercase; opacity: 0; margin-top: -2px; } .cel-section-meta.on { animation: celFadeUp 420ms ease-out forwards; } .cel-section-jk { position: relative; width: 230px; height: 230px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.7) translateY(10px); margin-top: 4px; } .cel-section-jk.on { animation: celSectionJkIn 520ms cubic-bezier(0.22, 1.4, 0.36, 1) forwards; } @keyframes celSectionJkIn { from { opacity: 0; transform: scale(0.7) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } } .cel-section-jk::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 140, 0.45), transparent 65%); filter: blur(14px); z-index: -1; opacity: 0; pointer-events: none; } .cel-section-jk.on::before { opacity: 1; animation: celSectionJkGlow 2.4s ease-in-out 400ms infinite; } @keyframes celSectionJkGlow { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } .cel-section-jk canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.55)); } .cel-bubble-up { position: relative; background: #FFFFFF; color: #3D3D3A; font-family: var(--cel-font-body); font-weight: 600; font-size: var(--type-body-sm); line-height: 1.4; padding: 10px 18px; border-radius: 18px; max-width: 320px; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 210, 110, 0.5); opacity: 0; transform: translateY(-4px) scale(0.92); } .cel-bubble-up.on { animation: celBubbleUpIn 340ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .cel-bubble-up::after { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #FFFFFF; } @keyframes celBubbleUpIn { from { opacity: 0; transform: translateY(-4px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } .cel-gold-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; } .cel-gold-btn { font-family: var(--cel-font-display); font-size: 17px; color: #2E1800; background: linear-gradient(135deg, #FFE08A 0%, #F0C060 55%, #D08820 100%); border: none; border-radius: 999px; padding: 15px 58px; cursor: pointer; letter-spacing: 0.6px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); box-shadow: 0 14px 30px rgba(200, 120, 40, 0.55), 0 0 0 1px rgba(255, 220, 130, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.6); opacity: 0; transform: translateY(12px); transition: transform 150ms ease; } .cel-gold-btn.on { animation: celCtaIn 440ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .cel-gold-btn:active { transform: scale(0.97); } .cel-gold-nextline { font-family: var(--cel-font-body); font-weight: 600; font-size: var(--type-caption); color: rgba(255, 245, 215, 0.8); letter-spacing: 1.2px; text-transform: uppercase; opacity: 0; } .cel-gold-nextline.on { animation: celFadeUp 420ms ease-out forwards; } /* ============================================================ track_complete (reuses some section styling tokens) ============================================================ */ .cel-track-stage { position: fixed; inset: 0; z-index: 9500; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 20px 70px; background: #050208; color: #fff; font-family: var(--cel-font-body); animation: celFadeIn 420ms ease-out; } .cel-track-stage.cel-leaving { animation: celFadeOut 420ms ease-in forwards; } .cel-track-cosmos { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(1200px 800px at 50% 40%, rgba(50, 20, 90, 0.25) 0%, transparent 60%), #050208; transition: opacity 2800ms ease-in-out; } .cel-track-dawn { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 3500ms ease-in-out; background: linear-gradient(180deg, #2A1040 0%, #4D1F5A 20%, #9A3C68 42%, #E47040 65%, #F0BA5E 85%, #F9E6B4 100%); } .cel-track-stage.risen .cel-track-dawn { opacity: 1; } .cel-track-stage.risen .cel-track-cosmos { opacity: 0.25; } .cel-track-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%); } .cel-track-fx { position: absolute; inset: 0; pointer-events: none; } .cel-track-fx.stars { z-index: 3; transition: opacity 2800ms ease; } .cel-track-fx.embers { z-index: 4; } .cel-track-fx.path { z-index: 11; } .cel-track-fx.burst { z-index: 13; } .cel-track-fx.fireworks { z-index: 14; } .cel-track-fx.confetti { z-index: 14; } .cel-track-goldflash { position: absolute; inset: 0; z-index: 13; pointer-events: none; background: rgba(255, 230, 160, 0); } .cel-track-goldflash.on { animation: celTrackGoldFlash 600ms ease-out; } @keyframes celTrackGoldFlash { 0% { background: rgba(255, 230, 160, 0); } 25% { background: rgba(255, 230, 160, 0.45); } 100% { background: rgba(255, 230, 160, 0); } } .cel-track-content { position: relative; z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 420px; width: 100%; text-align: center; } .cel-track-journey { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--cel-font-display); font-size: var(--type-h2); color: rgba(255, 230, 140, 0.85); letter-spacing: 2px; text-shadow: 0 0 8px rgba(255, 200, 90, 0.6); opacity: 0; pointer-events: none; z-index: 12; } .cel-track-journey.on { animation: celTrackJourney 500ms ease-out forwards; } @keyframes celTrackJourney { 0% { opacity: 0; transform: translate(-50%, -50%) translateX(30px) scale(0.8); } 30% { opacity: 1; transform: translate(-50%, -50%) translateX(0) scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) translateX(-20px) scale(0.9); } } .cel-track-big { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0; transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1), opacity 620ms ease; } .cel-track-big.on { opacity: 1; } .cel-track-big.shrunk { transform: scale(0.38) translateY(-40px); opacity: 0; } .cel-track-bignum { font-family: var(--cel-font-display); font-size: 64px; color: #FFFFFF; letter-spacing: 2px; line-height: 1; text-shadow: 0 0 22px rgba(255, 220, 140, 0.8), 0 0 42px rgba(240, 160, 60, 0.55), 0 4px 14px rgba(0, 0, 0, 0.5); } .cel-track-bigsub { font-family: var(--cel-font-body); font-weight: 600; font-size: var(--type-section); color: #FFE093; letter-spacing: 3px; text-transform: uppercase; opacity: 0; } .cel-track-bigsub.on { animation: celFadeUp 420ms ease-out forwards; } .cel-track-name { font-family: var(--cel-font-display); font-size: 38px; color: #FFE793; letter-spacing: 3px; line-height: 1; min-height: 44px; text-shadow: 0 0 24px rgba(255, 220, 130, 0.85), 0 0 48px rgba(240, 170, 60, 0.55), 0 2px 14px rgba(0, 0, 0, 0.5); animation: celTrackShimmer 3s ease-in-out 400ms infinite; } .cel-track-name span { display: inline-block; opacity: 0; transform: translateY(4px); } .cel-track-name span.on { animation: celLetterFade 240ms ease-out forwards; } @keyframes celTrackShimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } .cel-track-completed { font-family: var(--cel-font-display); font-size: var(--type-h2); color: #FFFFFF; letter-spacing: 4px; opacity: 0; transform: scale(0); text-shadow: 0 0 12px rgba(255, 220, 140, 0.4), 0 2px 10px rgba(0,0,0,0.5); } .cel-track-completed.on { animation: celCompletedPop 520ms cubic-bezier(0.22, 1.4, 0.36, 1) forwards; } @keyframes celCompletedPop { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.2); } 80% { transform: scale(0.97); } 100% { opacity: 1; transform: scale(1); } } .cel-track-stats { font-family: var(--cel-font-body); font-weight: 600; font-size: var(--type-caption); color: rgba(255, 245, 215, 0.78); letter-spacing: 1px; opacity: 0; } .cel-track-stats.on { animation: celFadeUp 420ms ease-out forwards; } .cel-track-trophy { position: relative; width: 120px; height: 150px; opacity: 0; transform: translateY(-280px); z-index: 16; } .cel-track-trophy.on { animation: celTrophyDrop 720ms cubic-bezier(0.22, 1.5, 0.36, 1) forwards; } @keyframes celTrophyDrop { 0% { opacity: 0; transform: translateY(-280px); } 55% { opacity: 1; transform: translateY(14px); } 78% { transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } .cel-track-trophy svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(255, 215, 120, 0.55)); } .cel-track-trophy::before { content: ''; position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 230, 140, 0.45), transparent 65%); filter: blur(14px); z-index: -1; opacity: 0; } .cel-track-trophy.on::before { opacity: 1; animation: celTrophyGlow 2.8s ease-in-out 600ms infinite; } @keyframes celTrophyGlow { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } } .cel-track-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 45%, rgba(255, 255, 240, 0.5) 50%, transparent 55%); mix-blend-mode: screen; transform: translateX(-110%); border-radius: 12px; } .cel-track-trophy.on .cel-track-sheen { animation: celTrackSheen 3.8s ease-in-out 700ms infinite; } @keyframes celTrackSheen { 0% { transform: translateX(-110%); } 60% { transform: translateX(110%); } 100% { transform: translateX(110%); } } .cel-track-row { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 6px; } .cel-track-jk { position: relative; width: 200px; height: 180px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.75); } .cel-track-jk.on { animation: celTrackJkIn 520ms cubic-bezier(0.22, 1.4, 0.36, 1) forwards; } @keyframes celTrackJkIn { from { opacity: 0; transform: scale(0.75); } to { opacity: 1; transform: scale(1); } } .cel-track-jk::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 140, 0.42), transparent 65%); filter: blur(12px); z-index: -1; opacity: 0; } .cel-track-jk.on::before { opacity: 1; animation: celTrophyGlow 2.6s ease-in-out 500ms infinite; } .cel-track-jk canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5)); } .cel-track-thanks { font-family: var(--cel-font-body); font-weight: 500; font-style: italic; font-size: var(--type-body-sm); color: #FFE7B8; letter-spacing: 0.5px; opacity: 0; margin-top: 4px; text-shadow: 0 0 10px rgba(255, 210, 120, 0.4); } .cel-track-thanks.on { animation: celFadeUp 620ms ease-out forwards, celThankPulse 3.2s ease-in-out infinite; } @keyframes celThankPulse { 0%, 100% { text-shadow: 0 0 10px rgba(255, 210, 120, 0.4); } 50% { text-shadow: 0 0 18px rgba(255, 230, 150, 0.7); } } .cel-track-legend { color: #FFE08A; font-size: var(--type-body-sm); text-transform: none; font-style: italic; text-shadow: 0 0 14px rgba(255, 220, 140, 0.65); animation: celFadeUp 420ms ease-out forwards, celThankPulse 3s ease-in-out infinite; } /* ============================================================ daily_goal ============================================================ */ .cel-daily-stage { position: fixed; inset: 0; z-index: 9500; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 20px 72px; overflow: hidden; background: #1A0A00; color: #fff; font-family: var(--cel-font-body); animation: celFadeIn 480ms ease-out; } .cel-daily-stage.cel-leaving { animation: celFadeOut 480ms ease-in forwards; } .cel-daily-sky { position: absolute; inset: -3% 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, #2A1040 0%, #4A2060 22%, #D04060 46%, #E87040 62%, #F0A060 75%, #FEF2F0 88%, #3A1A00 100%); animation: celDailySkyBreathe 8s ease-in-out infinite alternate; } @keyframes celDailySkyBreathe { 0% { transform: translateY(-2%) scaleY(1.02); } 100% { transform: translateY(2%) scaleY(0.98); } } .cel-daily-flare { position: absolute; top: -10%; right: -12%; width: 640px; height: 640px; z-index: 2; pointer-events: none; background: radial-gradient(circle at center, rgba(255, 245, 210, 0.12) 0%, rgba(255, 210, 140, 0.06) 35%, transparent 70%); filter: blur(18px); animation: celDailyFlare 26s ease-in-out infinite alternate; } @keyframes celDailyFlare { 0% { transform: translate(0, 0) scale(1); opacity: 0.85; } 100% { transform: translate(-60px, 40px) scale(1.08); opacity: 1; } } .cel-daily-vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(20, 6, 0, 0.35) 100%); } .cel-daily-fx { position: absolute; inset: 0; pointer-events: none; } .cel-daily-fx.dust { z-index: 4; } .cel-daily-fx.sparkle { z-index: 12; } .cel-daily-rays { position: absolute; left: 50%; top: 50%; width: 620px; height: 620px; max-width: 100vw; max-height: 100vh; z-index: 11; pointer-events: none; transform: translate(-50%, -50%) rotate(0deg); opacity: 0; } .cel-daily-rays.on { opacity: 1; animation: celDailyRays 30s linear infinite, celDailyRaysPulse 3s ease-in-out infinite; } @keyframes celDailyRays { 0% { transform: translate(-50%, -50%) rotate(0); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes celDailyRaysPulse { 0%, 100% { filter: brightness(1) opacity(0.5); } 50% { filter: brightness(1.15) opacity(0.8); } } .cel-daily-rays svg { width: 100%; height: 100%; } .cel-daily-content { position: relative; z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 400px; width: 100%; text-align: center; } .cel-daily-ring { position: relative; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; transform-origin: center; transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), margin-bottom 520ms ease; } .cel-daily-ring.complete { animation: celDailyRingPulse 420ms ease-out; } .cel-daily-ring.shrunk { transform: scale(0.55) translateY(-10px); } @keyframes celDailyRingPulse { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } .cel-daily-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .cel-daily-ring svg circle.bg { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 6; } .cel-daily-ring svg circle.fg { fill: none; stroke: #8FD66A; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 503; stroke-dashoffset: 503; transition: stroke-dashoffset 1000ms cubic-bezier(0.22, 1, 0.36, 1), stroke 1000ms ease; filter: drop-shadow(0 0 6px rgba(240, 200, 100, 0.5)); } .cel-daily-ring svg circle.fg.complete { stroke: url(#celDailyRingGold); filter: drop-shadow(0 0 10px rgba(255, 210, 120, 0.9)); animation: celDailyRingShimmer 2.4s linear infinite; } @keyframes celDailyRingShimmer { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -503; } } .cel-daily-ringinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .cel-daily-xp { font-family: var(--cel-font-display); font-size: 36px; color: #FFF5E0; text-shadow: 0 0 10px rgba(240, 200, 120, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3); letter-spacing: 0.5px; } .cel-daily-ringpulse { position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255, 220, 140, 0.9); opacity: 0; pointer-events: none; } .cel-daily-ringpulse.on { animation: celDailyPulseOut 800ms ease-out forwards; } @keyframes celDailyPulseOut { 0% { opacity: 0.9; transform: scale(1); border-width: 3px; } 100% { opacity: 0; transform: scale(2); border-width: 0; } } .cel-daily-headline { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: -6px; } .cel-daily-word { font-family: var(--cel-font-display); font-size: var(--type-h1); color: #F5E8D0; letter-spacing: 0.6px; opacity: 0; filter: blur(6px); transform: scale(1.3); text-shadow: 0 0 12px rgba(240, 200, 120, 0.45), 0 2px 10px rgba(0, 0, 0, 0.4); } .cel-daily-word.on { animation: celDailyWordFocus 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes celDailyWordFocus { 0% { opacity: 0; filter: blur(6px); transform: scale(1.3); } 100% { opacity: 1; filter: blur(0); transform: scale(1); } } .cel-daily-burst { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 230, 160, 0.85), rgba(240, 180, 80, 0.2) 40%, transparent 70%); transform: translate(-50%, -50%) scale(0); z-index: 10; pointer-events: none; opacity: 0; filter: blur(8px); } .cel-daily-burst.on { animation: celDailyBurst 360ms ease-out; } @keyframes celDailyBurst { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); } 35% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } } .cel-daily-date { font-family: var(--cel-font-body); font-weight: 500; font-size: var(--type-caption); color: rgba(255, 245, 220, 0.7); letter-spacing: 1.2px; text-transform: uppercase; opacity: 0; margin-top: 2px; } .cel-daily-date.on { animation: celFadeUp 420ms ease-out forwards; } .cel-daily-jk { position: relative; width: 200px; height: 180px; margin-top: 10px; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(40px); } .cel-daily-jk.on { opacity: 1; transform: translateY(0); animation: celDailyJkFloat 900ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes celDailyJkFloat { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } .cel-daily-jk.on.happy-bounce { animation: celDailyJkBounce 360ms ease-out; } @keyframes celDailyJkBounce { 0%, 100% { opacity: 1; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-10px); } } .cel-daily-jk::before { content: ''; position: absolute; inset: -16%; border-radius: 50%; background: radial-gradient(circle, rgba(240, 180, 100, 0.38) 0%, rgba(232, 120, 60, 0.15) 45%, transparent 70%); filter: blur(12px); z-index: -1; opacity: 0; pointer-events: none; } .cel-daily-jk.on::before { opacity: 1; animation: celDailyJkGlow 3.6s ease-in-out 600ms infinite; } @keyframes celDailyJkGlow { 0%, 100% { opacity: 0.75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } .cel-daily-jk canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.38)); } .cel-daily-pills { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 10px; } .cel-daily-pill { position: relative; padding: 9px 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.22); font-family: var(--cel-font-body); font-weight: 600; font-size: var(--type-body-sm); color: #FFF5E0; letter-spacing: 0.3px; opacity: 0; transform: translateY(18px); box-shadow: 0 6px 16px rgba(30, 8, 0, 0.25); overflow: hidden; } .cel-daily-pill.on { animation: celDailyPillRise 440ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } @keyframes celDailyPillRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .cel-daily-pill .icon { font-weight: 800; margin-right: 4px; } .cel-daily-pill.green .icon { color: #9FDF86; } .cel-daily-pill.blue .icon { color: #A8D6FF; } .cel-daily-pill.amber .icon { color: #FFD186; } .cel-daily-pill::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%); transform: skewX(-18deg); opacity: 0; } .cel-daily-pill.shimmer::after { animation: celDailyPillShimmer 1200ms ease-out forwards; } @keyframes celDailyPillShimmer { 0% { left: -40%; opacity: 0.7; } 100% { left: 110%; opacity: 0; } } .cel-daily-bubble { position: relative; background: #FFFFFF; color: #3D3D3A; font-family: var(--cel-font-body); font-weight: 600; font-size: var(--type-body-sm); line-height: 1.4; padding: 10px 18px; border-radius: 18px; max-width: 300px; box-shadow: 0 10px 24px rgba(30, 10, 0, 0.35); opacity: 0; transform: translateY(-4px) scale(0.92); margin-top: 12px; } .cel-daily-bubble.on { animation: celBubbleUpIn 340ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .cel-daily-bubble::after { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #FFFFFF; } .cel-daily-tomorrow { font-family: var(--cel-font-body); font-weight: 500; font-style: italic; font-size: var(--type-body-sm); color: #F5E8D0; letter-spacing: 0.5px; opacity: 0; margin-top: 8px; text-shadow: 0 0 10px rgba(240, 200, 120, 0.3); } .cel-daily-tomorrow.on { animation: celDailyTomorrowFade 700ms ease-out forwards, celDailyTomorrowPulse 3.2s ease-in-out infinite; } @keyframes celDailyTomorrowFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 0.85; transform: translateY(0); } } @keyframes celDailyTomorrowPulse { 0%, 100% { text-shadow: 0 0 10px rgba(240, 200, 120, 0.3); } 50% { text-shadow: 0 0 18px rgba(240, 220, 140, 0.6); } } .cel-daily-btn { margin-top: 10px; font-family: var(--cel-font-display); font-size: var(--type-body); color: #2E1800; background: linear-gradient(135deg, #F5D687 0%, #F0B860 55%, #E8A050 100%); border: none; border-radius: 14px; padding: 12px 48px; cursor: pointer; letter-spacing: 0.4px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); box-shadow: 0 10px 22px rgba(200, 120, 40, 0.35), 0 0 0 1px rgba(255, 220, 140, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4); opacity: 0; transform: translateY(12px); transition: transform 150ms ease; } .cel-daily-btn.on { animation: celDailyBtnIn 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .cel-daily-btn:active { transform: scale(0.97); } @keyframes celDailyBtnIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ evolution ============================================================ */ .cel-evo-stage { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; padding: 20px; background: radial-gradient(1000px 600px at 30% 10%, rgba(90, 40, 130, 0.18), transparent 60%), radial-gradient(1000px 600px at 80% 90%, rgba(60, 30, 110, 0.18), transparent 60%), linear-gradient(180deg, #1A1028 0%, #0C0714 60%, #06030B 100%); color: #fff; font-family: var(--cel-font-body); animation: celFadeIn 420ms ease-out; } .cel-evo-stage.cel-leaving { animation: celFadeOut 380ms ease-in forwards; } .cel-evo-stage.shake { animation: celEvoShake 300ms ease-in-out; } @keyframes celEvoShake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-4px, 2px); } 40% { transform: translate(5px, -2px); } 60% { transform: translate(-3px, -1px); } 80% { transform: translate(2px, 3px); } } .cel-evo-fx { position: absolute; inset: 0; pointer-events: none; } .cel-evo-fx.stars { z-index: 2; } .cel-evo-fx.orbit { z-index: 11; } .cel-evo-fx.burst { z-index: 14; } .cel-evo-fx.embers { z-index: 12; } .cel-evo-flash { position: absolute; inset: 0; z-index: 16; pointer-events: none; background: rgba(255, 255, 255, 0); } .cel-evo-flash.on { animation: celEvoFlash 800ms ease-out; } @keyframes celEvoFlash { 0% { background: rgba(255, 255, 255, 0); } 12% { background: rgba(255, 255, 255, 0.95); } 37% { background: rgba(255, 255, 255, 0.95); } 100% { background: rgba(255, 255, 255, 0); } } .cel-evo-content { position: relative; z-index: 15; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 380px; width: 100%; text-align: center; } .cel-evo-jklayer { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; } .cel-evo-oldwrap, .cel-evo-newwrap { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; } .cel-evo-canvas { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.55)); } .cel-evo-oldwrap { opacity: 0; transition: opacity 300ms ease; } .cel-evo-oldwrap.on { opacity: 1; animation: celEvoOldIn 520ms ease-out forwards; } .cel-evo-oldwrap.gone { opacity: 0; } @keyframes celEvoOldIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .cel-evo-oldwrap::before { content: ''; position: absolute; inset: -14%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(231, 62, 107, 0.28), transparent 65%); filter: blur(14px); z-index: -1; opacity: 0; transition: opacity 300ms ease; } .cel-evo-oldwrap.lit::before { opacity: 1; animation: celEvoMagentaPulse 1.5s ease-in-out infinite; } .cel-evo-oldwrap.lit.fast::before { animation: celEvoMagentaPulse 0.3s ease-in-out infinite; } @keyframes celEvoMagentaPulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } } .cel-evo-newwrap { opacity: 0; transform: scale(0.6); } .cel-evo-newwrap.on { animation: celEvoNewIn 520ms cubic-bezier(0.22, 1.4, 0.36, 1) forwards; } @keyframes celEvoNewIn { 0% { opacity: 0; transform: scale(0.6); } 60% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } .cel-evo-newwrap::before { content: ''; position: absolute; inset: -18%; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(240, 160, 48, 0.35), transparent 65%); filter: blur(16px); z-index: -1; opacity: 0; } .cel-evo-newwrap.on::before { opacity: 1; animation: celEvoGoldPulse 2.6s ease-in-out 500ms infinite; } @keyframes celEvoGoldPulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } } .cel-evo-title { font-family: var(--cel-font-display); font-size: var(--type-h1); color: #F0A030; letter-spacing: 2px; min-height: 38px; opacity: 0; transform: scale(0); text-shadow: 0 0 18px rgba(240, 180, 60, 0.8), 0 0 36px rgba(240, 140, 40, 0.55), 0 2px 12px rgba(0, 0, 0, 0.55); } .cel-evo-title.on { animation: celEvoTitlePop 560ms cubic-bezier(0.22, 1.4, 0.36, 1) forwards, celEvoTitleShimmer 2.6s ease-in-out 600ms infinite; } @keyframes celEvoTitlePop { 0% { opacity: 0; transform: scale(0); } 55% { opacity: 1; transform: scale(1.2); } 80% { transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } } @keyframes celEvoTitleShimmer { 0%, 100% { text-shadow: 0 0 18px rgba(240, 180, 60, 0.8), 0 0 36px rgba(240, 140, 40, 0.55), 0 2px 12px rgba(0, 0, 0, 0.55); } 50% { text-shadow: 0 0 26px rgba(250, 210, 100, 0.95), 0 0 48px rgba(240, 170, 60, 0.7), 0 2px 12px rgba(0, 0, 0, 0.55); } } .cel-evo-stage-name { font-family: var(--cel-font-body); font-weight: 600; font-size: var(--type-body); color: rgba(255, 255, 255, 0.88); letter-spacing: 1px; text-transform: uppercase; opacity: 0; text-shadow: 0 1px 4px rgba(0,0,0,0.5); min-height: 20px; } .cel-evo-stage-name.on { animation: celFadeUp 420ms ease-out forwards; } .cel-evo-bubble { position: relative; background: #FFFFFF; color: #3D3D3A; font-family: var(--cel-font-body); font-weight: 600; font-size: var(--type-body-sm); line-height: 1.4; padding: 10px 18px; border-radius: 18px; max-width: 300px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(-4px) scale(0.9); } .cel-evo-bubble.on { animation: celEvoBubbleIn 340ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .cel-evo-bubble::after { content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #FFFFFF; } @keyframes celEvoBubbleIn { from { opacity: 0; transform: translateY(-4px) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } } .cel-evo-dedication { font-family: var(--cel-font-body); font-weight: 500; font-style: italic; font-size: var(--type-body-sm); color: #C77DFF; opacity: 0; letter-spacing: 0.3px; text-shadow: 0 0 10px rgba(199, 125, 255, 0.35); min-height: 18px; } .cel-evo-dedication.on { animation: celEvoDedicationFade 520ms ease-out forwards; } @keyframes celEvoDedicationFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 0.95; transform: translateY(0); } } .cel-evo-btn { margin-top: 6px; font-family: var(--cel-font-display); font-size: var(--type-body); color: #1F1000; background: linear-gradient(135deg, #F0A030 0%, #E8B830 100%); border: none; border-radius: 12px; padding: 14px 52px; cursor: pointer; letter-spacing: 0.4px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: 0 10px 22px rgba(240, 160, 48, 0.55), 0 0 0 1px rgba(250, 200, 90, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.55); opacity: 0; transform: translateY(12px); transition: transform 150ms ease; } .cel-evo-btn.on { animation: celCtaIn 440ms cubic-bezier(0.22, 1, 0.36, 1) forwards; } .cel-evo-btn:active { transform: scale(0.97); }