/* ========================================================================== SAKURA THEME — Falling Petals & Bloom Effects Only active when data-theme="sakura" is set on ========================================================================== */ /* ── Petal Container (covers entire viewport) ── */ [data-theme="sakura"] .sakura-petals { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 200; overflow: hidden; } /* ── Individual Petal ── */ [data-theme="sakura"] .sakura-petal { position: absolute; top: -40px; width: 12px; height: 12px; background: var(--sakura-petal-1); border-radius: 50% 0 50% 50%; opacity: 0.6; animation: sakuraFall linear infinite, sakuraSway ease-in-out infinite; filter: blur(0.3px); } [data-theme="sakura"] .sakura-petal:nth-child(odd) { background: var(--sakura-petal-2); border-radius: 0 50% 50% 50%; } [data-theme="sakura"] .sakura-petal:nth-child(3n) { background: var(--sakura-petal-3); width: 10px; height: 10px; opacity: 0.45; } [data-theme="sakura"] .sakura-petal:nth-child(4n) { background: var(--sakura-petal-4); width: 8px; height: 8px; opacity: 0.5; border-radius: 50% 50% 0 50%; } /* ── Keyframes ── */ @keyframes sakuraFall { 0% { transform: translateY(-40px) rotate(0deg) scale(1); } 100% { transform: translateY(110vh) rotate(360deg) scale(0.8); } } @keyframes sakuraSway { 0%, 100% { margin-left: 0; } 25% { margin-left: 30px; } 50% { margin-left: -20px; } 75% { margin-left: 15px; } } /* ── Sakura bloom on dashboard card hover ── Uses ::after so it doesn't conflict with the accent ::before gradient */ [data-theme="sakura"] .modern-card { overflow: visible !important; } [data-theme="sakura"] .modern-card::after { content: '🌸'; position: absolute; top: -10px; right: -6px; font-size: 1rem; opacity: 0; transform: scale(0.3) rotate(-30deg); transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); pointer-events: none; z-index: 10; filter: drop-shadow(0 2px 4px rgba(233, 30, 140, 0.3)); } [data-theme="sakura"] .modern-card:hover::after { opacity: 0.8; transform: scale(1) rotate(0deg); } /* Second bloom flower — different position, delayed */ [data-theme="sakura"] .modern-card .card-icon-wrapper::after { content: '✿'; position: absolute; top: -6px; left: -6px; font-size: 0.7rem; opacity: 0; transform: scale(0) rotate(45deg); transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s; pointer-events: none; color: var(--sakura-petal-2); z-index: 10; } [data-theme="sakura"] .modern-card:hover .card-icon-wrapper::after { opacity: 0.6; transform: scale(1) rotate(0deg); } /* Override card accent hover to keep sakura flavor — pink tinted border */ [data-theme="sakura"] .modern-card:hover { border-color: var(--sakura-petal-3) !important; box-shadow: 0 12px 25px -5px rgba(233, 30, 140, 0.12), 0 8px 8px -5px rgba(233, 30, 140, 0.06) !important; } /* ── Body background pattern ── */ [data-theme="sakura"] { background-image: radial-gradient(ellipse at 20% 50%, rgba(255, 183, 213, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(255, 143, 191, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(255, 200, 224, 0.12) 0%, transparent 50%); } /* ── Scrollbar ── */ [data-theme="sakura"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--sakura-petal-1), var(--sakura-petal-2)); border-radius: 10px; } [data-theme="sakura"] ::-webkit-scrollbar-track { background: var(--bg-body); } /* ── Selection color ── */ [data-theme="sakura"] ::selection { background: rgba(233, 30, 140, 0.2); color: var(--text-main); } /* ── Links & interactive accent ── */ [data-theme="sakura"] a:not([class]) { color: var(--primary); } /* ── Buttons subtle pink shadow ── */ [data-theme="sakura"] .btn-primary, [data-theme="sakura"] .btn-action { box-shadow: 0 4px 14px -3px rgba(233, 30, 140, 0.3); } /* ── Header subtle bottom glow ── */ [data-theme="sakura"] .app-header, [data-theme="sakura"] header.gc-header { border-bottom-color: var(--sakura-petal-3) !important; box-shadow: 0 1px 8px rgba(233, 30, 140, 0.08); } /* ── Disable dashboard flowers if setting is off ── */ [data-theme="sakura"].sakura-flowers-disabled .modern-card::after, [data-theme="sakura"].sakura-flowers-disabled .modern-card .card-icon-wrapper::after { display: none !important; } /* ── Sidebar accent ── */ [data-theme="sakura"] .app-sidebar { border-right-color: var(--sakura-petal-3); } /* ── Sakura border-top on section headers ── */ [data-theme="sakura"] .section-header, [data-theme="sakura"] .gc-header { border-image: linear-gradient(90deg, var(--sakura-petal-2), transparent) 1; border-top: 2px solid; border-image-slice: 1; }