:root{
  --bg:#0b0b0e;
  --fg:#e9e9ea;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --ink: rgba(233,233,234,.92);
  --ink2: rgba(233,233,234,.72);
  --ink3: rgba(233,233,234,.46);
  --line2: rgba(233,233,234,.08);

  --noiseOpacity: .035;
  --vignetteOpacity: .55;

  /* intro glitch tuning */
  --intro-steps: 9;
  --intro-intensity: 4.2; /* number */
  --intro-clip: 0.75;
  --logoW: clamp(236px, 55vw, 560px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  overflow:hidden;
}

.noise, .vignette{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
}
.noise{
  opacity:var(--noiseOpacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  background-size:280px 280px;
  mix-blend-mode:overlay;
}
.vignette{
  opacity:var(--vignetteOpacity);
  background:radial-gradient(1200px 700px at 50% 45%, rgba(0,0,0,0) 20%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.85) 100%);
}

.stage{
  position:relative;
  width:100%;
  height:100%;
  z-index:1;
}

/* motion hook */
.motion{
  transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0);
  will-change: transform, opacity;
}

/* MARK centered */
.mark{
  position:absolute;
  left:50%;
  top:45%;
  transform: translate3d(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px)), 0);
  background:transparent;
  border:0;
  padding:0;
  cursor:default;
  pointer-events:none;
  z-index:5;
}
.mark:focus-visible{
  outline:1px solid rgba(233,233,234,.18);
  outline-offset:10px;
  border-radius:10px;
}

