/* ─── The Eido page ────────────────────────────────────────────
   Shares tokens, nav, footer and motion with home.css (the homepage is frozen;
   nothing here restyles it). Its own world: the app's Eido scene (a warm
   overlook above still water), the name sitting in that water with its
   reflection, then the range, the conversation, one honest band, the invitation. */

.page-eido { --eido-ink: #2c4756; }
.page-eido .nav-mark { opacity: 1; }
.page-eido .nav:not(.is-solid) .nav-mark,
.page-eido .nav:not(.is-solid) .nav-login { text-shadow: 0 0 18px var(--paper), 0 0 6px var(--paper); }

/* ─── Opening ─────────────────────────────────────────────── */
.meet {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(110px, 18vh, 170px) clamp(20px, 6vw, 96px) 0;
}
.meet-scene {
  position: absolute; inset: 0; z-index: -1;
  background: url("/assets/scenes/eido/mobile.webp") center 60% / cover no-repeat;
}
@media (min-width: 768px) { .meet-scene { background-image: url("/assets/scenes/eido/desktop.webp"); background-position: center 55%; } }
.meet-scene::after { /* morning haze: paper at the top, clearer over the water */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--paper) 86%, transparent) 0%, color-mix(in srgb, var(--paper) 55%, transparent) 46%, color-mix(in srgb, var(--paper) 30%, transparent) 100%);
}
.meet-copy { max-width: 900px; }
.meet-line {
  font-family: var(--serif); font-size: clamp(38px, 5.4vw, 84px); line-height: 1.04; letter-spacing: -0.025em;
  color: var(--charcoal); text-wrap: balance;
}
.meet-what {
  margin-top: clamp(16px, 2.4vh, 26px);
  font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.5vw, 21px); color: var(--deep);
}

/* The name sits on the water; its reflection breaks up below it */
.meet-name { /* set into the scene's band of still water, its reflection beneath */
  position: absolute; right: 3vw; top: 41vh; top: 41svh;
  font-family: var(--serif); line-height: .74; letter-spacing: -0.045em;
  font-size: clamp(140px, 20vw, 330px); color: var(--eido-ink);
}
.meet-word { display: block; position: relative; z-index: 1; }
.meet-reflection { /* the word turned over, hanging under the waterline, fading down */
  display: block; height: .74em; margin-top: -.02em;
  transform: scaleY(-1); transform-origin: 50% 50%;
  color: var(--eido-ink); opacity: .28; filter: blur(1.2px);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.35) 30%, transparent 62%);
          mask-image: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.35) 30%, transparent 62%);
}
.js .meet-reflection { animation: ripple 7s ease-in-out infinite; }
@keyframes ripple {
  0%, 100% { transform: scaleY(-1) skewX(0deg); }
  50% { transform: scaleY(-1) skewX(-1.2deg) translateX(.01em); }
}

