.chat-launch{position:fixed;right:24px;bottom:22px;z-index:20;border:0;background:var(--ink);color:#fff;padding:15px 18px;display:flex;align-items:center;gap:11px;font:10px var(--mono);letter-spacing:.06em;cursor:pointer;box-shadow:0 12px 40px rgba(0,0,0,.16)}
.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}.hero-copy,.visual{min-width:0}.visual{margin-right:0}
.model-status{position:absolute;left:20px;bottom:24px;font:8px var(--mono);letter-spacing:.08em;color:var(--muted);display:flex;align-items:center;gap:8px;transition:opacity .4s}.model-status i{width:5px;height:5px;background:#90b900;border-radius:50%;box-shadow:0 0 0 4px rgba(144,185,0,.13);animation:model-pulse 1s infinite}.model-status.ready{opacity:0}.model-status.error{color:#9a5a49}.model-status.error i{background:#9a5a49;animation:none}.orb-copy{z-index:2;mix-blend-mode:multiply}.orb-copy b{opacity:.12}.orb-copy small{background:rgba(242,240,233,.78);padding:4px 7px}@keyframes model-pulse{50%{opacity:.25;transform:scale(.6)}}
.flight-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}.section,.metrics,footer{position:relative}.dark{z-index:1}.hero-copy{z-index:5}.visual-label,.model-status,.orb-copy{z-index:5}
.flight-controls{position:absolute;left:22px;bottom:22px;z-index:20;display:flex;align-items:center;gap:5px;padding:7px;background:rgba(23,25,21,.92);color:#fff;box-shadow:0 12px 35px rgba(0,0,0,.18);backdrop-filter:blur(12px)}.flight-controls__title{font:8px var(--mono);letter-spacing:.08em;padding:0 9px 0 5px;white-space:nowrap}.flight-controls__title i{display:inline-block;width:5px;height:5px;background:var(--acid);border-radius:50%;margin-right:7px}.flight-controls button{height:32px;min-width:32px;padding:0 9px;border:1px solid #45483f;background:#242620;color:#fff;font:9px var(--mono);cursor:pointer}.flight-controls button:hover,.flight-controls button[aria-pressed="true"]{background:var(--acid);color:var(--ink);border-color:var(--acid)}.flight-controls label{display:flex;align-items:center;gap:7px;padding:0 7px;font:8px var(--mono);color:#aeb1a7}.flight-controls input{width:70px;accent-color:var(--acid);cursor:pointer}
.chat-launch b{color:var(--acid);font-size:16px;margin-left:7px}.chat-pulse{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--acid);box-shadow:0 0 0 5px rgba(201,255,54,.12)}
.chat-panel{position:fixed;right:24px;bottom:22px;width:min(410px,calc(100vw - 24px));height:min(650px,calc(100vh - 40px));z-index:21;background:#171915;color:#f2f0e9;display:flex;flex-direction:column;transform:translateY(22px) scale(.97);transform-origin:bottom right;opacity:0;visibility:hidden;transition:.3s cubic-bezier(.2,.8,.2,1);box-shadow:0 28px 80px rgba(0,0,0,.35)}
.chat-panel.open{opacity:1;visibility:visible;transform:none}.chat-head{height:76px;border-bottom:1px solid #3a3c36;display:flex;align-items:center;justify-content:space-between;padding:0 21px}.chat-head>div{display:flex;align-items:center;gap:13px}.chat-head b{display:block;font:11px var(--mono);letter-spacing:.08em}.chat-head small{display:block;color:#8e9287;font:8px var(--mono);margin-top:5px}.chat-head button{border:0;background:transparent;color:#fff;font-size:26px;cursor:pointer}
.chat-messages{flex:1;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:17px}.message{display:grid;grid-template-columns:27px 1fr;gap:10px;align-items:start}.message>span{width:27px;height:27px;display:grid;place-items:center;background:var(--acid);color:#171915;font:8px var(--mono)}.message.user>span{background:#3d4038;color:#fff}.message p{margin:0;background:#242620;padding:13px 15px;font-size:13px;line-height:1.6;white-space:pre-wrap}.message.user p{background:#f2f0e9;color:#171915}
.model-gate{border:1px solid #3a3c36;padding:17px;margin-left:37px}.model-gate p{font-size:11px;line-height:1.55;color:#a7aa9f;margin:0 0 14px}.model-gate button{width:100%;border:0;background:var(--acid);color:#171915;padding:12px;text-align:left;font:9px var(--mono);cursor:pointer;display:flex;justify-content:space-between}.model-gate small{display:block;font:7px var(--mono);color:#777b70;margin-top:11px}.model-progress{height:2px;background:#33362e;margin-top:10px;overflow:hidden}.model-progress i{display:block;height:100%;width:0;background:var(--acid);transition:width .2s}
.suggestions{display:flex;gap:7px;overflow-x:auto;padding:0 22px 12px}.suggestions button{white-space:nowrap;border:1px solid #464940;background:transparent;color:#b9bcb3;padding:8px 10px;font:8px var(--mono);cursor:pointer}.chat-form{margin:0 22px;display:grid;grid-template-columns:1fr 45px;border:1px solid #45483f}.chat-form input{border:0;background:transparent;color:white;padding:14px;font:12px Manrope;outline:0}.chat-form button{border:0;border-left:1px solid #45483f;background:var(--acid);font-size:17px;cursor:pointer}.chat-form :disabled{opacity:.4;cursor:not-allowed}.chat-note{text-align:center;font:7px var(--mono);color:#686c61;margin:11px}.visual canvas{display:block;outline:none}
@media(max-width:700px){.flight-controls{left:12px;bottom:68px;max-width:calc(100vw - 24px);overflow-x:auto}.flight-controls__title{display:none}.flight-controls input{width:55px}}@media(max-width:500px){.chat-launch{right:12px;bottom:12px}.chat-panel{right:12px;bottom:12px;width:calc(100vw - 24px);height:calc(100vh - 24px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.chat-panel{transition:none}}
.flight-controls{left:auto;right:22px;touch-action:manipulation;flex-wrap:wrap;max-width:min(720px,calc(100% - 44px));justify-content:flex-end}.flight-keys{flex-basis:100%;text-align:right;color:#85897e;font:7px var(--mono);letter-spacing:.04em;padding:2px 4px}.flight-controls button:active{transform:translateY(1px);background:var(--acid);color:var(--ink)}
.credentials{border-top:1px solid var(--line)}.credential-grid{margin-left:29.5%;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.credential-grid article{padding:30px 26px;border-bottom:1px solid var(--line)}.credential-grid article:nth-child(odd){border-right:1px solid var(--line)}.credential-grid p{font:9px var(--mono);color:var(--muted);letter-spacing:.08em}.credential-grid h3{font-size:22px;margin:15px 0 8px}.credential-grid span{font-size:13px;line-height:1.55;color:var(--muted)}
@media(max-width:700px){.flight-controls{left:12px;right:12px;bottom:14px;max-width:none;justify-content:center;overflow-x:visible}.flight-controls button{min-width:38px;height:38px}.flight-controls label{display:none}.flight-keys{display:none}.credential-grid{margin-left:0;grid-template-columns:1fr}.credential-grid article:nth-child(odd){border-right:0}}
@media(max-width:700px){.flight-controls{top:calc(100svh - 112px);bottom:auto}}
.cinematic-intro{position:fixed;inset:0;z-index:100;background:#171915;color:#f2f0e9;display:flex;flex-direction:column;justify-content:center;padding:8vw;pointer-events:auto;overflow:hidden}.intro-scan{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 45%,rgba(201,255,54,.08) 50%,transparent 55%);transform:translateX(-100%);animation:introScan 1.8s ease-in-out forwards}.cinematic-ready .cinematic-intro{animation:introExit 1.8s 0.25s cubic-bezier(.7,0,.2,1) forwards}.model-ready.cinematic-ready .flight-controls{transition:opacity 1.2s 1.4s;opacity:1}body:not(.model-ready) .flight-controls{opacity:0;pointer-events:none}
@keyframes introScan{to{transform:translateX(100%)}}@keyframes introExit{to{opacity:0;visibility:hidden;transform:scale(1.012)}}

.intro-grid{display:grid;grid-template-columns:1.15fr 0.85fr;gap:6vw;width:100%;max-width:1200px;margin:0 auto;align-items:center;position:relative;z-index:101}
.intro-col-left{position:relative;height:360px;display:flex;flex-direction:column;justify-content:center}
.intro-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;visibility:hidden;transform:translateY(15px);transition:opacity 0.8s cubic-bezier(0.25,1,0.5,1),transform 0.8s cubic-bezier(0.25,1,0.5,1),visibility 0.8s}
.intro-slide.active{opacity:1;visibility:visible;transform:translateY(0)}
.intro-slide p{font:10px var(--mono);letter-spacing:.18em;color:var(--acid);margin:0 0 22px}
.intro-slide strong{font:600 clamp(38px,6vw,96px)/.86 Manrope,sans-serif;letter-spacing:-.07em}
.intro-slide span{font:9px var(--mono);letter-spacing:.12em;color:#9fa397;margin-top:40px;display:flex;align-items:center;gap:10px}
.intro-slide span i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 18px var(--acid);animation:model-pulse .7s infinite}

.pilot-sync-container{position:relative;border:1px solid rgba(201,255,54,0.18);background:rgba(23,25,21,0.7);padding:16px;max-width:340px;width:100%;margin:0 auto;box-shadow:0 20px 50px rgba(0,0,0,0.5),0 0 30px rgba(201,255,54,0.04);overflow:hidden}
.pilot-hud-overlay{position:absolute;top:16px;left:16px;right:16px;bottom:45px;border:1px solid rgba(201,255,54,0.22);pointer-events:none;background:linear-gradient(rgba(201,255,54,0.02) 50%,rgba(0,0,0,0.12) 50%);background-size:100% 4px;z-index:3}
.pilot-hud-overlay::before{content:"PILOT_ID: AS_97";position:absolute;top:10px;left:10px;font:7px var(--mono);color:var(--acid);opacity:0.8}
.pilot-hud-overlay::after{content:"SYNC_STATUS: ACTIVE";position:absolute;bottom:10px;right:10px;font:7px var(--mono);color:var(--acid);opacity:0.8}
.pilot-sync-svg{width:100%;height:auto;display:block;background:rgba(23,25,21,0.3);border:1px solid rgba(242,240,233,0.03);padding:10px}
.base-lines path{stroke:rgba(242,240,233,0.05);stroke-width:1.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.flow-lines path{stroke:var(--acid);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 240;stroke-dashoffset:340;animation:flowPulse 7.2s infinite linear;filter:drop-shadow(0 0 4px var(--acid))}

.pilot-sync-img{position:absolute;inset:16px;width:calc(100% - 32px);height:auto;display:block;opacity:0;transition:opacity 1.5s cubic-bezier(0.25,1,0.5,1);z-index:1;border:1px solid rgba(242,240,233,0.04);filter:brightness(0.95) contrast(1.05)}
.fully-loaded .pilot-sync-img{opacity:1}

.flow-p1{animation-delay:0s}
.flow-p2{animation-delay:0.9s}
.flow-p3{animation-delay:1.8s}
.flow-p4{animation-delay:2.7s}
.flow-p5{animation-delay:0.5s}
.flow-p6{animation-delay:1.4s}
.flow-p7{animation-delay:2.3s}
.flow-p8{animation-delay:3.2s}

@keyframes flowPulse{to{stroke-dashoffset:-340}}
.pilot-sync-status{margin-top:14px;display:flex;align-items:center;justify-content:space-between;font:8px var(--mono);color:#9fa397;letter-spacing:0.05em}
.sync-bar{height:2px;width:65px;background:rgba(242,240,233,0.08);position:relative;overflow:hidden;display:inline-block}
.sync-bar::after{content:"";position:absolute;left:0;top:0;height:100%;width:50%;background:var(--acid);box-shadow:0 0 8px var(--acid);animation:syncProgress 3.2s infinite ease-in-out}
@keyframes syncProgress{0%{left:-100%;width:30%}50%{left:30%;width:50%}100%{left:100%;width:30%}}

.intro-skip{position:absolute;bottom:40px;right:8vw;background:transparent;border:1px solid rgba(242,240,233,0.2);color:#9fa397;padding:10px 18px;font:9px var(--mono);letter-spacing:0.12em;cursor:pointer;z-index:102;transition:border-color 0.3s,color 0.3s,background 0.3s;pointer-events:auto}
.intro-skip:hover{border-color:var(--acid);color:var(--ink);background:var(--acid)}

@media(max-width:800px){
  .intro-grid{grid-template-columns:1fr;gap:40px}
  .intro-col-left{height:280px}
  .pilot-sync-container{max-width:240px;margin:0 auto}
  .pilot-hud-overlay{inset:10px}
  .pilot-hud-overlay::before{top:6px;left:6px}
  .pilot-hud-overlay::after{bottom:6px;right:6px}
}



@media(min-width:801px){.hero{min-height:650px;min-height:100vh;min-height:max(100svh,650px);padding:112px 3.5vw 32px;grid-template-columns:minmax(0,48%) minmax(0,52%);align-items:center}.hero-copy{align-self:center}.hero h1{font-size:clamp(54px,5.35vw,96px);line-height:.9;margin:18px 0 22px;max-width:780px}.lede{font-size:clamp(14px,1.05vw,18px);line-height:1.5;max-width:650px;margin:0}.actions{margin-top:24px}.visual{height:100%;min-height:0}.flight-controls{right:240px;bottom:18px;max-width:min(650px,48vw);padding:6px}.flight-keys{display:none}.scroll{bottom:20px}.visual-label{top:18px}.model-status{bottom:80px}.metrics p{padding-right:120px}}
@media(max-width:800px){.hero{min-height:100vh;min-height:100svh;padding:105px 5vw 120px;display:block}.hero h1{font-size:clamp(48px,14vw,68px);line-height:.88;margin:18px 0 24px;max-width:95%}.hero-copy{position:relative}.lede{font-size:15px;line-height:1.5;max-width:88%}.actions{margin-top:25px;gap:18px}.visual{inset:80px -35% auto 35%;width:100%;height:48vh;opacity:.46}.flight-controls{top:auto;bottom:14px;position:absolute}.cinematic-intro{padding:9vw}.cinematic-intro strong{font-size:15vw}}
@media(prefers-reduced-motion:reduce){.cinematic-intro{display:none}body:not(.cinematic-ready) .flight-controls{opacity:1}}

.section-subtitle {
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 1.6;
  color: var(--muted);
  margin-top: 16px;
  max-width: 540px;
}
.section-subtitle a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.2s;
  font-weight: 500;
}
.section-subtitle a:hover {
  color: #71a400;
}
.scramble-char {
  color: var(--scramble-color, var(--acid));
  font-family: var(--mono);
  font-weight: 500;
}
.dark .scramble-char {
  --scramble-color: var(--acid);
}
:not(.dark) .scramble-char {
  --scramble-color: var(--muted);
}

.about-visual {
  margin-top: 40px;
  max-width: 320px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
}
.about-img {
  width: 100%;
  height: auto;
  display: block;
  mix-blend-mode: multiply;
}

@media(max-width:600px){
  .chat-launch{
    width:48px;
    height:48px;
    border-radius:50%;
    padding:0;
    justify-content:center;
    bottom:80px;
    right:16px;
  }
  .chat-launch span:not(.chat-pulse){
    display:none;
  }
  .chat-launch b{
    display:none;
  }
}

.mobile-gamepad{display:none}

@media(max-width:800px){
  .hero {
    display: flex !important;
    flex-direction: column !important;
    padding-top: 110px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
    gap: 24px !important;
  }
  .hero-copy {
    order: 1 !important;
  }
  .visual {
    order: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 340px !important;
    opacity: 1 !important;
    background: #1c1e1a !important; /* Premium dark background for the 3D model viewport */
    border: 1px solid rgba(201, 255, 54, 0.08) !important;
    border-radius: 4px !important;
    overflow: hidden !important;
  }
  .visual-label, .model-status {
    display: none !important;
  }
  .model-ready .mobile-gamepad {
    order: 3 !important;
    display: flex !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    background: #171915 !important; /* Cockpit panel background */
    border: 1px solid rgba(201, 255, 54, 0.12) !important;
    border-radius: 4px !important;
    padding: 16px !important;
    gap: 20px !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  
  .joystick-container {
    flex: 0 0 80px !important;
    pointer-events: auto !important;
  }
  .joystick-base {
    width: 80px !important;
    height: 80px !important;
    background: #10120e !important;
    border: 1px dashed rgba(201, 255, 54, 0.3) !important;
    border-radius: 4px !important; /* Square base! */
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: none !important;
  }
  /* Crosshairs */
  .joystick-base::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 10% !important;
    right: 10% !important;
    height: 1px !important;
    background: rgba(201, 255, 54, 0.15) !important;
  }
  .joystick-base::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 10% !important;
    bottom: 10% !important;
    width: 1px !important;
    background: rgba(201, 255, 54, 0.15) !important;
  }
  .joystick-stick {
    width: 16px !important;
    height: 16px !important;
    background: none !important;
    border: 2px solid var(--acid) !important;
    border-radius: 2px !important; /* Square cursor! */
    position: absolute !important;
    box-shadow: 0 0 6px var(--acid) !important;
    transition: none !important;
  }
  
  .gamepad-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 !important;
    align-items: stretch !important;
    pointer-events: auto !important;
  }
  .gamepad-btn {
    background: #11130f !important;
    border: 1px solid rgba(201, 255, 54, 0.2) !important;
    color: #c9cbbe !important;
    font: 9px var(--mono) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 10px 14px !important;
    border-radius: 2px !important; /* Rectangular! */
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: all 0.2s !important;
    box-shadow: none !important;
    min-width: auto !important;
    text-align: left !important;
  }
  /* Status LED dot on the right of the button */
  .gamepad-btn::after {
    content: '' !important;
    display: inline-block !important;
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: #3e413b !important;
    margin-left: 10px !important;
    transition: background 0.3s, box-shadow 0.3s !important;
  }
  /* Active states */
  .gamepad-btn.gyro-btn.active {
    border-color: var(--acid) !important;
    color: #fff !important;
    background: rgba(201, 255, 54, 0.05) !important;
  }
  .gamepad-btn.gyro-btn.active::after {
    background: var(--acid) !important;
    box-shadow: 0 0 6px var(--acid) !important;
  }
  .gamepad-btn.boost-btn:active, .gamepad-btn.boost-btn.active {
    border-color: var(--acid) !important;
    color: #fff !important;
    background: rgba(201, 255, 54, 0.1) !important;
  }
  .gamepad-btn.boost-btn::after {
    background: #ff5500 !important; /* Thruster orange! */
  }
  .gamepad-btn.boost-btn:active::after, .gamepad-btn.boost-btn.active::after {
    box-shadow: 0 0 6px #ff5500 !important;
  }
  
  .flight-controls{display:none !important}
  .metrics{grid-template-columns:1fr;padding:0 5vw}
  .metrics>div{border-left:0;border-bottom:1px solid var(--line);padding:24px 0}
  .metrics>p{border-left:0;padding:24px 0}
}

/* Custom Cursor */
@media(pointer:fine){
  html,body{cursor:none}
  a,button,input,select,textarea,[role="button"],.project,.flight-controls button{cursor:none}
  .cursor-dot{width:6px;height:6px;background:var(--acid);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s,height .2s,background-color .2s}
  .cursor-ring{width:34px;height:34px;border:1px solid rgba(201,255,54,0.35);border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .35s cubic-bezier(0.25,1,0.5,1),height .35s cubic-bezier(0.25,1,0.5,1),border-color .35s,background-color .35s}
  .cursor-ring svg{width:100%;height:100%;color:rgba(201,255,54,0.35);display:block;transition:color 0.3s}
  
  .cursor-hover .cursor-dot{width:4px;height:4px;background:var(--acid)}
  .cursor-hover .cursor-ring{width:52px;height:52px;border-color:var(--acid);background:rgba(201,255,54,0.06);box-shadow:0 0 15px rgba(201,255,54,0.15)}
  .cursor-hover .cursor-ring svg{color:var(--acid)}
}
@media(pointer:coarse){
  .cursor-dot,.cursor-ring{display:none !important}
}

/* Project SVG Icons & Animations */
.proj-svg {
  width: 100%;
  height: 100%;
  max-width: 80px;
  max-height: 80px;
  display: block;
  color: var(--ink);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s;
}

.project:hover .proj-svg {
  transform: scale(1.06) rotate(2deg);
  color: var(--acid);
}

.project:hover .glow-orb {
  animation: orbGlow 1.2s infinite alternate ease-in-out;
}

.project:hover .pulse-line {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: pulseDraw 1.5s infinite linear;
}

@keyframes orbGlow {
  to {
    opacity: 0.3;
    transform: scale(1.15);
  }
}

@keyframes pulseDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Apple PWA Standalone Safe Areas */
@media (display-mode: standalone) {
  header, .header {
    padding-top: env(safe-area-inset-top);
    height: calc(88px + env(safe-area-inset-top));
  }
  .mobile-gamepad {
    padding-bottom: calc(14px + env(safe-area-inset-bottom)) !important;
  }
  .chat-launch {
    bottom: calc(22px + env(safe-area-inset-bottom));
  }
  .chat-panel {
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  @media (max-width: 800px) {
    .chat-launch {
      bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* Project Art Box Background and Cosmic/Starry SVGs */
.project-art {
  background: #1c1e1a !important;
  border: 1px solid rgba(201, 255, 54, 0.08);
}

.proj-svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Custom UI Vector Arrows (No-Emoji) */
.ui-arrow {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: middle;
  margin-left: 6px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

a:hover .ui-arrow, button:hover .ui-arrow {
  transform: translate(2px, -2px);
}

a:hover .ui-arrow[style*="rotate(90deg)"], button:hover .ui-arrow[style*="rotate(90deg)"] {
  transform: rotate(90deg) translate(2px, -2px) !important;
}

/* Animations for Cosmic Project SVGs */
.galaxy-spin, .orbit-rotate, .radar-sweep, .reticle-spin {
  transform-origin: 50px 50px;
}

/* MicroClaw: Claw Gripper Animation */
@keyframes clawGrab {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(4px);
  }
}
.project:hover .claw-gripper {
  animation: clawGrab 2s infinite ease-in-out;
}

/* HealthBuddy: EKG Heart Pulse & Neural Nodes */
.ekg-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}
.project:hover .ekg-line {
  animation: ekgPulse 2s infinite linear;
}
@keyframes ekgPulse {
  to {
    stroke-dashoffset: -200;
  }
}

/* Langchain One: OCR Laser Scanning & Data Flow */
@keyframes laserScan {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(22px);
  }
}
.project:hover .ocr-laser {
  animation: laserScan 2.5s infinite ease-in-out;
}

@keyframes dataStream {
  to {
    stroke-dashoffset: -20;
  }
}
.project:hover .data-flow {
  animation: dataStream 1s infinite linear;
}

.project:hover .reticle-spin {
  animation: spin 6s infinite linear;
}

/* Resume JD Matcher: Radar Sweep & Radar Poly Pulse */
.project:hover .matcher-detailed-svg .radar-sweep {
  animation: spin 3.5s infinite linear;
}

@keyframes pulseRadarPoly {
  0%, 100% {
    fill: rgba(201, 255, 54, 0.18);
    stroke-width: 2.2;
  }
  50% {
    fill: rgba(201, 255, 54, 0.3);
    stroke-width: 3;
  }
}
.project:hover .radar-poly {
  animation: pulseRadarPoly 2s infinite ease-in-out;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes heartBeat {
  0%, 100% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.08);
  }
  60% {
    transform: scale(0.96);
  }
}

@keyframes pulsePortal {
  to {
    r: 23px;
    opacity: 0.8;
  }
}

/* Footer Brand Icons */
.footer-icon-link {
  color: #171915;
  opacity: 0.75;
  transition: color 0.3s, opacity 0.3s, filter 0.3s;
  display: inline-flex;
  align-items: center;
  margin-left: 20px;
  vertical-align: middle;
}

.footer-icon-link:hover {
  color: #171915;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgba(23, 25, 21, 0.3));
}

.footer-svg {
  width: 20px;
  height: 20px;
}

/* Premium Interactive Timeline */
.timeline {
  position: relative;
  margin-left: 0 !important; /* Full width so date and card split left-right */
  padding-left: 0;
}

/* Gray track line - centered between date and card */
.timeline::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(29.5% + 24px);
  width: 1px;
  background: rgba(201, 255, 54, 0.12);
  z-index: 1;
}

/* Glowing green progress line */
.timeline-progress-line {
  position: absolute;
  top: 0;
  left: calc(29.5% + 24px);
  width: 1px;
  height: 0%;
  background: linear-gradient(to bottom, var(--acid), #90b900);
  box-shadow: 0 0 8px var(--acid);
  z-index: 2;
  transition: height 0.1s ease-out;
}

.timeline article {
  display: grid;
  grid-template-columns: 29.5% 1fr;
  gap: 48px;
  position: relative;
  padding: 32px 0;
  border-bottom: 1px solid rgba(201, 255, 54, 0.08);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.3s;
}

/* Timeline Dot - Aligned perfectly with title and vertical line */
.timeline article::before {
  content: '';
  position: absolute;
  left: calc(29.5% + 20px); /* Centered in the 48px gap (24px - 4.5px) */
  top: 38px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a3c36;
  border: 2px solid var(--ink);
  transition: background 0.3s, box-shadow 0.3s;
  z-index: 3;
}

.timeline article.active-role::before {
  background: var(--acid);
  box-shadow: 0 0 0 4px rgba(201, 255, 54, 0.2), 0 0 10px var(--acid);
  animation: model-pulse 1.5s infinite;
}

.timeline article:hover::before {
  background: var(--acid);
  box-shadow: 0 0 10px var(--acid);
}

.timeline article:hover {
  transform: translateX(12px);
}

.timeline time {
  font: 11px var(--mono);
  color: var(--muted);
  letter-spacing: 0.08em;
  text-align: right;
  padding-right: 12px;
  display: block;
  margin-top: 6px;
  transition: color 0.3s;
}

.timeline article:hover time {
  color: var(--acid);
}

.timeline h3 {
  font-size: 24px;
  letter-spacing: -0.03em;
  margin: 0 0 4px;
}

.timeline .company {
  font: 11px var(--mono);
  color: var(--acid);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timeline .company span {
  color: var(--muted);
}

.timeline .role-summary {
  font-size: 14px;
  line-height: 1.5;
  color: #aeb1a7;
  margin: 0 0 12px;
}

/* Expandable Technical Log */
.timeline .tech-log-toggle {
  font: 8px var(--mono);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
  transition: color 0.2s;
}

.timeline article:hover .tech-log-toggle {
  color: var(--acid);
}

.timeline .tech-log {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s;
  opacity: 0;
  margin-top: 0;
}

.timeline article.expanded .tech-log {
  max-height: 300px;
  opacity: 1;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed rgba(201, 255, 54, 0.15);
}

.timeline .tech-log ul {
  margin: 0;
  padding-left: 16px;
  color: #c9cbbe;
}

.timeline .tech-log li {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 8px;
  position: relative;
  list-style-type: none;
}

.timeline .tech-log li::before {
  content: '>';
  position: absolute;
  left: -16px;
  color: var(--acid);
  font-family: var(--mono);
  font-size: 11px;
}

/* Tech Badges inside Log */
.timeline .role-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.timeline .role-badges span {
  font: 8px var(--mono);
  background: rgba(201, 255, 54, 0.05);
  border: 1px solid rgba(201, 255, 54, 0.15);
  color: var(--acid);
  padding: 4px 8px;
  border-radius: 2px;
}

@media(max-width:800px) {
  .timeline {
    margin-left: 16px !important;
    padding-left: 24px !important;
  }
  .timeline::after, .timeline-progress-line {
    left: 0 !important;
  }
  .timeline article {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
  }
  .timeline article::before {
    left: -28.5px !important; /* centered on the 0px line */
    top: 24px;
  }
  .timeline time {
    text-align: left;
    padding-right: 0;
    margin-top: 0;
    margin-bottom: 4px;
  }
  .project-art {
    height: 220px !important;
    padding: 0 !important;
  }
  .proj-svg {
    width: 100% !important;
    height: 100% !important;
  }
}

/* Smooth Parallax Transitions */
.project, .about-visual, .flight-canvas {
  transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}