/* ============================================================
   The Connection Experiment — full flow (Wine & Sky)
   Mobile prototype · 390×844 · Momenta tokens
   ============================================================ */

.ce-stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 80% at 50% 0%, #efe7d4 0%, #e4dcc8 60%, #ddd4bd 100%);
  overflow: hidden;
}
.ce-scaler { transform-origin: center center; }

.ce-app {
  /* Wine & Sky theme */
  --panel-bg: var(--color-cool-ivory);
  --ink: var(--color-deep-wine);
  --accent: var(--color-mist-blue);
  --accent-ink: var(--color-deep-wine);
  --progress-fill: var(--color-mist-blue);
  --progress-track: rgba(129,158,207,0.26);
  --cta-bg: var(--color-deep-wine);
  --cta-ink: var(--color-cool-ivory);
  --check: rgba(69,16,17,0.28);

  width: 390px;
  height: 844px;
  position: relative;
  overflow: hidden;
  border-radius: 44px;
  background: var(--panel-bg);
  box-shadow: 0 30px 80px rgba(69,16,17,0.22), 0 4px 14px rgba(69,16,17,0.12);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
}

.ce-screen {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 44px;
}

/* ---------- status bar ---------- */
.ce-status {
  position: relative; z-index: 4;
  height: 52px; flex: 0 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 30px 6px;
}
.ce-status.on-photo { color: var(--color-cool-ivory); text-shadow: 0 1px 3px rgba(38,8,8,0.5); }
.ce-status.on-paper { color: var(--ink); }
.ce-status .ce-time { font-weight: 600; font-size: 15px; }

/* ---------- photo + header ---------- */
.ce-photo {
  flex: 0 0 var(--photo-h, 216px);
  position: relative;
  background-size: cover; background-position: center;
}
.ce-photo::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 130px;
  background: linear-gradient(180deg, rgba(38,8,8,0.45), rgba(38,8,8,0));
  pointer-events: none;
}
.ce-photobar {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 18px 0;
}
.ce-back {
  width: 38px; height: 38px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-cool-ivory);
  background: rgba(69,16,17,0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: none; cursor: pointer;
}
.ce-skip {
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-cool-ivory); text-shadow: 0 1px 3px rgba(38,8,8,0.5);
  background: none; border: none; cursor: pointer; padding: 8px 4px;
}

/* ---------- panel ---------- */
.ce-panel {
  position: relative; z-index: 3;
  flex: 1 1 auto; min-height: 0;
  margin-top: -26px;
  background: var(--panel-bg);
  border-radius: 30px 30px 0 0;
  padding: 22px 24px 0;
  display: flex; flex-direction: column;
}

/* ---------- progress (segmented stages) ---------- */
.ce-prog { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.ce-stage-seg {
  flex: 1 1 0; height: 5px; border-radius: 999px;
  background: var(--progress-track); overflow: hidden;
}
.ce-stage-seg > i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--progress-fill);
  transition: width var(--dur-base) var(--ease-out);
}

/* ---------- question ---------- */
.ce-q { flex: 0 0 auto; padding: 24px 0 2px; }
.ce-eyebrow {
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0.5; margin: 0 0 13px;
}
.ce-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: 30px; line-height: 1.16; letter-spacing: -0.5px;
  text-transform: none; margin: 0;
}
.ce-title.sm { font-size: 26px; }
.ce-hint { font-family: var(--font-body); font-size: 13px; opacity: 0.56; margin: 11px 0 0; }

/* ---------- options ---------- */
.ce-list-wrap {
  flex: 1 1 auto; min-height: 0; position: relative;
  display: flex; flex-direction: column;
}
.ce-list {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 14px 0 6px;
  overflow-y: auto;
  -ms-overflow-style: none; scrollbar-width: none;
}
.ce-list::-webkit-scrollbar { display: none; }