.glitch-logo{ position:relative; display:inline-block; line-height:0; isolation:isolate; }
.glitch-logo .wrap{ position:relative; width:var(--logoW); display:block; }
.glitch-logo img{
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* BASE: w flow => nadaje wysokość całemu komponentowi */
.glitch-logo .layer.base{
  position:relative;  /* kluczowe */
  inset:auto;
  display:block;
  z-index:5;
}
.glitch-logo .layer.base > img{
  display:block;
  width:100%;
  height:auto;
  filter: contrast(1.12) brightness(1.03);
  transform: translateZ(0);
}

/* GLITCH: overlay => absolute */
.glitch-logo .layer.g{
  position:absolute;  /* kluczowe */
  inset:0;
  display:block;
  will-change:transform,opacity;
  z-index:2;
  opacity:0.22;
  mix-blend-mode:screen;
}
.glitch-logo .layer.g > img{ display:block; width:100%; height:auto; }

/* intro: glitch nad bazą */
.glitch-logo.intro .layer.g{ z-index:7; opacity:0.98; }
.glitch-logo.intro .layer.base{ z-index:6; }

/* kolory kanałów 
.glitch-logo .g.r > img{ filter: invert(19%) sepia(97%) saturate(6350%) hue-rotate(356deg) brightness(105%) contrast(118%); }
.glitch-logo .g.b > img{ filter: invert(84%) sepia(16%) saturate(4772%) hue-rotate(161deg) brightness(96%) contrast(91%); }
.glitch-logo .g.p > img{ filter: invert(37%) sepia(93%) saturate(5321%) hue-rotate(292deg) brightness(95%) contrast(101%); } */

.glitch-logo .g.r > img,
.glitch-logo .g.b > img,
.glitch-logo .g.p > img{
  filter: none;
}
.glitch-logo .layer.g{
  mix-blend-mode: normal; /* bardziej “czysto” */
  opacity: 0.0;           /* po intro niewidoczne */
}
.glitch-logo.intro .layer.g{
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .glitch-logo .layer, .glitch-logo .layer *{ animation:none !important; transition:none !important; }
}
/* subtle static offsets */
.glitch-logo .g.r{ transform: translate( 0.2px, -0.2px); }
.glitch-logo .g.b{ transform: translate(-0.2px,  0.2px); }
.glitch-logo .g.p{ transform: translate( 0.16px, 0.14px); }

/* Nav line under logo (centered) */
.site-nav{ position:static; }

.desktop-command{
  position:absolute;
  left:50%;
  top:calc(45% + (var(--logoW) * 0.24));
  transform:translate3d(-50%,0,0);
  width:min(760px, calc(100vw - 88px));
  z-index:7;
  display:grid;
  grid-template-columns: 1fr auto;
  gap:8px;
  align-items:center;
}
.desktop-command-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid rgba(233,233,234,.12);
  border-radius:10px;
  background:rgba(0,0,0,.20);
  padding:8px 10px;
}
.desktop-command-wrap.is-error{
  border-color:rgba(255,108,108,.46);
}
.desktop-command-wrap.is-info{
  border-color:rgba(162,196,232,.34);
}
.desktop-command-prompt{
  color:rgba(171,201,236,.90);
  font-size:10px;
  letter-spacing:.05em;
  white-space:nowrap;
}
.desktop-command-input{
  flex:1;
  min-width:0;
  border:0;
  background:transparent;
  color:var(--ink2);
  font-family:var(--mono);
  font-size:10.5px;
  outline:none;
}
.desktop-command-input::placeholder{
  color:rgba(233,233,234,.38);
}
.desktop-command-input.is-error::placeholder{
  color:rgba(255,108,108,.96);
}
.desktop-command-input.is-info::placeholder{
  color:rgba(188,206,222,.9);
}
.desktop-nav-toggle{
  width:28px;
  height:28px;
  border-radius:8px;
  border:1px solid rgba(233,233,234,.12);
  background:rgba(0,0,0,.20);
  color:var(--ink2);
  font-family:var(--mono);
  font-size:13px;
  line-height:1;
  cursor:pointer;
}
.desktop-nav-countdown{
  position:absolute;
  left:50%;
  top:calc(45% + (var(--logoW) * 0.63));
  transform:translate3d(-50%, 0, 0);
  width:14px;
  height:14px;
  border-radius:50%;
  border:1px solid rgba(233,233,234,.28);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
  overflow:hidden;
  opacity:.9;
  z-index:7;
  pointer-events:none;
}
.desktop-nav-countdown::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255,90,90,.22) 0px,
      rgba(108,243,198,.22) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    );
}
.desktop-nav-countdown .fill{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    conic-gradient(
      rgba(255,108,108,.88) 0deg,
      rgba(120,245,210,.9) calc(var(--desk-timer-angle, 0deg) * .6),
      rgba(88,132,255,.9) var(--desk-timer-angle, 0deg),
      rgba(0,0,0,0) var(--desk-timer-angle, 0deg)
    );
  transform: rotate(-90deg);
}
.desktop-nav-countdown.is-glitch{
  filter: hue-rotate(var(--desk-timer-hue, 0deg)) saturate(1.42) contrast(1.22);
}
.desktop-nav-countdown.is-glitch::after{
  opacity:.9;
}
.desktop-nav-countdown.hidden{
  opacity:0;
}
.desktop-cmd-help{
  grid-column:1 / -1;
  color:var(--ink3);
  font-size:10px;
  letter-spacing:.05em;
  opacity:.72;
  display:none;
}
#app:not(.ready) .desktop-command{
  opacity:0;
  pointer-events:none;
}
#app.ready .desktop-command{
  opacity:1;
  transition: opacity 260ms ease;
}

.mobile-nav-toggle{
  display:none;
}

#app:not(.ready) .mobile-nav-toggle{
  opacity:0;
  pointer-events:none;
}
#app.ready .mobile-nav-toggle{
  opacity:.9;
  transition: opacity 260ms ease;
}

@keyframes mobileNavReveal{
  0%{
    opacity:0;
    clip-path: inset(0 0 100% 0);
    transform:translate3d(-50%, -12px, 0) skewX(-1.8deg) scale(.985);
    filter: blur(2px) saturate(1.35) contrast(1.2);
  }
  28%{
    opacity:.88;
    clip-path: inset(18% 0 44% 0);
    transform:translate3d(-50%, -4px, 0) skewX(1.2deg) scale(1.01);
    filter: blur(1px) saturate(1.42) contrast(1.25) hue-rotate(32deg);
  }
  52%{
    opacity:1;
    clip-path: inset(4% 0 12% 0);
    transform:translate3d(-50%, 1px, 0) skewX(-0.8deg) scale(.998);
    filter: blur(.45px) saturate(1.22) contrast(1.1);
  }
  100%{
    opacity:1;
    clip-path: inset(0 0 0 0);
    transform:translate3d(-50%, 0, 0) skewX(0deg) scale(1);
    filter: blur(0) saturate(1) contrast(1);
  }
}

