@charset "UTF-8";

/* ================================
   DESIGN TOKENS
================================ */

:root {
  --bg: #03050a;
  --bg-deep: #03050a;
  --text: #f4f6ff;
  --muted: #b2b8da;
  --accent: #7df9ff;
  --accent-dim: rgba(125, 249, 255, 0.35);
  --accent-faint: rgba(125, 249, 255, 0.12);
  --max-width: 860px;
}

/* ================================
   BASE
================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(1200px 500px at 50% -10%, #0b1025, var(--bg)),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  line-height: 1.75;
}

body { overflow-x: hidden; }
a:link, a:visited {color:#fff; text-decoration: underline;}
a:hover, a:active {color: var(--accent); text-decoration: none;}
.accent {
  color: var(--accent);
}

.lead {
  font-size: 1.45rem;
  font-weight: 400;
}

.section-emphasis {
  position: relative;
  padding: 6rem 0;
  border: none;
  border-radius: 0;
  background: linear-gradient(
    180deg,
    rgba(125,249,255,0.10) 0%,
    rgba(125,249,255,0.06) 40%,
    rgba(125,249,255,0.06) 60%,
    rgba(125,249,255,0.10) 100%
  );
}

.section-emphasis::before,
.section-emphasis::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12rem;
  pointer-events: none;
  z-index: 2;
}

.section-emphasis::before {
  top: 0;
  background: linear-gradient(to bottom, var(--bg), transparent);
}

.section-emphasis::after {
  bottom: 0;
  background: linear-gradient(to top, var(--bg), transparent);
}


section {
  margin-top: 6rem;
}

section:first-of-type {
  margin-top: 4rem;
}

section:last-of-type {
  margin-bottom: 6rem;
}
section h2 {
  margin-bottom: 3rem;
}
.small {
  font-size: 1rem;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.1), transparent),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.08), transparent),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,0.06), transparent);
  pointer-events: none;
  z-index: 0;
}
section:nth-of-type(3) {
  border-left: 4px solid var(--accent);
  border-right: 4px solid var(--accent);
  padding-left: 2rem;
  padding-right: 2rem;
}
.transmission p:first-child,
section h2 + p {
  font-size: 20px;
  font-weight: 400;
  color: #ffffff;
}

body::before {
  content: "";
  position: fixed;
  width: 900px;
  height: 900px;
  top: -200px;
  right: -300px;
  background: radial-gradient(
    circle at center,
    var(--accent-faint) 0%,
    transparent 70%
  );
  border-radius: 50%;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

.rights-list {
  margin-top: 4rem;
}

.right {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;

  opacity: 0;
  transition: opacity 700ms ease;
}

.right.visible {
  opacity: 1;
}

.right p {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0;
  max-width: 14ch;
}

.right span {
  display: block;
  font-family: Inter, sans-serif;
  font-size: 1em;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 1.8rem;
}




/* INTERFERENCE heading */
.interference-section {
  padding: 8rem 2rem;
}

.interference-heading {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4rem;
  min-height: 1.2em;
}

.hero-svg {
  width: 100%;
  max-width: 350px;
  margin: 3rem auto 0;
  overflow: visible;
}

.hero-svg svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.hero-svg img {
  width: 100%;
  height: auto;
}

/* ================================
   MICRO-ANIMATIONS
================================ */

/* Divider line draw from center outward */
.divider-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1000ms ease 200ms;
}
.divider-line.draw { stroke-dashoffset: 0; }

.divider-dot {
  transform-origin: 200px 10px;
  transform: scale(0);
  opacity: 0;
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 900ms,
              opacity 300ms ease 900ms;
}
.divider-dot.pop { transform: scale(1); opacity: 1; }

/* Staggered fade-up for headings + paragraphs */
.animate-in {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.animate-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Rights — add blur clearing to existing fade */
.right {
  filter: blur(4px);
  transition: opacity 700ms ease, filter 700ms ease;
}
.right.visible { filter: blur(0); }

/* Signal-line slow glow pulse */
@keyframes signalPulse {
  0%, 100% { text-shadow: 0 0 8px rgba(125,249,255,0.3);  opacity: 1;   }
  50%       { text-shadow: 0 0 24px rgba(125,249,255,0.7); opacity: 0.8; }
}
.signal-line { animation: signalPulse 3.5s ease-in-out infinite; }

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem 9rem;
  position: relative;
  z-index: 1;
}

