/* ============================================================ CRYPTEX ANNIVERSARY EDITION — entry screens skin Active only while has .cx-anniv (set by js/anniversary.js when Manila date <= 2026-09-10). After that this file is inert and the normal UI shows untouched. ============================================================ */ html.cx-anniv{ --anv-gold:#e8c15c; --anv-foil:#ffe9a8; --anv-bronze:#8a6a1f; --anv-cyan:#00d4ff; --anv-night:#0a0812; } /* ---------- Splash screen ---------- */ html.cx-anniv #splash-screen{background:radial-gradient(ellipse 120% 90% at 50% 110%,#151022 0%,#0a0812 45%,#050408 100%)} html.cx-anniv .splash-grid{ background-image:linear-gradient(rgba(232,193,92,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(232,193,92,.05) 1px,transparent 1px); } html.cx-anniv .splash-scanline{background:linear-gradient(90deg,transparent,rgba(232,193,92,.45),transparent)} html.cx-anniv .splash-hex{border-color:rgba(232,193,92,.28)} html.cx-anniv .splash-hex::before{border-color:rgba(0,212,255,.14)} html.cx-anniv .splash-hex::after{border-color:rgba(255,233,168,.14)} html.cx-anniv .splash-logo{filter:drop-shadow(0 0 20px rgba(232,193,92,.55));animation:anvLogoPulse 2s ease-in-out infinite} @keyframes anvLogoPulse{ 0%,100%{filter:drop-shadow(0 0 18px rgba(232,193,92,.5))} 50%{filter:drop-shadow(0 0 38px rgba(255,233,168,.85))} } html.cx-anniv .splash-sub{color:rgba(255,233,168,.75)} html.cx-anniv .splash-bar{background:linear-gradient(90deg,transparent,var(--anv-foil),var(--anv-gold),transparent)} html.cx-anniv .splash-status{color:rgba(232,193,92,.45)} html.cx-anniv .splash-particle{background:var(--anv-gold)!important} /* Anniversary ribbon under the splash logo (injected by JS) */ .anv-ribbon{ display:flex;align-items:center;gap:10px; font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700; letter-spacing:5px;text-transform:uppercase;white-space:nowrap; color:var(--anv-gold,#e8c15c); background:linear-gradient(100deg,#8a6a1f 20%,#ffe9a8 42%,#fffbe8 50%,#ffe9a8 58%,#8a6a1f 80%); background-size:220% 100%; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; margin-top:4px; } .anv-ribbon-line{display:block;width:26px;height:1px;background:linear-gradient(90deg,transparent,rgba(232,193,92,.6));flex-shrink:0} .anv-ribbon-line:last-child{background:linear-gradient(90deg,rgba(232,193,92,.6),transparent)} /* ---------- Auth (login) screen ---------- */ html.cx-anniv #app-auth{ background:linear-gradient(165deg,#0a0812 0%,#151022 30%,#1c142a 55%,#120d1c 80%,#080610 100%); } html.cx-anniv #app-auth::before{ background-image:linear-gradient(rgba(232,193,92,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(232,193,92,.035) 1px,transparent 1px); } html.cx-anniv #app-auth::after{ background:radial-gradient(ellipse 75% 55% at 50% 0%,rgba(232,193,92,.10),transparent 62%), radial-gradient(ellipse 50% 40% at 22% 85%,rgba(0,212,255,.05),transparent), radial-gradient(ellipse 45% 35% at 82% 55%,rgba(232,193,92,.05),transparent); } /* three.js canvas sits where the neuron canvas lives; neuron hides only when the 3D scene actually runs (cx-anniv-3d added on successful init) */ #anv-three{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} html.cx-anniv-3d #neuron-canvas{display:none} html.cx-anniv .auth-logo-glow{background:radial-gradient(circle,rgba(232,193,92,.20) 0%,rgba(232,193,92,.07) 50%,transparent 70%)} html.cx-anniv .auth-logo .logo-img{filter:drop-shadow(0 0 22px rgba(232,193,92,.45))} html.cx-anniv .auth-divider span{background:linear-gradient(90deg,transparent,rgba(232,193,92,.45),rgba(255,233,168,.3),transparent)} html.cx-anniv .auth-subtitle{ background:linear-gradient(135deg,#efe6d0 30%,var(--anv-gold)); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } /* Anniversary hero headline (injected by JS between subtitle and warning) */ .anv-hero{margin-top:16px;position:relative;padding:2px 0 4px} .anv-hero-line1{ font-family:'Marcellus','Georgia',serif; font-size:clamp(.8rem,3.4vw,.95rem); letter-spacing:.34em;text-transform:uppercase;white-space:nowrap; color:rgba(239,230,208,.72); text-indent:.34em; /* optically recenters tracked-out caps */ } .anv-hero-word{ font-family:'Marcellus','Georgia',serif; font-size:clamp(2.1rem,10.5vw,3.1rem); line-height:1.08;letter-spacing:.05em;white-space:nowrap; margin-top:2px; text-shadow:0 0 34px rgba(232,193,92,.3); } /* gradient lives on each letter (vertical, so it reads as one continuous gold engraving) — parent-level background-clip:text goes invisible once GSAP leaves transforms on the spans */ .anv-hero-word .anv-ch{ display:inline-block;white-space:pre; background:linear-gradient(180deg,#fffbe8 0%,#ffe9a8 30%,#e8c15c 58%,#a8863a 96%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .anv-hero-sub{ margin-top:8px;font-size:.72rem;font-weight:500;letter-spacing:.6px; color:rgba(239,230,208,.55); } /* twinkling gold sparks around the headline */ .anv-spark{ position:absolute;font-size:.7rem;color:var(--anv-foil,#ffe9a8); text-shadow:0 0 10px rgba(255,233,168,.8);pointer-events:none;opacity:0; } .anv-spark:nth-of-type(1){top:-6px;left:12%} .anv-spark:nth-of-type(2){top:34%;right:6%;font-size:.55rem} .anv-spark:nth-of-type(3){bottom:2px;left:6%;font-size:.5rem} .anv-spark:nth-of-type(4){top:-12px;right:18%;font-size:.9rem} .anv-spark:nth-of-type(5){bottom:-4px;right:30%;font-size:.45rem} .anv-spark:nth-of-type(6){top:44%;left:2%;font-size:.6rem} /* Auth card + button, champagne treatment */ @property --anv-rot{syntax:'';initial-value:0deg;inherits:false} html.cx-anniv .auth-form{ border-color:rgba(232,193,92,.22); box-shadow:0 8px 32px rgba(0,0,0,.55),0 0 28px rgba(232,193,92,.07),0 0 0 1px rgba(232,193,92,.05) inset; background:linear-gradient(160deg,rgba(18,14,8,.6),rgba(8,6,12,.94)); position:relative; } /* golden comet orbiting the card border — masked to the 2px rim only, otherwise the gradient shows through the card's translucent glass */ html.cx-anniv .auth-form::before{ content:'';position:absolute;inset:-2px;border-radius:22px; padding:3px;pointer-events:none; background:conic-gradient(from var(--anv-rot), transparent 0deg,transparent 288deg, rgba(232,193,92,.25) 322deg,#ffe9a8 344deg,#fffbe8 352deg, rgba(232,193,92,.25) 360deg); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; animation:anvOrbit 5s linear infinite; } @keyframes anvOrbit{to{--anv-rot:360deg}} @media (prefers-reduced-motion:reduce){ html.cx-anniv .auth-form::before{animation:none;opacity:.4} } html.cx-anniv .auth-form .form-group label{color:rgba(232,215,175,.65)} html.cx-anniv .auth-form .form-group input{background:rgba(20,15,5,.45);border-color:rgba(232,193,92,.14);color:#f0e8d8} html.cx-anniv .auth-form .form-group input:focus{border-color:rgba(232,193,92,.55);box-shadow:0 0 0 3px rgba(232,193,92,.12);background:rgba(30,23,8,.5)} html.cx-anniv .auth-form .btn-primary, html.cx-anniv .btn-primary{ background:linear-gradient(135deg,#9c7526,#d9b254 55%,#e8c15c); color:#1a1206;border:1px solid rgba(255,233,168,.35); box-shadow:0 4px 18px rgba(232,193,92,.28); text-shadow:none; } html.cx-anniv .auth-form .btn-primary:hover, html.cx-anniv .btn-primary:hover{ background:linear-gradient(135deg,#b0852c,#e8c15c 55%,#ffe9a8); box-shadow:0 4px 24px rgba(232,193,92,.4); } html.cx-anniv .auth-switch a{color:var(--anv-gold)} /* ---------- Anniversary promo poster popup ---------- */ .anv-promo{z-index:99990} .anv-promo .promo-poster-wrap{max-width:min(420px,92vw);text-align:center} .anv-promo .promo-poster-img{ width:auto;max-width:100%;max-height:72vh;object-fit:contain; border-radius:14px; border:1px solid rgba(232,193,92,.45); box-shadow:0 10px 50px rgba(0,0,0,.7),0 0 40px rgba(232,193,92,.18); } .anv-promo .promo-poster-close{ top:-12px;right:-6px;width:36px;height:36px;font-size:20px; background:#14101e;border-color:rgba(232,193,92,.5);color:#e8c15c; box-shadow:0 2px 12px rgba(0,0,0,.6); } .anv-promo .promo-poster-close:hover{background:#e8c15c;color:#14101e} .anv-promo-cta{ display:block;width:100%;margin-top:12px;padding:14px 16px; background:linear-gradient(135deg,#9c7526,#d9b254 55%,#e8c15c); color:#1a1206;border:1px solid rgba(255,233,168,.4);border-radius:12px; font-family:'Inter',sans-serif;font-size:.92rem;font-weight:800;letter-spacing:.2px; cursor:pointer;box-shadow:0 4px 20px rgba(232,193,92,.3); transition:transform .15s,box-shadow .15s; } .anv-promo-cta:hover{box-shadow:0 4px 26px rgba(232,193,92,.45)} .anv-promo-cta:active{transform:scale(.97)} .anv-promo-cta:disabled{opacity:.7;cursor:default} @media (max-height:700px){ .anv-promo .promo-poster-img{max-height:66vh} } /* ---------- Confetti canvas ---------- */ #anv-confetti{position:fixed;inset:0;width:100%;height:100%;z-index:100000;pointer-events:none} /* ---------- Accessibility / small screens ---------- */ @media (prefers-reduced-motion:reduce){ html.cx-anniv .splash-logo{animation:none} .anv-ribbon{background:none;-webkit-text-fill-color:var(--anv-gold,#e8c15c)} } @media (max-width:380px){ .anv-ribbon{font-size:.55rem;letter-spacing:4px} .anv-ribbon-line{width:16px} }