/* ==========================================================
   Designed to Wonder: main stylesheet
   ----------------------------------------------------------
   Theme: black glass, holographic purple and blue light,
   chrome type, iridescent bubbles and pixel details.

   Contents
     1.  Design tokens (colours, fonts, spacing)
     2.  Light theme
     3.  Base and typography
     4.  Accessibility helpers
     5.  Background: aurora glow and grain
     6.  Header and navigation
     7.  Buttons, chips and labels
     8.  Glass panels and cards
     9.  Hero, chrome text and liquid orb
     10. Home page sections
     11. Client Side
     12. T-Minus
     13. The Shapers
     14. Wonder Why
     15. Built by Lilian
     16. Forms
     17. Footer
     18. 404 page
     19. Scroll reveal
     20. Responsive layouts (media queries)
     21. Reduced motion
   ========================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  --bg: #05050A;
  --bg-raised: #0C0B16;
  --text: #F5F4FF;
  --muted: #A6A3C2;
  --violet: #7B2FFF;
  --orchid: #C77BFF;
  --blue: #3D7BFF;
  --cyan: #5CE1FF;
  --pink: #E07BFF;
  --error: #FF8FC4;
  --success: #7DF2C4;

  --glass: rgba(20, 18, 36, 0.55);
  --glass-strong: rgba(14, 12, 26, 0.82);
  --glass-border: rgba(245, 244, 255, 0.12);
  --glass-highlight: rgba(245, 244, 255, 0.06);

  --holo: linear-gradient(120deg, #E07BFF 0%, #7B2FFF 35%, #3D7BFF 65%, #5CE1FF 100%);
  --chrome: linear-gradient(180deg, #FFFFFF 0%, #DCD8F2 38%, #8C88A8 52%, #F5F4FF 70%, #B9B4D6 100%);

  --font-display: 'Orbitron', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-pixel: 'Silkscreen', 'Courier New', monospace;

  --radius: 24px;
  --radius-small: 14px;
  --page-width: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* ---------- 2. Light theme ("Chrome Day") ---------- */
/* Switched on by the theme button, which sets data-theme="light" */
:root[data-theme="light"] {
  --bg: #F3F2FA;
  --bg-raised: #FFFFFF;
  --text: #0B0A16;
  --muted: #4A4766;
  --orchid: #5B12E0;
  --blue: #1F4FD1;
  --error: #B0135B;
  --success: #0B7A52;
  --glass: rgba(255, 255, 255, 0.6);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(11, 10, 22, 0.1);
  --glass-highlight: rgba(255, 255, 255, 0.7);
  --chrome: linear-gradient(180deg, #2A2540 0%, #0B0A16 45%, #4B4470 60%, #15122A 100%);
  --shadow: 0 20px 50px rgba(60, 40, 140, 0.14);
}

/* ---------- 3. Base and typography ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  font-weight: 700;
}

h1,
h2 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
}

h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--orchid);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--text);
}

img,
svg,
canvas {
  max-width: 100%;
  display: block;
}

ul {
  padding-left: 1.2em;
}

main {
  position: relative;
  z-index: 1;
}

.container {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: clamp(64px, 10vw, 120px) 0;
}

.lead {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--muted);
  max-width: 62ch;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 4. Accessibility helpers ---------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 16px;
}

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

:root[data-theme="light"] :focus-visible {
  outline-color: var(--violet);
}

/* ---------- 5. Background: aurora glow and grain ---------- */
/* Three soft blobs of light drift slowly behind the page.
   They sit far behind a dark wash so text always stays readable. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  animation: drift 28s ease-in-out infinite alternate;
}

.aurora span:nth-child(1) {
  width: 55vw;
  height: 55vw;
  top: -20vw;
  left: -12vw;
  background: radial-gradient(circle, #7B2FFF 0%, transparent 65%);
}

.aurora span:nth-child(2) {
  width: 45vw;
  height: 45vw;
  top: 10vh;
  right: -15vw;
  background: radial-gradient(circle, #3D7BFF 0%, transparent 65%);
  animation-duration: 34s;
}

.aurora span:nth-child(3) {
  width: 40vw;
  height: 40vw;
  bottom: -18vw;
  left: 25vw;
  background: radial-gradient(circle, #E07BFF 0%, transparent 65%);
  opacity: 0.25;
  animation-duration: 40s;
}

:root[data-theme="light"] .aurora span {
  opacity: 0.35;
}

/* Film grain, like the reference images. A tiny SVG noise texture. */
.aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(6vw, 4vh) scale(1.15);
  }
}

