/* Echo One landing page (1.3.0), as signed off: layout 1, headline C, no name asked.
   The live city is the picture; the old start card underneath still does the loading, but is never shown. */
/* the shell hides unknown top-level elements; the landing is let through (three ids outweigh that rule) */
html.next body > #cy-land#cy-land#cy-land { display: block !important; visibility: visible !important; }
/* while the landing is up, the city fills the whole window and shows no name labels, only the ground names */
html.cy-land .t3wrap { position: fixed !important; left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; z-index: 5; }
html.cy-land .cy-name { opacity: 0 !important; pointer-events: none !important; }
/* 3.1.2: the names fade in once you step in, instead of popping */
.t3wrap .cy-name { transition: opacity 450ms cubic-bezier(0,0,0,1); }
#cy-land { position: fixed; inset: 0; z-index: 2147483001; pointer-events: none; font-family: Figtree, system-ui, -apple-system, "Segoe UI", sans-serif; color: #1E2B3C;
  --slate: #424B54; --cream: #FFF7E9; --on: #C9C1B3; --led: #65CDD2; --ink: #1E2B3C; }
#cy-land .cy-cover { position: absolute; inset: 0; background: linear-gradient(#F3D9BF, #FBF1C4); transition: opacity .9s ease; }
#cy-land.cy-city .cy-cover { opacity: 0; }
#cy-land .cy-top { position: absolute; left: 0; right: 0; top: 0; height: 80px; padding: 0 40px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; pointer-events: auto; transition: opacity .4s ease; }
#cy-land .cy-brand { display: flex; align-items: center; gap: 12px; }
#cy-land .cy-logo { width: 40px; height: 40px; border-radius: 50%; background: var(--slate); color: var(--cream); display: grid; place-items: center; --knock: var(--slate); }
#cy-land .cy-logo svg { width: 23px; height: 23px; }
#cy-land .cy-names { display: flex; flex-direction: column; line-height: 1.2; }
#cy-land .cy-names b { font-size: 18px; font-weight: 700; color: var(--ink); }
#cy-land .cy-names span { font-size: 13px; font-weight: 500; color: rgba(30,43,60,.72); margin-top: 2px; }
#cy-land .cy-snd { font: 600 14px Figtree, system-ui, sans-serif; color: var(--ink); background: rgba(255,247,233,.92); border: 1px solid rgba(66,75,84,.25); border-radius: 4px; height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
#cy-land .cy-snd i { width: 30px; height: 16px; border-radius: 8px; background: #A8A39B; position: relative; display: inline-block; transition: background .2s; }
#cy-land .cy-snd i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--cream); transition: left .2s, background .2s; }
#cy-land .cy-snd[aria-pressed="true"] i { background: var(--slate); }
#cy-land .cy-snd[aria-pressed="true"] i::after { left: 16px; background: var(--led); }
#cy-land .cy-snd:focus-visible, #cy-land .cy-go:focus-visible { outline: 3px solid var(--led); outline-offset: 3px; }
#cy-land .cy-panel { position: absolute; left: 56px; top: 50%; width: 480px; max-width: calc(100vw - 32px); box-sizing: border-box; background: var(--slate); color: var(--cream); border-radius: 14px; padding: 34px 34px 30px;
  display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 60px rgba(20,24,28,.30); transform: translateY(-50%); pointer-events: auto;
  transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
