/* AlecOS — window-manager styles (SHELL) · PRESENTATION v3 --------------------- macOS "Spaces": ONE app-window centered on the aurora wallpaper at a time; the body scrolls a tall .aos-track spacer and wm.js lerps a horizontal slide/scale/ fade between apps. Menu bar, dock, caption, hint, progress are viewport-fixed. */ /* ===================== ROOT + WALLPAPER ===================== */ .aos-root{position:fixed;inset:0;z-index:0;} .aos-root.no-anim *{transition:none !important;animation:none !important;} .aos-wall{ position:fixed;inset:0;z-index:0;background:var(--wall); /* the aurora is atmosphere, not subject — pulled well back so the app leads */ filter:saturate(.6) brightness(.5); opacity:0;transition:opacity .9s var(--ease); } /* stage lighting: a soft key light where the window sits + a deeper cinematic vignette, so the active app reads as a product spotlit on a dark keynote stage. */ .aos-wall::after{content:"";position:absolute;inset:0;pointer-events:none; background: /* soft key light pooled where the window sits */ radial-gradient(54% 44% at 50% 52%, rgba(255,250,242,.07), transparent 62%), /* deep falloff so the unused sides read as intentional empty space, not leftover */ radial-gradient(118% 98% at 50% 50%, transparent 24%, rgba(3,3,7,.80) 70%, rgba(2,2,5,.95) 100%);} .aos-root.live .aos-wall{opacity:1;} /* the tall spacer that creates scroll room (in normal flow on ) */ .aos-track{position:relative;width:1px;pointer-events:none;opacity:0;} /* ===================== MENU BAR ===================== */ .aos-menubar{ position:fixed;top:0;left:0;right:0;height:25px;z-index:60; display:flex;align-items:center;justify-content:space-between; padding:0 12px 0 14px; font-size:13.5px;color:#f4f5f8; background:rgba(28,28,34,.36); -webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8); box-shadow:inset 0 -.5px 0 rgba(255,255,255,.08); text-shadow:0 1px 2px rgba(0,0,0,.25); opacity:0;transform:translateY(-100%); transition:opacity .45s var(--ease) .22s,transform .5s var(--ease) .22s; /* drops in after the wallpaper */ } .aos-root.live .aos-menubar{opacity:1;transform:none;} .mb-left{display:flex;align-items:center;gap:19px;min-width:0;} .mb-apple{display:inline-flex;color:#f4f4f6;opacity:.92;margin-right:-5px;} .mb-app{font-weight:600;letter-spacing:-.005em;white-space:nowrap;} /* macOS uses semibold, not bold */ .mb-menus{color:#c9cbd2;font-weight:400;white-space:nowrap;opacity:.88;} .mb-right{display:flex;align-items:center;gap:15px;color:#eef0f4;flex:none;} .mb-ico{display:inline-flex;align-items:center;opacity:.9;} .mb-clock{font-weight:500;letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap;} @media (max-width:900px){ .mb-menus{display:none;} } /* ===================== STAGE (holds the app-spaces) ===================== */ .aos-stage{ position:fixed;inset:0;z-index:10;overflow:hidden; opacity:0;transform:scale(1.04);transform-origin:50% 46%; /* settles in from a slight zoom — reads as pushing through the boot screen into the desktop */ transition:opacity .6s var(--ease) .1s,transform .7s var(--ease-out) .1s; } .aos-root.live .aos-stage{opacity:1;transform:none;} /* ===================== WINDOWS (each an app "Space") ===================== */ .aos-win{ position:absolute;display:flex;flex-direction:column;overflow:hidden; border-radius:12px;background:var(--surface); box-shadow:var(--shadow-win); outline:1px solid rgba(255,255,255,.08);outline-offset:-1px; transform-origin:center center;will-change:transform,opacity; /* transform + opacity are driven per-frame by wm.js (the Spaces swipe). A short transition smooths dock jumps & focus changes without fighting the lerp. */ transition:box-shadow .4s var(--ease),filter .4s var(--ease); } /* the hero window: deep floating shadow + a whisper of its own accent color as a halo, plus a hairline top rim-light for that premium glass edge. (blur/dim of non-front windows is driven per-frame inline by wm.js for the depth-of-field effect.) */ .aos-win.front{ box-shadow:var(--shadow-win-active), 0 0 70px -12px color-mix(in srgb, var(--accent) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.10); } .aos-titlebar{ height:38px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px; background:var(--titlebar);border-bottom:1px solid rgba(0,0,0,.5); box-shadow:inset 0 1px 0 rgba(255,255,255,.05);position:relative;cursor:default;user-select:none; } .aos-lights{display:flex;gap:8px;align-items:center;flex:none;z-index:2;} .aos-light{width:12px;height:12px;border-radius:50%;display:grid;place-items:center;position:relative;} .aos-light svg{opacity:0;transition:opacity .12s;} .aos-lights:hover .aos-light svg{opacity:1;} .aos-light.close{background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2);} .aos-light.min{background:#febc2e;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2);} .aos-light.zoom{background:#28c840;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2);} .aos-win:not(.front) .aos-light{background:#4a4a52;} .aos-title{position:absolute;left:0;right:0;text-align:center;font-size:13px;font-weight:600; color:#c9cbd2;pointer-events:none;letter-spacing:-.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 120px;} .aos-win:not(.front) .aos-title{color:#7c7c86;} .aos-titlebar-spacer{margin-left:auto;width:54px;flex:none;} .aos-body{position:relative;flex:1;min-height:0;overflow:auto;background:var(--surface);} /* ===================== LIVE DEMO ===================== */ .aos-demo{position:relative;border-radius:12px;overflow:hidden;background:#0b0b0e; border:1px solid var(--line);min-height:200px;display:flex;} .aos-demo iframe{width:100%;border:0;display:block;background:#0b0b0e;} .aos-demo-launch{ flex:1;display:flex;align-items:center;gap:14px;cursor:pointer;border:0;text-align:left; padding:20px 22px;color:var(--ink);font:inherit; background:radial-gradient(120% 160% at 12% 20%,rgba(255,255,255,.05),transparent 60%); transition:background .2s; } .aos-demo-launch:hover{background:radial-gradient(120% 160% at 12% 20%,rgba(255,255,255,.09),transparent 60%);} .aos-demo-play{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center; color:#0b0b0e;background:var(--accent);box-shadow:0 6px 18px -6px var(--accent);} .aos-demo-txt{display:flex;flex-direction:column;gap:3px;} .aos-demo-txt b{font-size:14px;font-weight:600;} .aos-demo-txt i{font-style:normal;font-size:12px;color:var(--muted);} .aos-demo-spin{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted); font-family:var(--mono);font-size:12px;letter-spacing:.1em;} /* ===================== DOCK ===================== */ .aos-dock{ position:fixed;left:50%;bottom:10px;transform:translateX(-50%);z-index:55; display:flex;align-items:flex-end;gap:8px;padding:7px 9px; border-radius:24px; background:rgba(50,50,58,.32); -webkit-backdrop-filter:blur(18px) saturate(1.7);backdrop-filter:blur(18px) saturate(1.7); box-shadow:0 1px 0 rgba(255,255,255,.16) inset,0 0 0 .5px rgba(255,255,255,.12), 0 18px 40px -14px rgba(0,0,0,.7); opacity:0;transition:opacity .4s var(--ease) .48s; /* rises last — end of the curtain-up sequence */ } .aos-root.live .aos-dock{opacity:1;} .aos-dock-item{position:relative;border:0;background:none;padding:0;cursor:pointer;display:block; transition:transform .22s cubic-bezier(.34,1.56,.64,1);transform-origin:bottom center;} .aos-dock-item .tile{ display:grid;place-items:center;width:54px;height:54px;border-radius:14px;overflow:hidden; background:linear-gradient(155deg,color-mix(in srgb,var(--tone) 40%,#24242e),#141419); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.28),inset 0 -8px 14px rgba(0,0,0,.45), 0 5px 12px -4px rgba(0,0,0,.65); } .aos-dock-item .tile svg{width:100%;height:100%;display:block;} .aos-dock-item .run{position:absolute;left:50%;bottom:-6px;width:4px;height:4px;border-radius:50%; background:#e6e6ee;transform:translateX(-50%) scale(0);transition:transform .2s; box-shadow:0 0 5px rgba(255,255,255,.5);} .aos-dock-item.active .run{transform:translateX(-50%) scale(1);} .aos-dock-item .tip{position:absolute;left:50%;top:-42px;transform:translateX(-50%) translateY(6px); padding:5px 12px;border-radius:9px;font-size:var(--t2);font-weight:500;white-space:nowrap;color:#f2f2f5; background:rgba(40,40,46,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); box-shadow:0 8px 22px -8px #000,0 0 0 .5px rgba(255,255,255,.1); opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;} .aos-dock-item .tip::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px; background:inherit;transform:translateX(-50%) rotate(45deg);} .aos-dock-item:hover{transform:translateY(-11px) scale(1.32);} .aos-dock-item:hover + .aos-dock-item, .aos-dock-item:has(+ .aos-dock-item:hover){transform:translateY(-4px) scale(1.14);} .aos-dock-item:hover .tip{opacity:1;transform:translateX(-50%) translateY(0);} .aos-dock-item:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:16px;} /* (the generated fake cursor was removed — the real OS pointer reads more like a real machine) */ /* ===================== FOCUS / INTERACTION STATES ===================== */ .aos-dock-item:focus-visible,.boot-hint:focus-visible,.aos-demo-launch:focus-visible{ outline:2px solid var(--amber);outline-offset:3px;border-radius:12px;} .aos-dock-item:active{transform:translateY(-4px) scale(1.18);} /* click press-down */ @keyframes aos-bounce{0%,100%{transform:translateY(0) scale(1);}40%{transform:translateY(-14px) scale(1.16);}} .aos-dock-item.launch{animation:aos-bounce .5s var(--ease);} /* ===================== HEADING (per-app title + description) ===================== */ /* A magazine-style heading that sits in the band ABOVE the active window, aligned to that window's left edge (wm.js sets left/bottom/width per app). It reads over the dark wallpaper, so it's text-only with a soft shadow — no card. */ .aos-caption{ position:fixed;z-index:53;pointer-events:none;text-align:left; left:var(--sp6);top:120px;width:min(52vw,640px); font-family:-apple-system,"SF Pro Display","SF Pro Text","Inter",system-ui,sans-serif; } .aos-caption .cap-k{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.26em; text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 16px rgba(0,0,0,.85);} .aos-caption h2{font-size:clamp(22px,2.4vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.03; color:#fff;margin:0;max-width:22ch;text-wrap:balance;text-shadow:0 2px 4px rgba(0,0,0,.6),0 3px 40px rgba(0,0,0,.7);} .aos-caption p{font-size:clamp(13px,1.05vw,15px);font-weight:450;color:#f2f0f6;margin:9px 0 0;line-height:1.45; max-width:56ch;text-shadow:0 1px 3px rgba(0,0,0,.9),0 2px 18px rgba(0,0,0,.9);} /* compact spec line — the engineering, stated plainly */ .aos-caption .cap-how{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#c6c2d0; margin-top:11px;padding-left:14px;position:relative;text-shadow:0 1px 3px rgba(0,0,0,.95),0 2px 14px rgba(0,0,0,.9);} .aos-caption .cap-how::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:1px;background:var(--accent);opacity:.8;} /* opacity + transform are driven per-frame by wm.js render(), synced to the scroll swipe (no CSS transition — the scroll lerp IS the smoothing). Reduced-motion pins opacity:1. */ .aos-caption{opacity:1;will-change:opacity,transform;} /* ===================== SCROLL HINT + PROGRESS ===================== */ .aos-hint{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:52; display:flex;flex-direction:column;align-items:center;gap:10px; font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#cfcdd8; opacity:0;transition:opacity .5s var(--ease);pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.6);} .aos-root.live .aos-hint{opacity:.9;} /* must out-specify `.aos-root.live .aos-hint` (0,3,0) or the hide never lands */ .aos-root.live .aos-hint.hide,.aos-hint.hide{opacity:0;} .aos-hint .wheel{width:22px;height:34px;border:1.5px solid #cfcdd8;border-radius:11px;position:relative;opacity:.75;} .aos-hint .wheel span{position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;background:#cfcdd8; transform:translateX(-50%);animation:aos-wheel 1.7s var(--ease) infinite;} @keyframes aos-wheel{0%{opacity:0;transform:translate(-50%,0);}30%{opacity:1;}70%{opacity:1;}100%{opacity:0;transform:translate(-50%,12px);}} /* horizontal progress — matches the sideways motion between apps; tints to the active chapter */ .aos-progress{position:fixed;top:33px;left:50%;transform:translateX(-50%);width:min(34vw,360px);height:2.5px; z-index:52;border-radius:3px;background:rgba(255,255,255,.09);opacity:0;transition:opacity .5s;} .aos-root.live .aos-progress{opacity:1;} .aos-progress i{position:absolute;left:0;top:0;height:100%;width:0;border-radius:3px;display:block; background:var(--accent,var(--amber));box-shadow:0 0 10px color-mix(in srgb,var(--accent,#ecc270) 55%,transparent); transition:width .25s var(--ease),background .4s var(--ease);} /* ===================== BOOT (clean Mac-style startup) ===================== */ .aos-boot{position:fixed;inset:0;z-index:90;overflow:hidden;display:grid;place-items:center; background:radial-gradient(62% 54% at 50% 42%,rgba(60,52,96,.18),transparent 72%),#060608; transition:opacity .9s var(--ease);} .aos-boot.gone{opacity:0;pointer-events:none;} .boot-stage{display:flex;flex-direction:column;align-items:center;text-align:center; transition:transform 1s var(--ease-out),opacity .7s var(--ease);} .aos-boot.gone .boot-stage{transform:scale(1.06);opacity:0;} .boot-logo{color:#f2f2f6;opacity:.94;margin-bottom:26px;display:flex;} .boot-logo svg{width:44px;height:44px;} .boot-h1{font-family:-apple-system,"SF Pro Display","Inter",system-ui,sans-serif; font-size:clamp(40px,5vw,68px);font-weight:600;letter-spacing:-.035em;line-height:1;color:#fff;margin:0; text-shadow:0 2px 54px rgba(120,110,170,.3);} .boot-sub{font-family:var(--mono);font-size:clamp(9px,1vw,12px);letter-spacing:.3em;text-transform:uppercase; color:#8f8aa4;margin-top:18px;} .boot-bar{width:220px;height:4px;border-radius:3px;margin-top:44px;overflow:hidden;background:rgba(255,255,255,.1);} .boot-bar i{display:block;height:100%;width:0;border-radius:3px; background:linear-gradient(90deg,#b9b4d6,#fff);animation:boot-fill 1.5s var(--ease-out) forwards;} @keyframes boot-fill{from{width:0;}to{width:100%;}} .boot-hint{margin-top:30px;display:inline-flex;flex-direction:column;align-items:center;gap:.55em;cursor:pointer; background:none;border:0;padding:.5em 1em;font-family:var(--mono);font-size:clamp(12px,1.1vw,14px); letter-spacing:.26em;text-transform:uppercase;color:#b0abc2;transition:color .25s; opacity:0;animation:boot-hint-in .6s var(--ease) 1.5s forwards;} .boot-hint:hover{color:#d6d2e6;} .boot-hint svg{color:inherit;animation:boot-chev 1.9s ease-in-out infinite;} @keyframes boot-chev{0%,100%{transform:translateY(-2px);opacity:.45;}50%{transform:translateY(3px);opacity:1;}} @keyframes boot-hint-in{to{opacity:1;}} .boot-logo,.boot-h1,.boot-sub{animation:boot-fadein .8s var(--ease) both;} .boot-h1{animation-delay:.12s;}.boot-sub{animation-delay:.26s;} @keyframes boot-fadein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} /* ===================== MOBILE (stacked native scroll) ===================== */ .aos-root.is-mobile{position:relative;} .aos-root.is-mobile .aos-stage{position:relative;inset:auto;overflow:visible;height:auto;opacity:1; display:flex;flex-direction:column;gap:22px;padding:38px 12px 96px;} .aos-root.is-mobile .aos-win{position:relative!important;left:auto!important;top:auto!important; width:100%!important;height:auto!important;min-height:72vh;transform:none!important;opacity:1!important; pointer-events:auto!important;} .aos-root.is-mobile .aos-caption,.aos-root.is-mobile .aos-hint,.aos-root.is-mobile .aos-progress{display:none;} .aos-root.is-mobile .aos-dock{bottom:0;left:0;right:0;transform:none;border-radius:18px 18px 0 0;justify-content:center; padding:8px 10px;flex-wrap:wrap;} /* ===================== REDUCED MOTION ===================== */ @media (prefers-reduced-motion:reduce){ .aos-menubar,.aos-stage,.aos-wall,.aos-dock,.aos-win,.aos-caption{transition:none!important;} .aos-hint .wheel span,.boot-hint svg,.boot-logo,.boot-h1,.boot-sub{animation:none!important;} .boot-bar i{animation:none!important;width:100%!important;} .boot-hint{animation:none!important;opacity:1!important;} .aos-dock-item.launch{animation:none!important;} .aos-boot{transition:opacity .2s;} } /* ===================== SCROLL HINT + PROGRESS ===================== */ .aos-hint{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:52; display:flex;flex-direction:column;align-items:center;gap:10px; font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:#cfcdd8; opacity:0;transition:opacity .5s var(--ease);pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.6);} .aos-root.live .aos-hint{opacity:.9;} /* must out-specify `.aos-root.live .aos-hint` (0,3,0) or the hide never lands */ .aos-root.live .aos-hint.hide,.aos-hint.hide{opacity:0;} .aos-hint .wheel{width:22px;height:34px;border:1.5px solid #cfcdd8;border-radius:11px;position:relative;opacity:.75;} .aos-hint .wheel span{position:absolute;left:50%;top:6px;width:3px;height:6px;border-radius:2px;background:#cfcdd8; transform:translateX(-50%);animation:aos-wheel 1.7s var(--ease) infinite;} @keyframes aos-wheel{0%{opacity:0;transform:translate(-50%,0);}30%{opacity:1;}70%{opacity:1;}100%{opacity:0;transform:translate(-50%,12px);}} /* horizontal progress — matches the sideways motion between apps; tints to the active chapter */ .aos-progress{position:fixed;top:33px;left:50%;transform:translateX(-50%);width:min(34vw,360px);height:2.5px; z-index:52;border-radius:3px;background:rgba(255,255,255,.09);opacity:0;transition:opacity .5s;} .aos-root.live .aos-progress{opacity:1;} .aos-progress i{position:absolute;left:0;top:0;height:100%;width:0;border-radius:3px;display:block; background:var(--accent,var(--amber));box-shadow:0 0 10px color-mix(in srgb,var(--accent,#ecc270) 55%,transparent); transition:width .25s var(--ease),background .4s var(--ease);} /* ===================== BOOT (clean Mac-style startup) ===================== */ .aos-boot{position:fixed;inset:0;z-index:90;overflow:hidden;display:grid;place-items:center; background:radial-gradient(62% 54% at 50% 42%,rgba(60,52,96,.18),transparent 72%),#060608; transition:opacity .9s var(--ease);} .aos-boot.gone{opacity:0;pointer-events:none;} .boot-stage{display:flex;flex-direction:column;align-items:center;text-align:center; transition:transform 1s var(--ease-out),opacity .7s var(--ease);} .aos-boot.gone .boot-stage{transform:scale(1.06);opacity:0;} .boot-logo{color:#f2f2f6;opacity:.94;margin-bottom:26px;display:flex;} .boot-logo svg{width:44px;height:44px;} .boot-h1{font-family:-apple-system,"SF Pro Display","Inter",system-ui,sans-serif; font-size:clamp(40px,5vw,68px);font-weight:600;letter-spacing:-.035em;line-height:1;color:#fff;margin:0; text-shadow:0 2px 54px rgba(120,110,170,.3);} .boot-sub{font-family:var(--mono);font-size:clamp(9px,1vw,12px);letter-spacing:.3em;text-transform:uppercase; color:#8f8aa4;margin-top:18px;} .boot-bar{width:220px;height:4px;border-radius:3px;margin-top:44px;overflow:hidden;background:rgba(255,255,255,.1);} .boot-bar i{display:block;height:100%;width:0;border-radius:3px; background:linear-gradient(90deg,#b9b4d6,#fff);animation:boot-fill 1.5s var(--ease-out) forwards;} @keyframes boot-fill{from{width:0;}to{width:100%;}} .boot-hint{margin-top:30px;display:inline-flex;flex-direction:column;align-items:center;gap:.55em;cursor:pointer; background:none;border:0;padding:.5em 1em;font-family:var(--mono);font-size:clamp(12px,1.1vw,14px); letter-spacing:.26em;text-transform:uppercase;color:#b0abc2;transition:color .25s; opacity:0;animation:boot-hint-in .6s var(--ease) 1.5s forwards;} .boot-hint:hover{color:#d6d2e6;} .boot-hint svg{color:inherit;animation:boot-chev 1.9s ease-in-out infinite;} @keyframes boot-chev{0%,100%{transform:translateY(-2px);opacity:.45;}50%{transform:translateY(3px);opacity:1;}} @keyframes boot-hint-in{to{opacity:1;}} .boot-logo,.boot-h1,.boot-sub{animation:boot-fadein .8s var(--ease) both;} .boot-h1{animation-delay:.12s;}.boot-sub{animation-delay:.26s;} @keyframes boot-fadein{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} /* ===================== MOBILE (stacked native scroll) ===================== */ .aos-root.is-mobile{position:relative;} .aos-root.is-mobile .aos-stage{position:relative;inset:auto;overflow:visible;height:auto;opacity:1; display:flex;flex-direction:column;gap:22px;padding:38px 12px 96px;} .aos-root.is-mobile .aos-win{position:relative!important;left:auto!important;top:auto!important; width:100%!important;height:auto!important;min-height:72vh;transform:none!important;opacity:1!important; pointer-events:auto!important;} .aos-root.is-mobile .aos-caption,.aos-root.is-mobile .aos-hint,.aos-root.is-mobile .aos-progress{display:none;} .aos-root.is-mobile .aos-dock{bottom:0;left:0;right:0;transform:none;border-radius:18px 18px 0 0;justify-content:center; padding:8px 10px;flex-wrap:wrap;} /* ===================== REDUCED MOTION ===================== */ @media (prefers-reduced-motion:reduce){ .aos-menubar,.aos-stage,.aos-wall,.aos-dock,.aos-win,.aos-caption{transition:none!important;} .aos-hint .wheel span,.boot-hint svg,.boot-logo,.boot-h1,.boot-sub{animation:none!important;} .boot-bar i{animation:none!important;width:100%!important;} .boot-hint{animation:none!important;opacity:1!important;} .aos-dock-item.launch{animation:none!important;} .aos-boot{transition:opacity .2s;} } /* ===================== SIDE NOTES + SIGNAL FLOW ===================== Left gutter: how the chapter's thing works, as a flowing signal path. Right gutter: its specs. Above the wallpaper (z 0), below the stage (z 10), so a window always covers them. Never interactive. */ .aos-decor{position:fixed;inset:0;z-index:5;pointer-events:none;overflow:hidden; opacity:0;transition:opacity 1s var(--ease) .5s;} .aos-root.live .aos-decor{opacity:1;} .aos-root.no-decor .aos-decor,.aos-root.is-mobile .aos-decor{opacity:0;} .dc-col{position:absolute;top:50%;transform:translateY(-50%); text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.8); width:calc(var(--gut,0px) - 42px);max-width:250px; display:flex;flex-direction:column;gap:7px;} .dc-col.dc-l{left:20px;text-align:right;align-items:flex-end;} .dc-col.dc-r{right:20px;text-align:left;align-items:flex-start;} .dc-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase; color:#ecc270;opacity:.85;padding-bottom:7px;margin-bottom:2px;position:relative;} .dc-t::after{content:"";position:absolute;bottom:0;width:38px;height:1px; background:linear-gradient(90deg,transparent,rgba(236,194,112,.45));} .dc-col.dc-l .dc-t::after{right:0;} .dc-col.dc-r .dc-t::after{left:0;background:linear-gradient(270deg,transparent,rgba(236,194,112,.45));} /* ---- right column: specs ---- */ .dc-v{font-family:var(--mono);font-size:11px;line-height:1.5;color:#e6e3ee;opacity:.66; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;} /* ---- left column: the signal, rendered ---- */ /* the waveform owns the whole gutter; the stage labels ride on top of it */ .dc-flow{position:relative;width:100%;box-sizing:border-box;min-height:calc(var(--n,4) * 46px);} .dc-wave{position:absolute;inset:0;width:100%;height:100%;display:block; filter:drop-shadow(0 0 22px rgba(0,0,0,.85));} .dc-step{position:relative;z-index:2;display:flex;align-items:center;justify-content:flex-end; height:46px;box-sizing:border-box;} .dc-step span{font-family:var(--mono);font-size:11.5px;line-height:1.35;color:#fff;opacity:.9; white-space:nowrap;letter-spacing:.01em; text-shadow:0 1px 3px #000,0 0 12px rgba(0,0,0,.95),0 0 26px rgba(0,0,0,.8);} /* the wallpaper is bright and amber exactly here — lay down a soft dark ground so the ribbon and its labels separate from it instead of blending in */ .dc-col.dc-l::before{content:"";position:absolute;z-index:0; left:-34px;right:-30px;top:-42px;bottom:-42px;pointer-events:none; background:radial-gradient(72% 58% at 62% 50%,rgba(6,6,10,.88),rgba(6,6,10,.55) 55%,transparent 78%);} .dc-col.dc-l > *{position:relative;z-index:1;} /* entrance stagger, replayed on every chapter change */ .dc-col .dc-t,.dc-col .dc-v,.dc-col .dc-step{opacity:0;transform:translateY(7px);} .dc-col.in .dc-t{animation:dc-rise-t .5s var(--ease) forwards;} .dc-col.in .dc-v{animation:dc-rise .5s var(--ease) forwards; animation-delay:calc(.07s + var(--i,0) * .06s);} .dc-col.in .dc-step{animation:dc-rise-s .5s var(--ease) forwards; animation-delay:calc(.07s + var(--i,0) * .07s);} @keyframes dc-rise{to{opacity:.66;transform:none;}} @keyframes dc-rise-t{to{opacity:.85;transform:none;}} @keyframes dc-rise-s{to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){ .dc-col .dc-t,.dc-col .dc-v,.dc-col .dc-step{opacity:1;transform:none;animation:none !important;} .dc-col .dc-v{opacity:.66;} .dc-col .dc-t{opacity:.85;} }