/* scroll affordance fades */
.ce-fade {
  position: absolute; left: 0; right: 0; height: 46px;
  pointer-events: none; z-index: 3;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.ce-fade.on { opacity: 1; }
.ce-fade.top {
  top: 0;
  background: linear-gradient(180deg, var(--panel-bg) 18%, rgba(244,242,234,0));
}
.ce-fade.bot {
  bottom: 0; height: 72px;
  background: linear-gradient(0deg, var(--panel-bg) 46%, rgba(244,242,234,0));
}
/* explicit, tappable "N more" pill — far clearer than a faint icon */
.ce-more {
  position: absolute; left: 50%; bottom: 8px; z-index: 4;
  transform: translateX(-50%) translateY(6px);
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 8px 0 14px; border-radius: 999px;
  background: var(--cta-bg); color: var(--cta-ink);
  border: none; cursor: pointer;
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  box-shadow: 0 5px 16px rgba(69,16,17,0.22);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ce-more.on { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.ce-more:active { transform: translateX(-50%) scale(0.96); }
.ce-more svg { opacity: 0.92; }
@media (prefers-reduced-motion: no-preference) {
  .ce-more.on svg { animation: ce-more-bob 1.5s var(--ease-out) infinite; }
}
@keyframes ce-more-bob {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(2.5px); }
}
.ce-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; margin: 1px 0;
  border-radius: 16px; cursor: pointer; position: relative;
  flex: 0 0 auto;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.ce-row::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px;
  height: 1px; background: var(--border-hairline);
}
.ce-row:last-child::after,
.ce-row.sel::after { display: none; }
.ce-row:active { transform: scale(0.992); }
.ce-row .ce-lbl {
  flex: 1 1 auto; font-family: var(--font-body); font-weight: 500;
  font-size: 15.5px; line-height: 1.25;
}
.ce-check {
  width: 23px; height: 23px; flex: 0 0 auto; border-radius: 999px;
  border: 1.6px solid var(--check); color: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.ce-check.sq { border-radius: 8px; }
.ce-check svg { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.ce-row.sel { background: var(--accent); color: var(--accent-ink); }
.ce-row.sel .ce-check { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--accent); }
.ce-row.sel .ce-check svg { opacity: 1; }

/* ---------- text input ---------- */
.ce-field-wrap { flex: 1 1 auto; padding: 22px 0 6px; }
.ce-field {
  width: 100%; box-sizing: border-box;
  height: 58px; padding: 0 20px;
  border-radius: 16px; border: 1.5px solid var(--border-default);
  background: var(--surface-raised);
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.ce-field::placeholder { color: var(--fg-subtle); }
.ce-field:focus {
  border-color: var(--color-mist-blue);
  box-shadow: 0 0 0 3px rgba(129,158,207,0.22);
}

/* ---------- footer ---------- */
.ce-foot { flex: 0 0 auto; padding: 12px 0 10px; }
.ce-cta {
  height: 54px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--cta-bg); color: var(--cta-ink);
  border: none; cursor: pointer; width: 100%;
  transition: filter var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.ce-cta:active { transform: scale(0.985); }
.ce-cta[disabled] { opacity: 0.4; cursor: default; }
.ce-cta.ghost { background: transparent; color: var(--ink); }
.ce-home {
  width: 134px; height: 5px; border-radius: 3px; margin: 9px auto 0;
  background: color-mix(in srgb, var(--ink) 78%, transparent);
}
.ce-home.light { background: rgba(244,242,234,0.85); }

/* ============================================================
   INTRO  (full-bleed)
   ============================================================ */
.ce-intro {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  display: flex; flex-direction: column;
  border-radius: 44px; overflow: hidden;
}
.ce-intro::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(38,8,8,0.30) 0%, rgba(38,8,8,0.10) 30%, rgba(38,8,8,0.62) 66%, rgba(38,8,8,0.88) 100%);
}
.ce-intro-inner {
  position: relative; z-index: 2;
  margin-top: auto; padding: 0 30px 40px;
  color: var(--color-cool-ivory);
}
.ce-intro-mark { width: 30px; height: auto; margin-bottom: 18px; opacity: 0.95; }
.ce-intro-eyebrow {
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.85; margin: 0 0 14px;
}
.ce-intro-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: 44px; line-height: 1.08; letter-spacing: -0.5px;
  text-transform: none; margin: 0 0 16px;
  text-shadow: 0 2px 14px rgba(38,8,8,0.4);
}
.ce-intro-body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  font-weight: 400; opacity: 1; margin: 0 0 26px; max-width: 332px;
  color: var(--color-cool-ivory);
  text-shadow: 0 1px 8px rgba(38,8,8,0.45);
}
.ce-intro .ce-cta { background: var(--color-cool-ivory); color: var(--color-deep-wine); }
.ce-intro-meta {
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  opacity: 0.8; text-align: center; margin: 14px 0 0;
}
.ce-intro-status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  height: 52px; display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 30px 6px; color: var(--color-cool-ivory);
  text-shadow: 0 1px 3px rgba(38,8,8,0.5);
}
.ce-intro-status .ce-time { font-weight: 600; font-size: 15px; }