/* ---------- 6. Header and navigation ---------- */
.site-header {
  position: sticky;
  top: 14px;
  z-index: 100;
  margin: 14px auto 0;
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--page-width);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px 10px 20px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-strong);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  height: 30px;
  width: auto;
}

/* In light mode the white letters of the logo are inverted to black */
:root[data-theme="light"] .brand img {
  filter: invert(1) hue-rotate(180deg);
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-nav a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background 0.2s ease;
}

.main-nav a:hover {
  color: var(--text);
  background: var(--glass-highlight);
}

.main-nav a[aria-current="page"] {
  color: var(--text);
  background: var(--glass-highlight);
  box-shadow: inset 0 0 0 1px var(--glass-border);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background 0.2s ease;
}

.icon-button:hover {
  background: var(--glass-highlight);
}

.icon-button svg {
  width: 20px;
  height: 20px;
}

/* Theme button shows a moon in dark mode and a sun in light mode */
.theme-toggle .icon-sun,
:root[data-theme="light"] .theme-toggle .icon-moon {
  display: none;
}

:root[data-theme="light"] .theme-toggle .icon-sun {
  display: block;
}

.nav-toggle {
  display: none;
}

/* ---------- 7. Buttons, chips and labels ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

/* White pill: the main call to action */
.btn-primary {
  background: var(--text);
  color: var(--bg);
}

.btn-primary:hover {
  color: var(--bg);
  box-shadow: 0 0 0 4px rgba(199, 123, 255, 0.25), 0 10px 30px rgba(123, 47, 255, 0.35);
}

/* Glass outline: the second choice */
.btn-ghost {
  background: var(--glass);
  border-color: var(--glass-border);
  color: var(--text);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--orchid);
}

.btn-small {
  min-height: 40px;
  padding: 10px 16px;
  font-size: 0.85rem;
}

.btn[aria-pressed="true"] {
  background: var(--violet);
  border-color: var(--violet);
  color: #FFFFFF;
}

/* Small pixel label, like "01 // CHROME TYPOGRAPHY" in the references */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  color: var(--muted);
  font-family: var(--font-pixel);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--holo);
  box-shadow: 10px 0 0 rgba(123, 47, 255, 0.5), 20px 0 0 rgba(61, 123, 255, 0.3);
  margin-right: 20px;
}

/* Filter pills */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.chip:hover {
  color: var(--text);
  border-color: var(--orchid);
}

.chip[aria-pressed="true"],
.chip[aria-selected="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

/* Status badges on cards */
.badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--glass-highlight);
}

.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--muted);
}

