:root {
  --bg: #050505;
  --bg-soft: #0b0b0b;
  --card: rgba(255, 255, 255, 0.045);
  --card-border: rgba(255, 255, 255, 0.09);
  --text: #f3efe8;
  --muted: #9a9894;
  --line: rgba(243, 239, 232, 0.18);
  --glow: rgba(255, 244, 220, 0.35);
  --max: 1320px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
::selection { background: var(--text); color: var(--bg); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

#particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -3;
  opacity: .65;
}
.noise {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .03;
  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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

.cursor-dot,.cursor-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 100; border-radius: 50%; transform: translate(-50%,-50%); }
.cursor-dot { width: 5px; height: 5px; background: var(--text); }
.cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.55); transition: width .2s ease,height .2s ease,background .2s ease,border .2s ease; }
.cursor-ring.is-hovering { width: 54px; height: 54px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  max-width: var(--max);
  margin: auto;
  height: 88px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  mix-blend-mode: difference;
}
.brand { font: 700 15px/1 "Space Grotesk",sans-serif; letter-spacing: -.03em; }
.desktop-nav { display: flex; gap: 28px; align-items: center; }
.desktop-nav a { font-size: 13px; color: rgba(255,255,255,.74); position: relative; }
.desktop-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:#fff; transition:right .25s ease; }
.desktop-nav a:hover::after,.desktop-nav a.active::after { right:0; }
.desktop-nav a:hover,.desktop-nav a.active { color:#fff; }
.menu-toggle { display:none; border:0; background:none; width:44px; height:44px; padding:12px; cursor:pointer; }
.menu-toggle span { display:block; height:1px; background:#fff; margin:7px 0; transition:.3s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mobile-menu { position:fixed; inset:0; z-index:35; background:rgba(5,5,5,.98); padding:130px 28px 40px; transform:translateY(-100%); transition:transform .55s cubic-bezier(.76,0,.24,1); visibility:hidden; }
.mobile-menu.is-open { transform:translateY(0); visibility:visible; }
.mobile-menu nav { display:flex; flex-direction:column; gap:18px; }
.mobile-menu nav a { font:600 clamp(42px,12vw,72px)/.96 "Space Grotesk",sans-serif; letter-spacing:-.05em; }
.mobile-socials { position:absolute; left:28px; bottom:34px; display:flex; gap:20px; color:var(--muted); font-size:13px; }

.section { position:relative; max-width:var(--max); margin:0 auto; min-height:100vh; padding:132px 28px 100px; }
.section-number { position:absolute; top:112px; left:28px; font-size:12px; color:var(--muted); letter-spacing:.12em; }
.eyebrow { margin:0 0 12px; text-transform:uppercase; letter-spacing:.17em; font-size:11px; color:var(--muted); }
.section-heading { margin-left:10%; margin-bottom:54px; }
.section-heading h2,.about h2,.contact h2 { font:600 clamp(48px,7vw,104px)/.92 "Space Grotesk",sans-serif; letter-spacing:-.06em; margin:0; }

.hero { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; overflow:hidden; padding-top:110px; }
.hero::after { content:""; position:absolute; width:60vw; height:60vw; max-width:850px; max-height:850px; right:-30vw; top:8vh; background:radial-gradient(circle,rgba(255,255,255,.06),transparent 68%); filter:blur(10px); pointer-events:none; }
.hero-copy { position:relative; z-index:2; padding-left:2vw; }
.hero-title { margin:0; display:flex; flex-direction:column; font:700 clamp(82px,11vw,172px)/.72 "Space Grotesk",sans-serif; letter-spacing:-.085em; text-transform:lowercase; }
.hero-title span { display:block; }
.hero-tagline { margin:36px 0 0 5px; font-size:16px; line-height:1.5; color:#c7c2ba; }
.hero-character { display:flex; align-items:center; justify-content:center; position:relative; z-index:2; }
.orb-wrap { position:relative; width:min(39vw,520px); aspect-ratio:1; }
.orb-glow { position:absolute; inset:-12%; border-radius:50%; background:radial-gradient(circle at 35% 35%,rgba(255,248,230,.18),transparent 58%); filter:blur(18px); }
.orb { position:absolute; inset:6%; border-radius:50%; background:radial-gradient(circle at 35% 32%,#24221f 0,#080808 34%,#000 72%); border:1px solid rgba(255,250,235,.45); box-shadow:-18px -18px 55px rgba(255,246,220,.08), inset 12px 10px 36px rgba(255,255,255,.02); animation:float 6s ease-in-out infinite; }
.orb::before { content:""; position:absolute; inset:-1px; border-radius:50%; background:conic-gradient(from 210deg,transparent 0 66%,rgba(255,246,220,.65) 76%,transparent 84%); filter:blur(1px); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0); mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0); }
.eye {
  width:74px;
  height:74px;
  background:#f6f1e8;
  border-radius:50%;
  position:absolute;
  top:41%;
  overflow:hidden;
  box-shadow:0 0 18px rgba(255,245,225,.08);
  transition: transform .28s cubic-bezier(.22,1,.36,1), background .28s ease, box-shadow .28s ease;
  transform-origin:center center;
}
.eye.left { left:30.5%; }
.eye.right { right:30.5%; }
.pupil {
  width:22px;
  height:22px;
  background:#060606;
  border-radius:50%;
  position:absolute;
  left:26px;
  top:26px;
  transition:transform .07s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
  will-change:transform;
}
.pupil::after {
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#fffdf7;
  top:3px;
  right:3px;
  box-shadow:0 0 5px rgba(255,255,255,.28);
  pointer-events:none;
}
.scribble { position:absolute; right:-7%; top:57%; font-size:15px; transform:rotate(-8deg); font-family:"Comic Sans MS",cursive; color:#f4eee5; }
.scroll-cue { position:absolute; bottom:38px; left:34px; display:flex; align-items:center; gap:12px; font-size:11px; color:var(--muted); }
.mouse { width:14px; height:22px; border:1px solid var(--muted); border-radius:999px; position:relative; }
.mouse::after { content:""; width:2px; height:4px; background:var(--muted); border-radius:999px; position:absolute; top:5px; left:5px; animation:scrollDot 1.6s infinite; }
.down-arrow { position:absolute; right:38px; bottom:34px; font-size:28px; }

.about { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:7vw; border-top:1px solid var(--line); }
.about-copy { margin-left:10%; max-width:540px; }
.about .lead { margin:30px 0; max-width:520px; color:#b5b0a8; line-height:1.75; }
.pill { display:inline-flex; align-items:center; gap:18px; border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:12px 18px; font-size:13px; transition:.25s ease; }
.pill:hover { background:var(--text); color:var(--bg); }
.about-visual { display:flex; justify-content:center; }
.photo-stack { width:min(36vw,440px); aspect-ratio:4/5; position:relative; }
.photo-card { position:absolute; inset:8%; border:5px solid #eee8de; background:#111; box-shadow:0 15px 40px rgba(0,0,0,.45); }
.back-one { transform:rotate(-7deg) translate(-16px,3px); opacity:.7; }
.back-two { transform:rotate(6deg) translate(16px,-8px); opacity:.9; }
.main-photo { transform:rotate(2deg); overflow:hidden; background-image:url('assets/emma.jpg'); background-size:cover; background-position:center; }
.photo-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#8d8982; background:linear-gradient(140deg,#1b1b1b,#090909); }
.photo-placeholder span { font:600 22px/1.1 "Space Grotesk"; }
.photo-placeholder small { margin-top:10px; color:#605d59; }
.main-photo.has-photo .photo-placeholder { display:none; }
.photo-note { position:absolute; right:-6%; bottom:4%; font-family:"Comic Sans MS",cursive; transform:rotate(-8deg); }

.skills { border-top:1px solid var(--line); min-height:auto; }
.skills-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:0 4%; }
.skill-card { min-height:210px; padding:26px; background:var(--card); border:1px solid var(--card-border); border-radius:18px; transition:transform .2s ease,border-color .25s ease,background .25s ease; transform-style:preserve-3d; }
.skill-card:hover { border-color:rgba(255,255,255,.18); background:rgba(255,255,255,.065); }
.skill-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:#f1ede5; color:#080808; font:700 22px/1 "Space Grotesk"; margin-bottom:36px; }
.skill-card h3 { font:600 18px/1.1 "Space Grotesk"; margin:0 0 8px; }
.skill-card p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }

.work { border-top:1px solid var(--line); min-height:auto; }
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:0 2%; }
.project-card { background:var(--card); border:1px solid var(--card-border); border-radius:20px; overflow:hidden; transform-style:preserve-3d; }
.project-art { height:310px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:20px; }
.project-art::before,.project-art::after { content:""; position:absolute; border-radius:50%; filter:blur(1px); }
.project-art span { position:relative; z-index:2; margin-left:auto; font:700 72px/1 "Space Grotesk"; color:rgba(255,255,255,.2); }
.art-one { background:linear-gradient(155deg,#272727,#0c0c0c); }
.art-one::before { width:190px;height:190px;background:linear-gradient(145deg,#444,#111);left:30px;top:40px;border:1px solid rgba(255,255,255,.1); }
.art-one::after { width:90%;height:1px;background:rgba(255,255,255,.2);left:5%;bottom:60px;border-radius:0;box-shadow:0 -50px 0 rgba(255,255,255,.07),0 -100px 0 rgba(255,255,255,.04); }
.art-two { background:linear-gradient(160deg,#342b21,#0e0c0b); }
.art-two::before { width:160px;height:220px;background:radial-gradient(circle at 55% 30%,#d9d0bd 0 7%,#a88b66 8% 13%,transparent 14%),linear-gradient(#4a382b,#1d1712);right:50px;top:40px;border-radius:20px 20px 70px 70px;opacity:.8; }
.art-three { background:linear-gradient(140deg,#171717,#050505); }
.art-three::before { width:70%;height:55%;background:linear-gradient(135deg,#282828,#0f0f0f);left:15%;top:20%;border-radius:14px;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 40px rgba(0,0,0,.5); }
.project-body { padding:24px; }
.project-type { margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.15em; color:var(--muted); }
.project-body h3 { margin:0 0 10px; font:600 25px/1.1 "Space Grotesk"; }
.project-body p:not(.project-type) { margin:0 0 26px; min-height:46px; color:#a7a29b; line-height:1.55; font-size:14px; }
.project-link { font-size:13px; }
.work-note { margin:28px 2% 0; color:var(--muted); font-size:12px; }

.experience { border-top:1px solid var(--line); min-height:auto; }
.timeline {
  margin:0 auto;
  width:min(900px,80%);
  position:relative;
  --timeline-x:160px;
}
.timeline::before {
  content:"";
  position:absolute;
  left:var(--timeline-x);
  top:22px;
  bottom:22px;
  width:1px;
  background:linear-gradient(var(--text),rgba(255,255,255,.1));
}
.timeline-glow {
  position:absolute;
  z-index:0;
  left:calc(var(--timeline-x) - 1px);
  top:22px;
  width:3px;
  height:74px;
  border-radius:999px;
  background:linear-gradient(to bottom,transparent,rgba(255,248,230,.95),transparent);
  box-shadow:0 0 9px rgba(255,245,220,.85),0 0 24px rgba(255,245,220,.35);
  opacity:0;
  transform:translateY(0);
  transition:transform .42s cubic-bezier(.22,1,.36,1),opacity .2s ease;
  pointer-events:none;
}
.timeline.is-active .timeline-glow { opacity:1; }
.timeline-item {
  display:grid;
  grid-template-columns:140px 1fr;
  gap:48px;
  padding:26px 0;
  position:relative;
  z-index:1;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}
.timeline-item::before {
  content:"";
  position:absolute;
  left:154px;
  top:34px;
  width:13px;
  height:13px;
  background:var(--text);
  border-radius:50%;
  box-shadow:0 0 0 5px var(--bg),0 0 0 rgba(255,245,220,0);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,background .3s ease;
}
.time {
  font-size:13px;
  color:var(--muted);
  text-align:right;
  transition:color .3s ease,transform .3s ease;
}
.timeline-item > div:last-child {
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}
.timeline-item h3 {
  margin:0 0 4px;
  font:600 22px/1.15 "Space Grotesk";
  transition:color .3s ease,letter-spacing .3s ease,text-shadow .3s ease;
}
.timeline-item p { margin:0; color:#a8a39b; transition:color .3s ease; }
.timeline-item:hover::before,
.timeline-item.is-active::before {
  transform:scale(1.55);
  background:#fffaf1;
  box-shadow:0 0 0 5px var(--bg),0 0 20px rgba(255,245,220,.55);
}
.timeline-item:hover > div:last-child,
.timeline-item.is-active > div:last-child { transform:translateX(11px); }
.timeline-item:hover .time,
.timeline-item.is-active .time { color:#ddd7cf; transform:translateX(-3px); }
.timeline-item:hover h3,
.timeline-item.is-active h3 { color:#fff; letter-spacing:.01em; text-shadow:0 0 18px rgba(255,248,230,.14); }
.timeline-item:hover p,
.timeline-item.is-active p { color:#c4beb5; }

.contact { border-top:1px solid var(--line); min-height:90vh; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; overflow:hidden; }
.contact-copy { margin-left:8%; max-width:620px; position:relative; z-index:2; }
.contact-copy > p:not(.eyebrow) { color:#aaa59e; line-height:1.6; margin:28px 0; max-width:480px; }
.contact-links { display:grid; gap:10px; max-width:480px; }
.contact-link { border:1px solid rgba(255,255,255,.15); border-radius:12px; padding:14px 16px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; font-size:14px; transition:.25s ease; }
.contact-link:hover { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.32); }
.contact-link span { font-weight:700; }
.contact-link b { font-weight:400; color:var(--muted); }
.contact-character {
  position:absolute;
  right:-3vw;
  bottom:-4vw;
  width:52vw;
  height:36vw;
  max-width:760px;
  max-height:520px;
  --peek-size:190px;
}
.horizon {
  position:absolute;
  left:0;
  right:0;
  bottom:-25%;
  height:75%;
  border-radius:50% 50% 0 0;
  background:radial-gradient(circle at 50% 0,#171615,#060606 52%,#000);
  border-top:1px solid rgba(255,247,224,.8);
  box-shadow:0 -8px 30px rgba(255,245,222,.08);
  z-index:2;
}
.peek-orb {
  position:absolute;
  width:var(--peek-size);
  height:var(--peek-size);
  bottom:51%;
  left:50%;
  margin-left:calc(var(--peek-size) / -2);
  transform:none;
  z-index:auto;
}
.peek-orb::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle at 40% 28%,#26231f,#070707 66%,#000 100%);
  border:1px solid rgba(255,248,230,.58);
  box-shadow:0 0 32px rgba(255,245,220,.04),inset 9px 8px 28px rgba(255,255,255,.025);
  z-index:1;
}
.peek-orb .eye {
  width:43px;
  height:43px;
  top:34%;
  z-index:4;
  box-shadow:0 0 14px rgba(255,245,225,.08);
}
.peek-orb .eye.left { left:26%; }
.peek-orb .eye.right { right:26%; }
.peek-orb .pupil { width:14px; height:14px; left:14.5px; top:14.5px; }
.peek-orb .pupil::after { width:4px; height:4px; top:2px; right:2px; }
.rays {
  position:absolute;
  left:50%;
  bottom:78%;
  width:1px;
  height:1px;
  z-index:3;
  pointer-events:none;
}
.rays span {
  position:absolute;
  width:42px;
  height:1px;
  background:rgba(243,239,232,.72);
  left:0;
  top:0;
  transform-origin:left center;
  opacity:.8;
}
.rays span:nth-child(1){transform:rotate(-150deg) translateX(94px)}
.rays span:nth-child(2){transform:rotate(-112deg) translateX(106px)}
.rays span:nth-child(3){transform:rotate(-68deg) translateX(106px)}
.rays span:nth-child(4){transform:rotate(-30deg) translateX(94px)}

footer { max-width:var(--max); margin:0 auto; padding:24px 28px 36px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; color:var(--muted); font-size:11px; }

.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1); transition-delay:var(--delay,0ms); }
.reveal.visible { opacity:1; transform:translateY(0); }

@keyframes float { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-14px) rotate(1deg)} }
@keyframes scrollDot { 0%{transform:translateY(0);opacity:1} 80%{transform:translateY(7px);opacity:0} 100%{opacity:0} }

@media (max-width: 980px) {
  .desktop-nav { display:none; }
  .menu-toggle { display:block; }
  .section { min-height:auto; padding-top:120px; }
  .hero { min-height:100vh; grid-template-columns:1fr; padding-top:130px; padding-bottom:120px; }
  .hero-title { font-size:clamp(82px,22vw,150px); }
  .hero-character { margin-top:-20px; justify-content:flex-end; }
  .orb-wrap { width:min(76vw,520px); }
  .scribble { right:4%; }
  .about { grid-template-columns:1fr; }
  .about-copy { margin-left:8%; }
  .photo-stack { width:min(76vw,440px); margin-top:30px; }
  .skills-grid { grid-template-columns:repeat(2,1fr); }
  .projects-grid { grid-template-columns:1fr; }
  .project-art { height:260px; }
  .contact { grid-template-columns:1fr; min-height:850px; }
  .contact-character { width:90vw; height:58vw; right:-20vw; }
}

@media (max-width: 640px) {
  .cursor-dot,.cursor-ring { display:none; }
  .site-header { height:72px; padding:0 20px; }
  .section { padding:108px 20px 74px; }
  .section-number { top:86px; left:20px; }
  .section-heading { margin-left:0; margin-bottom:34px; }
  .hero { padding-top:108px; }
  .hero-copy { padding-left:0; }
  .hero-title { font-size:24vw; line-height:.74; }
  .hero-tagline { font-size:14px; margin-top:26px; }
  .hero-character { justify-content:center; margin-top:28px; }
  .orb-wrap { width:82vw; }
  .eye { width:54px; height:54px; top:41%; }
  .eye.left { left:29%; }
  .eye.right { right:29%; }
  .pupil { width:17px; height:17px; left:18.5px; top:18.5px; }
  .pupil::after { width:5px; height:5px; top:2.5px; right:2.5px; }
  .scribble { font-size:12px; right:0; }
  .scroll-cue { left:20px; bottom:25px; }
  .down-arrow { right:22px; bottom:22px; }
  .about-copy { margin-left:0; }
  .about h2,.contact h2,.section-heading h2 { font-size:14vw; }
  .about .lead { font-size:15px; }
  .photo-stack { width:88vw; }
  .skills-grid { grid-template-columns:1fr; margin:0; }
  .skill-card { min-height:170px; }
  .project-art { height:230px; }
  .timeline { width:100%; --timeline-x:13px; }
  .timeline::before { left:var(--timeline-x); }
  .timeline-glow { left:calc(var(--timeline-x) - 1px); }
  .timeline-item { grid-template-columns:1fr; gap:8px; padding-left:42px; }
  .timeline-item::before { left:7px; top:29px; }
  .timeline-item:hover > div:last-child,
  .timeline-item.is-active > div:last-child { transform:translateX(6px); }
  .timeline-item:hover .time,
  .timeline-item.is-active .time { transform:none; }
  .time { text-align:left; }
  .contact { min-height:820px; }
  .contact-copy { margin-left:0; }
  .contact-character {
    width:116vw;
    height:76vw;
    right:-38vw;
    bottom:-4vw;
    --peek-size:150px;
  }
  .peek-orb { bottom:58%; }
  .peek-orb .eye { width:34px; height:34px; top:32%; }
  .peek-orb .eye.left { left:25%; }
  .peek-orb .eye.right { right:25%; }
  .peek-orb .pupil { width:11px; height:11px; left:11.5px; top:11.5px; }
  .peek-orb .pupil::after { width:3px; height:3px; top:1.5px; right:1.5px; }
  .rays { bottom:84%; }
  .rays span { width:30px; }
  footer { padding:20px; flex-direction:column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* --------------------------------------------------------------------------
   TERMINAL MODE
   A hidden old-school layer on top of the existing site.
---------------------------------------------------------------------------- */
.terminal-trigger {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: color .25s ease, text-shadow .25s ease, transform .25s ease;
}
.terminal-trigger:hover,
.terminal-trigger:focus-visible {
  color: #b9ffd7;
  text-shadow: 0 0 16px rgba(113,255,169,.28);
}
.desktop-nav .terminal-trigger {
  margin-left: 8px;
  font-size: 13px;
}
.mobile-terminal-trigger {
  margin-top: 24px;
  color: #b9ffd7;
  font-size: 28px;
  text-align: left;
}
.inline-terminal-trigger {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.terminal-shell {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
.terminal-shell.is-open {
  opacity: 1;
  pointer-events: auto;
}
.terminal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(6px);
}
.terminal-window {
  --term-green: #9cffc3;
  --term-green-soft: rgba(156,255,195,.55);
  --term-yellow: #f3d878;
  width: min(760px, calc(100vw - 38px));
  height: min(620px, calc(100vh - 64px));
  display: grid;
  grid-template-rows: auto 1fr auto;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(218,255,231,.20);
  border-radius: 14px;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.012) 1px, transparent 1px),
    rgba(4, 8, 6, .97);
  background-size: 100% 4px, 24px 24px, auto;
  box-shadow:
    0 30px 90px rgba(0,0,0,.65),
    0 0 0 1px rgba(156,255,195,.025) inset,
    0 0 70px rgba(80,255,150,.035) inset;
  transform: translateY(20px) scale(.965);
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.terminal-shell.is-open .terminal-window {
  transform: translateY(0) scale(1);
}
.terminal-window::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .07;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(255,255,255,.14) 3px
  );
  mix-blend-mode: screen;
}
.terminal-window.is-glitching {
  animation: terminalGlitch .16s steps(2,end) 4;
}
.terminal-bar {
  min-height: 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 14px;
  border-bottom: 1px solid rgba(156,255,195,.12);
  background: rgba(255,255,255,.025);
  cursor: grab;
  user-select: none;
  position: relative;
  z-index: 3;
}
.terminal-bar:active { cursor: grabbing; }
.terminal-lights { display: flex; gap: 7px; }
.terminal-light { width: 10px; height: 10px; border-radius: 50%; }
.terminal-light.red { background:#ff665f; box-shadow:0 0 9px rgba(255,102,95,.18); }
.terminal-light.yellow { background:#f1c75b; box-shadow:0 0 9px rgba(241,199,91,.18); }
.terminal-light.green { background:#70d889; box-shadow:0 0 9px rgba(112,216,137,.18); }
.terminal-title {
  color: rgba(232,255,239,.6);
  font: 500 11px/1 "Space Grotesk", sans-serif;
  letter-spacing: .12em;
  text-transform: lowercase;
}
.terminal-close {
  justify-self: end;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: rgba(232,255,239,.55);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.terminal-close:hover { color: var(--term-green); }
.terminal-body {
  position: relative;
  z-index: 2;
  overflow: auto;
  padding: 24px 26px 30px;
  scrollbar-width: thin;
  scrollbar-color: rgba(156,255,195,.24) transparent;
}
.terminal-output {
  font: 400 14px/1.75 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: #c7f9d9;
}
.terminal-line {
  min-height: 1.75em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.terminal-line.dim { color: rgba(199,249,217,.53); }
.terminal-line.accent { color: var(--term-green); }
.terminal-line.yellow { color: var(--term-yellow); }
.terminal-line.error { color: #ff8d8d; }
.terminal-line.command { color: #effff3; }
.terminal-line.command::before { content: "> "; color: var(--term-green); }
.terminal-line.spacer { min-height: .8em; }
.terminal-form {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
  margin-top: 3px;
  font: 400 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.terminal-prompt { color: var(--term-green); }
.terminal-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #effff3;
  caret-color: transparent;
  font: inherit;
}
.terminal-caret {
  width: 8px;
  height: 1.15em;
  margin-left: -6px;
  background: var(--term-green);
  box-shadow: 0 0 10px rgba(156,255,195,.28);
  animation: terminalCaret 1s steps(1,end) infinite;
}
.terminal-hint {
  position: relative;
  z-index: 2;
  padding: 10px 18px 12px;
  border-top: 1px solid rgba(156,255,195,.09);
  color: rgba(199,249,217,.35);
  font: 400 10px/1.2 ui-monospace, monospace;
  letter-spacing: .03em;
}


/* Terminal orb monitor + optional desktop docking ------------------------ */
.terminal-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
}
.terminal-dock,
.terminal-close {
  display: grid;
  place-items: center;
}
.terminal-dock {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: rgba(232,255,239,.48);
  font-size: 17px;
  cursor: pointer;
  border-radius: 6px;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.terminal-dock:hover,
.terminal-dock[aria-pressed="true"] {
  color: var(--term-green);
  background: rgba(156,255,195,.06);
}
.terminal-dock[aria-pressed="true"] { transform: rotate(-90deg); }

.terminal-orb-monitor {
  position: sticky;
  top: 0;
  z-index: 4;
  float: right;
  width: 154px;
  height: 122px;
  margin: -6px -4px 14px 22px;
  border: 1px solid rgba(156,255,195,.11);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 45%, rgba(156,255,195,.05), transparent 58%),
    rgba(3,8,5,.72);
  box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 0 24px rgba(156,255,195,.025);
  overflow: hidden;
  pointer-events: none;
}
.terminal-orb-label {
  position: absolute;
  left: 10px;
  top: 8px;
  color: rgba(199,249,217,.34);
  font: 500 8px/1 ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.terminal-orb {
  position: absolute;
  width: 92px;
  height: 92px;
  left: 50%;
  bottom: -22px;
  margin-left: -46px;
  transform: none;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, #292620, #080808 64%, #000 100%);
  border: 1px solid rgba(255,248,230,.5);
  box-shadow: 0 0 24px rgba(156,255,195,.04), inset 6px 5px 18px rgba(255,255,255,.02);
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease, filter .35s ease;
}
.terminal-orb .eye {
  width: 28px;
  height: 28px;
  top: 31%;
  box-shadow: 0 0 10px rgba(255,245,225,.07);
}
.terminal-orb .eye.left { left: 18%; }
.terminal-orb .eye.right { right: 18%; }
.terminal-orb .pupil {
  width: 9px;
  height: 9px;
  left: 9.5px;
  top: 9.5px;
}
.terminal-orb .pupil::after {
  width: 3px;
  height: 3px;
  top: 1px;
  right: 1px;
}

/* Docking is deliberately desktop-only. It removes the backdrop and keeps
   the page visible so orb commands can be watched in context. */
@media (min-width: 761px) {
  .terminal-shell.is-docked {
    place-items: start;
    padding: 16px;
  }
  .terminal-shell.is-docked .terminal-backdrop {
    opacity: 0;
    pointer-events: none;
    backdrop-filter: none;
  }
  .terminal-shell.is-docked .terminal-window {
    width: min(520px, 42vw);
    height: calc(100dvh - 32px);
    max-height: none;
    margin: 0;
    transform: none;
    position: relative;
    left: auto !important;
    top: auto !important;
  }
}

/* Orb command effects ----------------------------------------------------- */
.orb,
.peek-orb {
  transition:
    transform .55s cubic-bezier(.22,1,.36,1),
    opacity .4s ease,
    filter .4s ease,
    border-color .4s ease;
}
body.orb-party .orb,
body.orb-party .peek-orb,
body.orb-party .terminal-orb {
  animation: orbParty .52s cubic-bezier(.2,.8,.2,1) infinite alternate;
  filter: drop-shadow(0 0 18px rgba(156,255,195,.18));
}
body.orb-panic .orb,
body.orb-panic .peek-orb,
body.orb-panic .terminal-orb {
  animation: orbPanic .10s linear infinite;
}
body.orb-sleep .eye {
  transform: scaleY(.06);
  transform-origin: center center;
  box-shadow: none;
}
body.orb-sleep .pupil {
  opacity: 0;
  transform: none !important;
}
body.orb-sleep .pupil::after {
  opacity: 0;
}
body.orb-hide .orb,
body.orb-hide .peek-orb,
body.orb-hide .terminal-orb {
  opacity: .06;
  transform: translateY(90px) scale(.88);
}
body.orb-big-eyes .eye {
  transform: scale(1.35);
}
body.orb-big-eyes .pupil {
  transform: scale(.75) !important;
}
.orb-blink .eye,
.peek-orb.orb-blink .eye,
.terminal-orb.orb-blink .eye {
  animation: orbBlink .34s ease;
}
.orb-spin {
  animation: orbSpin .85s cubic-bezier(.2,.85,.2,1);
}

@keyframes terminalCaret { 0%,48%{opacity:1} 49%,100%{opacity:0} }
@keyframes terminalGlitch {
  0% { transform: translate(0) skewX(0); filter:none; }
  33% { transform: translate(-3px,1px) skewX(-1deg); filter:hue-rotate(20deg); }
  66% { transform: translate(3px,-1px) skewX(1deg); filter:hue-rotate(-20deg); }
  100% { transform: translate(0) skewX(0); filter:none; }
}
@keyframes orbParty {
  0% { transform: translate(-4px,-3px) rotate(-2deg) scale(.99); }
  100% { transform: translate(5px,5px) rotate(3deg) scale(1.03); }
}
@keyframes orbPanic {
  0% { transform: translate(-4px,0); }
  25% { transform: translate(3px,-2px); }
  50% { transform: translate(-2px,3px); }
  75% { transform: translate(4px,1px); }
  100% { transform: translate(-4px,0); }
}
@keyframes orbBlink {
  0%,100% { transform: scaleY(1); }
  45%,55% { transform: scaleY(.08); }
}
@keyframes orbSpin {
  0% { transform: rotate(0deg) scale(1); }
  60% { transform: rotate(385deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

@media (max-width: 760px) {
  .terminal-shell { place-items: stretch; }
  .terminal-dock { display:none; }
  .terminal-orb-monitor {
    float:none;
    position:relative;
    top:auto;
    width:100%;
    height:116px;
    margin:0 0 20px;
  }
  .terminal-orb { width:96px; height:96px; bottom:-24px; margin-left:-48px; }
  .terminal-backdrop { background: rgba(0,0,0,.72); }
  .terminal-window {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border: 0;
    border-radius: 0;
    transform: translateY(24px);
  }
  .terminal-shell.is-open .terminal-window { transform: translateY(0); }
  .terminal-bar { min-height: 54px; cursor: default; }
  .terminal-body { padding: 24px 20px 36px; }
  .terminal-output,
  .terminal-form { font-size: 13px; }
  .terminal-hint { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .terminal-window,
  .terminal-shell,
  .orb,
  .peek-orb,
  .terminal-orb { transition: none; }
  .terminal-caret,
  body.orb-party .orb,
  body.orb-party .peek-orb,
  body.orb-party .terminal-orb,
  body.orb-panic .orb,
  body.orb-panic .peek-orb,
  body.orb-panic .terminal-orb { animation: none; }
}

/* -----------------------------------------------------------------------
   V3 polish: cleaner hero, better contact peek + orb monitor + jump dance
   ----------------------------------------------------------------------- */

/* The old full-section glow could show as a hard vertical compositing strip
   in some Chromium/GPU combinations. The orb already has its own local glow,
   so keep the hero cleaner and let that do the work. */
.hero::after { display:none; }
.orb-glow {
  inset:-9%;
  background:radial-gradient(circle at 38% 36%,rgba(255,248,230,.14),transparent 61%);
  filter:blur(14px);
  opacity:.9;
}

/* Contact character: the orb should actually peek from behind the horizon,
   rather than sit almost entirely above it. */
.contact-character {
  right:-1vw;
  bottom:-1vw;
  width:49vw;
  height:32vw;
  max-width:720px;
  max-height:470px;
  --peek-size:184px;
}
.horizon {
  left:2%;
  right:-2%;
  bottom:-16%;
  height:62%;
  border-radius:50% 50% 0 0;
  background:radial-gradient(circle at 50% 0,#151413,#070707 54%,#020202 100%);
  border-top-color:rgba(255,247,224,.62);
  box-shadow:0 -4px 18px rgba(255,245,222,.045);
}
.peek-orb {
  bottom:24%;
}
.peek-orb .eye {
  top:29%;
}
.rays {
  bottom:69%;
}
.rays span {
  width:36px;
  opacity:.64;
}
.rays span:nth-child(1){transform:rotate(-150deg) translateX(86px)}
.rays span:nth-child(2){transform:rotate(-112deg) translateX(96px)}
.rays span:nth-child(3){transform:rotate(-68deg) translateX(96px)}
.rays span:nth-child(4){transform:rotate(-30deg) translateX(86px)}

/* Let the monitor show more than just the orb's forehead. */
.terminal-orb-monitor {
  width:166px;
  height:142px;
}
.terminal-orb {
  width:98px;
  height:98px;
  bottom:-4px;
  margin-left:-49px;
}

/* A more physical little hop: anticipation -> takeoff -> airtime -> squash -> settle. */
body.orb-party .orb,
body.orb-party .peek-orb,
body.orb-party .terminal-orb {
  animation:orbHop 1.08s cubic-bezier(.22,.72,.24,1) infinite;
  filter:none;
  transform-origin:50% 100%;
}
@keyframes orbHop {
  0%,100% { transform:translateY(0) rotate(0deg) scale(1,1); }
  10% { transform:translateY(3px) rotate(-1deg) scale(1.05,.94); }
  28% { transform:translateY(-28px) rotate(2deg) scale(.97,1.04); }
  42% { transform:translateY(-38px) rotate(-2deg) scale(.98,1.03); }
  55% { transform:translateY(-19px) rotate(1deg) scale(1,1); }
  67% { transform:translateY(2px) rotate(0deg) scale(1.08,.91); }
  76% { transform:translateY(-8px) rotate(-1deg) scale(.99,1.02); }
  88% { transform:translateY(0) rotate(1deg) scale(1.02,.98); }
}

/* Mobile: keep the contact illustration compact and show more of the monitor. */
@media (max-width:760px) {
  .contact-character {
    width:108vw;
    height:72vw;
    right:-35vw;
    bottom:-4vw;
    --peek-size:148px;
  }
  .horizon {
    bottom:-18%;
    height:61%;
  }
  .peek-orb { bottom:23%; }
  .peek-orb .eye { top:28%; }
  .rays { bottom:69%; }

  .terminal-orb-monitor {
    width:100%;
    height:178px;
    margin:0 0 20px;
    float:none;
  }
  .terminal-orb {
    width:118px;
    height:118px;
    bottom:-5px;
    margin-left:-59px;
  }
  .terminal-orb .eye {
    width:34px;
    height:34px;
    top:30%;
  }
  .terminal-orb .eye.left { left:19%; }
  .terminal-orb .eye.right { right:19%; }
  .terminal-orb .pupil {
    width:11px;
    height:11px;
    left:11.5px;
    top:11.5px;
  }
}

@media (prefers-reduced-motion:reduce) {
  body.orb-party .orb,
  body.orb-party .peek-orb,
  body.orb-party .terminal-orb { animation:none; }
}

/* --------------------------------------------------------------------------
   v4 polish - desktop contact placement + larger hero eyes
   -------------------------------------------------------------------------- */

/* On desktop the contact illustration belongs to the RIGHT grid column.
   Keeping it in normal grid flow prevents it from drifting over the copy. */
@media (min-width: 981px) {
  .contact {
    grid-template-columns: minmax(0, 1.08fr) minmax(520px, .92fr);
    column-gap: 2vw;
  }

  .contact-character {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(50vw, 760px);
    height: min(34vw, 500px);
    max-width: none;
    max-height: none;
    justify-self: end;
    align-self: end;
    margin-right: -3vw;
    margin-bottom: -2.5vw;
    --peek-size: 190px;
  }

  .horizon {
    left: 0;
    right: -2%;
  }

  .peek-orb {
    left: 51%;
    bottom: 25%;
  }

  .rays {
    left: 51%;
    bottom: 70%;
  }
}

/* Give the main character the same expressive eye-to-face ratio as the
   terminal monitor, without turning the eyes into giant headlights. */
@media (min-width: 641px) {
  .orb > .eye {
    width: 96px;
    height: 96px;
    top: 39.5%;
  }

  .orb > .eye.left { left: 27.5%; }
  .orb > .eye.right { right: 27.5%; }

  .orb > .eye .pupil {
    width: 28px;
    height: 28px;
    left: 34px;
    top: 34px;
  }

  .orb > .eye .pupil::after {
    width: 8px;
    height: 8px;
    top: 4px;
    right: 4px;
  }
}

/* Slightly larger on phones too, but keep enough room for eye movement. */
@media (max-width: 640px) {
  .orb > .eye {
    width: 62px;
    height: 62px;
    top: 40%;
  }

  .orb > .eye.left { left: 27%; }
  .orb > .eye.right { right: 27%; }

  .orb > .eye .pupil {
    width: 19px;
    height: 19px;
    left: 21.5px;
    top: 21.5px;
  }

  .orb > .eye .pupil::after {
    width: 5px;
    height: 5px;
    top: 2.5px;
    right: 2.5px;
  }
}

/* --------------------------------------------------------------------------
   v5 contact orb alignment
   Keep the contact layout in two columns, but move the WHOLE peek orb above
   the horizon again. The eyes no longer need to visually "escape" the hill.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .contact-character {
    --peek-size: 190px;
  }

  /* The horizon begins at roughly 54% of the illustration height.
     46% bottom positions the 190px orb so its base meets that horizon. */
  .peek-orb {
    left: 51%;
    bottom: 46%;
    z-index: 3;
  }

  /* Return the eyes to their natural position inside the orb. */
  .peek-orb .eye {
    top: 34%;
  }

  /* Keep the little attention rays visually attached to the raised orb. */
  .rays {
    left: 51%;
    bottom: 82%;
  }
}