/* ============================================================
   REVEAL
   ============================================================ */
.ce-reveal .ce-panel { margin-top: -26px; }
.ce-type-eyebrow {
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.55; margin: 26px 0 14px;
}
.ce-type-name {
  font-family: var(--font-expressive); font-weight: 400; font-style: italic;
  font-size: 44px; line-height: 1.04; letter-spacing: 0;
  text-transform: none; margin: 0; color: var(--color-deep-wine);
}
.ce-reveal-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -ms-overflow-style: none; scrollbar-width: none;
}
.ce-reveal-scroll::-webkit-scrollbar { display: none; }
.ce-move {
  margin-top: 20px; padding: 16px 18px;
  background: var(--color-soft-sage); border-radius: 16px;
}
.ce-move-label {
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-deep-wine); opacity: 0.72; margin: 0 0 7px;
}
.ce-move-text {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.5;
  color: var(--color-deep-wine); margin: 0;
}
.ce-type-rule { height: 1px; background: var(--border-hairline); margin: 22px 0; }
.ce-type-desc {
  font-family: var(--font-body); font-size: 15.5px; line-height: 1.6;
  margin: 0; color: var(--ink);
}
.ce-cost { margin-top: 22px; }
.ce-cost-label {
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-amber-terracotta); opacity: 0.92; margin: 0 0 7px;
}
.ce-cost-text {
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.55;
  color: var(--ink); opacity: 0.82; margin: 0;
}
.ce-type-tag {
  display: inline-flex; align-self: flex-start; margin-top: 18px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--color-soft-sage); color: var(--color-deep-wine);
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
}
.ce-reveal-spacer { flex: 1 1 auto; }

/* reveal CTA — curiosity hook + forward-nudging arrow to pull the click */
.ce-reveal-hook {
  font-family: var(--font-body); font-size: 13.5px; line-height: 1.5;
  color: var(--ink); opacity: 0.68; text-align: center;
  margin: 0 0 12px; text-wrap: pretty;
}
.ce-cta-go { gap: 9px; }
.ce-cta-go svg { transition: transform var(--dur-base) var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .ce-cta-go svg { animation: ce-arrow-nudge 1.5s var(--ease-out) infinite; }
}
@keyframes ce-arrow-nudge {
  0%, 60%, 100% { transform: translateX(0); }
  30% { transform: translateX(3px); }
}

/* ============================================================
   WAITLIST
   ============================================================ */
.ce-wl-body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  opacity: 0.7; margin: 12px 0 0;
}
.ce-wl-spacer { flex: 1 1 auto; min-height: 12px; }
.ce-wl-foot { flex: 0 0 auto; padding-bottom: 10px; }
.ce-wl-ig {
  display: block; text-align: center; margin: 14px 0 0;
  font-family: var(--font-body); font-size: 13px; color: var(--ink);
  opacity: 0.62; text-decoration: none;
}
.ce-wl-ig u { text-underline-offset: 2px; }

