/** * SP-054 + SP-063: Page Load Transitions — Bento Box Entrance * * Hides staggered rendering during page load. * Once app.js init() completes, sections animate in with * bento-box puzzle-tile slides in a coordinated cascade. * * Lifecycle: * 1. — app-container is invisible * 2. Splash animation plays over invisible content * 3. init() completes — splash.js calls revealSections() * 4. body.page-loading removed — sections slide into view * 5. Each section has a stagger delay for cascade effect * 6. After panels settle, calendar day cells flip in (flipBoard) * * GPU-accelerated: uses opacity + transform only. * Respects prefers-reduced-motion. */ /* ── Hide everything during load ── */ body.page-loading .app-container { opacity: 0; visibility: hidden; pointer-events: none; } /* Ensure visibility restores with opacity on reveal */ .app-container { visibility: visible; } /* ── Section pre-reveal state ── SP-138: Panel entrance animations DEACTIVATED. Panels start visible (no off-screen transforms). The .section-revealed class is still added by splash.js/revealSections() but triggers no transition — panels appear instantly. */ .section-animate { opacity: 0; /* SP-138: No will-change, no box-shadow, no directional transforms */ } /* SP-138: Directional transforms removed — panels appear in-place */ .section-animate.anim-header { } .section-animate.anim-slide-left { } .section-animate.anim-slide-right { } .section-animate.anim-slide-bottom { } .section-animate.anim-fade-up { } .section-animate.anim-fade { } /* ── Revealed state ── SP-138: Instant reveal — no transition duration, no stagger delays. Panels appear immediately when .section-revealed is added. */ .section-animate.section-revealed { opacity: 1; transform: none; box-shadow: none; /* SP-138: 0ms transitions — instant appearance */ transition: none; } /* SP-138: Stagger delays zeroed — all panels appear simultaneously */ .section-animate.section-revealed.stagger-1, .section-animate.section-revealed.stagger-2, .section-animate.section-revealed.stagger-3, .section-animate.section-revealed.stagger-4, .section-animate.section-revealed.stagger-5, .section-animate.section-revealed.stagger-6, .section-animate.section-revealed.stagger-7, .section-animate.section-revealed.stagger-8 { transition-delay: 0ms; } /* SP-138: Child cascade deactivated — children appear instantly */ .section-revealed .cascade-child { opacity: 1; transform: none; animation: none; } /* @keyframes cascadeIn — SP-138: deactivated (kept for reference) @keyframes cascadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } */ /* ══════════════════════════════════════════════════════════ SP-135: 3-Wave Grouped Entrance Choreography ══════════════════════════════════════════════════════════ Wave 1 (0ms): Shell panels slide in (existing stagger system above) + Calendar flip-board fires simultaneously Wave 2 (~2400ms): Domain cards + Objective cards cascade in Wave 3 (~4800ms): Generate controls fade-up + Workflow indicator L->R Orchestrated by splash.js _launchWaves(). Classes added via JS: .wave-orchestrated — on .main-content when waves start .wave-2-live — trigger for Wave 2 items .wave-3-live — trigger for Wave 3 items .wave-2-item — on each domain-card and objective-card .wave-3-item — on generate control children + workflow steps .wave-3-container — on .generate-controls .wave-3-workflow — on #workflowIndicator */ /* ══════════════════════════════════════════════════════════ SP-138: Wave 2/3 entrance animations DEACTIVATED. All wave items appear instantly — no cascade, no fade-up, no workflow L->R reveal. Classes may still be added by JS but produce no visual animation. ══════════════════════════════════════════════════════════ */ /* SP-138: Wave 2 items visible immediately (no pre-state hide) */ .wave-2-item { opacity: 1; transform: none; } .wave-2-live .wave-2-item { animation: none; } /* SP-138: Wave 3 items visible immediately */ .wave-3-container > .wave-3-item { opacity: 1; transform: none; } .wave-3-live .wave-3-container > .wave-3-item { animation: none; } .wave-3-workflow .wave-3-item { opacity: 1; transform: none; } .wave-3-live .wave-3-workflow .wave-3-item { animation: none; } /* @keyframes fadeUp — SP-138: deactivated @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } */ /* @keyframes slideInRight — SP-138: deactivated @keyframes slideInRight { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } */ /* SP-135: Post-wave re-render guard — still active for safety */ .waves-complete .wave-2-item, .waves-complete .wave-3-container > .wave-3-item, .waves-complete .wave-3-workflow .wave-3-item { opacity: 1 !important; transform: none !important; animation: none !important; } /* ── Calendar flip-board effect (SP-063) ── After panels settle, calendar day cells flip in with 3D rotateX. Randomized stagger is applied via JS (Fisher-Yates shuffle). */ /* perspective only needed during the flip animation — not permanently on every cell */ .cal-day.flip-pending, .cal-day.flip-in { perspective: 350px; } .cal-day.flip-pending { opacity: 0; transform: rotateX(-90deg); transform-origin: top center; } .cal-day.flip-in { animation: flipBoard 2000ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } @keyframes flipBoard { 0% { opacity: 0; transform: rotateX(-90deg); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); } 50% { opacity: 1; transform: rotateX(15deg); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); } 75% { transform: rotateX(-5deg); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); } 100% { opacity: 1; transform: rotateX(0); box-shadow: none; } } /* ── SP-146: Calendar dark mode — proper dark cells, visible grid structure ── */ [data-theme="dark"] .calendar-grid { background: #111; border-color: #2d2d2d; } [data-theme="dark"] .cal-day { background: #1a1a1a; color: #e0e0e0; border-color: #2d2d2d; } [data-theme="dark"] .cal-day.other-month { background: #111; } [data-theme="dark"] .cal-header { background: #0d0d0d; color: #666; border-color: #2d2d2d; } [data-theme="dark"] .cal-day-num { color: #ccc; } [data-theme="dark"] .cal-day.today { background: #1f1f1f; } [data-theme="dark"] .cal-day.flip-pending, [data-theme="dark"] .cal-day.flip-in { background: #1a1a1a; } /* SP-180: Dark mode calendar empty overlay — darken instead of lighten */ [data-theme="dark"] .cal-empty-overlay { background: rgba(0, 0, 0, 0.45); } [data-theme="dark"] .cal-empty-text { color: #666; } /* ── SP-064: Beat 1 — Auth modal on clean background ── When auth gate is active on initial load, the auth modal must be visible even though panels are still in pre-reveal state. This class promotes the modal to position:fixed so it escapes the hidden .section-animate parent. Removed after auth resolves. z-index hierarchy during splash→reveal transition: 9999 — splash overlay (splash.js) 10001 — .section-animate elements (splash.js _revealHeaderFooter) 10002 — auth modal (this rule, must be ABOVE sections) After splash dismisses, section z-index is cleared back to auto. */ .auth-modal-overlay.auth-beat-one { position: fixed; inset: 0; z-index: 10002; } /* ── App container fade-in when page-loading is removed ── */ .app-container { transition: opacity 200ms ease-out; } /* ── Reduced motion: instant, no animation ── */ @media (prefers-reduced-motion: reduce) { .section-animate { opacity: 1 !important; transform: none !important; transition: none !important; box-shadow: none !important; will-change: auto; } .section-animate.section-revealed { transition: none !important; transition-delay: 0ms !important; } .section-revealed .cascade-child { opacity: 1 !important; transform: none !important; animation: none !important; } /* SP-135: Neutralize all wave pre-states and animations */ .wave-2-item, .wave-2-live .wave-2-item { opacity: 1 !important; transform: none !important; animation: none !important; will-change: auto; } .wave-3-container > .wave-3-item, .wave-3-live .wave-3-container > .wave-3-item { opacity: 1 !important; transform: none !important; animation: none !important; will-change: auto; } .wave-3-workflow .wave-3-item, .wave-3-live .wave-3-workflow .wave-3-item { opacity: 1 !important; transform: none !important; animation: none !important; will-change: auto; } .cal-day.flip-pending { opacity: 1 !important; transform: none !important; } .cal-day.flip-in { animation: none !important; opacity: 1 !important; transform: none !important; } body.page-loading .app-container { opacity: 1; visibility: visible; pointer-events: auto; } /* SP-064: Beat 1 auth modal — no animation, instant display */ .auth-modal-overlay.auth-beat-one { animation: none !important; } } /* ── Print: no transitions ── */ @media print { .section-animate { opacity: 1 !important; transform: none !important; transition: none !important; box-shadow: none !important; } .cal-day.flip-pending, .cal-day.flip-in { opacity: 1 !important; transform: none !important; animation: none !important; } /* SP-290: Disable drop animation bounce under reduced-motion (handled in JS) */ .cal-event-dragging, .cal-drag-over { transition: none !important; animation: none !important; } /* SP-135: Wave items visible in print */ .wave-2-item, .wave-3-container > .wave-3-item, .wave-3-workflow .wave-3-item { opacity: 1 !important; transform: none !important; animation: none !important; } } /* ── SP-290: Calendar Drag-and-Drop ─────────────────────────────────────── */ /* Pill being dragged — ghost-fade while lifted */ .cal-event-dragging { opacity: 0.30 !important; cursor: grabbing !important; } /* Drop-target cell highlight */ .cal-day.cal-drag-over { background: rgba(221, 81, 0, 0.10); outline: 2px dashed #DD5100; outline-offset: -2px; border-radius: 3px; transition: background 0.12s, outline 0.12s; } /* Dark theme drop-target */ [data-theme="dark"] .cal-day.cal-drag-over { background: rgba(221, 81, 0, 0.18); outline-color: #DD5100; } /* Pastel Mondrian drop-target */ [data-theme="pastel-mondrian"] .cal-day.cal-drag-over { background: rgba(221, 81, 0, 0.08); } /* Instrument Paper drop-target */ [data-theme="instrument-paper"] .cal-day.cal-drag-over { background: rgba(221, 81, 0, 0.07); } /* Cursor: show grab on draggable pills (desktop) */ @media (hover: hover) and (pointer: fine) { .cal-event { cursor: grab; } .cal-event:active { cursor: grabbing; } }