/* ─── The range ───────────────────────────────────────────── */
.range {
  position: relative; overflow: hidden;
  background: var(--paper);
  padding: clamp(90px, 15vh, 150px) 0 clamp(80px, 13vh, 130px);
}
.drift { display: grid; gap: clamp(18px, 3.4vh, 34px); }
.drift-row { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.drift-track { display: inline-flex; align-items: baseline; gap: clamp(36px, 6vw, 96px); padding-right: clamp(36px, 6vw, 96px); }
.drift-track span { font-family: var(--serif); color: var(--charcoal); }
.drift-track .d-l { font-size: clamp(30px, 4.2vw, 64px); letter-spacing: -0.02em; }
.drift-track .d-m { font-size: clamp(22px, 2.6vw, 38px); letter-spacing: -0.01em; color: var(--deep); }
.drift-track .d-s { font-size: clamp(17px, 1.6vw, 23px); color: var(--driftwood); }
.drift-track .i { font-style: italic; }
.drift-track .blue { color: var(--eido-ink); }
.js .drift-track { animation: drift 90s linear infinite; }
.js .r2 .drift-track { animation-duration: 120s; animation-direction: reverse; }
.js .r3 .drift-track { animation-duration: 105s; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.range-line {
  margin: clamp(56px, 9vh, 96px) clamp(20px, 6vw, 96px) 0;
  font-family: var(--serif); font-size: clamp(34px, 4.2vw, 64px); letter-spacing: -0.02em; color: var(--eido-ink);
}

/* ─── The conversation ────────────────────────────────────── */
.talk {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 92vh; display: flex; align-items: center;
  padding: clamp(90px, 14vh, 140px) clamp(20px, 6vw, 96px);
}
.talk-scene {
  position: absolute; inset: 0; z-index: -1;
  background: url("/assets/scenes/threads/mobile.webp") center / cover no-repeat;
}
@media (min-width: 768px) { .talk-scene { background-image: url("/assets/scenes/threads/desktop.webp"); } }
.talk-scene::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, var(--paper), color-mix(in srgb, var(--paper) 0%, transparent) 22%, color-mix(in srgb, var(--paper) 0%, transparent) 78%, var(--paper)),
    linear-gradient(to right, color-mix(in srgb, var(--paper) 88%, transparent) 0%, color-mix(in srgb, var(--paper) 70%, transparent) 48%, color-mix(in srgb, var(--paper) 25%, transparent) 100%);
}
.talk-copy { max-width: 640px; }
.talk-h {
  font-family: var(--serif); font-weight: normal;
  font-size: clamp(34px, 4.2vw, 62px); line-height: 1.08; letter-spacing: -0.02em; color: var(--charcoal);
  text-wrap: balance;
}
.talk-p {
  margin-top: clamp(22px, 3.4vh, 34px); max-width: 520px;
  font-family: var(--serif); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.55; color: var(--deep);
}
.talk-p + .talk-p { margin-top: 14px; }

/* ─── Honest ──────────────────────────────────────────────── */
.plain { background: var(--paper); padding: clamp(70px, 11vh, 110px) clamp(20px, 6vw, 96px); }
.plain-inner { max-width: 760px; border-top: 1px solid var(--sand); padding-top: clamp(28px, 4vh, 40px); }
.plain-main { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4; color: var(--charcoal); }
.plain-sub { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--driftwood); }
.plain-sub a { color: var(--deep); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--driftwood) 45%, transparent); text-underline-offset: 3px; margin-left: 6px; }

/* ─── Invitation ──────────────────────────────────────────── */
.invite {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  padding: clamp(120px, 20vh, 200px) 20px clamp(130px, 22vh, 220px);
}
.invite-scene {
  position: absolute; inset: 0; z-index: -1;
  background: url("/assets/scenes/eido/mobile.webp") center 80% / cover no-repeat;
}
@media (min-width: 768px) { .invite-scene { background-image: url("/assets/scenes/eido/desktop.webp"); background-position: center 85%; } }
.invite-scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--paper) 0%, color-mix(in srgb, var(--paper) 62%, transparent) 35%, color-mix(in srgb, var(--paper) 50%, transparent) 100%);
}
.invite-h {
  font-family: var(--serif); font-weight: normal;
  font-size: clamp(40px, 5.6vw, 84px); letter-spacing: -0.025em; line-height: 1.05; color: var(--eido-ink);
}
.invite-cta {
  display: inline-block; margin-top: clamp(28px, 4vh, 40px);
  font-size: 15px; color: var(--paper); background: var(--charcoal);
  border-radius: 999px; padding: 14px 28px;
}
.invite-cta:hover { background: #3a332d; }

@media (prefers-reduced-motion: reduce) {
  .js .meet-reflection, .js .drift-track { animation: none; }
  .drift-row { white-space: normal; -webkit-mask-image: none; mask-image: none; }
  .drift-track { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 12px; padding: 0 20px; }
  .drift-track .dup { display: none; }
}

@media (max-width: 759px) {
  .meet { padding-top: 104px; }
  .meet-name { right: auto; left: 14px; top: 45vh; top: 45svh; font-size: 40vw; }
  .talk { min-height: auto; }
  .talk-scene::after {
    background: linear-gradient(to bottom, var(--paper), color-mix(in srgb, var(--paper) 72%, transparent) 25%, color-mix(in srgb, var(--paper) 72%, transparent) 75%, var(--paper));
  }
}