/* =========================================================
   JACK MORGAN — RETRO-FUTURE PORTFOLIO
   Tokens
   ========================================================= */
:root{
  --space-blue:   #0a1128;
  --space-blue-2: #142250;
  --space-purple: #180b2e;
  --space-purple-2:#241143;
  --starfield-navy:#0a1440;
  --toxic-green:  #3dff8a;
  --safety-yellow:#ffe600;
  --mech-red:     #e8342a;
  --cyan:         #35e0ff;
  --hot-pink:     #ff2f92;
  --ink:          #f3efe3;
  --ink-dim:      #a9b3d4;

  --font-display: "Audiowide", "Arial Narrow", sans-serif;
  --font-mono:    "Space Mono", "Courier New", monospace;

  --radius: 4px;
  --border: 2px solid rgba(243,239,227,0.18);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

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

body{
  margin:0;
  background: var(--space-blue);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
ul, ol{ margin:0; padding:0; list-style:none; }

:focus-visible{
  outline: 3px solid var(--toxic-green);
  outline-offset: 3px;
}

.section-heading{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  color: var(--safety-yellow);
  text-shadow: 0 0 18px rgba(255,230,0,.35);
  margin: 0 0 2.4rem;
  text-align:center;
  position:relative;
  z-index:2;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-family: var(--font-mono);
  font-weight:700;
  letter-spacing: .03em;
  padding: .9em 1.6em;
  border: 2px solid currentColor;
  border-radius: var(--radius);
  background: transparent;
  cursor:pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover, .btn:focus-visible{ transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }

.btn--yellow{ color: var(--safety-yellow); }
.btn--yellow:hover{ background: var(--safety-yellow); color: var(--space-blue); }

.btn--red{ color: var(--mech-red); }
.btn--red:hover{ background: var(--mech-red); color: var(--ink); }

.btn--cyan{ color: var(--cyan); }
.btn--cyan:hover{ background: var(--cyan); color: var(--space-blue); }

.btn--pink{ color: var(--hot-pink); }
.btn--pink:hover{ background: var(--hot-pink); color: var(--space-blue); }

.btn--big{
  font-size: 1.1rem;
  padding: 1.1em 1.4em;
  flex: 1 1 220px;
  text-align:center;
}

/* =========================================================
   STICKY CONTROL-OVERLAY NAV
   ========================================================= */
.ctrl-nav{
  position: fixed;
  top: .8rem; left: .8rem; right: .8rem;
  z-index: 500;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: .7rem 1.1rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  background: rgba(8, 13, 34, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(61,255,138,.25);
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
}
.ctrl-nav__mark{
  font-family: var(--font-display);
  color: var(--safety-yellow);
  font-size: .95rem;
  border: 2px solid var(--safety-yellow);
  padding: .25em .55em;
  border-radius: var(--radius);
  flex-shrink:0;
}
.ctrl-nav__links{
  display:flex;
  gap: 1.1rem;
  overflow-x:auto;
  scrollbar-width:none;
  flex: 1 1 auto;
  min-width: 0; /* lets the flex item actually shrink so overflow-x:auto
                   can kick in, instead of pushing the whole bar wider
                   than the screen and clipping the last link(s) */
  -webkit-overflow-scrolling: touch;
  padding-right: .3rem;
}
.ctrl-nav__links::-webkit-scrollbar{ display:none; }
.ctrl-nav__links a{
  color: var(--toxic-green);
  white-space:nowrap;
  transition: color .15s ease, text-shadow .15s ease;
}
.ctrl-nav__links a:hover{ color: var(--ink); text-shadow: 0 0 10px var(--toxic-green); }

@media (max-width: 720px){
  .ctrl-nav__links{ gap: .8rem; font-size:.65rem; }
}

/* =========================================================
   HERO — name lives high, in the sky
   ========================================================= */
.hero{
  position: relative;
  min-height: 60vh;
  overflow:hidden;
  background: var(--space-blue);
}
@media (min-width: 768px){
  .hero{ min-height: 100svh; }
}

.hero__bg{
  position:absolute; inset:0;
  background-image: url("images/jack-mech-wide.jpg");
  background-size: cover;
  background-position: center 78%;
  will-change: transform;
}

/* Narrow portrait screens crop hard on the sides at `cover` — the mech
   pod (the whole point of the image) sits right-of-center in the
   source art, so shift the focal point right instead of centering it,
   otherwise it gets clipped straight out of frame. */
@media (max-width: 640px) and (orientation: portrait){
  .hero__bg{ background-position: 85% 75%; }
}

.hero__sky{
  position:absolute; inset:0;
  z-index:2;
  pointer-events:none;
}

.ship{
  position:absolute;
  width: 46px;
  height: 16px;
  background: linear-gradient(90deg, rgba(243,239,227,0.9), rgba(243,239,227,0.2));
  clip-path: polygon(0% 50%, 20% 0%, 100% 20%, 100% 80%, 20% 100%);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.6));
  animation: drift linear infinite;
}
.ship--1{ top: 40%; left: -10%; width: 34px; height: 12px; animation-duration: 34s; animation-delay: -4s; opacity:.9; }
.ship--2{ top: 52%; left: -15%; width: 22px; height: 9px;  animation-duration: 46s; animation-delay: -18s; opacity:.7; }
.ship--3{ top: 30%; left: -20%; width: 58px; height: 20px; animation-duration: 58s; animation-delay: -30s; opacity:.85; }

@keyframes drift{
  from{ transform: translateX(0); }
  to{ transform: translateX(130vw); }
}

.hero__scanlines{
  position:absolute; inset:0; z-index:3;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.06) 3px
  );
  mix-blend-mode: overlay;
  pointer-events:none;
}

