:root{--bg:#060a0e;--ink:#edf2f0;--muted:#738087;--red:#f04444;--teal:#59d9c6;--line:#223039;--mono:'IBM Plex Mono',monospace;--sans:'Space Grotesk',sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}body{font-family:var(--sans);overflow-x:hidden;background:radial-gradient(circle at 50% 44%,rgba(89,217,198,.08),transparent 26%),radial-gradient(circle at 50% 52%,rgba(240,68,68,.035),transparent 36%),var(--bg)}body:before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(89,217,198,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(89,217,198,.018) 1px,transparent 1px);background-size:42px 42px;pointer-events:none}.noise{position:fixed;inset:0;opacity:.045;pointer-events:none;z-index:8;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.scanline{position:fixed;left:0;right:0;height:110px;top:-120px;background:linear-gradient(transparent,rgba(89,217,198,.025),transparent);animation:scan 9s linear infinite;pointer-events:none;z-index:7}@keyframes scan{to{transform:translateY(calc(100vh + 240px))}}main{min-height:100vh;display:grid;grid-template-rows:76px 1fr 64px;position:relative}header,footer{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.3rem,4vw,4.5rem);border-color:var(--line);border-style:solid;border-width:0 0 1px;position:relative;z-index:4}.brand{font:600 .86rem var(--mono);letter-spacing:.16em}.brand span:last-child{color:var(--red)}.diamond{color:var(--teal)!important;font-size:1.2rem}.online{font:500 .61rem var(--mono);letter-spacing:.15em;color:#aab4b7}.online i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal);margin-right:.7rem;box-shadow:0 0 12px var(--teal);animation:pulse 2.5s ease-in-out infinite}@keyframes pulse{50%{opacity:.35;box-shadow:0 0 3px var(--teal)}}.holding{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(1rem,6vw,7rem);padding:2.5rem clamp(1.3rem,8vw,9rem);position:relative}.moth-zone{height:min(56vh,570px);position:relative;display:grid;place-items:center;order:2}.sonar{position:absolute;width:76%;aspect-ratio:1;border:1px solid rgba(89,217,198,.12);border-radius:50%}.sonar-one{animation:breathe 5s ease-in-out infinite}.sonar-two{width:54%;border-style:dashed;animation:rotate 55s linear infinite}@keyframes breathe{50%{transform:scale(1.06);opacity:.48}}@keyframes rotate{to{transform:rotate(360deg)}}.crosshair{position:absolute;width:90%;height:1px;background:linear-gradient(90deg,transparent,rgba(89,217,198,.12),transparent)}.crosshair:after{content:"";position:absolute;width:1px;height:56vh;max-height:570px;left:50%;top:50%;transform:translateY(-50%);background:linear-gradient(transparent,rgba(89,217,198,.12),transparent)}.moth{position:relative;width:58%;aspect-ratio:1;filter:drop-shadow(0 0 24px rgba(89,217,198,.2));animation:drift 6s ease-in-out infinite}@keyframes drift{50%{transform:translateY(-8px)}}.wing{position:absolute;top:27%;width:47%;height:48%;border:2px solid var(--teal);background:linear-gradient(145deg,rgba(89,217,198,.2),rgba(240,68,68,.07));clip-path:polygon(100% 0,86% 100%,0 72%,18% 12%)}.wing b{position:absolute;inset:18%;border:1px solid rgba(240,68,68,.78);clip-path:inherit}.wing i{position:absolute;width:10px;height:10px;border:1px solid var(--teal);border-radius:50%;left:35%;top:40%;box-shadow:0 0 10px rgba(89,217,198,.5)}.left-wing{left:2%;transform:rotate(-12deg)}.right-wing{right:2%;transform:scaleX(-1) rotate(-12deg)}.moth-body{position:absolute;left:46%;top:22%;width:8%;height:62%;background:linear-gradient(var(--red),#3a1115);clip-path:polygon(50% 0,100% 15%,70% 100%,30% 100%,0 15%)}.moth-body span{position:absolute;width:100%;height:2px;background:var(--teal);top:42%;box-shadow:0 15px 0 rgba(89,217,198,.65),0 30px 0 rgba(89,217,198,.35)}.antenna{position:absolute;top:9%;left:47%;width:2px;height:24%;background:var(--teal);transform:rotate(-28deg);transform-origin:bottom}.antenna.right{transform:rotate(28deg);left:52%}.copy{order:1;position:relative;z-index:2}.eyebrow{font:600 .66rem var(--mono);letter-spacing:.21em;color:var(--teal);margin-bottom:1.5rem}.copy h1{font:700 clamp(3.2rem,6.7vw,7.4rem)/.87 var(--sans);letter-spacing:-.07em;margin:0}.copy h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px var(--red);text-shadow:0 0 25px rgba(240,68,68,.15)}.intro{color:#aab4b7;font-size:clamp(.95rem,1.3vw,1.14rem);line-height:1.75;margin:2rem 0}.terminal{border-left:1px solid var(--red);padding:.7rem 1rem;color:#748188;font:500 .67rem var(--mono);letter-spacing:.08em;min-height:38px}.terminal>span:first-child{color:var(--red)}.terminal b{color:var(--teal);animation:blink .9s step-end infinite}@keyframes blink{50%{opacity:0}}.coordinate{position:absolute;font:500 .54rem var(--mono);letter-spacing:.16em;color:#3d4c53}.north{top:2rem;left:2rem}.west{right:1.4rem;top:50%;transform:rotate(90deg)}footer{border-width:1px 0 0}footer p{font:500 .54rem var(--mono);letter-spacing:.14em;color:#5d6b72}footer span{color:var(--teal)}@media(max-width:800px){main{grid-template-rows:68px auto 58px}.online{font-size:.52rem}.holding{grid-template-columns:1fr;text-align:center;padding-top:4rem;padding-bottom:4rem}.copy{order:2}.moth-zone{order:1;height:330px}.moth{width:220px}.intro{margin-left:auto;margin-right:auto}.terminal{display:inline-block;text-align:left}.coordinate{display:none}.copy h1{font-size:clamp(3rem,13vw,5.2rem)}footer p:first-child{display:none}}@media(max-width:440px){header{padding:0 1rem}.online{font-size:0}.online:after{content:'ONLINE';font-size:.52rem}.moth-zone{height:270px}.moth{width:185px}footer{justify-content:center}.holding{padding-left:1rem;padding-right:1rem}}

/* SIDECAR animation layer */
.sidecar-flight,.sidecar-transfer{position:absolute;inset:0;pointer-events:none}
.sidecar-flight{z-index:5;overflow:visible}
.sidecar-moth{
  position:absolute;left:50%;top:50%;
  width:clamp(112px,31%,190px);height:auto;
  opacity:0;transform-origin:center;
  will-change:transform,opacity,filter
}
.sidecar-transfer{z-index:6;display:grid;place-items:center}
.sidecar-skull{
  width:clamp(54px,15%,92px);
  overflow:visible;color:#fff;fill:currentColor;opacity:0;
  filter:drop-shadow(0 0 12px currentColor);
  will-change:opacity,transform,filter,color
}
.sidecar-skull-cut{fill:var(--bg)}
.sidecar-skull-teeth{
  fill:none;stroke:var(--bg);stroke-width:4;stroke-linecap:round
}
.sidecar-wave{
  position:absolute;width:18%;aspect-ratio:1;
  border:1px solid var(--teal);border-radius:50%;
  opacity:0;will-change:transform,opacity
}
.sidecar-active .sidecar-moth{
  animation:sidecar-arrival 3.65s cubic-bezier(.38,.02,.2,1) both
}
.sidecar-active .sidecar-skull{
  animation:sidecar-skull-transfer 2.5s 3.05s ease-in-out both
}
.sidecar-active .sidecar-wave{
  animation:sidecar-signal-wave 1.8s 3.48s ease-out both
}
@keyframes sidecar-arrival{
  0%{
    opacity:0;
    transform:translate(calc(-50% - var(--sidecar-span,700px)),20%)
      scale(.58) rotate(-12deg);
    filter:drop-shadow(0 0 7px rgba(255,255,255,.25))
  }
  9%{opacity:.92}
  27%{
    transform:translate(calc(-50% - var(--sidecar-span,700px)*.63),-95%)
      scale(.76,.68) rotate(8deg)
  }
  48%{
    transform:translate(calc(-50% - var(--sidecar-span,700px)*.34),38%)
      scale(.9,.74) rotate(-6deg)
  }
  69%{
    transform:translate(calc(-50% - var(--sidecar-span,700px)*.13),-63%)
      scale(.76,.68) rotate(4deg)
  }
  86%{
    opacity:1;
    transform:translate(-50%,-50%) scale(.47,.61);
    filter:drop-shadow(0 0 18px rgba(255,255,255,.78))
  }
  94%{
    opacity:.72;
    transform:translate(-50%,-50%) scale(.3,1.08);
    filter:drop-shadow(0 0 30px #fff)
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.04,1.35);
    filter:drop-shadow(0 0 35px var(--teal))
  }
}
@keyframes sidecar-skull-transfer{
  0%{opacity:0;color:#fff;transform:scale(.55)}
  18%{
    opacity:1;color:#fff;transform:scale(1.12);
    filter:drop-shadow(0 0 26px #fff)
  }
  42%{
    opacity:.92;color:var(--red);transform:scale(.97);
    filter:drop-shadow(0 0 24px var(--red))
  }
  68%{
    opacity:.82;color:var(--teal);transform:scale(1.04);
    filter:drop-shadow(0 0 20px var(--teal))
  }
  100%{
    opacity:0;color:var(--teal);transform:scale(.92);
    filter:drop-shadow(0 0 2px transparent)
  }
}
@keyframes sidecar-signal-wave{
  0%{opacity:.75;transform:scale(.45)}
  100%{opacity:0;transform:scale(4.8)}
}
.sidecar-reduced .sidecar-skull{
  opacity:.78;color:var(--teal);transform:scale(1);
  transition:opacity .35s ease
}
@media(max-width:800px){
  .sidecar-moth{width:145px}
  .sidecar-skull{width:62px}
}
@media(max-width:440px){
  .sidecar-moth{width:116px}
  .sidecar-skull{width:50px}
}
@media(prefers-reduced-motion:reduce){
  .sidecar-active .sidecar-moth,
  .sidecar-active .sidecar-skull,
  .sidecar-active .sidecar-wave{animation:none}
}

/* SIDECAR refinement v2: smoother flight and realistic skull */
.sidecar-skull{
  display:block;
  width:clamp(62px,17%,104px);
  aspect-ratio:102/136;
  background:currentColor;
  -webkit-mask:
    url("assets/sidecar/mothline-realistic-skull-mask-v1.png")
    center/contain no-repeat;
  mask:
    url("assets/sidecar/mothline-realistic-skull-mask-v1.png")
    center/contain no-repeat;
  fill:none;
  filter:
    blur(.15px)
    drop-shadow(0 0 10px currentColor)
}
.sidecar-active .sidecar-moth{
  animation:
    sidecar-arrival-smooth 4.35s
    cubic-bezier(.32,.03,.18,1) both
}
.sidecar-active .sidecar-skull{
  animation:
    sidecar-real-skull-transfer 2.65s 3.72s
    ease-in-out both
}
.sidecar-active .sidecar-wave{
  animation:
    sidecar-signal-wave 1.8s 4.12s
    ease-out both
}
@keyframes sidecar-arrival-smooth{
  0%{
    opacity:0;
    transform:
      translate(calc(-50% - var(--sidecar-span,700px)),12%)
      scale(.54,.78) rotate(-6deg)
  }
  8%{opacity:.92}
  16%{
    transform:
      translate(calc(-50% - var(--sidecar-span,700px)*.82),-10%)
      scale(.63,1.02) rotate(-3deg)
  }
  28%{
    transform:
      translate(calc(-50% - var(--sidecar-span,700px)*.65),-28%)
      scale(.69,.76) rotate(2deg)
  }
  40%{
    transform:
      translate(calc(-50% - var(--sidecar-span,700px)*.48),-38%)
      scale(.76,1.01) rotate(4deg)
  }
  52%{
    transform:
      translate(calc(-50% - var(--sidecar-span,700px)*.33),-29%)
      scale(.78,.77) rotate(1deg)
  }
  64%{
    transform:
      translate(calc(-50% - var(--sidecar-span,700px)*.21),-17%)
      scale(.75,.98) rotate(-2deg)
  }
  75%{
    transform:
      translate(calc(-50% - var(--sidecar-span,700px)*.12),-10%)
      scale(.69,.79) rotate(-1deg)
  }
  84%{
    transform:
      translate(calc(-50% - var(--sidecar-span,700px)*.055),-5%)
      scale(.61,.92) rotate(0)
  }
  91%{
    opacity:1;
    transform:
      translate(-50%,-50%)
      scale(.48,.72)
  }
  96%{
    opacity:.72;
    transform:
      translate(-50%,-50%)
      scale(.25,1.04);
    filter:drop-shadow(0 0 26px #fff)
  }
  100%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      scale(.035,1.2);
    filter:drop-shadow(0 0 34px var(--teal))
  }
}
@keyframes sidecar-real-skull-transfer{
  0%{
    opacity:0;color:#fff;
    transform:scale(.58);
    filter:blur(.3px) drop-shadow(0 0 5px #fff)
  }
  20%{
    opacity:1;color:#fff;
    transform:scale(1.08);
    filter:blur(.1px) drop-shadow(0 0 24px #fff)
  }
  45%{
    opacity:.94;color:var(--red);
    transform:scale(.98);
    filter:drop-shadow(0 0 22px var(--red))
  }
  70%{
    opacity:.84;color:var(--teal);
    transform:scale(1.03);
    filter:drop-shadow(0 0 19px var(--teal))
  }
  100%{
    opacity:0;color:var(--teal);
    transform:scale(.93);
    filter:drop-shadow(0 0 2px transparent)
  }
}

/* SIDECAR refinement v3: articulated wings and precision landing */
.sidecar-moth{
  left:0;
  top:0;
  width:clamp(112px,31%,190px);
  height:auto;
  aspect-ratio:512/368;
  opacity:0;
  transform-origin:center;
  offset-distance:0%;
  offset-rotate:0deg;
  will-change:offset-distance,transform,opacity,filter
}
.sidecar-moth-layer{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  pointer-events:none;
  will-change:transform
}
.sidecar-wing-left{
  clip-path:polygon(0 0,54% 0,54% 100%,0 100%);
  transform-origin:52% 50%
}
.sidecar-wing-right{
  clip-path:polygon(46% 0,100% 0,100% 100%,46% 100%);
  transform-origin:48% 50%
}
.sidecar-body{
  z-index:2;
  clip-path:polygon(40% 0,60% 0,60% 100%,40% 100%)
}
.sidecar-active .sidecar-wing-left{
  animation:sidecar-left-wingbeat .19s ease-in-out infinite alternate
}
.sidecar-active .sidecar-wing-right{
  animation:sidecar-right-wingbeat .19s ease-in-out infinite alternate
}
.sidecar-active .sidecar-moth{
  animation:sidecar-flight-v3 4.65s linear both
}
@keyframes sidecar-left-wingbeat{
  from{transform:perspective(420px) rotateY(-3deg) scaleX(1)}
  to{transform:perspective(420px) rotateY(46deg) scaleX(.72)}
}
@keyframes sidecar-right-wingbeat{
  from{transform:perspective(420px) rotateY(3deg) scaleX(1)}
  to{transform:perspective(420px) rotateY(-46deg) scaleX(.72)}
}
@keyframes sidecar-flight-v3{
  0%{
    offset-distance:0%;
    opacity:0;
    transform:scale(.58) rotate(-5deg)
  }
  7%{opacity:.96}
  22%{transform:scale(.72) rotate(2deg)}
  44%{transform:scale(.8) rotate(4deg)}
  66%{transform:scale(.73) rotate(-2deg)}
  82%{transform:scale(.62) rotate(0)}
  91%{
    opacity:1;
    transform:scale(.48)
  }
  96%{
    opacity:.72;
    transform:scale(.24,1.02);
    filter:drop-shadow(0 0 25px #fff)
  }
  100%{
    offset-distance:100%;
    opacity:0;
    transform:scale(.035,1.15);
    filter:drop-shadow(0 0 34px var(--teal))
  }
}
.sidecar-skull{
  width:clamp(18px,4.65%,28px);
  filter:
    blur(.1px)
    drop-shadow(0 0 5px currentColor)
}
.sidecar-active .sidecar-skull{
  animation:
    sidecar-real-skull-transfer 2.65s 4.02s
    ease-in-out both
}
.sidecar-active .sidecar-wave{
  animation:
    sidecar-signal-wave 1.8s 4.38s
    ease-out both
}
@media(max-width:800px){
  .sidecar-moth{width:145px}
  .sidecar-skull{width:18px}
}
@media(max-width:440px){
  .sidecar-moth{width:116px}
  .sidecar-skull{width:15px}
}

/* SIDECAR v4.1: responsive motion profiles */
.sidecar-active .sidecar-moth{
  animation-duration:var(--sidecar-flight-duration,4.65s)
}
.sidecar-active .sidecar-skull{
  animation-delay:var(--sidecar-skull-delay,4.02s)
}
.sidecar-active .sidecar-wave{
  animation-name:sidecar-signal-wave-responsive;
  animation-delay:var(--sidecar-wave-delay,4.38s)
}
@keyframes sidecar-signal-wave-responsive{
  0%{opacity:.75;transform:scale(.45)}
  100%{
    opacity:0;
    transform:scale(var(--sidecar-wave-scale,4.8))
  }
}
@media(max-width:800px){
  .sidecar-moth{width:132px}
  .sidecar-skull{width:18px}
}
@media(max-width:440px){
  .sidecar-moth{width:104px}
  .sidecar-skull{width:16px}
}


/* SIDECAR v4.3: deterministic one-tap phone launch */
.sidecar-phone-launch {
  display: none;
}

@media (max-width: 800px) {
  .sidecar-phone-launch {
    position: absolute;
    z-index: 9;
    left: 50%;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .65rem 1rem;
    transform: translateX(-50%);
    border: 1px solid var(--teal);
    background: rgba(6, 10, 14, .88);
    color: var(--teal);
    font: 600 .62rem var(--mono);
    letter-spacing: .15em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow:
      0 0 0 1px rgba(89, 217, 198, .08),
      0 0 18px rgba(89, 217, 198, .12);
  }

  .sidecar-phone-launch:active {
    color: var(--bg);
    background: var(--teal);
  }

  .sidecar-phone-launched {
    opacity: 0;
    visibility: hidden;
    transition:
      opacity .2s ease,
      visibility 0s linear .2s;
  }
}


/* SIDECAR v4.5: two-panel portrait-phone composition */
@media (max-width: 800px) and (orientation: portrait) {
  main {
    min-height: 200dvh;
    grid-template-rows: 68px auto 58px;
  }

  .holding {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    align-items: stretch;
  }

  /* Header + dcone = first complete phone viewport. */
  .moth-zone {
    order: 1;
    height: calc(100dvh - 68px);
    min-height: calc(100dvh - 68px);
  }

  /* dctwo + footer = second complete phone viewport. */
  .copy {
    order: 2;
    min-height: calc(100dvh - 58px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.75rem 1rem;
  }

  .copy h1 {
    font-size: clamp(2.65rem, 12vw, 4.7rem);
  }

  .eyebrow {
    margin-bottom: 1rem;
  }

  .intro {
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
  }

  footer {
    height: 58px;
  }
}