:root{ --green-top:#38443B; --green-bot:#7C8A72; --amber:#E6C27A; --cream:#FCF7EB; --cream-soft:#FCFAF2; --ink:#1F291F; --inset:16px; --divider:rgba(255,255,255,.28); /* ---- modular type scale (Major Third · 1.25) ---------------------------- Tweak --root-desktop / --root-mobile to resize EVERYTHING at once, or change the ratio between steps. Like typescale.com, but live. */ --root-desktop:clamp(16.5px, 2.05dvh, 22px); /* base font on desktop (scales with height) */ --root-mobile:16px; /* base font on a real phone */ --fs-xs:0.64rem; /* captions, tiny labels */ --fs-sm:0.8rem; /* secondary / sub text */ --fs-base:1rem; /* body, answers, voices */ --fs-md:1.25rem; /* question, card titles */ --fs-lg:1.563rem; /* screen headings */ --fs-xl:1.953rem; /* big display */ --fs-2xl:2.441rem; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html,body{height:100%;margin:0;} html{font-size:var(--root-desktop);} html[data-view="mobile"]{font-size:var(--root-mobile);} body{ font-family:"PT Sans",system-ui,sans-serif;color:var(--cream); background:radial-gradient(1000px 700px at 50% -5%, #141c33 0%, #0a0d15 68%); display:flex;align-items:center;justify-content:center;overflow:hidden; } /* desktop: a tall centered phone (like Shorts on desktop) with arrows in the gutter */ .stage{position:relative;display:flex;} .app{position:relative;height:min(96vh,200vw);height:min(96dvh,200vw);aspect-ratio:390/844;width:auto; border-radius:44px;overflow:hidden; background:var(--app-bg, linear-gradient(180deg,var(--green-top),var(--green-bot))); box-shadow:0 30px 80px rgba(0,0,0,.55);} /* nav arrows live outside the phone frame, centered in the right gutter */ .navarrows{position:absolute;left:100%;margin-left:26px;top:50%;transform:translateY(-50%); display:none;flex-direction:column;gap:16px;z-index:1;} .navarrows.active{display:flex;} /* mobile layout — driven by [data-view] (set in index.html ; the dev toggle flips it too). A real phone gets full-bleed; forced "mobile" on desktop shows a phone-sized box. */ html[data-view="mobile"] .stage{width:min(100vw,412px);height:min(100dvh,892px);} html[data-view="mobile"] .app{width:100%;height:100%;aspect-ratio:auto;border-radius:0;box-shadow:none;} html[data-view="mobile"] .navarrows,html[data-view="mobile"] .navarrows.active{display:none!important;} .view{position:absolute;inset:0;display:flex;flex-direction:column; animation:fade .28s ease;} @keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}} /* ---------------- HOME (cream, matches the landing palette) ---------------- */ .home{padding:60px 20px 28px;overflow-y:auto;} .home .brand{font-family:"PT Sans";font-size:var(--fs-lg);font-weight:700;margin:0;color:var(--ink);line-height:1.1;} .home .sub{font-family:"PT Sans";font-weight:400;color:#5d594f;font-size:var(--fs-sm);margin:2px 0 22px;line-height:1.4;} .cards{display:flex;flex-direction:column;gap:14px;} .card{ display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;color:var(--ink); min-height:100px;padding:16px;border-radius:20px; background:#FFFFFF;border:1px solid rgba(31,41,31,.14); box-shadow:0 4px 14px rgba(31,41,31,.06); transition:transform .12s ease, background .18s;} .card:active{transform:scale(.985);background:#FBF8F1;} .tile{flex:0 0 64px;width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;} .tile svg{width:30px;height:30px;color:var(--ink);} .card .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;} .card .txt h3{margin:0;font-size:var(--fs-md);font-weight:700;font-family:"PT Sans";} .card .txt p{margin:0;font-size:var(--fs-sm);line-height:1.35;color:#5d594f;} .card .chev-row{flex:0 0 auto;font-size:var(--fs-xl);color:#8a857a;line-height:1;padding-right:2px;} /* ---------------- TRAINER (answer screen) ---------------- */ .content{position:absolute;inset:0;display:flex;flex-direction:column;padding:44px 16px 84px;min-height:0;transition:filter .25s;} .caption{flex:0 0 auto;text-align:center;font-family:"PT Sans Caption",sans-serif;font-size:var(--fs-xs);color:var(--cream);opacity:.95;margin-bottom:14px;padding:0 30px;} .track{flex:0 0 auto;height:5px;border-radius:3px;background:rgba(255,255,255,.24);margin:0 0 16px;overflow:hidden;} .fill{height:100%;border-radius:3px;background:var(--cream);width:2.5%;transition:width .4s cubic-bezier(.4,0,.2,1);} /* question — fixed scroll box, PT Serif */ .qscroll{flex:242 1 0;min-height:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;padding:0 4px;} .qscroll::-webkit-scrollbar{width:0;height:0;display:none;} .question{font-family:"PT Serif",Georgia,serif;font-size:var(--fs-md);line-height:1.34;color:var(--cream-soft); margin:0;text-shadow:0 1px 3px rgba(0,0,0,.3);transition:opacity .2s;} .question.sample{opacity:.7;font-style:italic;} .listen-veil{display:none;font-size:var(--fs-sm);opacity:.55;border:1px dashed rgba(255,255,255,.28); border-radius:16px;padding:22px;text-align:center;line-height:1.5;} .content.qhidden .question{display:none;} .content.qhidden .listen-veil{display:block;} /* pinned answer divider + pill (constant position) */ .divzone{flex:0 0 auto;display:flex;align-items:center;gap:12px;margin:12px 6px;} .divline{flex:1;height:2px;border-radius:28px;background:rgba(230,194,122,.30);} .answerbtn{flex:0 0 auto;background:var(--amber);color:var(--ink);border:none;border-radius:999px; font-family:"PT Sans",sans-serif;font-weight:700;font-size:var(--fs-xs);letter-spacing:1px;padding:6px 15px; cursor:pointer;text-transform:uppercase;white-space:nowrap;} /* answers — fixed scroll box below the pill, PT Sans + amber bullets */ .ascroll{flex:336 1 0;min-height:0;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;padding:2px 6px 0;} .ascroll::-webkit-scrollbar{width:0;height:0;display:none;} .alabel{font-family:"PT Sans Caption",sans-serif;font-weight:700;font-size:var(--fs-xs);letter-spacing:.5px; text-transform:uppercase;color:var(--cream-soft);opacity:.5;margin:0 0 10px;} .ascroll ul{list-style:none;margin:0;padding:0;} .ascroll li{font-family:"PT Sans",sans-serif;font-size:var(--fs-base);line-height:1.6;color:var(--cream-soft); padding:3px 0 3px 20px;position:relative;} .ascroll li::before{content:"";position:absolute;left:4px;top:calc(0.8em + 3px);transform:translateY(-50%);width:5px;height:5px;border-radius:50%;background:var(--amber);} .ascroll .veil{display:none;font-family:"PT Sans Caption",sans-serif;font-weight:700;font-size:var(--fs-xs);letter-spacing:.5px;text-transform:uppercase;color:var(--cream-soft);opacity:.5;} .ascroll.hidden ul,.ascroll.hidden .alabel{display:none;} .ascroll.hidden .veil{display:block;} /* question arrow buttons (positioned in the gutter, see .navarrows above) */ .arrowbtn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); color:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer; transition:background .15s,transform .1s;} .arrowbtn:hover{background:rgba(255,255,255,.16);} .arrowbtn:active{transform:scale(.92);} .arrowbtn svg{width:22px;height:22px;} .arrowbtn.hidden{visibility:hidden;} /* ---------------- SCRIM + DRAWERS ---------------- */ .scrim{position:absolute;inset:0;z-index:8;background:rgba(18,24,18,.42);opacity:0;pointer-events:none; transition:opacity .25s;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);} .scrim.show{opacity:1;pointer-events:auto;} .drawer{position:absolute;left:var(--inset);right:var(--inset);bottom:96px;z-index:9; display:flex;flex-direction:column;gap:16px;transform:translateY(24px);opacity:0;pointer-events:none; transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .22s;} .drawer.show{transform:translateY(0);opacity:1;pointer-events:auto;} .handle{width:38px;height:5px;border-radius:3px;background:rgba(252,250,242,.4);margin:0 auto -2px;} .topbar{display:flex;justify-content:center;gap:16px;} .tbtn{display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;border:none;cursor:pointer; color:var(--cream);padding:8px 12px 6px;border-radius:16px;transition:background .18s;min-width:150px;} .tbtn .ic{width:22px;height:22px;display:block;} .tbtn .tl{font-size:var(--fs-sm);opacity:.72;} .tbtn:active{background:rgba(255,255,255,.12);} .tbtn.tapped{background:#fff;} .tbtn.tapped .tl{opacity:1;color:var(--ink);} .tbtn.tapped .ic{color:var(--ink);} .card-glass{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);border-radius:24px; backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%); box-shadow:0 10px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.5);} .pickcard{padding:20px 18px 16px;} .pickcard h4{margin:0 0 12px;font-size:var(--fs-base);font-weight:700;color:var(--cream-soft);} .legend{display:flex;gap:18px;margin-bottom:16px;} .legend span{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);opacity:.72;} .legend i{width:10px;height:10px;border-radius:50%;display:block;} .lg-visited{background:var(--amber);} .lg-current{background:var(--amber);box-shadow:0 0 0 1.5px #fff;} .lg-notyet{background:rgba(255,255,255,.3);} .gridscroll{max-height:196px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px;} .gridscroll::-webkit-scrollbar{width:0;height:0;display:none;} .gridscroll.faded{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent); mask-image:linear-gradient(180deg,#000 calc(100% - 28px),transparent);} .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;} .cell{height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center; font-weight:700;font-size:var(--fs-sm);cursor:pointer;border:1px solid transparent;transition:transform .1s;} .cell:active{transform:scale(.94);} .cell.notyet{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(252,250,242,.55);} .cell.visited{background:rgba(230,194,122,.22);border-color:rgba(230,194,122,.5);color:var(--cream-soft);} .cell.current{background:var(--amber);border-color:var(--amber);color:var(--ink);} /* voices */ .voicecard{padding:8px;flex:1;min-height:0;overflow:hidden;} .vscroll{height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;} .vscroll::-webkit-scrollbar{width:0;height:0;display:none;} .vsub{font-size:var(--fs-xs);letter-spacing:.8px;text-transform:uppercase;opacity:.55;font-weight:700;padding:12px 14px 6px;} .vrow{font-family:"PT Sans",sans-serif;font-size:var(--fs-base);padding:11px 14px;border-radius:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;} .vrow:active{background:rgba(255,255,255,.12);} .vrow.sel{background:rgba(230,194,122,.20);} .vrow small{font-family:"PT Sans";font-size:var(--fs-xs);opacity:.55;} .vrow .tick{color:var(--amber);width:16px;height:16px;opacity:0;} .vrow.sel .tick{opacity:1;} /* speaking-speed control: icon + value inline, label below */ /* Center the headphone icon over the "Speaking Speed" label (matching the Shuffle button, whose icon is centered too). The speed value rides along as an absolutely-positioned badge just right of the icon, so it no longer shoves the icon off-center. */ .speedbtn .speedtop{display:flex;align-items:center;justify-content:center;position:relative;} .speedbtn .speedval{position:absolute;left:50%;top:50%;transform:translate(15px,-50%); font-family:"PT Sans Narrow",sans-serif;font-weight:700;font-size:var(--fs-base);color:var(--amber);white-space:nowrap;} /* ---------------- GLASS NAV (from navbar.html reference) ---------------- */ .nav{position:absolute;left:var(--inset);right:var(--inset);bottom:20px;height:56px;z-index:10; display:flex;align-items:stretch;border-radius:24px;overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.10)); backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%); border:1px solid rgba(255,255,255,.22); box-shadow:0 12px 30px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.60), inset 0 -1px 0 rgba(0,0,0,.10),inset 0 0 26px rgba(255,255,255,.06);} .nav::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:0; background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 44%);} .item{flex:1;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;padding:0;} .item+.item::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%); width:1px;height:26px;background:var(--divider);transition:opacity .18s;} .item[data-tab="home"]{flex:65;} .item[data-tab="questions"]{flex:103;} .item.play{flex:77;} .item[data-tab="voices"]{flex:84;} .item.play svg{width:26px;height:26px;color:var(--amber);} .item.play .ic-pause{display:none;} .item.play.playing .ic-play{display:none;} .item.play.playing .ic-pause{display:block;} .wrap{display:flex;align-items:center;gap:3px;padding:7px 10px;border-radius:15px;transition:background .18s;} .lbl{font-size:var(--fs-xs);font-family:"PT Sans";} .chev{width:14px;height:14px;transition:transform .22s;} .lbl,.chev{color:#fff;mix-blend-mode:overlay;} /* vibrancy */ .item.sel .wrap{background:#fff;} .item.sel .lbl,.item.sel .chev{color:var(--ink);mix-blend-mode:normal;} .item.sel .chev{transform:rotate(180deg);} .item:not(.sel):active .wrap{background:rgba(255,255,255,.16);} /* ---------------- AUDIO RETRY TOAST ---------------- */ /* White card pinned just above the glass nav (nav sits at bottom:20px, h:56px). Hidden until a clip fails to load; cleared only on a successful load. */ .toast{position:absolute;left:var(--inset);right:var(--inset);bottom:88px;z-index:11; display:none;align-items:center;gap:10px;padding:12px 14px; background:#fff;color:#1F291F;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.18); font-family:"PT Sans",sans-serif;font-size:var(--fs-base);line-height:1.35;} .toast.show{display:flex;} .toast-ic{width:22px;height:22px;flex:0 0 auto;color:var(--amber);} /* ---------------- COMPLETION ---------------- */ /* ---------------- COMPLETION ---------------- */ .modal{position:absolute;inset:0;z-index:12;display:flex;align-items:center;justify-content:center;padding:32px; background:rgba(0,0,0,.60);opacity:0;pointer-events:none;transition:opacity .25s;} .modal.show{opacity:1;pointer-events:auto;} .completion-card{width:300px;border-radius:22px;overflow:hidden; background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.30); backdrop-filter:blur(11px) saturate(150%);-webkit-backdrop-filter:blur(11px) saturate(150%); box-shadow:0 10px 24px rgba(0,0,0,.32);} .comp-top{padding:22px 22px 26px;display:flex;flex-direction:column;align-items:center;text-align:center;} .comp-check{width:40px;height:40px;color:var(--amber);margin-bottom:22px;} .comp-title{font-family:"PT Sans",sans-serif;font-weight:400;font-size:1.125rem;color:var(--cream);margin:0 0 5px;line-height:1.3;} .comp-msg{font-family:"PT Sans",sans-serif;font-size:0.875rem;color:rgba(252,247,235,.78);margin:0;line-height:1.4;} .comp-rows{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.14);} .comp-row{display:flex;align-items:center;gap:12px;padding:15px 20px;background:none;border:none;cursor:pointer; text-align:left;font-family:"PT Sans",sans-serif;font-size:var(--fs-base);color:var(--cream);width:100%;} .comp-row + .comp-row{border-top:1px solid rgba(255,255,255,.14);} .comp-row:active{background:rgba(255,255,255,.08);} .comp-row svg{width:22px;height:22px;flex:0 0 auto;color:var(--cream);} .comp-row span{flex:1;} .comp-row.primary span{color:var(--amber);} .comp-row.primary svg{color:var(--amber);} /* ---------------- ONBOARDING COACH ---------------- */ .coach{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.74); display:flex;align-items:center;justify-content:center;cursor:pointer; opacity:0;pointer-events:none;transition:opacity .25s;} .coach.show{opacity:1;pointer-events:auto;} .coach-inner{width:320px;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 4px;} .coach-hero{position:relative;width:120px;height:112px;margin-bottom:14px;} .coach-circle{position:absolute;left:16px;top:6px;width:88px;height:88px;border-radius:50%;background:var(--amber); display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.35); animation:coachpulse 1.8s ease-in-out infinite;} .coach-circle svg{width:34px;height:34px;fill:var(--ink);margin-left:3px;} .coach-hand{position:absolute;left:66px;top:52px;width:44px;height:44px;color:var(--cream); filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));animation:coachtap 1.8s ease-in-out infinite;} .coach-title{font-family:"PT Sans",sans-serif;font-weight:700;font-size:var(--fs-lg);color:var(--cream);margin:0 0 8px;} .coach-sub{font-size:var(--fs-base);color:var(--cream);opacity:.82;margin:0 0 24px;line-height:1.4;} .coach-rows{display:flex;flex-direction:column;gap:16px;align-self:stretch;text-align:left;} .coach-row{display:flex;align-items:flex-start;gap:12px;font-size:var(--fs-base);color:var(--cream);line-height:1.3;} .coach-row svg{width:23px;height:23px;flex:0 0 auto;color:var(--cream);margin-top:-1px;} @keyframes coachpulse{0%,100%{transform:scale(1);}50%{transform:scale(1.07);}} @keyframes coachtap{0%,100%{transform:translate(0,0);}50%{transform:translate(-4px,-4px);}} :focus-visible{outline:2px solid var(--amber);outline-offset:2px;} /* ---------------- BUY / UNLOCK (gate) ---------------- */ .gate{padding:24px 20px 40px;overflow-y:auto;} .gate-back{display:flex;align-items:center;gap:6px;background:none;border:none;color:var(--cream); font-family:"PT Sans";font-size:var(--fs-base);cursor:pointer;padding:0;opacity:.9;} .gate-back svg{width:20px;height:20px;} .gate-body{margin-top:64px;display:flex;flex-direction:column;align-items:center;text-align:center;} .gate-lock{width:38px;height:38px;color:#fff;margin-bottom:14px;} .gate-title{font-family:"PT Sans";font-weight:700;font-size:var(--fs-lg);margin:0 0 8px;color:var(--cream-soft);} .gate-sub{font-size:var(--fs-sm);opacity:.72;margin:0 0 24px;} .valuecard{width:100%;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);border-radius:16px; padding:18px;margin-bottom:22px;text-align:left; backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,255,255,.25);} .vitem{display:flex;align-items:flex-start;gap:11px;font-size:var(--fs-base);color:var(--cream-soft);padding:6px 0;line-height:1.35;} .vchk{color:var(--amber);font-weight:700;flex:0 0 auto;} .gate-btn{width:100%;background:var(--amber);color:var(--ink);border:none;border-radius:12px;height:54px; font-family:"PT Sans";font-weight:700;font-size:var(--fs-md);cursor:pointer;} .gate-btn:active{filter:brightness(.96);} .gate-fine{font-size:var(--fs-xs);opacity:.6;margin:10px 0 14px;} .gate-link{background:none;border:none;color:var(--amber);font-family:"PT Sans";font-weight:700;font-size:var(--fs-sm);cursor:pointer;} .keyinput{width:100%;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);border-radius:12px; padding:14px 16px;color:var(--cream-soft);font-size:var(--fs-base);font-family:"PT Sans";margin:8px 0 0;text-align:center;letter-spacing:1px;} .keyinput::placeholder{color:rgba(255,255,255,.4);letter-spacing:1px;} .keyinput.bad{border-color:#e0736b;} .keyerror{display:none;color:#e0736b;font-size:var(--fs-xs);margin:10px 0 0;} .keyerror.show{display:block;} .gate .gate-btn{margin-top:18px;} /* locked home card */ .card .cardlock{position:absolute;top:18px;right:18px;width:18px;height:18px;color:#5d594f;} .card{position:relative;} /* completion counter badge on each home card */ .card .donecount{font-family:"PT Sans",sans-serif;font-size:var(--fs-sm);font-weight:700; color:#8a6d2f;margin-top:3px;display:inline-flex;align-items:center;gap:5px;} /* onboarding coach — larger type + more breathing room on desktop only (mobile unchanged) */ html[data-view="desktop"] .coach-inner{width:440px;} html[data-view="desktop"] .coach-hero{margin-bottom:28px;} html[data-view="desktop"] .coach-title{font-size:var(--fs-xl);margin:0 0 16px;} html[data-view="desktop"] .coach-sub{font-size:var(--fs-md);margin:0 0 40px;line-height:1.5;} html[data-view="desktop"] .coach-rows{gap:28px;} html[data-view="desktop"] .coach-row{font-size:var(--fs-md);gap:16px;line-height:1.45;} html[data-view="desktop"] .coach-row svg{width:28px;height:28px;} /* onboarding copy that differs by viewport: mobile swipe vs desktop buttons/keys */ html[data-view="desktop"] .only-mobile{display:none;} html[data-view="mobile"] .only-desktop{display:none;} /* ============================================================ DRIFTING LIGHT BLOOMS (animated fork) Bloom look ported 1:1 from the OG prototypes. Motion is pure CSS keyframes so it is GPU-composited: it keeps running when the PWA is backgrounded (rAF gets paused there) and auto-freezes under the global prefers-reduced-motion rule (above) for a static lit fallback. Each bloom sits in a .drift wrapper: the wrapper translates on one period and the bloom translates on a second, coprime period. Because the two periods never realign, the summed path reads as random — no visible loop — which was the one gripe with the old fixed-path keyframes. ============================================================ */ #app{isolation:isolate;} /* contain the blend to the phone frame */ .bgfx{position:absolute;inset:0;overflow:hidden;pointer-events:none;} .bgfx .drift{position:absolute;inset:0;will-change:transform;} .bgfx .bloom{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform;} /* Very slow "lava lamp" roam: each bloom is the sum of a wide wrapper drift and a tighter bloom wobble. Both keyframes travel roughly equally in x AND y and visit every corner (like a 90s screensaver bounce), so the path reads as free floating, not a left-right slide. Durations are long primes so no two ever realign — the loop is effectively never-repeating, and the per-second speed stays calm despite the wider range. */ .bgfx .d1{animation:driftA 79s ease-in-out infinite;} .bgfx .d2{animation:driftB 67s ease-in-out infinite reverse;} .bgfx .b1{animation:wobbleA 53s ease-in-out infinite;} .bgfx .b2{animation:wobbleB 61s ease-in-out infinite;} @keyframes driftA{ 0%{transform:translate(-72px,-52px);} 20%{transform:translate(56px,-62px);} 40%{transform:translate(78px,38px);} 60%{transform:translate(-28px,66px);} 80%{transform:translate(-76px,12px);} 100%{transform:translate(-72px,-52px);} } @keyframes driftB{ 0%{transform:translate(64px,44px);} 20%{transform:translate(-58px,58px);} 40%{transform:translate(-70px,-40px);} 60%{transform:translate(34px,-64px);} 80%{transform:translate(72px,-6px);} 100%{transform:translate(64px,44px);} } @keyframes wobbleA{ 0%{transform:translate(40px,32px);} 25%{transform:translate(-46px,16px);} 50%{transform:translate(22px,-44px);} 75%{transform:translate(50px,26px);} 100%{transform:translate(40px,32px);} } @keyframes wobbleB{ 0%{transform:translate(-38px,-30px);} 25%{transform:translate(42px,-22px);} 50%{transform:translate(-26px,46px);} 75%{transform:translate(32px,22px);} 100%{transform:translate(-38px,-30px);} } /* Sizes are % of the phone frame (reference: the 360×780 prototype), not fixed px, so each bloom keeps the prototype's frame-relative scale on any device — a full-viewport phone is larger than 360×780, and fixed-px blooms would cover a smaller fraction there and look shrunk. Ratios below are the prototype values ÷ 360 (width/margin) and ÷ 780 (height). */ /* 2008 · NAVY — cool light source + faint warm */ #app[data-bank="2008"] .b1{width:150%;height:56.4%;left:50%;top:6%;margin-left:-75%; background:radial-gradient(circle at 50% 50%, rgba(168,188,222,.50) 0%, rgba(168,188,222,.18) 38%, transparent 62%);filter:blur(26px);} #app[data-bank="2008"] .b2{width:122.2%;height:48.7%;left:82%;top:84%;margin-left:-61.1%; background:radial-gradient(circle at 50% 50%, rgba(214,152,120,.30) 0%, transparent 60%);filter:blur(36px);} /* n400 + demo · GREEN — sage light source + faint gold */ #app[data-bank="n400"] .b1,#app[data-bank="demo"] .b1{width:150%;height:56.4%;left:50%;top:6%;margin-left:-75%; background:radial-gradient(circle at 50% 50%, rgba(196,210,176,.50) 0%, rgba(196,210,176,.18) 38%, transparent 62%);filter:blur(26px);} #app[data-bank="n400"] .b2,#app[data-bank="demo"] .b2{width:122.2%;height:48.7%;left:82%;top:84%;margin-left:-61.1%; background:radial-gradient(circle at 50% 50%, rgba(214,182,128,.28) 0%, transparent 60%);filter:blur(36px);} /* 2025 · PURPLE blob floating + faint blue depth */ #app[data-bank="2025"] .b1{width:155.6%;height:66.7%;left:50%;top:40%;margin-left:-77.8%; background:radial-gradient(circle at 50% 50%, rgba(138,98,208,.52) 0%, rgba(138,98,208,.20) 40%, transparent 64%);filter:blur(30px);} #app[data-bank="2025"] .b2{width:127.8%;height:51.3%;left:80%;top:88%;margin-left:-63.9%; background:radial-gradient(circle at 50% 50%, rgba(74,116,190,.30) 0%, transparent 60%);filter:blur(38px);}