@keyframes mobileNavScan{
  0%{ opacity:0; transform: translateY(-6px); }
  18%{ opacity:.34; }
  100%{ opacity:0; transform: translateY(8px); }
}

@keyframes mobileNavItemIn{
  0%{
    opacity:0;
    transform: translate3d(0,-7px,0);
    filter: blur(1.4px);
  }
  46%{
    opacity:.7;
    transform: translate3d(0,2px,0);
    filter: blur(.8px);
  }
  100%{
    opacity:1;
    transform: translate3d(0,0,0);
    filter: blur(0);
  }
}

.nav-item{
  --navY: calc(45% + (var(--logoW) * 0.54));
  --gap: calc(var(--logoW) * 0.18);
  --offsetX: 0px;
}
.nav-item[data-key="about"]    { --offsetX: calc(var(--gap) * -1.5); }
.nav-item[data-key="links"]    { --offsetX: calc(var(--gap) * -0.5); }
.nav-item[data-key="calendar"] { --offsetX: calc(var(--gap) *  0.5); }
.nav-item[data-key="contact"]  { --offsetX: calc(var(--gap) *  1.5); }

.nav-item{
  position:absolute;
  left:50%;
  top:var(--navY);
  transform:translate3d(calc(-50% + var(--offsetX)),0,0);
  pointer-events:auto;
  z-index:6;
}

/* reveal menu only after intro (opacity only; never touch transform) */
#app:not(.ready) .nav-item{ opacity:0; }
#app.ready .nav-item{
  opacity:1;
  transition: opacity 520ms ease;
  transition-delay: var(--revealDelay, 0ms);
}

@media (min-width: 761px){
  #app.ready:not(.desktop-nav-open) .site-nav .nav-item{
    opacity:0 !important;
    pointer-events:none;
  }
  #app.desktop-nav-open .site-nav .nav-item{
    opacity:1 !important;
    pointer-events:auto;
  }
}

.nav-item a{
  position:relative;
  display:inline-block;
  padding:8px 10px;
  color:var(--ink2);
  text-decoration:none;
  text-transform:lowercase;
  letter-spacing:.10em;
  font-size:11px;
  line-height:1;
  opacity:.96;
  border-radius:12px;
  transition: color 180ms ease, opacity 240ms ease;
}
.nav-item a:hover{
  color:var(--ink);
}
.nav-item[data-active="true"] a{
  color:var(--ink);
}

/* Nav hover glitch (distinct from logo glitch) */
.nav-item a::before,
.nav-item a::after{
  content: attr(data-text);
  position:absolute;
  left:0; top:0;
  width:100%;
  color: var(--g1c, inherit);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  transform: translate(var(--g1x, 0px), var(--g1y, 0px));
  clip-path: var(--gclip1, inset(0 0 100% 0));
  mix-blend-mode: screen;
}
.nav-item a::after{
  color: var(--g2c, inherit);
  transform: translate(var(--g2x, 0px), var(--g2y, 0px));
  clip-path: var(--gclip2, inset(0 0 100% 0));
}

#app.nav-hover .nav-item{ opacity:0.34; }
#app.nav-hover .nav-item.is-hover{ opacity:1; }
#app.nav-hover .nav-item.is-hover a{ color: var(--ink); }
#app.nav-hover .nav-item.is-glitch a::before{ opacity: var(--gopa1, .24); }
#app.nav-hover .nav-item.is-glitch a::after{ opacity: var(--gopa2, .16); }

#app.nav-reignite .nav-item{ opacity:1 !important; }
#app.nav-reignite .nav-item a{ animation: navPulseIn 120ms ease-out both; }
@keyframes navPulseIn{
  0% { opacity:.78; }
  100% { opacity:.98; }
}

.meta{
  position:absolute;
  left:50%;
  bottom:28px;
  z-index:2;
  color:var(--ink3);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:lowercase;
  user-select:none;
  opacity:0;
  transform: translate3d(-50%, 0, 0);
  transition: opacity 600ms ease;
  pointer-events:none;
}
.meta.on{ opacity:.65; }