.badge-countdown::before {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.badge-landed::before {
  background: var(--success);
}

.badge-window::before {
  background: var(--orchid);
}

.badge-rumoured::before {
  background: transparent;
  border: 1px dashed var(--muted);
}

/* ---------- 8. Glass panels and cards ---------- */
.glass {
  position: relative;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

/* Holographic glow that lights up on hover: violet on one side, blue on the other */
.holo-edge {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.holo-edge:hover,
.holo-edge:focus-within,
.holo-edge:focus-visible {
  border-color: rgba(199, 123, 255, 0.6);
  box-shadow: var(--shadow), -10px 0 34px -14px #7B2FFF, 10px 0 34px -14px #3D7BFF;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-4px);
}

.card h3 {
  margin: 0;
}

.card p {
  margin: 0;
  color: var(--muted);
}

/* Large faint number in the corner, like the Profico reference */
.card-number {
  margin-top: auto;
  align-self: flex-end;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--glass-border);
  -webkit-text-stroke: 1px var(--muted);
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

.card-link {
  color: inherit;
  text-decoration: none;
}

.card-link:hover {
  color: inherit;
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}

.section-head h2 {
  margin: 0;
}

.empty-state {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
  color: var(--muted);
}

/* ---------- 9. Hero, chrome text and liquid orb ---------- */
.hero {
  position: relative;
  padding: clamp(80px, 14vw, 160px) 0 clamp(48px, 8vw, 80px);
  text-align: center;
  overflow: hidden;
}

.hero .lead {
  margin: 0 auto 32px;
}

.hero-small {
  padding-bottom: 40px;
}

/* Metallic chrome lettering */
.chrome-text {
  background: var(--chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 18px rgba(123, 47, 255, 0.35));
}

.holo-text {
  background: var(--holo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-title {
  position: relative;
  z-index: 2;
  font-size: clamp(2.6rem, 9vw, 7.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.page-title {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  text-transform: uppercase;
  line-height: 1;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}

/* The pixel 2 that sits between "Designed" and "Wonder" */
.hero-mark {
  display: inline-block;
  width: auto;
  height: 1em;
  margin: 0 0.06em;
  vertical-align: -0.08em;
  filter: drop-shadow(0 0 18px rgba(123, 47, 255, 0.7));
}

.small-print {
  margin-top: 32px;
  font-size: 0.9rem;
}

.legend {
  margin: 0;
  padding: 0;
  list-style: none;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Typewriter line under the hero title */
.typewriter {
  min-height: 1.7em;
  margin: 0 auto 32px;
  font-family: var(--font-pixel);
  font-size: clamp(0.85rem, 1.6vw, 1rem);
  letter-spacing: 0.08em;
  color: var(--orchid);
  text-transform: uppercase;
}

.typewriter::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1em;
  margin-left: 4px;
  vertical-align: -0.12em;
  background: var(--cyan);
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Iridescent liquid bubble, built only from CSS gradients */
.orb {
  position: absolute;
  z-index: 1;
  width: clamp(180px, 28vw, 360px);
  aspect-ratio: 1;
  border-radius: 46% 54% 43% 57% / 55% 44% 56% 45%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.9) 0 6%, transparent 14%),
    radial-gradient(circle at 70% 75%, rgba(92, 225, 255, 0.7), transparent 40%),
    radial-gradient(circle at 35% 70%, #E07BFF, transparent 50%),
    radial-gradient(circle at 65% 30%, #3D7BFF, transparent 55%),
    linear-gradient(135deg, #7B2FFF, #3D7BFF 60%, #C77BFF);
  box-shadow:
    inset -18px -24px 50px rgba(5, 5, 10, 0.55),
    inset 14px 18px 40px rgba(255, 255, 255, 0.35),
    0 30px 80px rgba(123, 47, 255, 0.45);
  animation: morph 14s ease-in-out infinite alternate, float 9s ease-in-out infinite;
  pointer-events: none;
}

.orb-left {
  top: 18%;
  left: -6%;
  opacity: 0.85;
}

.orb-right {
  bottom: 4%;
  right: -4%;
  width: clamp(120px, 16vw, 220px);
  animation-delay: -4s, -3s;
}

.orb-small {
  top: 12%;
  right: 14%;
  width: clamp(44px, 5vw, 70px);
  animation-delay: -7s, -5s;
}

@keyframes morph {
  0% {
    border-radius: 46% 54% 43% 57% / 55% 44% 56% 45%;
  }
  50% {
    border-radius: 58% 42% 60% 40% / 42% 60% 40% 58%;
  }
  100% {
    border-radius: 40% 60% 48% 52% / 60% 38% 62% 40%;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-18px) rotate(6deg);
  }
}

/* Pixel equaliser band drawn by pixel-field.js */
.pixel-band {
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(90px, 12vw, 150px);
  height: clamp(200px, 22vw, 300px);
  z-index: 0;
  width: 100%;
  opacity: 0.5;
  pointer-events: none;
}

/* Text sits above the band with a soft dark halo so it stays readable */
.hero .lead,
.typewriter {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 12px var(--bg), 0 0 2px var(--bg);
}

/* Stats strip under the hero */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(48px, 8vw, 90px);
  position: relative;
  z-index: 2;
  text-align: left;
}

.stat {
  padding: 22px 26px;
}

.stat + .stat {
  border-left: 1px solid var(--glass-border);
}

.stat-label {
  display: block;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat-value {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
}

/* Thin circuit line used to divide sections */
.circuit-divider {
  height: 40px;
  margin: 0 auto;
  max-width: var(--page-width);
  background:
    radial-gradient(circle, var(--orchid) 0 3px, transparent 4px) center / 40px 40px no-repeat,
    linear-gradient(90deg, transparent, var(--violet), var(--blue), transparent) center / 100% 1px no-repeat;
  opacity: 0.7;
}

/* ---------- 10. Home page sections ---------- */
.home-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}

.mark-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 40px;
  overflow: hidden;
}

.mark-frame img {
  width: 38%;
  filter: drop-shadow(0 0 24px rgba(123, 47, 255, 0.6));
}

.corner-marks {
  position: absolute;
  inset: 14px;
  pointer-events: none;
  background:
    linear-gradient(var(--muted), var(--muted)) top left / 14px 1px no-repeat,
    linear-gradient(var(--muted), var(--muted)) top left / 1px 14px no-repeat,
    linear-gradient(var(--muted), var(--muted)) top right / 14px 1px no-repeat,
    linear-gradient(var(--muted), var(--muted)) top right / 1px 14px no-repeat,
    linear-gradient(var(--muted), var(--muted)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--muted), var(--muted)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--muted), var(--muted)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--muted), var(--muted)) bottom right / 1px 14px no-repeat;
  opacity: 0.6;
}

.frame-caption {
  position: absolute;
  left: 24px;
  bottom: 18px;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}

.page-card {
  min-height: 280px;
}

.page-card .eyebrow {
  margin: 0;
}

/* Live feed panel on the home page */
.feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.feed-item {
  padding: 26px;
}

.feed-item h3 {
  font-size: 1.1rem;
}

/* ---------- 11. Client Side ---------- */
/* Small decorative journey diagram in the Apple section */
.journey-mini {
  display: grid;
  gap: 10px;
  width: min(280px, 100%);
}

.journey-mini span {
  position: relative;
  padding: 8px 14px 8px 36px;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--glass-highlight);
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.journey-mini span::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%);
  background: var(--holo);
  box-shadow: 0 0 10px var(--violet);
}

.journey-mini span:nth-child(even) {
  margin-left: 28px;
}

.journey-track-wrap {
  overflow-x: auto;
  padding: 4px 2px 8px;
}

.journey-check {
  padding: 12px 28px;
}

.journey-track {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

/* The glowing line that runs behind the journey buttons */
.journey-track::before {
  content: "";
  position: absolute;
  left: 40px;
  right: 40px;
  top: 22px;
  height: 2px;
  background: var(--glass-border);
}

.journey-progress {
  position: absolute;
  left: 22px;
  top: 22px;
  height: 2px;
  width: 0;
  background: var(--holo);
  box-shadow: 0 0 12px var(--violet);
  transition: width 0.5s ease;
}

.journey-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.journey-dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-strong);
  font-family: var(--font-pixel);
  font-size: 0.8rem;
  transition: background 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

.journey-step:hover,
.journey-step[aria-selected="true"] {
  color: var(--text);
}

.journey-step.is-done .journey-dot {
  border-color: var(--violet);
}

.journey-step[aria-selected="true"] .journey-dot {
  background: var(--violet);
  border-color: var(--violet);
  color: #FFFFFF;
  box-shadow: 0 0 24px rgba(123, 47, 255, 0.7);
}

.journey-panel {
  padding: clamp(24px, 4vw, 40px);
}

.journey-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.journey-stage-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-transform: uppercase;
}

