/* ════════════════════════════════════════════════════════════ 🥚 LIMPIAAI v11.0 — QUANTUM EDITION · WORLD-CLASS LAYER Oracle Card 3D Flip • Generative Soundscapes • Voice Narration Lunar Calendar • Color Themes • Ritual Assistant • Guided Tour Inspirado en lo mejor de: Co-Star, Moonly, Calm, Insight Timer Se carga DESPUÉS de style.css, premium.css y celestial.css ════════════════════════════════════════════════════════════ */ /* ═══ COLOR THEMES (data-theme on ) ═══ */ html[data-theme="mystic"] { --p: #7c3aed; --pl: #a78bfa; --pd: #5b21b6; --pg: rgba(124,58,237,.35); --gneon: linear-gradient(135deg, #7c3aed, #3b82f6, #06b6d4); --ta: #c4b5fd; } html[data-theme="ember"] { --p: #ea580c; --pl: #fb923c; --pd: #9a3412; --pg: rgba(234,88,12,.35); --gneon: linear-gradient(135deg, #ea580c, #f59e0b, #eab308); --ta: #fdba74; --bda: rgba(234,88,12,.3); } html[data-theme="jade"] { --p: #059669; --pl: #34d399; --pd: #065f46; --pg: rgba(5,150,105,.35); --gneon: linear-gradient(135deg, #059669, #06b6d4, #3b82f6); --ta: #6ee7b7; --bda: rgba(5,150,105,.3); } html[data-theme="rose"] { --p: #db2777; --pl: #f472b6; --pd: #9d174d; --pg: rgba(219,39,119,.35); --gneon: linear-gradient(135deg, #db2777, #a855f7, #6366f1); --ta: #f9a8d4; --bda: rgba(219,39,119,.3); } /* Theme picker */ .theme-row { display: flex; gap: 10px; justify-content: center; padding: 12px 16px; } .theme-dot { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all var(--tn); display: flex; align-items: center; justify-content: center; font-size: .9rem; color: #fff; position: relative; } .theme-dot.active { border-color: #fff; transform: scale(1.12); box-shadow: 0 0 18px rgba(255,255,255,.25); } .theme-dot.t-mystic { background: linear-gradient(135deg, #7c3aed, #3b82f6); } .theme-dot.t-ember { background: linear-gradient(135deg, #ea580c, #eab308); } .theme-dot.t-jade { background: linear-gradient(135deg, #059669, #06b6d4); } .theme-dot.t-rose { background: linear-gradient(135deg, #db2777, #a855f7); } .theme-label { font-size: .6rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--t3); text-align: center; padding-top: 8px; } /* ═══ ORACLE CARD (3D flip — daily tarot-style) ═══ */ .oracle-section { margin: 1.2rem 0; perspective: 1200px; } .oracle-card { position: relative; width: 100%; height: 210px; cursor: pointer; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4,.1,.2,1); } .oracle-card.flipped { transform: rotateY(180deg); } .oracle-face { position: absolute; inset: 0; border-radius: var(--rx); backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .oracle-front { background: linear-gradient(150deg, #1e1b4b 0%, #0f0a30 55%, #030311 100%); border: 1px solid rgba(167,139,250,.3); box-shadow: 0 8px 40px rgba(0,0,0,.5), inset 0 0 60px rgba(124,58,237,.08); } .oracle-front::before { content: ''; position: absolute; inset: 10px; border-radius: calc(var(--rx) - 6px); border: 1px dashed rgba(167,139,250,.25); pointer-events: none; } .oracle-front-icon { font-size: 3rem; margin-bottom: 10px; animation: oracleFloat 3.5s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(167,139,250,.5)); } @keyframes oracleFloat { 50% { transform: translateY(-7px) rotate(3deg); } } .oracle-front-title { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 800; color: #ede9fe; } .oracle-front-hint { font-size: .62rem; color: var(--t3); margin-top: 6px; letter-spacing: 1.5px; text-transform: uppercase; animation: dotPulse 2s ease-in-out infinite; } .oracle-back { transform: rotateY(180deg); background: linear-gradient(150deg, rgba(124,58,237,.16), rgba(8,8,32,.96) 60%); border: 1px solid rgba(251,191,36,.28); padding: 18px 20px; box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 40px rgba(251,191,36,.08); } .oracle-back-icon { font-size: 2.2rem; margin-bottom: 8px; filter: drop-shadow(0 0 14px rgba(251,191,36,.5)); } .oracle-back-name { font-family: 'Playfair Display', serif; font-size: 1.02rem; font-weight: 800; color: #fde68a; margin-bottom: 6px; } .oracle-back-msg { font-size: .72rem; color: var(--t2); line-height: 1.55; max-width: 300px; } .oracle-back-tag { margin-top: 10px; font-size: .56rem; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(251,191,36,.7); } /* ═══ SOUNDSCAPE PLAYER ═══ */ .sound-card { background: var(--gc); border: 1px solid var(--bd); border-radius: var(--rx); padding: 16px; margin: 1.2rem 0; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .sound-title { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 800; margin-bottom: 12px; } .sound-title i { color: var(--pl); } .sound-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .sound-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: var(--rl); background: rgba(255,255,255,.025); border: 1px solid var(--bd); transition: all var(--tn); font-size: .58rem; font-weight: 700; color: var(--t2); } .sound-btn .sb-icon { font-size: 1.4rem; transition: transform var(--tn); } .sound-btn:hover { border-color: var(--bda); transform: translateY(-2px); } .sound-btn.playing { background: rgba(124,58,237,.14); border-color: rgba(124,58,237,.45); color: var(--ta); box-shadow: 0 0 20px rgba(124,58,237,.15); } .sound-btn.playing .sb-icon { animation: soundPulse 1.8s ease-in-out infinite; } @keyframes soundPulse { 50% { transform: scale(1.18); } } .sound-vol-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .sound-vol-row i { color: var(--t3); font-size: .75rem; } .sound-vol { flex: 1; -webkit-appearance: none; appearance: none; height: 4px; background: rgba(148,163,184,.15); border-radius: 99px; outline: none; } .sound-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--pl); cursor: pointer; box-shadow: 0 0 10px rgba(167,139,250,.5); } .sound-vol::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; border: none; background: var(--pl); cursor: pointer; } /* Equalizer bars while playing */ .sound-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; margin-left: 6px; } .sound-eq span { width: 2.5px; background: var(--pl); border-radius: 2px; animation: eqBar 1s ease-in-out infinite; } .sound-eq span:nth-child(1) { height: 60%; animation-delay: 0s; } .sound-eq span:nth-child(2) { height: 100%; animation-delay: .18s; } .sound-eq span:nth-child(3) { height: 45%; animation-delay: .36s; } .sound-eq span:nth-child(4) { height: 80%; animation-delay: .54s; } @keyframes eqBar { 50% { transform: scaleY(.4); } } /* ═══ TTS NARRATION BUTTON ═══ */ .tts-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 99px; font-size: .72rem; font-weight: 800; background: rgba(6,182,212,.1); color: #67e8f9; border: 1px solid rgba(6,182,212,.28); transition: all var(--tn); margin-bottom: 12px; } .tts-btn:hover { border-color: rgba(6,182,212,.55); box-shadow: 0 0 18px rgba(6,182,212,.15); } .tts-btn.speaking { background: rgba(6,182,212,.2); border-color: rgba(6,182,212,.6); animation: ttsPulse 1.6s ease-in-out infinite; } @keyframes ttsPulse { 50% { box-shadow: 0 0 26px rgba(6,182,212,.3); } } /* ═══ LUNAR CALENDAR ═══ */ .luncal-modal { position: fixed; inset: 0; z-index: 9600; display: none; align-items: center; justify-content: center; padding: 16px; } .luncal-modal.on { display: flex; } .luncal-backdrop { position: absolute; inset: 0; background: rgba(2,2,12,.86); backdrop-filter: blur(10px); } .luncal-content { position: relative; z-index: 1; width: 100%; max-width: 420px; background: linear-gradient(160deg, #12102e, #060618); border: 1px solid rgba(148,163,255,.18); border-radius: var(--rx); padding: 20px 18px; max-height: 86vh; overflow-y: auto; animation: modalPop .5s cubic-bezier(.16,1,.3,1); box-shadow: 0 24px 80px rgba(0,0,0,.7); } .luncal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .luncal-title { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 800; color: #dbeafe; } .luncal-nav { display: flex; gap: 6px; align-items: center; } .luncal-nav button { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.05); color: var(--t2); border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; font-size: .7rem; transition: all var(--tf); } .luncal-nav button:hover { color: var(--pl); border-color: var(--bda); } .luncal-month { font-size: .78rem; font-weight: 800; color: var(--ta); min-width: 120px; text-align: center; } .luncal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .luncal-dow { font-size: .55rem; font-weight: 800; color: var(--t3); text-align: center; padding: 4px 0; text-transform: uppercase; } .luncal-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 10px; font-size: .58rem; color: var(--t2); gap: 1px; background: rgba(255,255,255,.02); border: 1px solid transparent; transition: all var(--tf); } .luncal-day .lc-moon { font-size: .85rem; line-height: 1; } .luncal-day .lc-num { font-family: var(--mono); font-size: .52rem; color: var(--t3); } .luncal-day.today { border-color: rgba(167,139,250,.55); background: rgba(124,58,237,.14); box-shadow: 0 0 12px rgba(124,58,237,.2); } .luncal-day.key-phase { background: rgba(59,130,246,.08); border-color: rgba(59,130,246,.18); } .luncal-day.other-month { opacity: .28; } .luncal-legend { display: flex; justify-content: center; gap: 14px; margin-top: 12px; font-size: .58rem; color: var(--t3); } .luncal-close-btn { width: 100%; margin-top: 14px; } /* ═══ RITUAL ASSISTANT (step-by-step guided mode) ═══ */ .ritual-modal { position: fixed; inset: 0; z-index: 9650; display: none; flex-direction: column; background: radial-gradient(ellipse at 50% 30%, #100c34 0%, #030311 70%); } .ritual-modal.on { display: flex; } .ritual-head { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--st) + 14px) 18px 10px; } .ritual-head h3 { font-family: 'Playfair Display', serif; font-size: 1rem; color: #ede9fe; } .ritual-close { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.06); color: var(--t2); border: 1px solid var(--bd); display: flex; align-items: center; justify-content: center; } .ritual-progress { display: flex; gap: 5px; padding: 0 18px 14px; } .ritual-prog-seg { flex: 1; height: 4px; border-radius: 99px; background: rgba(148,163,184,.14); overflow: hidden; position: relative; } .ritual-prog-seg .fill { position: absolute; inset: 0; background: var(--gneon); border-radius: 99px; transform: scaleX(0); transform-origin: left; transition: transform .5s ease; } .ritual-prog-seg.done .fill, .ritual-prog-seg.active .fill { transform: scaleX(1); } .ritual-prog-seg.active .fill { animation: ritualGlow 2s ease-in-out infinite; } @keyframes ritualGlow { 50% { opacity: .6; } } .ritual-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 28px; gap: 1rem; overflow-y: auto; } .ritual-step-icon { font-size: 4rem; animation: oracleFloat 4s ease-in-out infinite; filter: drop-shadow(0 0 24px rgba(124,58,237,.4)); } .ritual-step-num { font-size: .6rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--ta); } .ritual-step-title { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 800; color: #f1f5f9; line-height: 1.3; } .ritual-step-desc { font-size: .82rem; color: var(--t2); line-height: 1.7; max-width: 340px; } .ritual-timer { font-family: var(--mono); font-size: 2rem; font-weight: 700; color: var(--pl); min-height: 2.6rem; text-shadow: 0 0 20px rgba(167,139,250,.4); } .ritual-foot { display: flex; gap: 10px; padding: 16px 20px calc(var(--sb) + 18px); } .ritual-foot .btn-outline, .ritual-foot .btn-primary { flex: 1; } /* ═══ GUIDED TOUR (first-run coach marks) ═══ */ .tour-overlay { position: fixed; inset: 0; z-index: 9800; display: none; background: rgba(2,2,12,.78); backdrop-filter: blur(4px); } .tour-overlay.on { display: block; } .tour-card { position: absolute; left: 50%; transform: translateX(-50%); width: min(88vw, 340px); background: linear-gradient(160deg, #17133a, #080820); border: 1px solid rgba(167,139,250,.3); border-radius: var(--rx); padding: 20px 18px 16px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(124,58,237,.12); animation: modalPop .45s cubic-bezier(.16,1,.3,1); } .tour-icon { font-size: 2.4rem; margin-bottom: 10px; } .tour-title { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 800; color: #ede9fe; margin-bottom: 8px; } .tour-desc { font-size: .76rem; color: var(--t2); line-height: 1.6; margin-bottom: 14px; } .tour-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; } .tour-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(148,163,184,.25); transition: all var(--tn); } .tour-dot.active { background: var(--pl); width: 20px; border-radius: 99px; } .tour-btns { display: flex; gap: 8px; } .tour-btns .btn-outline { flex: 1; min-height: 42px; font-size: .75rem; padding: 8px; } .tour-btns .btn-primary { flex: 2; min-height: 42px; font-size: .75rem; padding: 8px 14px; } /* ═══ SETTINGS SECTION in side menu ═══ */ .side-section-label { font-size: .56rem; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: var(--t3); padding: 10px 16px 2px; } /* ═══ RESPONSIVE ═══ */ @media (max-width: 350px) { .sound-grid { grid-template-columns: repeat(2, 1fr); } } @media (prefers-reduced-motion: reduce) { .oracle-card { transition-duration: .2s !important; } }