/* PANEL: centered */
.panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate3d(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px)), 0);
  width:min(900px, calc(100vw - 72px));
  height:min(500px, calc(100vh - 140px));
  border:1px solid rgba(233,233,234,.12);
  border-radius:14px;
  backdrop-filter: blur(4px);
  background:linear-gradient(180deg, rgba(7,8,11,.88), rgba(7,8,11,.72));
  box-shadow: 0 28px 90px rgba(0,0,0,.48);
  z-index:8;
  opacity:0;
  pointer-events:none;
  transition:
    opacity 260ms ease,
    width 240ms ease,
    height 240ms ease,
    top 240ms ease,
    bottom 240ms ease,
    transform 240ms ease,
    border-radius 240ms ease;
}
.panel.is-fullscreen{
  width:calc(100vw - 20px);
  height:calc(100vh - 20px);
  border-radius:10px;
}
.panel.is-minimized{
  top:auto;
  bottom:20px;
  width:min(520px, calc(100vw - 24px));
  height:58px;
  border-radius:12px;
  transform: translate3d(-50%, 0, 0);
}
.panel.on{ opacity:1; pointer-events:auto; }
.panel .chrome{
  position:absolute; inset:0;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(233,233,234,.03), rgba(233,233,234,0) 42%);
  pointer-events:none;
}
.panel .topline{
  position:absolute; left:0; right:0; top:54px;
  height:1px; background:rgba(233,233,234,.08); opacity:.9;
}
.panel-head{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:18px 18px 14px;
  z-index:1;
}
.panel-head::after{
  content:"";
  width:44px;
  display:block;
}
.panel-controls{
  display:flex;
  gap:10px;
}
.panel-controls .dot{
  width:12px;
  height:12px;
  border-radius:50%;
  display:block;
  border:0;
  padding:0;
  cursor:pointer;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.22);
}
.panel-controls .dot.red{ background:#ff6057; }
.panel-controls .dot.yellow{ background:#febc2e; }
.panel-controls .dot.green{ background:#28c840; }
.panel-controls .dot:hover{
  filter: brightness(1.08);
}
.panel-title{
  text-align:center;
  color:var(--ink2);
  letter-spacing:.10em;
  font-size:10px;
  text-transform:lowercase;
}
.panel-body{
  position:relative;
  padding:20px 22px 24px;
  height:calc(100% - 56px);
  overflow:hidden;
  z-index:1;
  font-size:11px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0) 22%),
    repeating-linear-gradient(0deg, rgba(233,233,234,.018) 0, rgba(233,233,234,.018) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 22px);
}
.view{
  height:100%;
}
.panel.is-minimized .panel-body{
  display:none;
}
.panel.is-minimized .topline{
  opacity:0;
}
.panel.is-minimized .panel-head{
  padding:16px 16px 12px;
}
.view[hidden]{ display:none; }

.label{
  color:var(--ink3);
  font-size:11px;
  letter-spacing:.10em;
  text-transform:lowercase;
  margin-bottom:8px;
}
.value{
  color:var(--ink2);
  font-size:11px;
  line-height:1.55;
}
.plain-copy{
  max-width: 74ch;
  color:var(--ink2);
}
.plain-copy p{
  margin: 0 0 10px;
}
.plain-copy p:last-child{
  margin-bottom: 0;
}
.plain-copy a{
  color:var(--ink2);
  text-decoration:none;
}
.plain-copy a:hover{
  color:var(--ink);
  text-decoration:underline;
}
.plain-copy .list{
  margin-top: 10px;
}

.contact-terminal,
.info-terminal{
  border:1px solid rgba(233,233,234,.12);
  border-radius:11px;
  background:rgba(0,0,0,.20);
  padding:14px;
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.term-output{
  min-height:0;
  flex:1;
  overflow:auto;
  margin-bottom:10px;
  padding-right:4px;
}
.term-line{
  color:var(--ink2);
  line-height:1.55;
  margin:0 0 6px;
  white-space:pre-wrap;
  word-break:break-word;
  font-size:10.5px;
}
.term-line.sys{ color:rgba(188,206,222,.88); }
.term-line.ok{ color:rgba(154,221,185,.92); }
.term-line.warn{ color:rgba(255,108,108,.96); }
.term-line.input{ color:rgba(255,255,255,.97); }
.term-line.prompt{ color:rgba(171,201,236,.90); }
.term-prompt-segment{ color:rgba(171,201,236,.90); }
.term-input-segment{ color:rgba(255,255,255,.97); }
.term-input-wrap{
  display:flex;
  align-items:center;
  gap:8px;
  border-top:1px solid rgba(233,233,234,.10);
  padding-top:10px;
  overflow-x:auto;
  order:3;
  margin-top:8px;
  flex:none;
}
.term-prompt{
  color:rgba(171,201,236,.90);
  font-size:10px;
  letter-spacing:.06em;
  white-space:nowrap;
  flex:none;
}
.term-input{
  flex:1;
  min-width:120px;
  border:0;
  background:transparent;
  color:var(--ink);
  font-family:var(--mono);
  font-size:10.5px;
  outline:none;
}
.term-help{
  margin-top:0;
  color:var(--ink3);
  font-size:10px;
  letter-spacing:.06em;
  order:2;
  flex:none;
}
.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}
.grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.card, .mono-block, .form{
  border:1px solid var(--line2);
  border-radius:14px;
  padding:14px;
  background: rgba(0,0,0,.10);
}
.list{ margin:0; padding-left:18px; }
.list li{ margin:8px 0; }
.list a{ color:var(--ink2); text-decoration:none; }
.list a:hover{ color:var(--ink); text-decoration:underline; }

.row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.field input, .field textarea{
  width:100%;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(233,233,234,.12);
  border-radius:12px;
  color:var(--ink2);
  padding:10px 12px;
  font-family:var(--mono);
  font-size:13px;
  outline:none;
}
.actions{ display:flex; align-items:center; gap:12px; margin-top:12px; }
.btn{
  border:1px solid rgba(233,233,234,.18);
  background:transparent;
  color:var(--ink2);
  border-radius:12px;
  padding:10px 12px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  cursor:pointer;
  text-transform:lowercase;
}
.btn:hover{ color:var(--ink); border-color:rgba(233,233,234,.24); }
.hintline{ color:var(--ink3); font-size:11px; letter-spacing:.08em; }

.kv{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:10px;
  padding:6px 0;
  border-bottom:1px solid rgba(233,233,234,.06);
}
.kv:last-child{ border-bottom:0; }
.kv .k{ color:var(--ink3); font-size:11px; letter-spacing:.10em; text-transform:lowercase; }
.kv .v a{ color:var(--ink2); text-decoration:none; }
.kv .v a:hover{ color:var(--ink); text-decoration:underline; }

/* state quieting (no blur) */
#app.is-focus .nav-item,
#app.is-deep  .nav-item{ opacity:.22; }
#app.is-focus .nav-item[data-active="true"],
#app.is-deep  .nav-item[data-active="true"]{ opacity:1; }

/* cursor dot */
.cursor-dot{
  position:fixed;
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(233,233,234,.35);
  transform:translate3d(-50%,-50%,0);
  pointer-events:none;
  z-index:10;
  mix-blend-mode:screen;
  opacity:0;
  transition: opacity 500ms ease;
}
.cursor-dot.on{ opacity:.75; }

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

@media (max-width: 860px){
  .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .row{ grid-template-columns: 1fr; }
  :root{ --logoW: clamp(210px, 64vw, 420px); }
  .nav-item a{ font-size:12.5px; letter-spacing:.10em; }
}

@media (max-width: 760px){
  .desktop-command{
    display:none;
  }
  .desktop-nav-countdown{
    display:none;
  }
  .mobile-nav-toggle{
    display:inline-flex;
    position:absolute;
    left:50%;
    top:calc(45% + (var(--logoW) * 0.22));
    transform:translate3d(-50%, 0, 0);
    align-items:center;
    justify-content:center;
    min-width:auto;
    height:auto;
    border:0;
    background:transparent;
    color:var(--ink2);
    font-family:var(--mono);
    font-size:22px;
    letter-spacing:0;
    line-height:1;
    padding:4px 8px;
    z-index:8;
    transition: color 180ms ease, opacity 220ms ease, text-shadow 180ms ease, transform 220ms ease;
    gap:7px;
  }
  .mobile-nav-chevron{
    display:block;
    transform-origin:center;
    transition: transform 220ms ease;
  }
  #app.mobile-nav-open .mobile-nav-chevron{
    transform: rotate(180deg);
  }
  .mobile-nav-countdown{
    width:17px;
    height:17px;
    border-radius:50%;
    position:relative;
    border:1px solid rgba(233,233,234,.35);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
    overflow:hidden;
    opacity:.9;
    pointer-events:none;
  }
  .mobile-nav-countdown::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    opacity:0;
    pointer-events:none;
    mix-blend-mode:screen;
    background:
      repeating-linear-gradient(
        0deg,
        rgba(255,90,90,.24) 0px,
        rgba(108,243,198,.22) 1px,
        rgba(0,0,0,0) 2px,
        rgba(0,0,0,0) 4px
      );
  }
  .mobile-nav-countdown .fill{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
      conic-gradient(
        rgba(255,108,108,.88) 0deg,
        rgba(120,245,210,.9) calc(var(--timer-angle, 0deg) * .6),
        rgba(88,132,255,.9) var(--timer-angle, 0deg),
        rgba(0,0,0,0) var(--timer-angle, 0deg)
      );
    transform: rotate(-90deg);
    transition: background 120ms linear;
  }
  .mobile-nav-countdown.is-glitch{
    filter: hue-rotate(var(--timer-hue, 0deg)) saturate(1.45) contrast(1.25);
  }
  .mobile-nav-countdown.is-glitch::after{
    opacity:.95;
  }
  .mobile-nav-countdown.hidden{
    opacity:0;
  }
  .mobile-nav-toggle:hover,
  .mobile-nav-toggle:active{
    color:var(--ink);
    text-shadow:
      1px 0 rgba(255,68,68,.26),
      -1px 0 rgba(68,255,118,.24);
  }
  .site-nav{
    position:absolute;
    left:50%;
    top:calc(45% + (var(--logoW) * 0.36));
    width:min(88vw, 340px);
    transform:translate3d(-50%, -10px, 0) scale(.985);
    z-index:7;
    opacity:0;
    clip-path: inset(0 0 100% 0);
    overflow:hidden;
    pointer-events:none;
    filter: blur(2px) saturate(1.3);
    transition:
      opacity 220ms ease,
      clip-path 260ms cubic-bezier(.2,.8,.2,1),
      transform 260ms cubic-bezier(.2,.8,.2,1),
      filter 200ms ease;
  }
  .site-nav::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:0;
    background:
      repeating-linear-gradient(
        0deg,
        rgba(255,88,88,.08) 0px,
        rgba(118,247,208,.06) 1px,
        rgba(0,0,0,0) 2px,
        rgba(0,0,0,0) 4px
      );
    mix-blend-mode:screen;
    z-index:3;
  }
  #app.mobile-nav-open .site-nav{
    opacity:1;
    clip-path: inset(0 0 0 0);
    pointer-events:auto;
    filter: blur(0) saturate(1);
    transform:translate3d(-50%, 0, 0) scale(1);
    animation: mobileNavReveal 320ms cubic-bezier(.2,.8,.2,1) both;
  }
  #app.mobile-nav-closing .site-nav{
    opacity:0;
    clip-path: inset(0 0 100% 0);
    transform:translate3d(-50%, -10px, 0) scale(.985);
    filter: blur(1.4px) saturate(1.2);
    pointer-events:none;
  }
  #app.mobile-nav-open .site-nav::before{
    animation: mobileNavScan 220ms steps(2,end) both;
  }
  .nav-item{
    position:relative;
    left:auto;
    top:auto;
    transform:translate3d(0,-6px,0);
    --offsetX: 0px;
    margin:0;
    opacity:0;
    pointer-events:none;
  }
  .nav-item[data-key="about"]{ --mrow:0; }
  .nav-item[data-key="links"]{ --mrow:1; }
  .nav-item[data-key="calendar"]{ --mrow:2; }
  .nav-item[data-key="contact"]{ --mrow:3; }
  .site-nav .nav-item a{
    display:block;
    width:100%;
    padding:12px 14px;
    text-align:center;
    font-size:12px;
    letter-spacing:.12em;
  }
  #app.ready:not(.mobile-nav-open) .site-nav .nav-item{
    opacity:0 !important;
    pointer-events:none;
    transform:translate3d(0,-6px,0);
  }
  #app.mobile-nav-open .site-nav .nav-item{
    opacity:1 !important;
    pointer-events:auto;
    transform:translate3d(0,0,0);
    animation: mobileNavItemIn 220ms cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc(48ms + (var(--mrow, 0) * 38ms));
  }
  #app.mobile-nav-closing .site-nav .nav-item{
    opacity:0 !important;
    transform:translate3d(0,-7px,0);
    pointer-events:none;
  }
  .term-prompt{
    font-size:9px;
    letter-spacing:.04em;
  }
  .term-input{
    font-size:16px;
  }
}