.journey-column-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-family: var(--font-pixel);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journey-columns p {
  color: var(--muted);
  margin: 0;
}

.journey-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

.score-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: start;
}

.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li + li {
  border-top: 1px solid var(--glass-border);
}

.check-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  cursor: pointer;
}

.check-option input {
  width: 22px;
  height: 22px;
  accent-color: var(--violet);
  flex-shrink: 0;
  cursor: pointer;
}

/* Circular score meter: the coloured part grows with --score */
.score-meter {
  --score: 0;
  display: grid;
  place-items: center;
  width: min(240px, 70vw);
  aspect-ratio: 1;
  margin: 0 auto 16px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--bg-raised) 78%, transparent 79% 100%),
    conic-gradient(var(--violet) 0deg, var(--blue) calc(var(--score) * 3.6deg), var(--glass-border) 0);
  transition: background 0.5s ease;
}

.score-number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
}

.score-panel {
  padding: 32px;
  text-align: center;
  position: sticky;
  top: 110px;
}

.score-label {
  font-family: var(--font-pixel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orchid);
}

/* ---------- 12. T-Minus ---------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.search-field {
  position: relative;
  flex: 1 1 260px;
  max-width: 360px;
}

.search-field svg {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.search-field input[type="search"] {
  padding-left: 44px;
  border-radius: 999px;
}

.results-count {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.9rem;
}

.launch-card {
  padding: 26px;
}

.launch-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.launch-maker {
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
}

.launch-when {
  font-weight: 600;
  color: var(--text);
}

.launch-detail {
  font-size: 0.9rem;
}

.countdown {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0;
}

.countdown-unit {
  padding: 10px 4px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--glass-highlight);
  text-align: center;
}

.countdown-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.countdown-name {
  display: block;
  font-family: var(--font-pixel);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

.launch-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
}

.source-link {
  font-size: 0.85rem;
}

.next-launch {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: clamp(24px, 4vw, 36px);
  margin-bottom: 40px;
}

.next-launch .countdown {
  min-width: min(420px, 100%);
}

.next-launch .countdown-value {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
}

/* ---------- 13. The Shapers ---------- */
.flip-card {
  perspective: 1200px;
  min-height: 540px;
}

