/*
Theme Name: tech.tech Coming Soon
Theme URI: http://techtech.local/
Author: tech.tech
Description: A minimal animated coming soon page for tech.tech.
Version: 5.4.0
Text Domain: techtech-coming-soon
*/

:root {
  color-scheme: dark;
  --background: #050609;
  --foreground: #f5f7fb;
  --muted: #8e95a4;
  --glow: rgba(103, 232, 249, 0.28);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.intro {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #030406;
  pointer-events: none;
}

.intro::before {
  content: "";
  position: absolute;
  width: min(80vw, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, .12), transparent 58%);
  filter: blur(42px);
  opacity: 0;
  transform: scale(.35);
  animation: intro-glow 2.2s ease-out forwards;
}

.intro-message {
  position: absolute;
  margin: 0;
  padding: 24px;
  color: rgba(241, 245, 249, .94);
  font-size: clamp(18px, 2.4vw, 32px);
  font-weight: 300;
  letter-spacing: .13em;
  text-align: center;
  opacity: 0;
  filter: blur(20px);
  transform: translateY(16px) scale(.97);
}

.intro-message--one { animation: cinematic-line-one 2.1s cubic-bezier(.22, 1, .36, 1) 1.1s both; }
.intro-message--two { animation: cinematic-line-two 2.15s cubic-bezier(.22, 1, .36, 1) 3.65s both; }

.light-scan {
  position: absolute;
  top: 50%;
  left: -30%;
  width: 28%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #67e8f9, transparent);
  box-shadow: 0 0 18px rgba(103, 232, 249, .7);
  animation: scan 1.15s ease-in-out 3.05s both;
}

.intro-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #a5f3fc;
  opacity: 0;
  animation: particle 2.7s ease-out var(--delay) both;
}

.intro.is-finished {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease, visibility 0s linear 1s;
}

.coming-soon {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  padding: 32px;
  background:
    radial-gradient(circle at 50% 44%, rgba(37, 99, 235, .08), transparent 34%),
    linear-gradient(145deg, #080a10 0%, #030406 100%);
}

.coming-soon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 100% 4px;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
}