section {
  position: relative;
}

/* ================================
   HERO
================================ */

header {
  padding: 6rem 1.5rem 9rem;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: visible;
}

header h1 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.5rem, 9vw, 6rem);
  letter-spacing: 0.1em;
  margin-bottom: 2.5rem;
  text-transform: uppercase;
  line-height: 1.1;

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    var(--accent) 120%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
    0 0 60px var(--accent-faint),
    0 0 120px var(--accent-dim);
}


header p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1.35rem;
  color: var(--muted);
}

/* Transmission signal lock-in */
.typewriter {
  display: inline-block;
  animation: signal-in 2.8s ease-out 0.4s both;
}

@keyframes signal-in {
  0%   { opacity: 0; }
  6%   { opacity: 0.85; }
  9%   { opacity: 0; }
  14%  { opacity: 0.7; }
  17%  { opacity: 0.05; }
  23%  { opacity: 0.9; }
  27%  { opacity: 0.2; }
  33%  { opacity: 0.8; }
  40%  { opacity: 0.4; }
  50%  { opacity: 1; }
  55%  { opacity: 0.6; }
  65%  { opacity: 1; }
  100% { opacity: 1; }
}

.baseline-closing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-top: 1rem;
}

.baseline-closing p:first-child {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.signal-line {
  margin-top: 3rem;
  font-size: 2rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #7df9ff;
}



/* ================================
   TYPOGRAPHY
================================ */

h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.3rem, 5vw, 2rem);
  letter-spacing: clamp(0.08em, 1.5vw, 0.25em);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2.5rem;
}

p {
  font-size: 17px;
  margin: 0 0 2rem;
}

.muted { color: var(--muted); }

blockquote {
  margin: 4rem 0;
  padding-left: 2.5rem;
  border-left: 3px solid var(--accent);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--muted);
}

ul { padding-left: 1.5rem; }

li {
  font-size: 1.2rem;
  margin-bottom: 1.4rem;
}

/* ================================
   FOOTER
================================ */

footer {
  text-align: center;
  padding: 6rem 2rem 7rem;
  color: var(--muted);
  font-size: 1.05rem;
  position: relative;
  z-index: 1;
}

footer span {
  color: var(--accent);
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ================================
   RESPONSIVE
================================ */

@media (max-width: 767.98px) {
  header {
    padding: 4rem 1rem 5rem;
  }

  header p {
    font-size: 1.1rem;
  }

  p {
    font-size: 16px;
  }

  section {
    margin-top: 4rem;
  }

  .section-emphasis {
    padding: 3rem 0;
  }

  .interference-section {
    padding: 5rem 1.5rem;
  }

  .right {
    min-height: 70vh;
    padding: 3rem 1rem;
  }

  .baseline-closing {
    min-height: 70vh;
  }

  main {
    padding: 0 1.5rem 5rem;
  }
}

@media (max-width: 575.98px) {
  header {
    padding: 3rem 1rem 4rem;
  }

  p {
    font-size: 15px;
  }

  section {
    margin-top: 3rem;
  }

  section:last-of-type {
    margin-bottom: 4rem;
  }

  section:nth-of-type(3) {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .right {
    min-height: 60vh;
    padding: 2.5rem 1rem;
  }

  .baseline-closing {
    min-height: 60vh;
  }

  .interference-section {
    padding: 4rem 1rem;
  }

  .interference-heading {
    font-size: clamp(1.6rem, 8vw, 2.5rem);
    letter-spacing: 0.06em;
  }

  /* Allow transmission text to wrap on small screens */
  .typewriter {
    white-space: normal;
  }

  main {
    padding: 0 1rem 4rem;
  }

  footer {
    padding: 4rem 1rem 5rem;
  }

  /* Tone down the fixed bg glow on small screens */
  body::before {
    width: 400px;
    height: 400px;
    top: -100px;
    right: -150px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #animated-heading {
    /* skip animation, just show final text */
  }
}