@media (max-width: 520px){
  :root{ --logoW: clamp(185px, 62vw, 300px); }
  .nav-item a{ font-size:11.5px; letter-spacing:.09em; }
}

@media (max-width: 380px){
  :root{ --logoW: clamp(170px, 60vw, 260px); }
  .nav-item a{ font-size:11px; letter-spacing:.08em; }
}

@media (prefers-reduced-motion: reduce){
  .motion{ transform:none !important; }
  .cursor-dot{ display:none; }
  .panel, .nav-item{ transition:none; }
  .glitch-logo .layer, .glitch-logo .layer *{ animation:none !important; transition:none !important; }
}
/* Ambient spotlight with readable contrast */
#spotlight{
  position:fixed;
  left:0; top:0;
  width:1300px; height:1300px;
  border-radius:999px;
  background:
    radial-gradient(circle,
      rgba(255,118,98,.22) 0%,
      rgba(112,244,210,.15) 34%,
      rgba(255,255,255,.06) 62%,
      rgba(255,255,255,0) 84%);
  opacity: .24;
  filter: blur(34px);
  transform: translate3d(-9999px,-9999px,0);
  pointer-events:none;
  z-index:9;
  mix-blend-mode: difference;
}

@keyframes panelIn {
  0%   { opacity:0; transform: translate3d(calc(-50% + var(--tx,0px)), calc(-50% + 10px + var(--ty,0px)), 0) scale(.985); }
  100% { opacity:1; transform: translate3d(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px)), 0) scale(1); }
}