.hero__vignette{
  position:absolute; inset:0; z-index:3;
  background:
    linear-gradient(to top, rgba(10,17,40,0.9) 0%, rgba(10,17,40,0.05) 30%, rgba(10,17,40,0) 55%),
    linear-gradient(to bottom, rgba(10,17,40,0.75) 0%, rgba(10,17,40,0) 30%);
  pointer-events:none;
}

.hero__name-wrap{
  position:relative;
  z-index:4;
  padding: 9vh 1.5rem 0;
  max-width: 1100px;
  margin: 0 auto;
  text-align:center;
  will-change: transform, opacity;
}

.hero__eyebrow{
  font-size: .75rem;
  color: var(--toxic-green);
  letter-spacing: .1em;
  margin: 0 0 .6rem;
}

.hero__name{
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 11vw, 7rem);
  line-height: .9;
  color: var(--safety-yellow);
  text-shadow:
    3px 3px 0 var(--mech-red),
    0 0 40px rgba(255,230,0,0.45);
  margin: 0;
}
.hero__name-line{ display:block; }

/* Mobile: force the name out of flow entirely and drop it low and
   right, onto the solid sky, clear of the cockpit glass — no amount
   of margin/align tweaking on a static block was going to keep pace
   with that background crop, so pin it with real coordinates instead.
   This block must come after the base .hero__name-wrap/.hero__name
   rules above so it actually wins the cascade on mobile widths. */
@media (max-width: 768px){
  .hero__name-wrap{
    position: absolute;
    top: 35%;
    right: 1rem;
    left: auto;
    bottom: auto;
    width: 55%;
    max-width: 55%;
    margin: 0;
    padding: 0;
    text-align: right;
    z-index: 10;
  }
  .hero__name{ font-size: clamp(1.6rem, 8vw, 2.3rem); }
}

.hero__foot{
  position:absolute;
  z-index:4;
  left:0; right:0; bottom: 0;
  padding: 0 1.5rem 2.2rem;
  max-width: 1100px;
  margin: 0 auto;
  text-align:center;
}

.hero__role{
  font-size: clamp(.85rem, 2vw, 1.05rem);
  color: var(--ink);
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
  margin: 0 0 1.2rem;
}