#cy-land .cy-mel { display: flex; align-items: center; gap: 14px; }
#cy-land .cy-mel img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cream); background: #8E8980; }
#cy-land .cy-mel b { display: block; font-size: 16px; font-weight: 600; } #cy-land .cy-mel span { font-size: 14px; color: var(--on); }
#cy-land .cy-bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-left: 2px; }
#cy-land .cy-bars i { width: 4px; background: var(--led); border-radius: 2px; transform-origin: bottom; animation: cy-bar 1.4s ease-in-out infinite; }
#cy-land .cy-bars i:nth-child(1) { height: 10px; } #cy-land .cy-bars i:nth-child(2) { height: 18px; animation-delay: .2s; } #cy-land .cy-bars i:nth-child(3) { height: 13px; animation-delay: .4s; } #cy-land .cy-bars i:nth-child(4) { height: 22px; animation-delay: .6s; }
@keyframes cy-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
#cy-land .cy-k { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on); }
#cy-land h1 { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; color: var(--cream); }
#cy-land .cy-s { margin: 0; font-size: 17px; line-height: 1.55; color: #E7DFD2; }
#cy-land .cy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 4px; }
#cy-land .cy-go { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px; background: var(--cream); color: var(--ink); border: 0; border-radius: 4px; font: 600 16px Figtree, system-ui, sans-serif; cursor: pointer; }
#cy-land .cy-go i { width: 9px; height: 9px; border-radius: 50%; background: var(--led); box-shadow: 0 0 0 4px rgba(101,205,210,.3); }
#cy-land .cy-go[aria-disabled="true"] { background: #E8E2D8; color: #5E6878; cursor: default; }
#cy-land .cy-go[aria-disabled="true"] i { animation: cy-pulse 1.2s ease-in-out infinite; }
@keyframes cy-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
#cy-land .cy-facts { font-size: 14px; color: var(--on); }
#cy-land .cy-foot { position: absolute; left: 56px; bottom: 26px; display: flex; align-items: center; gap: 10px; font-size: 14px; color: rgba(30,43,60,.75); transition: opacity .4s ease; }
/* the Mind Echo Labs mark as the website draws it on a light ground: a slate badge, cream bars that move, the name in bold */
#cy-land .cy-mel-logo { display: inline-flex; align-items: center; gap: 8px; }
#cy-land .cy-badge { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #FFF8EB;
  background: linear-gradient(to bottom, #434C55, rgba(67,76,85,.85)); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 4px rgba(0,0,0,.3), 0 4px 8px rgba(0,0,0,.2); border: 1px solid rgba(255,255,255,.08); }
#cy-land .cy-mel-logo b { font-size: 14px; font-weight: 700; color: #434C55; white-space: nowrap; }
#cy-land .cy-wb { transform-box: fill-box; transform-origin: center; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes cy-wb1 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.75); } }
@keyframes cy-wb2 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.25); } }
@keyframes cy-wb3 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.9); } }
@keyframes cy-wb4 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.5); } }
@keyframes cy-wb5 { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.6); } }
#cy-land.cy-out .cy-panel { transform: translate(-620px, -50%); opacity: 0; }
#cy-land.cy-out .cy-top, #cy-land.cy-out .cy-foot { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { #cy-land .cy-panel { left: 16px; right: 16px; width: auto; padding: 26px 24px 24px; } #cy-land h1 { font-size: 32px; } #cy-land .cy-top { padding: 0 16px; } #cy-land .cy-foot { left: 16px; } }
@media (prefers-reduced-motion: reduce) { #cy-land .cy-wb, #cy-land .cy-bars i, #cy-land .cy-go[aria-disabled="true"] i { animation: none; } #cy-land .cy-panel, #cy-land .cy-cover { transition: none; } }
/* the old demo's side menu is never used here; its own entrance animation would otherwise flash it for a moment */

/* 3.1.2: the first frame is already the landing's sky; the old start card never shows. The landing's own cover takes over as soon as it is built,
   and stepping in marks the body done. A safety fade means the cover can never stay up. */
body.next::before { content: ""; position: fixed; inset: 0; z-index: 2147483000; background: linear-gradient(#F3D9BF, #FBF1C4); pointer-events: none; animation: cy-safety 400ms linear 12s forwards; }
html.cy-land body.next::before, body.next.cy-done::before { display: none; }
@keyframes cy-safety { to { opacity: 0; visibility: hidden; } }
/* 3.1.2: the button presses like every other button, and the light comes on as you step in */
#cy-land .cy-go { transition: transform 160ms cubic-bezier(0,0,0,1), background-color 160ms, color 160ms; }
#cy-land .cy-go:not([aria-disabled="true"]):hover { background: #FFFDF7; }
#cy-land .cy-go:not([aria-disabled="true"]):active, #cy-land .cy-go.cy-press { transform: scale(.97); }
#cy-land .cy-go i { transition: box-shadow 200ms cubic-bezier(0,0,0,1); }
#cy-land .cy-go.cy-press i { box-shadow: 0 0 0 7px rgba(101,205,210,.35); }

/* 5.4.0: the second way in, beside the main button; the facts drop to their own line */
#cy-land .cy-alt { display: inline-flex; align-items: center; min-height: 50px; padding: 0 20px; background: none; color: var(--cream); border: 0; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,247,233,.45); font: 600 16px Figtree, system-ui, sans-serif; cursor: pointer; transition: transform 160ms cubic-bezier(0,0,0,1), box-shadow 160ms, background-color 160ms; }
#cy-land .cy-alt[hidden] { display: none; }
#cy-land .cy-alt:hover { box-shadow: inset 0 0 0 1px rgba(255,247,233,.8); background: rgba(255,247,233,.06); }
#cy-land .cy-alt:active, #cy-land .cy-alt.cy-press { transform: scale(.97); }
#cy-land .cy-alt:focus-visible { outline: 3px solid var(--led); outline-offset: 3px; }
#cy-land .cy-row { gap: 10px; }
#cy-land .cy-facts { flex-basis: 100%; margin-top: 4px; }
html:not(.nx-phone) #cy-land .cy-go { padding: 0 16px; font-size: 15px; gap: 9px; }
html:not(.nx-phone) #cy-land .cy-alt { padding: 0 15px; font-size: 15px; }