@keyframes panelFlicker {
  0%   { clip-path: inset(0 0 0 0); opacity:.0; }
  12%  { clip-path: inset(18% 0 64% 0); opacity:.20; }
  22%  { clip-path: inset(62% 0 18% 0); opacity:.14; }
  34%  { clip-path: inset(26% 0 50% 0); opacity:.12; }
  100% { clip-path: inset(0 0 0 0); opacity:0; }
}

@keyframes panelInterference {
  0%   { opacity:0; clip-path: inset(var(--sl1t, 6%) 0 var(--sl1b, 80%) 0); transform: translateX(var(--sl1x, -10px)); }
  22%  { opacity:.38; clip-path: inset(var(--sl2t, 28%) 0 var(--sl2b, 46%) 0); transform: translateX(var(--sl2x, 14px)); }
  46%  { opacity:.32; clip-path: inset(var(--sl3t, 52%) 0 var(--sl3b, 24%) 0); transform: translateX(var(--sl3x, -8px)); }
  72%  { opacity:.20; clip-path: inset(var(--sl4t, 16%) 0 var(--sl4b, 66%) 0); transform: translateX(var(--sl4x, 6px)); }
  100% { opacity:0; clip-path: inset(0 0 0 0); transform: translateX(0); }
}

.panel.on:not(.glitch-in){
  animation: panelIn 360ms ease-out both;
}