.hero__scroll-cue{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-size:.8rem;
  letter-spacing:.08em;
  color: var(--ink-dim);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

/* =========================================================
   SECTION 2 — MISSION HISTORY (cartoon starfield timeline)
   ========================================================= */
.mission{
  position: relative;
  padding: 5.5rem 1.5rem 6rem;
  background: var(--starfield-navy);
  overflow:hidden;
}

.mission__bg{
  position:absolute; inset: -3%;
  background-image: url("images/nebula-deep.jpg");
  background-size: cover;
  background-position: center;
  animation: mission-drift 16s ease-in-out infinite;
}
@keyframes mission-drift{
  0%, 100%{ transform: translate(0, 0) scale(1.02); }
  50%{ transform: translate(-1%, 1%) scale(1.05); }
}
.mission::after{
  /* Darkens the central band so the timeline sits over a readable,
     dark region of the painted canvas regardless of viewport width. */
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background: radial-gradient(ellipse 70% 60% at center, rgba(4,7,20,.72), rgba(4,7,20,.25) 70%, rgba(4,7,20,.55));
  pointer-events:none;
}

.timeline{
  position:relative;
  z-index:2;
  max-width: 720px;
  margin: 0 auto;
  padding-left: 2.2rem;
}
.timeline::before{
  content:"";
  position:absolute;
  left: 9px;
  top: .4rem;
  bottom: .4rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--cyan), var(--hot-pink), var(--safety-yellow));
  opacity:.6;
}

.timeline__item{
  position:relative;
  padding-bottom: 2.4rem;
}
.timeline__item:last-child{ padding-bottom:0; }

.timeline__node{
  position:absolute;
  left: -2.2rem;
  top: 0;
  min-width: 3.6rem;
  text-align:center;
  font-family: var(--font-mono);
  font-weight:700;
  font-size: .68rem;
  letter-spacing:.03em;
  padding: .35em .5em;
  border-radius: 999px;
  background: var(--starfield-navy);
}
.timeline__node--cyan{ color: var(--cyan); box-shadow: 0 0 0 2px var(--cyan), 0 0 14px rgba(53,224,255,.6); }
.timeline__node--yellow{ color: var(--safety-yellow); box-shadow: 0 0 0 2px var(--safety-yellow), 0 0 14px rgba(255,230,0,.6); }
.timeline__node--pink{ color: var(--hot-pink); box-shadow: 0 0 0 2px var(--hot-pink), 0 0 14px rgba(255,47,146,.6); }

.timeline__body{
  margin-left: 4.6rem;
  padding-top: .15rem;
  background: rgba(5, 8, 24, 0.55);
  border-radius: var(--radius);
  padding: .8rem 1rem;
}
.timeline__body h3{
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 .3rem;
}
.timeline__meta{
  font-size: .8rem;
  color: var(--ink-dim);
  margin: 0 0 .5rem;
}
.timeline__blurb{
  font-size: .92rem;
  color: var(--ink);
  margin: 0;
  max-width: 46ch;
}

@media (max-width: 480px){
  .timeline{ padding-left: 1.6rem; }
  .timeline__node{ position: static; display:inline-block; margin-bottom:.5rem; }
  .timeline__body{ margin-left: 0; }
}

/* =========================================================
   SECTION 3 — SOUND DECK
   ========================================================= */