.flip-inner {
  position: relative;
  height: 100%;
  min-height: 540px;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.flip-back {
  transform: rotateY(180deg);
  overflow-y: auto;
}

/* Pixel monogram instead of a photo */
.monogram {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 22px;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--holo) border-box;
  border: 2px solid transparent;
  font-family: var(--font-pixel);
  font-size: 1.8rem;
  color: var(--text);
  box-shadow: 0 0 30px rgba(123, 47, 255, 0.35);
}

.shaper-role {
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orchid);
}

.shaper-quote {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--violet);
  font-style: italic;
  color: var(--text);
}

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.timeline li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 10px;
  padding: 6px 0;
  color: var(--muted);
}

.timeline strong {
  font-family: var(--font-pixel);
  font-weight: 400;
  color: var(--text);
}

.lesson {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-small);
  background: var(--glass-highlight);
  font-size: 0.9rem;
}

.flip-button {
  margin-top: auto;
  align-self: flex-start;
}

/* ---------- 14. Wonder Why ---------- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  height: 3px;
  width: 0;
  background: var(--holo);
  box-shadow: 0 0 10px var(--violet);
}

.post-card {
  padding: 28px;
}

.post-card h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.3;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-family: var(--font-pixel);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

.post-card.is-featured {
  grid-column: span 2;
  background:
    linear-gradient(140deg, rgba(123, 47, 255, 0.28), rgba(61, 123, 255, 0.12) 60%, transparent),
    var(--glass);
}

.article {
  max-width: 760px;
  margin: 0 auto;
}

.article-header {
  text-align: center;
  margin: 32px 0 40px;
}

/* The title gets focus when a post opens, for screen readers.
   It is not something to click, so no focus ring is shown. */
#article-title:focus {
  outline: none;
}

.poll h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
}

.article-header h1 {
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  line-height: 1.1;
}

.article-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

/* Switch for "Explain it simply" */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 6px 16px 6px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.switch-track {
  position: relative;
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: var(--glass-border);
  transition: background 0.3s ease;
}

.switch-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--text);
  transition: transform 0.3s ease;
}

.switch[aria-checked="true"] .switch-track {
  background: var(--holo);
}

.switch[aria-checked="true"] .switch-track::after {
  transform: translateX(20px);
  background: #FFFFFF;
}

.article-body {
  padding: clamp(24px, 5vw, 56px);
  font-size: 1.08rem;
}

.article-body h2 {
  margin-top: 1.6em;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
}

.article-body h2:first-of-type {
  margin-top: 0;
}

.article-intro {
  font-size: 1.2rem;
  color: var(--text);
}

.article-body p {
  color: var(--muted);
}

.is-simple .article-body p {
  font-size: 1.15rem;
  color: var(--text);
}

.poll {
  margin-top: 40px;
  padding: 28px;
  text-align: center;
}

.poll-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.question-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.question-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--glass-border);
}

.link-button {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--orchid);
  font: inherit;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-button:hover {
  color: var(--text);
}

/* ---------- 15. Built by Lilian ---------- */
.project {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 32px;
  align-items: center;
  padding: clamp(20px, 3vw, 32px);
}

.project + .project {
  margin-top: 28px;
}