.panel.on:not(.glitch-in) .chrome{
  animation: panelFlicker 420ms steps(1,end) both;
}

@keyframes panelGenieIn {
  0% {
    opacity:0;
    transform: translate3d(calc(-50% + var(--tx,0px) + var(--openJx, 0px)), calc(-50% + var(--ty,0px) + var(--openJy, 0px)), 0) scale(0.08, 0.03);
    filter: blur(3px) contrast(1.35) saturate(1.4);
  }
  24% {
    opacity:.92;
    transform: translate3d(calc(-50% + var(--tx,0px) + calc(var(--openJx, 0px) * .52)), calc(-50% + var(--ty,0px) + calc(var(--openJy, 0px) * .52)), 0) scale(0.48, 0.16) skewX(var(--openSkew1, -1.8deg));
    filter: blur(1.5px) contrast(1.45) saturate(1.55) hue-rotate(var(--openHue, 0deg));
  }
  46% {
    opacity:1;
    transform: translate3d(calc(-50% + var(--tx,0px) + calc(var(--openJx, 0px) * -.24)), calc(-50% + var(--ty,0px) + calc(var(--openJy, 0px) * -.24)), 0) scale(1.05, 0.74) skewX(calc(var(--openSkew1, -1.8deg) * -0.7));
    filter: blur(.9px) contrast(1.32) saturate(1.45);
  }
  70% {
    opacity:1;
    transform: translate3d(calc(-50% + var(--tx,0px) + calc(var(--openJx, 0px) * .12)), calc(-50% + var(--ty,0px) + calc(var(--openJy, 0px) * .12)), 0) scale(0.97, 1.04) skewX(var(--openSkew2, 0.9deg));
    filter: blur(.3px) contrast(1.14) saturate(1.2);
  }
  100% {
    opacity:1;
    transform: translate3d(calc(-50% + var(--tx,0px)), calc(-50% + var(--ty,0px)), 0) scale(1);
    filter: blur(0) contrast(1) saturate(1);
  }
}

