:root { --void: #050810; --deep: #080d1a; --glass: rgba(255,255,255,0.04); --rim: rgba(255,255,255,0.07); --text: rgba(255,255,255,0.9); --sub: rgba(255,255,255,0.45); --orb-a: #4f9eff; --orb-b: #a78bfa; --orb-c: #34d399; --orb-d: #fb7185; --accent: #4f9eff; --green: #34d399; --red: #fb7185; --gold: #fbbf24; --sans: 'Inter', sans-serif; --display:'Syne', sans-serif; /* ── SCALE TOKENS ── */ --orb-size: clamp(160px, 28vmin, 680px); --orb-ring1: clamp(14px, 2.5vmin, 70px); --orb-ring2: clamp(28px, 5vmin, 140px); --orb-ring3: clamp(50px, 9vmin, 240px); --fs-brand: clamp(13px, 1.8vmin, 52px); --fs-school: clamp(7px, 0.9vmin, 24px); --fs-pill: clamp(8px, 0.85vmin, 22px); --fs-clock: clamp(9px, 0.9vmin, 24px); --fs-orb-lbl: clamp(10px, 1.2vmin, 38px); --fs-orb-hint: clamp(8px, 0.85vmin, 24px); --fs-bubble: clamp(12px, 1.15vmin, 34px); --fs-blabel: clamp(7px, 0.7vmin, 20px); --fs-identity: clamp(10px, 1.1vmin, 32px); --fs-badge: clamp(7px, 0.7vmin, 18px); --fs-stop: clamp(9px, 0.9vmin, 28px); --fs-wake: clamp(8px, 0.8vmin, 22px); --fs-hero: clamp(9px, 0.85vmin, 24px); --pad-scene: clamp(12px, 2.5vmin, 80px); --pad-h: clamp(14px, 3vmin, 96px); --gap-topbar: clamp(7px, 1.2vmin, 36px); --pill-py: clamp(4px, 0.6vmin, 18px); --pill-px: clamp(8px, 1.2vmin, 36px); --dot-size: clamp(4px, 0.6vmin, 16px); --avatar-size: clamp(18px, 2.5vmin, 68px); --bubble-pad: clamp(8px, 1.1vmin, 32px); --stop-py: clamp(9px, 1.1vmin, 36px); --stop-px: clamp(18px, 2.8vmin, 80px); --kbd-size: clamp(44px, 4.5vmin, 90px); /* Mini orb satellites */ --mini-orb: clamp(20px, 3vmin, 80px); --orbit-r: clamp(120px, 19vmin, 520px); /* Camera in orb */ --cam-inset: clamp(16px, 2vmin, 48px); /* Hero card */ --hero-w: clamp(120px, 18vmin, 420px); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: var(--void); color: var(--text); font-family: var(--sans); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; } /* ── AURORA ── */ .aurora { position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none; opacity:0.6; } .aurora-blob { position:absolute; border-radius:50%; filter:blur(100px); opacity:0.05; animation:drift linear infinite; } .aurora-blob:nth-child(1){width:clamp(260px,55vw,1800px);height:clamp(260px,55vw,1800px);background:var(--orb-a);top:-20%;left:-15%;animation-duration:28s;animation-direction:alternate;} .aurora-blob:nth-child(2){width:clamp(180px,40vw,1100px);height:clamp(180px,40vw,1100px);background:var(--orb-b);bottom:-15%;right:-10%;animation-duration:22s;animation-direction:alternate-reverse;} .aurora-blob:nth-child(3){width:clamp(130px,30vw,900px);height:clamp(130px,30vw,900px);background:var(--orb-c);top:40%;left:58%;animation-duration:35s;} .aurora-blob:nth-child(4){width:clamp(100px,20vw,640px);height:clamp(100px,20vw,640px);background:var(--orb-d);top:15%;right:28%;animation-duration:18s;animation-direction:reverse;} @keyframes drift { 0%{transform:translate(0,0) scale(1);} 33%{transform:translate(40px,-60px) scale(1.1);} 66%{transform:translate(-30px,40px) scale(0.95);} 100%{transform:translate(20px,-20px) scale(1.05);} } /* ── LAYOUT ── */ .scene { position:relative; z-index:1; width:100vw; height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:var(--pad-scene) var(--pad-h); } /* ── TOP BAR ── */ .topbar { width:100%; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; } .brand { display:flex; flex-direction:column; gap:clamp(2px,0.3vmin,6px); } .brand-name { font-family:var(--display); font-size:var(--fs-brand); font-weight:800; letter-spacing:clamp(4px,0.6vmin,12px); text-transform:uppercase; background:linear-gradient(135deg,#fff 30%,var(--orb-a)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .brand-school { font-size:var(--fs-school); color:var(--sub); font-family:var(--display); letter-spacing:clamp(1.5px,0.25vmin,5px); text-transform:uppercase; } .topbar-right { display:flex; align-items:center; gap:var(--gap-topbar); } .pill { display:flex; align-items:center; gap:clamp(5px,0.7vmin,14px); padding:var(--pill-py) var(--pill-px); background:var(--glass); border:1px solid var(--rim); border-radius:100px; font-size:var(--fs-pill); font-weight:500; color:var(--sub); backdrop-filter:blur(12px); transition:all 0.3s; } .pill .dot { width:var(--dot-size);height:var(--dot-size);border-radius:50%;background:var(--sub);transition:all 0.3s;flex-shrink:0; } .pill.live .dot { background:var(--green);box-shadow:0 0 8px var(--green); } .pill.live { color:var(--text); } .pill.dead .dot { background:var(--red);box-shadow:0 0 6px var(--red); } #clock { font-family:var(--display);font-size:var(--fs-clock);font-weight:500;color:rgba(255,255,255,0.85);letter-spacing:clamp(1px,0.2vmin,4px); } /* ── WAKE WORD INDICATOR ── */ .wake-bar { position:absolute; top:calc(var(--pad-scene) + clamp(32px,5vmin,100px)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:clamp(6px,0.8vmin,16px); padding:clamp(4px,0.5vmin,12px) clamp(12px,1.5vmin,28px); background:rgba(79,158,255,0.08); border:1px solid rgba(79,158,255,0.2); border-radius:100px; backdrop-filter:blur(16px); font-size:var(--fs-wake); color:var(--sub); white-space:nowrap; pointer-events:none; z-index:10; transition: opacity 0.4s, border-color 0.4s, color 0.4s; } .wake-bar.active { border-color:rgba(79,158,255,0.5); color:var(--text); background:rgba(79,158,255,0.15); } .wake-mic { width:clamp(6px,0.8vmin,16px); height:clamp(6px,0.8vmin,16px); border-radius:50%; background:var(--orb-a); opacity:0.4; transition: opacity 0.3s, box-shadow 0.3s; } .wake-bar.active .wake-mic { opacity:1; box-shadow:0 0 8px var(--orb-a); animation: wakePulse 1.2s ease-in-out infinite; } @keyframes wakePulse { 0%,100%{opacity:0.6} 50%{opacity:1} } /* ── IDENTITY BAR ── */ .identity-bar { position:absolute; top:calc(var(--pad-scene) + clamp(70px,10vmin,200px)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:clamp(7px,1vmin,20px); padding:clamp(5px,0.7vmin,16px) clamp(14px,1.8vmin,40px); background:var(--glass); border:1px solid var(--rim); border-radius:100px; backdrop-filter:blur(20px); opacity:0; transition:opacity 0.6s ease; pointer-events:none; white-space:nowrap; z-index:10; } .identity-bar.show { opacity:1; } .identity-avatar { width:var(--avatar-size);height:var(--avatar-size);border-radius:50%; background:linear-gradient(135deg,var(--orb-a),var(--orb-b)); display:flex;align-items:center;justify-content:center; font-family:var(--display);font-size:var(--fs-badge);font-weight:700;color:#fff;flex-shrink:0; } .identity-name { font-size:var(--fs-identity);font-weight:500;color:var(--text); } .identity-nis { font-size:clamp(9px,0.8vmin,18px);color:var(--sub);font-family:var(--display);letter-spacing:1px; } .vbadge { font-size:var(--fs-badge); padding:clamp(2px,0.25vmin,5px) clamp(6px,0.8vmin,16px); border-radius:100px; font-weight:600; letter-spacing:1px; text-transform:uppercase; } /* ── ORB STAGE ── */ .orb-stage { position:relative; display:flex; align-items:center; justify-content:center; flex:1; width:100%; min-height:0; } /* ── ORBITAL SYSTEM ── */ .orbital-system { position:relative; width:calc(var(--orb-size) + var(--orbit-r) * 2); height:calc(var(--orb-size) + var(--orbit-r) * 2); display:flex; align-items:center; justify-content:center; flex-shrink:0; } /* Mini orb data label (siswa, buku, dll) */ .mini-orb-label { position:absolute; top:calc(100% + clamp(4px,0.5vmin,10px)); left:50%; transform:translateX(-50%); white-space:nowrap; text-align:center; pointer-events:none; } .mini-orb-label .mol-key { display:block; font-family:var(--display); font-size:clamp(5px,0.55vmin,12px); letter-spacing:1.5px; text-transform:uppercase; color:var(--sub); line-height:1.2; } .mini-orb-label .mol-val { display:block; font-family:var(--display); font-size:clamp(7px,0.75vmin,16px); font-weight:700; color:var(--text); line-height:1.2; } /* Orbit track rings */ .orbit-track { position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,0.04); pointer-events:none; } .orbit-track-1 { width:calc(var(--orb-size) + var(--orbit-r) * 0.55 * 2); height:calc(var(--orb-size) + var(--orbit-r) * 0.55 * 2); } .orbit-track-2 { width:calc(var(--orb-size) + var(--orbit-r) * 1 * 2); height:calc(var(--orb-size) + var(--orbit-r) * 1 * 2); } /* Mini satellite orbs */ .mini-orb { position:absolute; width:var(--mini-orb); height:var(--mini-orb); border-radius:50%; top:50%; left:50%; margin-top:calc(var(--mini-orb) / -2); margin-left:calc(var(--mini-orb) / -2); pointer-events:none; } .mini-orb .mini-core { width:100%; height:100%; border-radius:50%; opacity:0.7; box-shadow:0 0 clamp(8px,1.2vmin,28px) currentColor; animation:miniFloat 3s ease-in-out infinite, miniSpin 8s linear infinite; } .mini-orb.cam-active .mini-core { animation:miniFloat 1.2s ease-in-out infinite, miniSpin 3s linear infinite; opacity:1; } @keyframes miniFloat { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} } @keyframes miniSpin { from{filter:hue-rotate(0deg)} to{filter:hue-rotate(360deg)} } /* Satellite colors */ .mini-orb:nth-child(1) .mini-core { background:radial-gradient(circle,var(--orb-a),#1a4fa0); color:var(--orb-a); animation-delay:0s; } .mini-orb:nth-child(2) .mini-core { background:radial-gradient(circle,var(--orb-b),#5b3fa8); color:var(--orb-b); animation-delay:.4s; } .mini-orb:nth-child(3) .mini-core { background:radial-gradient(circle,var(--orb-c),#0e7a5c); color:var(--orb-c); animation-delay:.8s; } .mini-orb:nth-child(4) .mini-core { background:radial-gradient(circle,var(--orb-d),#992240); color:var(--orb-d); animation-delay:1.2s; } .mini-orb:nth-child(5) .mini-core { background:radial-gradient(circle,var(--gold),#8a6000); color:var(--gold); animation-delay:1.6s; } .mini-orb:nth-child(6) .mini-core { background:radial-gradient(circle,#f0abfc,#7e22ce); color:#f0abfc; animation-delay:2.0s; } /* Main orb */ .orb-wrap { position:absolute; width:var(--orb-size); height:var(--orb-size); border-radius:50%; cursor:pointer; flex-shrink:0; z-index:5; } /* Pulse rings */ .orb-ring { position:absolute; inset:0; border-radius:50%; border:1px solid rgba(79,158,255,0.15); animation:orbRing 3.5s ease-in-out infinite; } .orb-ring:nth-child(2){inset:calc(-1*var(--orb-ring1));animation-delay:.6s;border-color:rgba(167,139,250,0.1);} .orb-ring:nth-child(3){inset:calc(-1*var(--orb-ring2));animation-delay:1.2s;border-color:rgba(52,211,153,0.07);} @keyframes orbRing { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.03);opacity:1} } .orb-core { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 0deg,var(--orb-a) 0%,var(--orb-b) 25%,var(--orb-c) 50%,var(--orb-a) 75%,var(--orb-b) 100%); animation:orbSpin 10s linear infinite, orbFloat 4.5s ease-in-out infinite; box-shadow:0 0 70px rgba(79,158,255,0.4),0 0 130px rgba(167,139,250,0.15),inset 0 0 40px rgba(255,255,255,0.04); } .orb-core::after { content:''; position:absolute; inset:3px; border-radius:50%; background:radial-gradient(circle at 35% 32%,rgba(255,255,255,0.22) 0%,transparent 55%), radial-gradient(circle at 68% 72%,rgba(0,0,0,0.55) 0%,transparent 50%), var(--deep); mix-blend-mode:overlay; } /* ── CAMERA INSIDE ORB ── */ .orb-cam-ring { position:absolute; inset:var(--cam-inset); border-radius:50%; overflow:hidden; background:#000; z-index:2; opacity:0; transform:scale(0.7); transition:opacity 0.5s cubic-bezier(0.34,1.56,0.64,1), transform 0.5s cubic-bezier(0.34,1.56,0.64,1); border:1px solid rgba(255,255,255,0.12); box-shadow:inset 0 0 clamp(20px,3vmin,60px) rgba(0,0,0,0.6); } .orb-cam-ring.visible { opacity:1; transform:scale(1); } #webcam { width:100%; height:100%; object-fit:cover; opacity:0.85; transform:scaleX(-1); /* mirror */ } /* Scan line overlay on camera */ .cam-scan { position:absolute; inset:0; border-radius:50%; background:repeating-linear-gradient( 0deg, transparent, transparent clamp(3px,0.4vmin,8px), rgba(79,158,255,0.03) clamp(3px,0.4vmin,8px), rgba(79,158,255,0.03) clamp(6px,0.8vmin,16px) ); pointer-events:none; z-index:3; animation:scanMove 4s linear infinite; } @keyframes scanMove { from{background-position:0 0} to{background-position:0 100%} } /* Crosshair when camera active */ .cam-crosshair { position:absolute; inset:0; border-radius:50%; z-index:4; pointer-events:none; opacity:0; transition:opacity 0.4s; } .cam-crosshair.visible { opacity:1; } .cam-crosshair::before, .cam-crosshair::after { content:''; position:absolute; background:rgba(79,158,255,0.3); } .cam-crosshair::before { width:1px; height:40%; top:30%; left:50%; transform:translateX(-50%); } .cam-crosshair::after { height:1px; width:40%; left:30%; top:50%; transform:translateY(-50%); } /* Corner markers */ .cam-corner-orb { position:absolute; width:clamp(10px,1.5vmin,30px); height:clamp(10px,1.5vmin,30px); border-color:var(--accent); border-style:solid; opacity:0; z-index:5; transition:opacity 0.4s; } .cam-corner-orb.visible { opacity:0.7; } .cam-corner-orb.tl{top:clamp(14px,2vmin,40px);left:clamp(14px,2vmin,40px);border-width:1.5px 0 0 1.5px;border-radius:2px 0 0 0;} .cam-corner-orb.tr{top:clamp(14px,2vmin,40px);right:clamp(14px,2vmin,40px);border-width:1.5px 1.5px 0 0;border-radius:0 2px 0 0;} .cam-corner-orb.bl{bottom:clamp(14px,2vmin,40px);left:clamp(14px,2vmin,40px);border-width:0 0 1.5px 1.5px;border-radius:0 0 0 2px;} .cam-corner-orb.br{bottom:clamp(14px,2vmin,40px);right:clamp(14px,2vmin,40px);border-width:0 1.5px 1.5px 0;border-radius:0 0 2px 0;} /* CAM REC badge */ .cam-rec-badge { position:absolute; bottom:clamp(18px,3vmin,60px); left:50%; transform:translateX(-50%); font-size:clamp(7px,0.65vmin,14px); font-weight:700; letter-spacing:2px; color:var(--red); z-index:6; display:flex;align-items:center;gap:4px; opacity:0; transition:opacity 0.4s; font-family:var(--display); } .cam-rec-badge.visible { opacity:1; } .cam-rec-badge::before { content:''; width:clamp(4px,0.45vmin,8px); height:clamp(4px,0.45vmin,8px); border-radius:50%; background:var(--red); animation:blinkRed 1s infinite; } /* Frosted glass cap — only shown when cam is OFF */ .orb-glass { position:absolute; inset:16px; border-radius:50%; background:rgba(8,13,26,0.52); backdrop-filter:blur(6px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid rgba(255,255,255,0.07); z-index:6; transition:opacity 0.4s; } .orb-glass.cam-on { opacity:0; pointer-events:none; } .orb-label { font-family:var(--display); font-size:var(--fs-orb-lbl); font-weight:700; letter-spacing:clamp(2px,0.4vmin,8px); text-transform:uppercase; color:rgba(255,255,255,0.88); } .orb-hint { font-size:var(--fs-orb-hint); color:var(--sub); letter-spacing:.5px; text-align:center; line-height:1.5; } /* Camera tap indicator */ .cam-tap-hint { position:absolute; bottom:calc(-1 * clamp(28px,4vmin,80px)); left:50%; transform:translateX(-50%); font-size:clamp(8px,0.75vmin,18px); color:var(--sub); white-space:nowrap; font-family:var(--display); letter-spacing:1px; opacity:0; transition:opacity 0.6s; pointer-events:none; z-index:10; } .cam-tap-hint.show { opacity:0.6; } @keyframes orbSpin { from{filter:hue-rotate(0deg)} to{filter:hue-rotate(360deg)} } @keyframes orbFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(clamp(-8px,-1vmin,-20px))} } /* LISTENING */ .orb-wrap.listening .orb-core { animation:orbSpin 2.5s linear infinite, orbListenPulse 0.9s ease-in-out infinite; background:conic-gradient(from 0deg,var(--red) 0%,#ff6b9d 25%,var(--orb-b) 50%,var(--red) 75%,#ff6b9d 100%); box-shadow:0 0 90px rgba(251,113,133,0.55),0 0 180px rgba(251,113,133,0.2); } .orb-wrap.listening .orb-ring { border-color:rgba(251,113,133,0.25);animation:orbRingListen 0.7s ease-in-out infinite alternate; } @keyframes orbListenPulse { 0%,100%{transform:translateY(clamp(-4px,-0.5vmin,-10px)) scale(1)} 50%{transform:translateY(clamp(-14px,-2vmin,-28px)) scale(1.05)} } @keyframes orbRingListen { from{transform:scale(1);opacity:.4} to{transform:scale(1.1);opacity:1} } /* THINKING */ .orb-wrap.thinking .orb-core { animation:orbSpin 5s linear infinite, orbThink 1.8s ease-in-out infinite; } @keyframes orbThink { 0%,100%{transform:translateY(clamp(-4px,-0.5vmin,-10px));filter:hue-rotate(0deg) brightness(.85)} 50%{transform:translateY(clamp(-14px,-2vmin,-28px));filter:hue-rotate(80deg) brightness(1.25)} } /* SPEAKING — golden glow */ .orb-wrap.speaking .orb-core { background:conic-gradient(from 0deg,var(--gold) 0%,#fde68a 25%,var(--orb-a) 50%,var(--gold) 75%,#fde68a 100%); box-shadow:0 0 80px rgba(251,191,36,0.45),0 0 160px rgba(251,191,36,0.15); animation:orbSpin 6s linear infinite, orbFloat 3s ease-in-out infinite; } /* ── HERO MATCHING OVERLAY ── */ /* Face orbs around main orb when matching */ .hero-face-orb { position:absolute; border-radius:50%; overflow:hidden; border:2px solid var(--gold); box-shadow:0 0 clamp(10px,1.5vmin,30px) rgba(251,191,36,0.4); opacity:0; transform:scale(0); transition:opacity 0.6s cubic-bezier(0.34,1.56,0.64,1), transform 0.6s cubic-bezier(0.34,1.56,0.64,1); z-index:8; pointer-events:none; top:50%; left:50%; } .hero-face-orb.show { opacity:1; transform:scale(1); } .hero-face-orb img { width:100%; height:100%; object-fit:cover; border-radius:50%; } /* Matched hero full card — replaces camera */ /* ── HERO PORTAL ANIMATION ── */ .hero-matched-overlay { position:absolute; inset:var(--cam-inset); border-radius:50%; z-index:9; background:#000; overflow:hidden; opacity:0; transform:scale(0.3) rotate(-180deg); transition: opacity 0.8s cubic-bezier(0.34,1.56,0.64,1), transform 0.8s cubic-bezier(0.34,1.56,0.64,1); border:3px solid #00ff88; box-shadow: 0 0 30px #00ff88, 0 0 60px #00cc66, 0 0 90px rgba(0,255,136,0.3), inset 0 0 30px rgba(0,255,136,0.1); } .hero-matched-overlay.show { opacity:1; transform:scale(1) rotate(0deg); } .hero-matched-overlay.show img { filter: blur(0px) brightness(1); } .hero-matched-overlay img { width:100%; height:100%; object-fit:cover; filter: blur(20px) brightness(0.3); transition: filter 1.2s ease 0.5s; } .hero-matched-overlay .hero-name-tag { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top,rgba(0,0,0,0.9) 0%,transparent 100%); padding:clamp(8px,1vmin,20px) clamp(6px,0.8vmin,16px); text-align:center; font-family:var(--display); font-size:var(--fs-hero); font-weight:700; color:#00ff88; letter-spacing:2px; text-shadow: 0 0 10px #00ff88, 0 0 20px #00cc66; } /* ── HERO ORBIT SYSTEM ── */ .hero-orbit-wrapper { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 5; } .hero-orbit-planet { position: absolute; width: clamp(32px, 5vmin, 52px); height: clamp(32px, 5vmin, 52px); border-radius: 50%; overflow: hidden; border: 2px solid rgba(0,255,136,0.6); box-shadow: 0 0 10px rgba(0,255,136,0.4); cursor: pointer; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s; transform-origin: center center; } .hero-orbit-planet img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .hero-orbit-planet:hover { box-shadow: 0 0 20px rgba(0,255,136,0.8); border-color: #00ff88; } .hero-orbit-planet.scanning { border-color: #ccff00; box-shadow: 0 0 20px #ccff00, 0 0 40px rgba(204,255,0,0.4); animation: planetPulse 0.5s ease-in-out infinite alternate; } .hero-orbit-planet.matched { border-color: #00ff88; box-shadow: 0 0 30px #00ff88, 0 0 60px rgba(0,255,136,0.6); transform: scale(1.4) !important; z-index: 20; } @keyframes planetPulse { from { box-shadow: 0 0 15px #ccff00; } to { box-shadow: 0 0 35px #ccff00, 0 0 60px rgba(204,255,0,0.5); } } /* Portal ring spinner */ .hero-portal-ring { position:absolute; inset:-6px; border-radius:50%; z-index:10; pointer-events:none; background: conic-gradient( from 0deg, #00ff88, #ccff00, #00ccff, #0066ff, #00ff88 ); animation: portalSpin 1.5s linear infinite; opacity:0; transition: opacity 0.3s; mask: radial-gradient(circle, transparent 85%, black 86%); -webkit-mask: radial-gradient(circle, transparent 85%, black 86%); } .hero-matched-overlay.show + .hero-portal-ring, .hero-portal-ring.active { opacity:1; } @keyframes portalSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Particle canvas */ #hero-particle-canvas { position:absolute; inset:0; border-radius:50%; z-index:11; pointer-events:none; opacity:0; transition: opacity 0.3s; } #hero-particle-canvas.active { opacity:1; } /* Match animation — gold burst */ @keyframes matchBurst { 0% { box-shadow:0 0 0 0 rgba(251,191,36,0.8); } 70% { box-shadow:0 0 0 clamp(30px,5vmin,100px) rgba(251,191,36,0); } 100%{ box-shadow:0 0 0 0 rgba(251,191,36,0); } } .orb-wrap.matched { animation:matchBurst 1s ease-out 3; } /* ── STOP BUTTON ── */ .stop-btn { position:fixed; bottom:clamp(36px,4.5vmin,100px); left:50%; transform:translateX(-50%) scale(0.75); display:flex; align-items:center; gap:clamp(8px,1vmin,20px); padding:var(--stop-py) var(--stop-px); background:rgba(251,113,133,0.1); border:1px solid rgba(251,113,133,0.45); border-radius:100px; color:var(--red); font-family:var(--display); font-size:var(--fs-stop); font-weight:700; letter-spacing:clamp(1.5px,0.25vmin,5px); text-transform:uppercase; cursor:pointer; opacity:0; pointer-events:none; transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1); backdrop-filter:blur(20px); z-index:100; } .stop-btn.show { opacity:1; pointer-events:all; transform:translateX(-50%) scale(1); } .stop-icon { width:clamp(11px,1.1vmin,24px);height:clamp(11px,1.1vmin,24px);background:var(--red);border-radius:clamp(2px,0.3vmin,5px);box-shadow:0 0 10px var(--red);animation:blinkRed 1s ease-in-out infinite;flex-shrink:0; } @keyframes blinkRed { 0%,100%{opacity:1} 50%{opacity:.35} } /* ── CHAT LOG ── */ .chat-log { width:100%; max-width:min(720px, 88vw); max-height:clamp(100px,28vh,420px); overflow-y:auto; display:flex; flex-direction:column; gap:clamp(6px,0.8vmin,16px); padding:0 4px; flex-shrink:0; mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 100%); } .chat-log::-webkit-scrollbar { width:0; } .bubble { max-width:88%; padding:var(--bubble-pad) calc(var(--bubble-pad)*1.3); border-radius:clamp(14px,1.6vmin,32px); font-size:var(--fs-bubble); line-height:1.65; font-weight:300; white-space:pre-wrap; word-break:break-word; animation:bubIn .3s cubic-bezier(.34,1.56,.64,1) forwards; backdrop-filter:blur(14px); } @keyframes bubIn { from{opacity:0;transform:scale(.9) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)} } .bubble.ai { align-self:flex-start; background:rgba(79,158,255,0.09); border:1px solid rgba(79,158,255,0.2); border-bottom-left-radius:4px; } .bubble.user { align-self:flex-end; background:rgba(255,255,255,0.06); border:1px solid var(--rim); border-bottom-right-radius:4px; } .bubble.system { align-self:center; background:rgba(251,113,133,0.07); border:1px solid rgba(251,113,133,0.2); color:var(--red); font-size:clamp(10px,0.9vmin,20px); font-weight:500; letter-spacing:.5px; border-radius:8px; padding:clamp(6px,0.7vmin,14px) clamp(10px,1.2vmin,24px); } .bubble.hero-event { align-self:center; background:rgba(251,191,36,0.08); border:1px solid rgba(251,191,36,0.3); color:var(--gold); font-size:clamp(10px,0.9vmin,20px); font-weight:500; letter-spacing:.5px; border-radius:8px; padding:clamp(6px,0.7vmin,14px) clamp(10px,1.2vmin,24px); } .bubble-label { font-size:var(--fs-blabel);font-weight:600;letter-spacing:2px;text-transform:uppercase;opacity:.4;margin-bottom:clamp(3px,0.4vmin,8px); } /* Typing dots */ .typing-wrap { display:flex;gap:clamp(4px,0.5vmin,10px);align-items:center;padding:clamp(2px,0.3vmin,6px) 2px; } .typing-wrap span { width:clamp(5px,0.7vmin,14px);height:clamp(5px,0.7vmin,14px);border-radius:50%;animation:typeDot 1.3s infinite ease-in-out; } .typing-wrap span:nth-child(1){background:var(--orb-a);} .typing-wrap span:nth-child(2){background:var(--orb-b);animation-delay:.18s;} .typing-wrap span:nth-child(3){background:var(--orb-c);animation-delay:.36s;} @keyframes typeDot { 0%,80%,100%{transform:scale(.6);opacity:.3} 40%{transform:scale(1.2);opacity:1} } /* ── HIDDEN canvas (allow planet 3D) ── */ canvas { display:none; } .orb-stage canvas { display:block !important; } /* ── TEXT FALLBACK ── */ .text-fallback { position:fixed; bottom:clamp(14px,1.6vmin,36px); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:clamp(6px,0.8vmin,16px); opacity:0; pointer-events:none; transition:opacity .3s; z-index:60; } .text-fallback.show { opacity:1; pointer-events:all; } #text-input { width:clamp(200px,55vw,680px); background:rgba(255,255,255,0.05); border:1px solid var(--rim); border-radius:100px; color:var(--text); font-family:var(--sans); font-size:max(16px, clamp(12px,1.1vmin,24px)); padding:clamp(9px,1vmin,22px) clamp(16px,1.8vmin,36px); outline:none; backdrop-filter:blur(20px); transition:border-color .2s; } #text-input:focus { border-color:rgba(79,158,255,.4); } #text-input::placeholder { color:var(--sub); } .send-btn { width:var(--kbd-size);height:var(--kbd-size);border-radius:50%; background:linear-gradient(135deg,var(--orb-a),var(--orb-b)); border:none;cursor:pointer; display:flex;align-items:center;justify-content:center; font-size:clamp(13px,1.4vmin,28px);transition:transform .2s; } .send-btn:hover { transform:scale(1.08); } /* ── KEYBOARD TOGGLE ── */ .kbd-toggle { position:fixed; bottom:clamp(14px,1.6vmin,36px); right:clamp(18px,2vmin,44px); width:var(--kbd-size);height:var(--kbd-size);border-radius:50%; background:var(--glass); border:1px solid var(--rim); color:var(--sub); font-size:clamp(13px,1.4vmin,28px); cursor:pointer; display:flex;align-items:center;justify-content:center; backdrop-filter:blur(10px); transition:all .2s; z-index:60; } .kbd-toggle:hover { border-color:var(--accent);color:var(--accent); } /* ── TOAST ── */ .toast { position:fixed; top:clamp(70px,8vmin,160px); left:50%; transform:translateX(-50%) translateY(-8px); background:var(--glass); border:1px solid var(--rim); border-radius:100px; padding:clamp(6px,0.7vmin,14px) clamp(14px,1.6vmin,32px); font-size:clamp(10px,0.9vmin,20px); font-weight:500; color:var(--sub); letter-spacing:.5px; backdrop-filter:blur(20px); opacity:0; pointer-events:none; transition:all .3s; z-index:300; white-space:nowrap; } .toast.show { opacity:1; transform:translateX(-50%) translateY(0); } /* ── TOUCH RIPPLE ── */ .ripple { position:fixed; border-radius:50%; border:1.5px solid rgba(79,158,255,0.35); pointer-events:none; z-index:200; animation:ripOut .7s ease-out forwards; } @keyframes ripOut { from{transform:scale(0);opacity:1} to{transform:scale(3.5);opacity:0} } /* ── RESPONSIVE ── */ @media (max-width:400px) { :root { --orb-size:clamp(110px,42vmin,200px); --pad-h:12px; --pad-scene:10px; --orbit-r:clamp(90px,14vmin,180px); } .chat-log { max-height:22vh; } } @media (min-width:401px) and (max-width:600px) { :root { --orb-size:clamp(130px,38vmin,240px); --pad-h:16px; --orbit-r:clamp(100px,15vmin,220px); } .chat-log { max-height:24vh; } } @media (min-width:601px) and (max-width:1024px) and (orientation:portrait) { :root { --orb-size:clamp(180px,30vmin,340px); } .chat-log { max-width:88vw; } } @media (min-width:601px) and (max-width:1024px) and (orientation:landscape) { :root { --orb-size:clamp(150px,26vmin,280px); --orbit-r:clamp(100px,14vmin,260px); } .chat-log { max-width:70vw; max-height:22vh; } } @media (min-width:2560px) { :root { --orb-size:clamp(480px,18vmin,700px); --fs-brand:52px; --fs-bubble:34px; --fs-orb-lbl:40px; --fs-stop:28px; } .chat-log { max-width:min(1100px,55vw); max-height:34vh; } .aurora-blob { filter:blur(160px)!important; } } @media (min-width:3841px) { :root { --orb-size:800px; --fs-brand:72px; --fs-bubble:44px; --fs-orb-lbl:56px; --fs-stop:36px; --orbit-r:700px; } .chat-log { max-width:1300px; max-height:32vh; } } /* ── PERMISSION OVERLAY ── */ @keyframes permCardIn { from { transform:scale(0.88) translateY(24px); opacity:0; } to { transform:scale(1) translateY(0); opacity:1; } } @keyframes permIconPulse { 0%,100%{box-shadow:0 0 0 0 rgba(79,158,255,0.3)} 50% {box-shadow:0 0 0 clamp(8px,1.2vmin,16px) rgba(79,158,255,0)} } .perm-browser-label::before { content:''; display:block; width:clamp(18px,2vmin,28px); height:1px; background:linear-gradient(90deg, var(--orb-a), transparent); } .perm-btn:active { transform:scale(0.98); } /* ── AUTOPLAY GUARD (invisible touch gate) ── */ .autoplay-guard { position:fixed; inset:0; z-index:8888; cursor:pointer; background:transparent; display:flex; align-items:flex-end; justify-content:center; padding-bottom:clamp(20px,3vmin,48px); } .autoplay-hint { padding:clamp(8px,1vmin,14px) clamp(16px,2vmin,28px); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:100px; backdrop-filter:blur(16px); font-size:clamp(11px,1vmin,16px); color:var(--sub); letter-spacing:1px; font-family:var(--display); animation:guardPulse 2.5s ease-in-out infinite; pointer-events:none; } @keyframes guardPulse { 0%,100%{opacity:0.6; transform:translateY(0)} 50% {opacity:1; transform:translateY(-4px)} } /* ── TAP TO START OVERLAY ── */ #tap-overlay { position:fixed; inset:0; z-index:9999; background:var(--void); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(16px,2.5vmin,48px); cursor:pointer; transition:opacity 0.6s ease; } #tap-overlay.hide { opacity:0; pointer-events:none; } .tap-orb { width:clamp(100px,18vmin,260px); height:clamp(100px,18vmin,260px); border-radius:50%; position:relative; background:conic-gradient(from 0deg,var(--orb-a) 0%,var(--orb-b) 33%,var(--orb-c) 66%,var(--orb-a) 100%); animation:orbSpin 6s linear infinite, orbFloat 3s ease-in-out infinite; box-shadow:0 0 60px rgba(79,158,255,0.5),0 0 120px rgba(167,139,250,0.2); } .tap-orb::after { content:''; position:absolute; inset:4px; border-radius:50%; background:radial-gradient(circle at 35% 32%,rgba(255,255,255,0.2) 0%,transparent 55%),var(--deep); mix-blend-mode:overlay; } .tap-title { font-family:var(--display); font-weight:800; font-size:clamp(22px,4vmin,72px); letter-spacing:clamp(6px,1vmin,18px); text-transform:uppercase; background:linear-gradient(135deg,#fff 30%,var(--orb-a)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .tap-sub { font-size:clamp(11px,1.4vmin,28px); color:var(--sub); letter-spacing:2px; animation:wakePulse 1.8s ease-in-out infinite; } /* ── COMET TRAIL EFFECT ── */ .hero-orbit-planet.scanning { border-color: #ccff00; box-shadow: 0 0 20px #ccff00, 0 0 40px rgba(204,255,0,0.4); animation: planetPulse 0.5s ease-in-out infinite alternate; } .hero-orbit-planet.comet { border-color: #fff; box-shadow: 0 0 8px #fff, 0 0 20px #ccff00, 0 0 40px rgba(204,255,0,0.6), -8px -2px 20px rgba(204,255,0,0.4), -16px -4px 30px rgba(204,255,0,0.2), -24px -6px 40px rgba(204,255,0,0.1); filter: brightness(1.5); transition: box-shadow 0.1s, filter 0.1s; } /* Planet yang match zoom ke tengah */ .hero-orbit-planet.zoom-center { transition: left 0.8s cubic-bezier(0.34,1.56,0.64,1), top 0.8s cubic-bezier(0.34,1.56,0.64,1), transform 0.8s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.8s, border-color 0.8s, z-index 0s !important; transform: scale(2.5) !important; border-color: gold !important; box-shadow: 0 0 40px gold, 0 0 80px rgba(251,191,36,0.6) !important; z-index: 100 !important; } @keyframes cometSpin { from { filter: brightness(1.2) hue-rotate(0deg); } to { filter: brightness(2) hue-rotate(60deg); } } /* ═══════════════════════════════════════════════════════════════════ REDUCED MOTION — WCAG 2.3.1 Disable all non-essential animations for users sensitive to motion ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .aurora { animation: none !important; } .aurora-blob { animation: none !important; opacity: 0.05 !important; } .orb-core { animation: none !important; } .orb-wrap { animation: none !important; } .orb-ring { animation: none !important; } .tap-orb { animation: none !important; } .mini-core { animation: none !important; } .wake-mic { animation: none !important; } .typing-wrap span { animation: none !important; } } /* ═══════════════════════════════════════════════════════════════════ VISIBLE FOCUS — WCAG 2.4.7 & 2.4.11 Ensure keyboard focus is always visible ═══════════════════════════════════════════════════════════════════ */ :focus-visible { outline: 2px solid rgba(79,158,255,0.8) !important; outline-offset: 2px !important; border-radius: 4px; } /* Touch targets — WCAG 2.5.5 (target size) */ .kbd-toggle, .send-btn, .absensi-btn-yes, .absensi-btn-later, .stop-btn, .quick-btn { min-height: 44px !important; min-width: 44px !important; }