.project:nth-child(even) .project-media {
  order: 2;
}

.project-media {
  position: relative;
  border-radius: var(--radius-small);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--bg);
}

/* Fake browser bar above each screenshot */
.browser-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-strong);
}

.browser-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--glass-border);
}

.project-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

.project-title {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 18px 0;
}

.tab-panel p {
  color: var(--muted);
}

.feature-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.feature-list li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--holo);
  border-radius: 2px;
}

.tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.about-me {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 32px;
  padding: clamp(24px, 4vw, 44px);
  align-items: center;
}

.skill-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.skill-list li {
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-small);
  background: var(--glass-highlight);
  font-size: 0.92rem;
}

.skill-list strong {
  display: block;
  font-family: var(--font-pixel);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--orchid);
  text-transform: uppercase;
}

/* ---------- 16. Forms ---------- */
.form {
  display: grid;
  gap: 18px;
}

.form-row {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-weight: 600;
  font-size: 0.92rem;
}

input[type="text"],
input[type="email"],
input[type="search"],
textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-small);
  background: var(--glass-strong);
  color: var(--text);
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea {
  min-height: 140px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: var(--muted);
  opacity: 0.8;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--orchid);
  box-shadow: 0 0 0 3px rgba(199, 123, 255, 0.25);
}

[aria-invalid="true"] {
  border-color: var(--error);
}

.field-error {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.85rem;
  color: var(--error);
}

.form-status {
  margin: 0;
  font-weight: 600;
}

.form-status.is-success {
  color: var(--success);
}

.form-status.is-error {
  color: var(--error);
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.inline-form input {
  flex: 1 1 220px;
  border-radius: 999px;
}

/* ---------- 17. Footer ---------- */
.site-footer {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  padding: 72px 0 32px;
  border-top: 1px solid var(--glass-border);
  background: linear-gradient(180deg, transparent, rgba(123, 47, 255, 0.08));
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}

.footer-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-block;
  padding: 6px 0;
  color: var(--muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-border);
  font-size: 0.85rem;
  color: var(--muted);
}

.footer-bottom p {
  margin: 0;
}

/* ---------- 18. 404 page ---------- */
.error-code {
  font-family: var(--font-pixel);
  font-size: clamp(5rem, 22vw, 14rem);
  line-height: 1;
  margin: 0;
}

/* ---------- 19. Scroll reveal ---------- */
/* Only hidden when JavaScript is running, so content is never lost */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- 20. Responsive layouts ---------- */

/* Large tablets and small laptops */
@media (max-width: 1100px) {
  .main-nav a {
    padding: 8px 10px;
    font-size: 0.82rem;
  }

  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Tablets: the navigation becomes a menu button */
@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    display: none;
    padding: 12px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--glass-strong);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow);
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
  }

  .main-nav a {
    padding: 14px 16px;
    font-size: 1rem;
  }

  .grid,
  .feed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-intro,
  .score-layout,
  .project,
  .about-me,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .project:nth-child(even) .project-media {
    order: 0;
  }

  .journey-columns {
    grid-template-columns: 1fr;
  }

  .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat:nth-child(3) {
    border-left: 0;
  }

  .stat:nth-child(n + 3) {
    border-top: 1px solid var(--glass-border);
  }

  .next-launch {
    grid-template-columns: 1fr;
  }

  .score-panel {
    position: static;
  }
}

/* Phones */
@media (max-width: 640px) {
  .site-header {
    padding-left: 16px;
  }

  .brand img {
    height: 24px;
  }

  .grid,
  .grid-2,
  .grid-4,
  .feed,
  .form-row,
  .skill-list {
    grid-template-columns: 1fr;
  }

  .post-card.is-featured {
    grid-column: auto;
  }

  .journey-step-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .countdown-value {
    font-size: 1.3rem;
  }

  .orb-left {
    left: -30%;
    top: 4%;
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
  }

  .hero-actions .btn {
    width: 100%;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .theme-toggle {
    width: 40px;
    height: 40px;
  }

  .stat-strip {
    grid-template-columns: 1fr;
  }

  .stat + .stat {
    border-left: 0;
    border-top: 1px solid var(--glass-border);
  }
}

/* ---------- 21. Reduced motion ---------- */
/* Respect people who have asked their device for less movement */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}