.panel.glitch-in{
  transform-origin: var(--originX, 50%) var(--originY, 50%);
  animation: panelGenieIn var(--openDur, 340ms) cubic-bezier(.18,.86,.18,1) both;
}
.panel.glitch-in::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:16px;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,
      rgba(255,90,90,.06) 0px,
      rgba(100,245,190,.05) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px);
  mix-blend-mode: hard-light;
  opacity:.16;
  animation: panelFlicker 240ms steps(1,end) both, panelInterference 320ms steps(1,end) both;
}

.panel.glitch-burst .panel-head,
.panel.glitch-burst .panel-body,
.panel.glitch-burst .chrome,
.panel.glitch-burst .topline{
  transform: translate3d(var(--burstX, 0px), var(--burstY, 0px), 0) skewX(var(--burstSkew, 0deg));
}
.panel.glitch-burst .panel-body{
  clip-path: inset(var(--burstSliceTop, 0%) 0 var(--burstSliceBot, 0%) 0);
  filter: hue-rotate(var(--burstHue, 0deg)) saturate(var(--burstSat, 1.2)) contrast(var(--burstCon, 1.2));
}
.panel.glitch-burst .panel-title,
.panel.glitch-burst .panel-controls,
.panel.glitch-burst .panel-body,
.panel.glitch-burst .panel-body *{
  text-shadow:
    var(--burstRgbX, 0px) 0 rgba(255,66,66,var(--burstRgbA, .26)),
    calc(var(--burstRgbX, 0px) * -1) 0 rgba(88,255,116,var(--burstRgbA, .24)),
    0 var(--burstRgbY, 0px) rgba(78,138,255,var(--burstRgbA, .20));
}

/* Scatter clones used only during opening glitch */
.panel.open-scatter{
  position:fixed !important;
  margin:0 !important;
  pointer-events:none !important;
  z-index:13 !important;
  opacity:0;
  transform:none;
  clip-path: inset(var(--scTop, 0%) 0 var(--scBot, 0%) 0);
  filter: hue-rotate(var(--scHue, 0deg)) saturate(var(--scSat, 1.4)) contrast(var(--scCon, 1.2)) blur(var(--scBlur, 0px));
  mix-blend-mode: var(--scMix, difference);
  animation: panelScatterFlash 140ms steps(1,end) both;
}
.panel.open-scatter .chrome,
.panel.open-scatter .topline{
  opacity:.9;
}
.panel.open-scatter::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    linear-gradient(90deg,
      rgba(255,66,66,var(--scRgbA, .18)) 0%,
      rgba(88,255,116,var(--scRgbA, .18)) 44%,
      rgba(92,152,255,var(--scRgbA, .18)) 100%);
  transform: translate3d(var(--scRgbX, 0px), var(--scRgbY, 0px), 0);
}
@keyframes panelScatterFlash{
  0% {
    opacity:0;
    transform: translate3d(var(--scX, 0px), var(--scY, 0px), 0) scale(var(--scScale, 1)) skewX(var(--scSkew, 0deg));
  }
  22% { opacity:var(--scOp, .34); }
  58% { opacity:calc(var(--scOp, .34) * .55); }
  100% {
    opacity:0;
    transform: translate3d(calc(var(--scX, 0px) * 1.16), calc(var(--scY, 0px) * 1.12), 0) scale(calc(var(--scScale, 1) * 1.02)) skewX(calc(var(--scSkew, 0deg) * -1));
  }
}