.smoke {
  position: absolute;
  z-index: -1;
  width: min(72vw, 920px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  filter: blur(78px);
  transform: translate3d(0, 18%, 0) scale(.72);
  background:
    radial-gradient(circle at 36% 46%, rgba(125, 211, 252, .17), transparent 27%),
    radial-gradient(circle at 67% 49%, rgba(129, 140, 248, .14), transparent 29%),
    radial-gradient(circle at 52% 66%, rgba(255, 255, 255, .08), transparent 35%);
  animation: smoke-in 2.8s cubic-bezier(.22, 1, .36, 1) .15s forwards,
             smoke-drift 12s ease-in-out 3s infinite alternate;
  margin-left: var(--smoke-x, 0);
  margin-top: var(--smoke-y, 0);
  transition: margin .9s ease-out;
}

.smoke::before,
.smoke::after {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 43% 57% 64% 36% / 48% 42% 58% 52%;
  background: rgba(148, 163, 184, .09);
  filter: blur(34px);
  animation: swirl 15s linear infinite;
}

.smoke::after {
  inset: 28% 8% 8% 30%;
  opacity: .65;
  animation-duration: 19s;
  animation-direction: reverse;
}

.content {
  text-align: center;
  opacity: 0;
  filter: blur(18px);
  transform: scale(.96);
}

.is-ready .content {
  animation: brand-arrival 1.7s cubic-bezier(.16, 1, .3, 1) forwards;
}

.eyebrow,
.title,
.description,
.email {
  opacity: 0;
  filter: blur(14px);
  transform: translateY(14px);
}

.is-ready .title {
  animation: title-focus 1.65s cubic-bezier(.16, 1, .3, 1) .15s forwards;
}

.is-ready .eyebrow {
  animation: final-reveal 1.15s cubic-bezier(.22, 1, .36, 1) .85s forwards;
}

.is-ready .description {
  animation: final-reveal 1.25s cubic-bezier(.22, 1, .36, 1) 1.25s forwards;
}

.is-ready .email {
  animation: final-reveal 1.25s cubic-bezier(.22, 1, .36, 1) 1.65s forwards;
}

.eyebrow {
  margin: 0 0 26px;
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .48em;
  text-transform: uppercase;
}

.title {
  margin: 0;
  font-size: clamp(58px, 12vw, 152px);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .88;
  text-shadow: 0 0 42px var(--glow);
}

.title .dot { color: #67e8f9; }

.description {
  margin: 30px 0 0;
  color: var(--muted);
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 300;
  letter-spacing: .08em;
}

.email {
  display: inline-block;
  margin-top: 38px;
  color: var(--foreground);
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: .12em;
  text-decoration: none;
  transition: color .3s ease, text-shadow .3s ease;
}

.email:hover,
.email:focus-visible {
  color: #a5f3fc;
  text-shadow: 0 0 22px rgba(103, 232, 249, .52);
  outline: none;
}

@keyframes reveal {
  0% { opacity: 0; filter: blur(18px); transform: translateY(18px) scale(.985); }
  60% { opacity: .72; }
  100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

@keyframes intro-glow {
  0% { opacity: 0; transform: scale(.35); }
  65% { opacity: 1; }
  100% { opacity: .6; transform: scale(1); }
}

@keyframes cinematic-line-one {
  0% { opacity: 0; filter: blur(20px); transform: translateY(16px) scale(.97); letter-spacing: .2em; }
  28%, 67% { opacity: 1; filter: blur(0); transform: none; }
  100% { opacity: 0; filter: blur(18px); transform: translateY(-12px) scale(1.04); letter-spacing: .18em; }
}

@keyframes cinematic-line-two {
  0% { opacity: 0; filter: blur(22px); transform: scale(1.06); }
  30%, 70% { opacity: 1; filter: blur(0); transform: scale(1); }
  100% { opacity: 0; filter: blur(16px); transform: scale(.96); }
}

@keyframes scan {
  0% { left: -30%; opacity: 0; }
  20%, 72% { opacity: .85; }
  100% { left: 105%; opacity: 0; }
}

@keyframes particle {
  0% { opacity: 0; transform: translate3d(0, 18px, 0) scale(.5); }
  28% { opacity: .8; }
  100% { opacity: 0; transform: translate3d(var(--drift), -80px, 0) scale(1.6); }
}

@keyframes brand-arrival {
  0% { opacity: 0; filter: blur(18px); transform: scale(.96); }
  58% { opacity: 1; filter: blur(1px); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes title-focus {
  0% { opacity: 0; filter: blur(28px); transform: scale(1.12); letter-spacing: -.02em; }
  52% { opacity: .82; filter: blur(3px); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); letter-spacing: -.075em; }
}

@keyframes final-reveal {
  0% { opacity: 0; filter: blur(14px); transform: translateY(14px); }
  65% { opacity: .86; }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes smoke-in {
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes smoke-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

@keyframes swirl { to { transform: rotate(360deg) scale(1.08); } }

@media (max-width: 560px) {
  .coming-soon { padding: 24px; }
  .eyebrow { margin-bottom: 21px; letter-spacing: .36em; }
  .description { margin-top: 24px; }
  .email { margin-top: 32px; }
  .smoke { width: 130vw; }
}

/* Continuous ambient data particles, from the first frame through the final state. */
.intro-particle {
  width: var(--size, 2px);
  height: var(--size, 2px);
  background: rgba(165, 243, 252, var(--particle-alpha, .62));
  box-shadow: 0 0 8px rgba(103, 232, 249, .45);
  animation: ambient-rise var(--duration, 9s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}

@keyframes ambient-rise {
  0% { opacity: 0; transform: translate3d(0, 70px, 0) scale(.55); }
  12% { opacity: var(--particle-alpha, .62); }
  72% { opacity: .35; }
  100% { opacity: 0; transform: translate3d(var(--drift, 0), -58vh, 0) scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-particle { animation: none; opacity: .22; }
}

@media (prefers-reduced-motion: reduce) {
  .smoke, .smoke::before, .smoke::after { animation-duration: 24s; }
}

/* Version 3: the dot is the origin of the Tech.Tech identity. */
.intro-core {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.origin-dot {
  position: absolute;
  z-index: 4;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #a5f3fc;
  box-shadow: 0 0 10px #67e8f9, 0 0 34px rgba(34, 211, 238, .8);
  opacity: 0;
  animation: dot-awake 1.25s ease-out .3s forwards,
             dot-heartbeat 1.45s ease-in-out 1.55s 2;
}

.origin-dot::before,
.origin-dot::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(103, 232, 249, .65);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  animation: core-wave 1.5s ease-out 1.35s 2;
}

.origin-dot::after { animation-delay: 1.72s; }

.build-logo {
  display: flex;
  align-items: baseline;
  justify-content: center;
  color: #f8fafc;
  font-size: clamp(52px, 10vw, 126px);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: 1;
}

.build-word { display: flex; }
.build-word:first-child { color: #e7f6ff; }
.build-word:last-child { color: #f0edff; }

.build-letter {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translateX(var(--from)) scaleX(.35);
  animation: letter-build .72s cubic-bezier(.16, 1, .3, 1) var(--letter-delay) forwards;
}

.build-left .build-letter:nth-child(4) { --letter-delay: 2.55s; --from: 22px; }
.build-left .build-letter:nth-child(3) { --letter-delay: 2.7s; --from: 34px; }
.build-left .build-letter:nth-child(2) { --letter-delay: 2.85s; --from: 46px; }
.build-left .build-letter:nth-child(1) { --letter-delay: 3s; --from: 58px; }
.build-right .build-letter:nth-child(1) { --letter-delay: 2.55s; --from: -22px; }
.build-right .build-letter:nth-child(2) { --letter-delay: 2.7s; --from: -34px; }
.build-right .build-letter:nth-child(3) { --letter-delay: 2.85s; --from: -46px; }
.build-right .build-letter:nth-child(4) { --letter-delay: 3s; --from: -58px; }

.build-dot {
  position: relative;
  z-index: 3;
  width: .3em;
  color: transparent;
}

.energy-line {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #7dd3fc 20%, #fff 50%, #c4b5fd 80%, transparent);
  box-shadow: 0 0 16px rgba(125, 211, 252, .8);
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: energy-connect 1.15s ease-in-out 3.65s forwards;
}

.intro-tagline {
  position: absolute;
  top: calc(50% + clamp(50px, 8vw, 100px));
  margin: 0;
  color: #8e95a4;
  font-size: clamp(10px, 1.2vw, 14px);
  font-weight: 400;
  letter-spacing: .2em;
  opacity: 0;
  filter: blur(10px);
  animation: tagline-in 1.25s ease 5.45s forwards;
}

.intro-core.is-rebuilding .build-logo {
  animation: logo-rebuild 1.3s cubic-bezier(.16, 1, .3, 1) forwards;
}

.intro-core.is-rebuilding .origin-dot {
  animation: final-core-pulse 1.35s ease-out forwards;
}

@keyframes dot-awake {
  0% { opacity: 0; transform: scale(.2); }
  55% { opacity: 1; transform: scale(1.45); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes dot-heartbeat {
  0%, 100% { transform: scale(1); box-shadow: 0 0 10px #67e8f9, 0 0 34px rgba(34,211,238,.65); }
  45% { transform: scale(1.7); box-shadow: 0 0 18px #cffafe, 0 0 70px rgba(34,211,238,.95); }
}

@keyframes core-wave {
  0% { opacity: .8; transform: translate(-50%, -50%) scale(.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(18); }
}

@keyframes letter-build {
  0% { opacity: 0; filter: blur(12px); transform: translateX(var(--from)) scaleX(.35); }
  100% { opacity: 1; filter: blur(0); transform: translateX(0) scaleX(1); }
}

@keyframes energy-connect {
  0% { width: 0; opacity: 0; }
  30% { opacity: 1; }
  70% { width: min(80vw, 850px); opacity: .85; }
  100% { width: min(92vw, 1100px); opacity: 0; }
}

@keyframes tagline-in {
  to { opacity: 1; filter: blur(0); }
}

@keyframes logo-rebuild {
  0% { opacity: 1; filter: blur(0); transform: scale(1); }
  35% { opacity: .16; filter: blur(8px); transform: scale(1.035); letter-spacing: .02em; }
  58% { opacity: .35; filter: blur(16px); transform: scale(.97); }
  100% { opacity: 1; filter: blur(0); transform: scale(1); }
}

@keyframes final-core-pulse {
  0% { opacity: 1; transform: scale(1); }
  30% { opacity: 1; transform: scale(2.2); box-shadow: 0 0 24px #ecfeff, 0 0 100px #22d3ee; }
  100% { opacity: 1; transform: scale(1); }
}

@media (max-width: 560px) {
  .intro-tagline { width: 100%; padding: 0 20px; text-align: center; letter-spacing: .13em; }
}

/* Version 4: statements become signals; the final signal builds the brand. */
.story-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.story-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(88vw, 980px);
  margin: 0;
  color: #eef6ff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20px, 3vw, 40px);
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: -.015em;
  text-align: center;
  text-wrap: balance;
  opacity: 0;
  filter: blur(24px);
  transform: translate(-50%, calc(-50% + 22px)) scale(.97);
}

.sentence-ending { white-space: nowrap; }

.story-line--one { animation: smoke-statement 4.8s cubic-bezier(.4, 0, .2, 1) 3.6s both; }
.story-line--two { animation: smoke-statement 4.9s cubic-bezier(.4, 0, .2, 1) 7.9s both; }

.sentence-ping {
  display: inline-block;
  position: relative;
  width: .22em;
  height: .22em;
  margin-left: .08em;
  border-radius: 50%;
  vertical-align: .1em;
  background: #a5f3fc;
  box-shadow: 0 0 10px #67e8f9, 0 0 30px rgba(34, 211, 238, .85);
}

.sentence-ping::before,
.sentence-ping::after,
.traveler-dot::before,
.traveler-dot::after,
.forge-dot::before,
.forge-dot::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(103, 232, 249, .76);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  animation: network-ping 1.35s ease-out var(--ping-delay, 1.5s) 2;
}

.sentence-ping::after,
.traveler-dot::after,
.forge-dot::after { animation-delay: calc(var(--ping-delay, 1.5s) + .32s); }
.story-line--two .sentence-ping { --ping-delay: 10.2s; }

.sentence-ping { visibility: hidden; }

.persistent-ping {
  position: fixed;
  z-index: 30;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cffafe;
  box-shadow: 0 0 12px #67e8f9, 0 0 42px rgba(34, 211, 238, .9);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.35);
  transition:
    left 1.45s cubic-bezier(.65, 0, .2, 1),
    top 1.45s cubic-bezier(.65, 0, .2, 1),
    opacity .8s ease,
    transform .8s ease;
  pointer-events: none;
}

.persistent-ping.is-born { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.persistent-ping::before,
.persistent-ping::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(103, 232, 249, .78);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: persistent-network-ping 2.35s ease-out .35s infinite;
}

.persistent-ping::after { animation-delay: 1.5s; }

.persistent-ping.is-final {
  z-index: 30;
  width: 7px;
  height: 7px;
  box-shadow: 0 0 10px #67e8f9, 0 0 32px rgba(34, 211, 238, .82);
}

.traveler-dot,
.forge-dot { opacity: 0 !important; }

.title .dot { color: transparent; }

@keyframes persistent-network-ping {
  0% { opacity: .85; transform: translate(-50%, -50%) scale(1); }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(5); }
}

.traveler-dot,
.forge-dot {
  position: fixed;
  z-index: 6;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cffafe;
  box-shadow: 0 0 12px #67e8f9, 0 0 42px rgba(34, 211, 238, .9);
}

.traveler-dot {
  left: var(--dot-left);
  top: var(--dot-top);
  opacity: 0;
  transform: translate(-50%, -50%);
}

.traveler-dot.is-traveling {
  opacity: 1;
  animation: dot-to-center 1.5s cubic-bezier(.65, 0, .2, 1) forwards;
}

.brand-forge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(58px, 11vw, 138px);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: 1;
  opacity: 0;
}

.brand-forge.is-active { opacity: 1; }
.forge-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.forge-dot::before, .forge-dot::after { --ping-delay: .15s; }

.forge-tech {
  position: absolute;
  top: 50%;
  color: #f6f9ff;
  opacity: 0;
  filter: blur(16px);
  white-space: nowrap;
}

.forge-tech--source {
  left: calc(50% + .18em);
  transform: translateY(-50%);
}

.brand-forge.is-active .forge-tech--source {
  animation: source-tech-in 1s cubic-bezier(.16, 1, .3, 1) .25s forwards;
}

.forge-tech--clone {
  right: calc(50% + .18em);
  transform: translateY(-50%) translateX(100%);
}

.brand-forge.is-copying .forge-tech--clone {
  animation: duplicate-tech 1.35s cubic-bezier(.16, 1, .3, 1) forwards;
}

.intro.is-closing .story-stage {
  animation: curtain-smoke 1.25s ease-in forwards;
}

@keyframes smoke-statement {
  0% { opacity: 0; filter: blur(18px); transform: translate(-50%, -50%); }
  30% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%); }
  68% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%); }
  100% { opacity: 0; filter: blur(18px); transform: translate(-50%, -50%); }
}

@keyframes network-ping {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5.5); }
}

@keyframes dot-to-center {
  0% { left: var(--dot-left); top: var(--dot-top); transform: translate(-50%, -50%) scale(1); }
  35% { box-shadow: 0 0 18px #ecfeff, 0 0 75px rgba(34,211,238,1); }
  100% { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.15); }
}

@keyframes source-tech-in {
  0% { opacity: 0; filter: blur(16px); transform: translateY(-50%) translateX(-18px) scale(.96); }
  100% { opacity: 1; filter: blur(0); transform: translateY(-50%) translateX(0) scale(1); }
}

@keyframes duplicate-tech {
  0% { opacity: .12; filter: blur(12px); transform: translateY(-50%) translateX(100%) scale(.96); }
  35% { opacity: .45; filter: blur(7px); text-shadow: 18px 0 20px rgba(103,232,249,.3); }
  100% { opacity: 1; filter: blur(0); transform: translateY(-50%) translateX(0) scale(1); text-shadow: none; }
}

@keyframes curtain-smoke {
  0% { opacity: 1; filter: blur(0); transform: scale(1); }
  100% { opacity: 0; filter: blur(28px); transform: scale(1.07); }
}

@media (max-width: 560px) {
  .story-line {
    width: min(84vw, 320px);
    font-size: clamp(17px, 4.75vw, 19px);
    line-height: 1.68;
    letter-spacing: 0;
  }
  .story-line--one { animation-duration: 6.2s; }
  .story-line--two { animation-delay: 9.2s; animation-duration: 6.3s; }
  .brand-forge { font-size: clamp(49px, 16vw, 68px); }
}

/* Version 5: preserve the originally forged domain as the final lockup. */
.forge-dot {
  top: calc(50% + .31em);
}

.forge-final {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.forge-final .forge-coming,
.forge-final .forge-description,
.forge-final .forge-email {
  position: absolute;
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 48px);
  margin: 0;
  opacity: 0;
  filter: blur(14px);
  transform: translateX(-50%) translateY(12px);
  text-align: center;
}

.forge-coming {
  top: calc(50% - clamp(84px, 8vw, 118px));
  color: #7dd3fc;
  font-family: Inter, ui-sans-serif, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .48em;
  text-transform: uppercase;
}

.forge-description {
  top: calc(50% + clamp(70px, 7vw, 106px));
  color: var(--muted);
  font-family: Inter, ui-sans-serif, sans-serif;
  font-size: clamp(13px, 1.5vw, 16px);
  font-weight: 300;
  letter-spacing: .08em;
}

.forge-email {
  top: calc(50% + clamp(120px, 11vw, 164px));
  color: var(--foreground);
  font-family: Inter, ui-sans-serif, sans-serif;
  font-size: clamp(13px, 1.4vw, 15px);
  letter-spacing: .12em;
  text-decoration: none;
  pointer-events: auto;
}

.brand-forge.is-final-state .forge-final { opacity: 1; }
.brand-forge.is-final-state .forge-coming { animation: forge-meta-in 1.2s ease .15s forwards; }
.brand-forge.is-final-state .forge-description { animation: forge-meta-in 1.2s ease .55s forwards; }
.brand-forge.is-final-state .forge-email { animation: forge-meta-in 1.2s ease .95s forwards; }

@keyframes forge-meta-in {
  to { opacity: 1; filter: blur(0); transform: translateX(-50%) translateY(0); }
}

@media (max-width: 560px) {
  .forge-dot { top: calc(50% + .29em); }
  .forge-coming { top: calc(50% - 76px); }
  .forge-description { top: calc(50% + 60px); }
  .forge-email { top: calc(50% + 105px); }
}

/* Keep the final brand dot on the exact geometric center of the viewport. */
.coming-soon .content {
  position: relative;
  width: 100%;
  height: auto;
  display: grid;
  place-items: center;
}

.coming-soon .title { grid-area: 1 / 1; }

.coming-soon .eyebrow,
.coming-soon .description,
.coming-soon .email {
  position: absolute;
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 48px);
  margin: 0;
  transform: translateX(-50%);
}

.coming-soon .eyebrow { bottom: calc(100% + 34px); }
.coming-soon .description { top: calc(100% + 34px); }
.coming-soon .email { top: calc(100% + 88px); }

.is-ready .eyebrow,
.is-ready .description,
.is-ready .email {
  --resting-transform: translateX(-50%);
}

@keyframes final-reveal {
  0% { opacity: 0; filter: blur(14px); transform: translateX(-50%) translateY(14px); }
  65% { opacity: .86; }
  100% { opacity: 1; filter: blur(0); transform: translateX(-50%) translateY(0); }
}

@media (max-width: 560px) {
  .coming-soon .eyebrow { bottom: calc(100% + 25px); }
  .coming-soon .description { top: calc(100% + 27px); }
  .coming-soon .email { top: calc(100% + 75px); }
}

/* Signal collision: the domain dot is born from two opposing data streams. */
.signal-birth {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  animation: signal-scene-out .7s ease 2.65s forwards;
}

.signal-line {
  position: absolute;
  top: 50%;
  width: 46vw;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .42), #a5f3fc);
  box-shadow: 0 0 12px rgba(103, 232, 249, .7);
}

.signal-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28px;
  height: 3px;
  border-radius: 50%;
  background: #ecfeff;
  filter: blur(2px);
  box-shadow: 0 0 20px #22d3ee;
  transform: translateY(-50%);
}

.signal-line--left {
  right: 100%;
  animation: signal-left-in 1.7s cubic-bezier(.7, 0, .25, 1) .45s forwards;
}

.signal-line--left::after { right: -3px; }

.signal-line--right {
  left: 100%;
  background: linear-gradient(270deg, transparent, rgba(196, 181, 253, .38), #ddd6fe);
  box-shadow: 0 0 12px rgba(167, 139, 250, .65);
  animation: signal-right-in 1.7s cubic-bezier(.7, 0, .25, 1) .45s forwards;
}

.signal-line--right::after { left: -3px; box-shadow: 0 0 20px #a78bfa; }

.signal-impact {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0;
  background: #fff;
  transform: translate(-50%, -50%) scale(.2);
  animation: signal-impact 1s ease-out 2.05s forwards;
}

@keyframes signal-left-in {
  0% { right: 100%; opacity: 0; }
  18% { opacity: .9; }
  100% { right: 50%; opacity: 1; }
}

@keyframes signal-right-in {
  0% { left: 100%; opacity: 0; }
  18% { opacity: .9; }
  100% { left: 50%; opacity: 1; }
}

@keyframes signal-impact {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); box-shadow: 0 0 0 rgba(255,255,255,0); }
  20% { opacity: 1; transform: translate(-50%, -50%) scale(2.4); box-shadow: 0 0 70px rgba(207,250,254,1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8); box-shadow: 0 0 120px rgba(34,211,238,0); }
}

@keyframes signal-scene-out { to { opacity: 0; filter: blur(8px); } }