.sound-section{
  position:relative;
  padding: 6rem 1.5rem 11rem;
  background: linear-gradient(180deg, var(--space-blue), #060a1a);
}

.dashboard{
  max-width: 640px;
  margin: 0 auto;
  background: linear-gradient(155deg, #10193a, #0a1128);
  border: var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.02);
  overflow:hidden;
}

.dashboard__header{
  display:flex;
  align-items:center;
  gap: .8rem;
  padding: .8rem 1.1rem;
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dashboard__lights{ display:flex; gap:.4rem; }
.dashboard__lights span{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dashboard__lights span:nth-child(1){ background: var(--mech-red); }
.dashboard__lights span:nth-child(2){ background: var(--safety-yellow); }
.dashboard__lights span:nth-child(3){ background: var(--toxic-green); }
.dashboard__label{ font-size: .7rem; letter-spacing: .1em; color: var(--ink-dim); }

.dashboard__body{ padding: 1.6rem; text-align:center; }
.dashboard__copy{ color: var(--ink-dim); margin: 0 0 1.2rem; }

.soundcloud-frame{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
  overflow:hidden;
  background: #05070f;
  margin-bottom: 1.4rem;
  text-align:left;
}
.soundcloud-frame__strip{
  display:flex;
  justify-content:space-between;
  padding: .4rem .6rem;
  background: repeating-linear-gradient(45deg, #1a2450, #1a2450 6px, #0d1330 6px, #0d1330 12px);
}
.soundcloud-frame__strip span{ width:6px; height:6px; border-radius:50%; background: rgba(255,255,255,.35); }
.soundcloud-frame iframe{ display:block; }

/* =========================================================
   SECTION 4 — AZYL SECTOR
   ========================================================= */
.azyl{
  padding: 5.5rem 1.5rem;
  background: radial-gradient(ellipse at bottom, var(--space-purple-2), var(--space-purple) 65%);
  display:flex;
  justify-content:center;
}

.azyl__card{
  max-width: 620px;
  width:100%;
  text-align:center;
  background: linear-gradient(160deg, rgba(255,47,146,.14), rgba(53,224,255,.08));
  border: 2px solid var(--hot-pink);
  border-radius: 14px;
  padding: 2.4rem 1.8rem;
  box-shadow: 0 0 40px rgba(255,47,146,.25), 8px 8px 0 rgba(53,224,255,.35);
}

.azyl__tag{
  display:inline-block;
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  padding: .35em .8em;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}

.azyl__title{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.5vw, 2.3rem);
  color: var(--hot-pink);
  text-shadow: 0 0 20px rgba(255,47,146,.5);
  margin: 0 0 1rem;
  line-height: 1.25;
}
.azyl__title span{
  display:block;
  font-size: .55em;
  color: var(--ink);
  text-shadow:none;
  margin-top: .3rem;
}

.azyl__copy{
  color: var(--ink-dim);
  max-width: 46ch;
  margin: 0 auto 1.8rem;
}

/* =========================================================
   SECTION 5 — HANGAR / CREW MANIFEST FOOTER
   ========================================================= */
.hangar{
  background: linear-gradient(180deg, var(--space-purple), #05030c 70%);
}

.hangar__visual{
  position: relative;
  display:flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 1.6rem 1.5rem 0;
}

.hangar__image{
  position: relative;
  min-height: 46vh;
  border-radius: 6px;
  overflow: hidden;
}

.hangar__bg{
  position:absolute; inset:0;
  background-image: url("images/jack-hangar.jpg");
  background-size: cover;
  background-position: 62% 22%;
}

.hangar__stars{
  position:absolute; inset:0;
  background:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 60% 60%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 90% 70%, rgba(255,255,255,.6), transparent);
  background-repeat: no-repeat;
}

/* Mobile default: the bubble sits in normal flow, above the artwork,
   never overlapping his face. */
.speech-bubble{
  position: relative;
  z-index:2;
  align-self: center;
  background: var(--ink);
  color: var(--space-blue);
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.6vw, 1.4rem);
  text-align:center;
  padding: 1.1em 1.3em;
  border-radius: 18px;
  border: 3px solid var(--space-blue);
  box-shadow: 6px 6px 0 var(--mech-red);
  max-width: 260px;
}
.speech-bubble--topcenterright::after{
  content:"";
  position:absolute;
  bottom:-20px; left: 50%;
  transform: translateX(-50%);
  width:0; height:0;
  border: 13px solid transparent;
  border-top-color: var(--ink);
  border-bottom:0;
}
.speech-bubble--topcenterright::before{
  content:"";
  position:absolute;
  bottom:-26px; left: 50%;
  transform: translateX(-50%);
  width:0; height:0;
  border: 16px solid transparent;
  border-top-color: var(--space-blue);
  border-bottom:0;
}

/* Desktop / tall viewports only: overlay the bubble on the artwork
   itself, top center-right, near his helmet. Gated on min-height too,
   so a wide-but-short mobile-landscape phone doesn't get the absolute
   overlay (which would collide with the bubble at that aspect ratio)
   and instead keeps the safe stacked mobile layout. */
@media (min-width: 768px) and (min-height: 600px){
  .hangar__visual{
    display:block;
    padding: 0;
  }
  .hangar__image{
    min-height: 62vh;
    border-radius: 0;
  }
  .speech-bubble--topcenterright{
    position: absolute;
    z-index: 3;
    top: 2rem;
    right: 14%;
    left: auto;
    align-self: auto;
  }
  .speech-bubble--topcenterright::after{
    left: 38%;
    transform: none;
  }
  .speech-bubble--topcenterright::before{
    left: calc(38% - 3px);
    transform: none;
  }
}

/* Mobile-landscape phones (short height, wide-ish width): keep the
   image visible but compact, since the flow layout above already
   keeps the bubble safely off his face. */
@media (max-height: 599px) and (min-width: 640px){
  .hangar__image{ min-height: 50vh; }
}

.dossier{
  position:relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

.dossier__header{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding: .8rem 1.4rem;
  background: rgba(255,255,255,.04);
  border: var(--border);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  font-size: .75rem;
  letter-spacing:.1em;
  color: var(--ink-dim);
}
.manifest__dot{
  width:9px; height:9px; border-radius:50%;
  background: var(--toxic-green);
  box-shadow: 0 0 8px var(--toxic-green);
  flex-shrink:0;
}

/* Expanded control-board: contact spread wide, values large and glowing */
.dossier__board{
  display:flex;
  flex-wrap:wrap;
  gap: 2rem 3rem;
  justify-content: space-between;
  padding: 2.4rem 2rem;
  background: rgba(8, 24, 30, 0.55);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(53,224,255,.35);
  border-top: none;
  box-shadow: inset 0 0 40px rgba(53,224,255,.08);
}

.dossier__field{
  display:flex;
  flex-direction:column;
  gap: .35rem;
  flex: 1 1 200px;
  min-width: 180px;
}
.dossier__field span{
  font-size: .78rem;
  letter-spacing:.14em;
  color: var(--cyan);
}
.dossier__field strong{
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  font-weight:700;
  color: var(--safety-yellow);
  text-shadow: 0 0 16px rgba(255,230,0,.55);
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.dossier__field small{
  font-size: .85rem;
  color: var(--ink-dim);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Desktop: let the email sit on a single line instead of wrapping
   awkwardly mid-domain — it still wraps safely on mobile via the
   base overflow-wrap/word-break rule above. */
@media (min-width: 768px){
  .dossier__field--email{ flex: 1.5 1 260px; }
  .dossier__field--email strong{
    white-space: nowrap;
    font-size: clamp(1rem, 1.6vw, 1.5rem);
  }
}

.cta__buttons{
  display:flex;
  flex-wrap:wrap;
  gap: 1rem;
  padding: 1.4rem 2rem;
  background: rgba(8, 24, 30, 0.55);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(53,224,255,.35);
  border-top: none;
  border-radius: 0 0 14px 14px;
}

.deck__fine{
  font-size: .75rem;
  color: rgba(243,239,227,.55);
  text-align:center;
  margin: 1.6rem 0 0;
}

@media (max-width: 640px){
  .hangar__image{ min-height: 38vh; }
}

/* =========================================================
   Sticky mobile action bar (QR landing helper)
   ========================================================= */
.mobile-bar{
  position: fixed;
  bottom:0; left:0; right:0;
  z-index: 400;
  display:none;
  gap: .5rem;
  padding: .6rem;
  background: rgba(6,10,26,.92);
  border-top: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}
.mobile-bar a{
  flex:1;
  text-align:center;
  font-size: .72rem;
  font-weight:700;
  letter-spacing:.03em;
  padding: .8em .4em;
  border-radius: var(--radius);
  border: 2px solid currentColor;
}
@media (max-width: 720px){
  .mobile-bar{ display:flex; }
  body{ padding-bottom: 64px; }
}

/* Mobile landscape (short height): the bar's normal padding eats too
   much vertical space on a rotated phone and starts covering content
   below it (his face, the speech bubble). Shrink it to a thin strip
   instead of removing it outright, so the quick actions stay reachable. */
@media (max-width: 900px) and (max-height: 480px){
  .mobile-bar{ padding: .25rem .4rem; gap:.35rem; }
  .mobile-bar a{ padding: .35em .3em; font-size: .6rem; }
  body{ padding-bottom: 34px; }
}