/* confirmation */
.ce-done {
  position: absolute; inset: 0;
  background: var(--color-deep-wine); color: var(--color-cool-ivory);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 36px; border-radius: 44px;
}
.ce-done-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; text-align: center;
}
.ce-done-mark {
  width: 64px; height: 64px; border-radius: 999px;
  border: 1.5px solid rgba(244,242,234,0.5);
  display: flex; align-items: center; justify-content: center;
}
.ce-done-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: 34px; line-height: 1.12; letter-spacing: -0.5px;
  text-transform: none; margin: 0; max-width: 300px;
}
.ce-done-body {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  opacity: 0.85; margin: 0; max-width: 290px;
}
.ce-done-restart {
  position: absolute; bottom: 30px; left: 0; right: 0;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-cool-ivory); opacity: 0.6;
}

/* entrance — resting state is visible; fade only plays on top, so a paused
   rAF (background tab, print, capture) never leaves a blank screen */
.ce-screen, .ce-intro, .ce-done { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ce-screen, .ce-intro, .ce-done { animation: ce-fade var(--dur-base) var(--ease-out); }
}
@keyframes ce-fade { from { opacity: 0; } }

/* ============================================================
   WAITLIST v2 — media-led, two screens (email capture + success)
   ============================================================ */
.ce-wl2 { display: flex; flex-direction: column; }

.ce-wl2-media {
  position: relative; flex: 1 1 auto; min-height: 0;
  background-size: cover; background-position: center;
}
.ce-wl2-media::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 130px;
  background: linear-gradient(180deg, rgba(38,8,8,0.42), rgba(38,8,8,0));
  pointer-events: none;
}
.ce-wl2-bar {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 18px 0;
}
.ce-wl2-play {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-cool-ivory); pointer-events: none;
}
.ce-wl2-play > span {
  width: 64px; height: 64px; border-radius: 999px;
  background: rgba(38,8,8,0.32);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1.5px solid rgba(244,242,234,0.72);
  display: flex; align-items: center; justify-content: center;
}
.ce-wl2-reel {
  position: absolute; left: 0; right: 0; bottom: 40px; z-index: 3; text-align: center;
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-cool-ivory); opacity: 0.78;
  text-shadow: 0 1px 3px rgba(38,8,8,0.5); pointer-events: none;
}

.ce-wl2-panel {
  position: relative; z-index: 5; flex: 0 0 auto;
  margin-top: -24px; background: var(--panel-bg);
  border-radius: 28px 28px 0 0; padding: 20px 26px 12px;
  display: flex; flex-direction: column;
}
.ce-wl2-panel.success { padding-top: 28px; padding-bottom: 16px; }

.ce-wl2-kicker {
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.5; margin: 0 0 10px;
}
.ce-wl2-head {
  font-family: var(--font-display); font-weight: 300;
  font-size: 25px; line-height: 1.16; letter-spacing: -0.4px;
  text-transform: none; margin: 0 0 8px; color: var(--ink); max-width: 320px;
}
.ce-wl2-panel.success .ce-wl2-head { font-size: 34px; margin-bottom: 12px; }
.ce-wl2-sub {
  font-family: var(--font-body); font-size: 14px; line-height: 1.55;
  opacity: 0.7; margin: 0 0 14px; max-width: 320px;
}
.ce-wl2 .ce-field { margin-bottom: 10px; }
.ce-wl2-link {
  display: block; text-align: center; margin: 12px 0 2px;
  font-family: var(--font-body); font-size: 13px; color: var(--ink);
  opacity: 0.6; text-decoration: none;
}
.ce-wl2-link u { text-underline-offset: 2px; }
.ce-cta.handle { text-transform: none; letter-spacing: 0.03em; }

/* ============================================================
   MOBILE — full-bleed (no floating device card)
   ============================================================ */
@media (max-width: 520px) {
  .ce-stage { align-items: stretch; justify-content: stretch; }
  .ce-scaler { width: 100%; height: 100%; transform: none !important; }
  .ce-app {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
  .ce-screen, .ce-intro, .ce-done { border-radius: 0; }

  /* real device already shows the OS status bar — drop the mock one */
  .ce-status, .ce-intro-status { display: none; }

  /* clear the notch for the top controls that sat below it */
  .ce-photobar { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
  .ce-wl2-bar  { padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
  .ce-intro-inner { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 34px); }

  /* fake iOS home indicator — not needed on a real device */
  .ce-home { display: none; }
}