/* XARKLO // LABS — serenity.css · vanilla port of DigitalSerenity (no React) */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --sr-bg:#0a0c0e;--sr-bg-2:#000;--sr-bg-3:#14181e;
  --sr-ink:#f2efe9;--sr-ink-soft:#c9c5bb;--sr-ink-dim:#8f938c;
  --sr-line:rgba(242,239,233,.16);
  --sr-signal:#5fe0d4;--sr-signal-dim:rgba(95,224,212,.08);
  --sr-font:"Readex Pro",system-ui,-apple-system,sans-serif;
  --sr-mono:"JetBrains Mono",ui-monospace,monospace;
}
html,body{height:100%}
html{color-scheme:dark}
body{
  min-height:100vh;position:relative;overflow-x:hidden;
  background:linear-gradient(135deg,var(--sr-bg) 0%,var(--sr-bg-2) 55%,var(--sr-bg-3) 100%);
  color:var(--sr-ink);font-family:var(--sr-font);
}
#xk-shader{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.7;mix-blend-mode:screen;pointer-events:none;image-rendering:auto}
.sr-bg{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(6,8,10,.55) 100%)}
.sr-svg{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}

/* grid + dots */
.grid-line{stroke:#94a3b8;stroke-width:.5;opacity:0;stroke-dasharray:5 5;stroke-dashoffset:1000;animation:grid-draw 2s ease-out forwards}
.detail-dot{fill:var(--sr-ink-soft);opacity:0;animation:pulse-glow 3s ease-in-out infinite}
@keyframes grid-draw{0%{stroke-dashoffset:1000;opacity:0}50%{opacity:.3}100%{stroke-dashoffset:0;opacity:.15}}
@keyframes pulse-glow{0%,100%{opacity:.1;transform:scale(1)}50%{opacity:.3;transform:scale(1.1)}}

/* corners (logical positions, RTL-safe) */
.corner-element-animate{position:fixed;width:40px;height:40px;border:1px solid var(--sr-line);opacity:0;z-index:3;animation:word-appear 1s ease-out forwards}
.corner-element-animate i{position:absolute;width:8px;height:8px;background:var(--sr-ink-soft);opacity:.3;border-radius:50%}
.ce-tl{top:24px;inset-inline-start:24px}.ce-tl i{top:0;inset-inline-start:0}
.ce-tr{top:24px;inset-inline-end:24px}.ce-tr i{top:0;inset-inline-end:0}
.ce-bl{bottom:24px;inset-inline-start:24px}.ce-bl i{bottom:0;inset-inline-start:0}
.ce-br{bottom:24px;inset-inline-end:24px}.ce-br i{bottom:0;inset-inline-end:0}

/* floating sparks */
.floating-element-animate{position:fixed;width:2px;height:2px;background:var(--sr-ink-soft);border-radius:50%;opacity:0;z-index:3;animation:float 4s ease-in-out infinite;animation-play-state:paused}
@keyframes float{0%,100%{transform:translateY(0) translateX(0);opacity:.2}25%{transform:translateY(-10px) translateX(5px);opacity:.6}50%{transform:translateY(-5px) translateX(-3px);opacity:.4}75%{transform:translateY(-15px) translateX(7px);opacity:.8}}

/* words */
@keyframes word-appear{0%{opacity:0;transform:translateY(30px) scale(.8);filter:blur(10px)}50%{opacity:.8;transform:translateY(10px) scale(.95);filter:blur(2px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
.word-animate{display:inline-block;margin:0 .12em;transition:color .3s ease,transform .3s ease}
html.sr-js .word-animate{opacity:0}
html.sr-js .word-animate.sr-on{animation:word-appear .8s ease-out forwards}
.word-animate:hover{color:var(--sr-ink);transform:translateY(-2px)}

/* underline under h1 */
.text-decoration-animate{position:relative;display:inline-block}
.text-decoration-animate::after{content:'';position:absolute;bottom:-14px;inset-inline-start:0;width:0;height:1px;background:linear-gradient(90deg,transparent,var(--sr-ink-soft),transparent);animation:underline-grow 2s ease-out forwards;animation-delay:2s}
@keyframes underline-grow{to{width:100%}}

/* mouse gradient */
#xk-mouse-grad{position:fixed;width:320px;height:320px;border-radius:9999px;pointer-events:none;z-index:4;opacity:0;
  background-image:radial-gradient(circle,var(--sr-signal-dim),rgba(107,114,128,.05) 45%,transparent 70%);
  transform:translate(-50%,-50%);will-change:left,top,opacity;transition:opacity .3s ease-out}
@media(min-width:640px){#xk-mouse-grad{width:420px;height:420px;filter:blur(16px)}}
@media(min-width:900px){#xk-mouse-grad{width:520px;height:520px;filter:blur(22px)}}

/* ripples */
#sr-ripples{position:fixed;inset:0;z-index:5;pointer-events:none}
.ripple{position:fixed;width:6px;height:6px;background:rgba(95,224,212,.55);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:sr-ripple 1s ease-out forwards}
@keyframes sr-ripple{0%{opacity:.8;box-shadow:0 0 0 0 rgba(95,224,212,.4)}100%{opacity:0;box-shadow:0 0 0 60px rgba(95,224,212,0)}}

/* topbar */
.sr-topbar{position:fixed;top:0;inset-inline:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,5vw,56px)}
.sr-logo{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--sr-ink)}
.sr-logo span{font-family:var(--sr-mono);font-weight:600;letter-spacing:.28em;font-size:14px}
.sr-logo small{font-family:var(--sr-mono);font-size:10px;letter-spacing:.2em;color:var(--sr-ink-dim)}
.sr-topnav{display:flex;align-items:center;gap:16px}
.sr-langbtn{font-family:var(--sr-mono);font-size:11px;letter-spacing:.18em;color:var(--sr-signal);background:transparent;border:1px solid rgba(95,224,212,.35);border-radius:3px;padding:6px 12px;cursor:pointer;transition:background .25s ease}
.sr-langbtn:hover{background:rgba(95,224,212,.08)}
.sr-back{color:var(--sr-ink-soft);text-decoration:none;font-size:13px;font-weight:300;display:inline-flex;align-items:center;gap:8px}
.sr-back-arrow{display:inline-block;transition:transform .25s ease}
html[dir="rtl"] .sr-back-arrow{transform:scaleX(-1)}
.sr-back:hover .sr-back-arrow{transform:translateX(-4px)}
html[dir="rtl"] .sr-back:hover .sr-back-arrow{transform:scaleX(-1) translateX(-4px)}

/* stage */
.sr-stage{position:relative;z-index:6;min-height:100vh;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:96px clamp(20px,5vw,56px) 64px}
.sr-kicker{font-family:var(--sr-mono);font-weight:300;font-size:clamp(10px,1.6vw,13px);letter-spacing:.22em;text-transform:uppercase;color:var(--sr-ink-soft);opacity:.85}
.sr-rule{margin:18px auto 0;width:clamp(48px,8vw,72px);height:1px;background:linear-gradient(90deg,transparent,var(--sr-ink-soft),transparent);opacity:.3}
.sr-center{position:relative;max-width:min(980px,92vw);margin:auto}
.sr-h1{font-weight:200;font-size:clamp(28px,5.4vw,60px);line-height:1.18;letter-spacing:-.01em}
.sr-line{display:block;margin-bottom:16px}
.sr-line-sub{font-weight:300;font-size:clamp(17px,2.9vw,32px);line-height:1.6;letter-spacing:.01em;color:var(--sr-ink-soft)}
.detail-line{position:absolute;top:50%;width:14px;height:1px;background:var(--sr-ink-soft);opacity:0}
.dl-start{inset-inline-start:-28px}.dl-end{inset-inline-end:-28px}
html.sr-js .detail-line{animation:word-appear 1s ease-out forwards;animation-delay:3.2s}
html.sr-js .dl-end{animation-delay:3.4s}
.sr-dots{margin:26px auto 0;display:flex;justify-content:center;gap:16px;opacity:0}
html.sr-js .sr-dots{animation:word-appear 1s ease-out forwards;animation-delay:4.2s}
.sr-dots i{width:4px;height:4px;background:var(--sr-ink-soft);border-radius:50%;opacity:.5}
.sr-dots i:nth-child(2){opacity:.8}
.sr-note{margin-top:22px;font-family:var(--sr-mono);font-size:10px;letter-spacing:.14em;color:var(--sr-ink-dim);opacity:.75}

/* reduced motion — static, fully visible */
@media (prefers-reduced-motion: reduce){
  html.sr-js .word-animate,html.sr-js .detail-line,html.sr-js .sr-dots{opacity:1;animation:none}
  .corner-element-animate,.grid-line,.detail-dot,.floating-element-animate{animation:none;opacity:.25}
  .text-decoration-animate::after{animation:none;width:100%}
  #xk-mouse-grad,#sr-ripples{display:none}
  .word-animate,.sr-back-arrow{transition:none}
}

@media (max-width:640px){
  .corner-element-animate{width:26px;height:26px}
  .detail-line{display:none}
}