/* ════════════════════════════════════════════════════════════════
   THE OVERTURE · the first screens of the home, one line to a room
   August's statement law (2026-08-14): an important line never shares its
   screen with another; each one gets its own room and the silence around it.
   The door comes first because the first screen is where people leave: on
   2026-11-01 the funnel read 371 arrivals and 8 presses of the button.
   The look is Dava-Dark kept in MotusMoves' own colours: a navy night, glass
   that holds light at its rim, violet binding the network's cyan, ice, pink
   and pearl. Loaded after motus.css; everything here is scoped to the home.
   The night itself and the --ov- tokens live in night.css, which every room
   of the app shares.
═══════════════════════════════════════════════════════════════════ */

/* ── the hero becomes a column of rooms ── */
.view--vision .hero.ov{
  display:block; min-height:0; padding:0; gap:0;
}
.view--vision .hero.ov .hero__rings{ display:none; }   /* rings around a wordmark read as a target; the haze replaces them */
.ov-act{
  position:relative; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0 var(--pad);
}

/* ═══ ACT I · THE DOOR ═══ */
.ov-act--door{
  min-height:100svh;
  padding:calc(env(safe-area-inset-top) + 92px) var(--pad) calc(var(--dock-h) + env(safe-area-inset-bottom) + 96px);
}
/* coloured air behind the wordmark: plum, violet and a breath of rose. Still, so it costs one paint. */
.ov-haze{
  position:absolute; left:50%; top:42%; width:min(1180px,150vw); height:min(760px,110vw);
  transform:translate(-50%,-50%); pointer-events:none; z-index:-1;
  background:
    radial-gradient(closest-side at 50% 50%, rgba(46,24,57,.78), rgba(46,24,57,0) 70%),
    radial-gradient(38% 34% at 34% 46%, rgba(139,92,246,.22), transparent 72%),
    radial-gradient(34% 30% at 68% 54%, rgba(241,138,198,.12), transparent 72%),
    radial-gradient(30% 26% at 52% 30%, rgba(61,242,255,.08), transparent 72%);
}

/* "Welcome To The Movement" now opens the room as its eyebrow */
.view--vision .ov-act--door .hero__welcome{
  font-size:clamp(1.02rem,3.4vw,1.32rem); font-weight:600; letter-spacing:.035em;
  color:var(--ov-ice); margin:0 0 clamp(10px,2.4vh,22px);
  text-shadow:0 0 18px rgba(156,195,239,.34);
}
.view--vision .ov-act--door .hero__welcome .k{
  font-weight:700; color:#fff;
  text-shadow:0 0 10px rgba(160,232,255,.6), 0 0 26px rgba(139,92,246,.36);
}

/* the wordmark: the subject of the room. Glows are still (one paint); only .US breathes, by transform. */
.view--vision .ov-act--door .hero__title{
  font-size:clamp(2rem,10.4vw,8.6rem); letter-spacing:-.03em; margin:0; white-space:nowrap;
}
.view--vision .ov-act--door .hm-motus{
  animation:none; color:#9ff7ff;
  text-shadow:0 0 18px rgba(61,242,255,.38), 0 0 64px rgba(61,242,255,.18);
}
.view--vision .ov-act--door .hm-moves{
  color:var(--ov-pearl);
  text-shadow:0 0 30px rgba(216,239,252,.16), 0 0 80px rgba(139,92,246,.20);
}
.view--vision .ov-act--door .hm-us{
  animation:ovUsBreath 4.8s ease-in-out infinite;
  text-shadow:0 0 16px rgba(61,242,255,.62), 0 0 48px rgba(61,242,255,.34), 0 0 110px rgba(139,92,246,.30);
}
@keyframes ovUsBreath{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }

.view--vision .ov-act--door .hero__sub{
  font-size:clamp(1.14rem,3.2vw,1.6rem); color:var(--ov-pearl); font-weight:600;
  letter-spacing:.005em; margin:clamp(20px,3.2vh,30px) 0 0;
}

/* the form lends its children to the room's column, so the door can take the room's width */
.view--vision .ov-act--door .hero__form{ display:contents; }
.view--vision .ov-act--door label.hero__move{ display:block; cursor:text; }

/* the question that labels the door */
.view--vision .ov-act--door .hero__move{
  font-size:clamp(1.36rem,4.6vw,2.05rem); margin:clamp(34px,6.4vh,62px) 0 0;
}

/* THE DOOR — one lit capsule, the field and the button inside it */
.view--vision .hero .ov-door{
  position:relative; isolation:isolate;
  display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; gap:8px;
  width:100%; max-width:720px; margin:16px auto 0; padding:8px;
  border-radius:24px;
  background:linear-gradient(180deg, rgba(22,30,66,.80), rgba(9,13,34,.86));
  box-shadow:inset 0 1px 0 rgba(216,239,252,.16), 0 24px 60px -32px rgba(0,0,0,.92), 0 0 72px -30px rgba(177,92,255,.55);
  transition:box-shadow .45s var(--ease);
}
.view--vision .hero .ov-door::before{        /* the rim is the light */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:-1;
  background:var(--ov-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:.9; transition:opacity .45s var(--ease);
}
.view--vision .hero .ov-door::after{         /* where the pointer is, the rim catches it */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; pointer-events:none; z-index:-1;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,0px), rgba(216,239,252,.85), rgba(241,138,198,.35) 40%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:0; transition:opacity .35s var(--ease);
}
@media (hover:hover){ .view--vision .hero .ov-door:hover::after{ opacity:1; } }
/* a keyboard reaching the field sees a ring around the whole door, where the light already is */
.view--vision .hero .ov-door:has(.hero__field:focus-visible){ outline:2px solid rgba(216,239,252,.75); outline-offset:3px; }
/* the door lights as you reach for it, and again once a line is in it */
.view--vision .hero .ov-door:focus-within{
  box-shadow:inset 0 1px 0 rgba(216,239,252,.24), 0 24px 60px -32px rgba(0,0,0,.92), 0 0 90px -26px rgba(177,92,255,.78), 0 0 140px -60px rgba(61,242,255,.5);
}
.view--vision .hero .ov-door:focus-within::before{ opacity:1; }
.view--vision .hero .ov-door .hero__field{
  flex:1 1 auto; min-width:0; max-width:none; margin:0;
  background:transparent; border:0; box-shadow:none; border-radius:18px;
  font-size:1.08rem; padding:15px 16px; color:var(--ov-pearl); text-align:center; text-overflow:ellipsis;
}
.view--vision .hero .ov-door .hero__field:focus{ background:rgba(216,239,252,.035); outline:none; }
.view--vision .hero .ov-door .hero__field::placeholder{ color:#b9c4e4; }
.view--vision .hero .ov-door .btn--signal{
  flex:none; white-space:nowrap; border-radius:18px; padding:15px 24px;
  animation:none;                                 /* a held glow, not a breathing one */
  box-shadow:0 0 26px -6px rgba(177,92,255,.55), inset 0 1px 0 rgba(255,255,255,.24);
  transition:box-shadow .45s var(--ease), transform .25s var(--ease);
}
.view--vision .hero .ov-door.has-line .btn--signal{
  box-shadow:0 0 34px -2px rgba(177,92,255,.85), 0 0 70px -18px rgba(241,138,198,.6), inset 0 1px 0 rgba(255,255,255,.3);
}

/* what sits under the door: the feed's door, the five-minute start, then sign-in */
.view--vision .ov-door__after{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 18px;
  margin:16px 0 0;
}
.view--vision .ov-door__after .ov-enter{
  min-height:44px; padding:11px 18px; border-radius:16px; font-size:.95rem;
  background:rgba(216,239,252,.04); border-color:rgba(216,239,252,.14); backdrop-filter:none;
}
.view--vision .ov-door__after .ov-enter:hover{ border-color:rgba(216,239,252,.32); box-shadow:0 0 22px -10px rgba(216,239,252,.5); }
.view--vision .ov-door__after .hero__start-link{ display:inline-flex; align-items:center; min-height:44px; }
.view--vision .ov-act--door .hero__auth{ margin-top:6px; }

/* the cue sits at the foot of the door's room, above the dock */
.view--vision .ov-act--door .hero__scroll{ bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 22px); }

/* ═══ ACTS II–IV · one line, one room ═══ */
.ov-act--line{ min-height:88svh; }
.ov-act--era{ min-height:84svh; gap:clamp(28px,5vh,44px); padding-bottom:clamp(30px,6vh,60px); }
.view--vision .ov-line{
  font-size:clamp(2.5rem,9.4vw,6.2rem); line-height:1.04; letter-spacing:-.028em;
  color:var(--ov-pearl); max-width:16ch; margin:0 auto; text-wrap:balance;
  text-shadow:0 0 34px rgba(156,195,239,.20), 0 0 90px rgba(139,92,246,.16);
}
.view--vision .ov-act--era .ov-line{ font-size:clamp(2.1rem,7.6vw,4.9rem); max-width:18ch; }
/* one accent per line: the mind in ice, the move in the signal's violet, the era in pearl-pink */
.view--vision .hero__kicker.ov-line .k{ color:#9ff7ff; text-shadow:0 0 16px rgba(61,242,255,.46), 0 0 52px rgba(61,242,255,.22); }
.view--vision .hero__kicker2.ov-line .k{ color:#d6a8ff; text-shadow:0 0 16px rgba(177,92,255,.6), 0 0 56px rgba(177,92,255,.3); }
.view--vision .hero__era.ov-line .k{ color:#ffd3ec; text-shadow:0 0 16px rgba(241,138,198,.5), 0 0 56px rgba(241,138,198,.24); }
/* each line arrives out of blur into clarity, once, as its room comes into view */
.view--vision .ov-line.reveal{
  filter:blur(10px); transform:translateY(18px);
  transition:opacity 1s ease, filter 1.1s ease, transform 1s var(--ease-out);
}
.view--vision .ov-line.reveal.in{ filter:none; transform:none; animation:none; }

/* the era's room keeps its two ambient controls together: the song and the field's switch */
.view--vision .ov-act--era .anthem{ margin:0 auto; }
.view--vision .ov-act--era .field-freeze{ margin:0 auto; }

/* ═══ THE PROOF · what is true right now ═══ */
.ov-proof{
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(24px,6vh,70px) var(--pad) clamp(70px,12vh,130px);
}
.view--vision .ov-proof .pulse{
  position:relative; isolation:isolate; margin:0 auto; max-width:620px;
  padding:24px clamp(16px,4vw,28px) 20px; border:0; border-radius:28px;
  background:linear-gradient(180deg, rgba(22,30,66,.74), rgba(9,13,34,.82));
  box-shadow:inset 0 1px 0 rgba(216,239,252,.14), 0 30px 80px -46px rgba(0,0,0,.9), 0 0 90px -48px rgba(139,92,246,.6);
}
.view--vision .ov-proof .pulse::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; z-index:-1;
  background:var(--ov-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
  opacity:.75;
}
.view--vision .ov-proof .pulse__label{ color:var(--ov-ice); letter-spacing:.32em; }
.view--vision .ov-proof .counter__label{ color:var(--ov-ice); opacity:1; }
/* the one tinted numeral; still, so the proof reads as a reading, not an effect */
.view--vision .ov-proof .counter__num{
  animation:none; color:#9ff7ff;
  text-shadow:0 0 22px rgba(61,242,255,.42), 0 0 70px rgba(139,92,246,.26);
}
.view--vision .ov-proof .counter__aura{ display:none; }   /* a blurred, screen-blended spinning cone behind a numeral */
.view--vision .ov-proof .livestat{
  backdrop-filter:none; -webkit-backdrop-filter:none;
  background:rgba(216,239,252,.035); border-color:rgba(216,239,252,.10);
}
.view--vision .ov-proof .livestat__aura{ display:none; }
.view--vision .ov-proof .livestat--views .livestat__num{ color:var(--ov-pearl); text-shadow:0 0 22px rgba(216,239,252,.22); }
.view--vision .ov-proof .livestat__hint{ color:#8fd8ff; }
.view--vision .ov-proof .xpulse{ margin-top:clamp(26px,5vh,44px); }

/* ═══ the phone ═══ */
@media (max-width:560px){
  .ov-act--door{ padding-top:calc(env(safe-area-inset-top) + 84px); padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom) + 88px); }
  .view--vision .hero .ov-door{ flex-direction:column; align-items:stretch; padding:8px; border-radius:22px; }
  .view--vision .hero .ov-door .hero__field{ font-size:1rem; padding:14px 12px; }
  .view--vision .hero .ov-door .btn--signal{ width:100%; padding:15px 18px; }
  .view--vision .ov-door__after{ gap:2px 14px; }
}
/* short screens (a laptop with the bars showing) keep the door above the dock */
@media (max-height:760px) and (min-width:561px){
  .view--vision .ov-act--door .hero__title{ font-size:clamp(3rem,10vw,6.6rem); }
  .view--vision .ov-act--door .hero__move{ margin-top:26px; }
}

@media (prefers-reduced-motion:reduce){
  .view--vision .ov-act--door .hm-us{ animation:none; }
  .view--vision .ov-line.reveal{ filter:none; transform:none; transition:none; }
  .view--vision .hero .ov-door, .view--vision .hero .ov-door::before, .view--vision .hero .ov-door .btn--signal{ transition:none; }
}

/* on a wide screen each line holds to one line, as it was written */
@media (min-width:900px){
  .view--vision .ov-line, .view--vision .ov-act--era .ov-line{ max-width:none; }
}

/* ═══ the manifesto, one touch: a movement's numeral was an outline at .44 on the
   night and barely read; it now lights in ice with a violet bloom when it arrives ═══ */
.view--vision .movement__numeral.in{
  -webkit-text-stroke-color:rgba(216,239,252,.62);
  text-shadow:0 0 30px rgba(156,195,239,.26), 0 0 90px rgba(139,92,246,.2);
}
.view--vision .movement__eyebrow{ color:var(--ov-ice); opacity:1; }

/* ═══ the manifesto's definitions: symmetric tiles on the one axis ═══
   On a wide screen the first definition sat alone in a two-column row, because
   the long one after it takes the full row; it now leads on a row of its own and
   the four after it pair up. The side border goes the way the credits' went
   (THE ONE AXIS, 2026-08-19): the text is centred, so the light comes from the
   top edge, and each tile rises into place instead of sliding in from the left. */
.view--vision .nw-def{
  border-left:0; border-radius:18px; padding:16px 18px;
  background:linear-gradient(180deg, rgba(22,30,66,.56), rgba(10,14,34,.64));
  box-shadow:inset 0 1px 0 rgba(216,239,252,.13), 0 18px 40px -30px rgba(0,0,0,.85);
  transform:translateY(8px);
}
@media (min-width:860px){
  .view--vision .nw-def:first-child{ grid-column:1/-1; }
}

/* the doors and the ask: the same glass as the door at the top, lit from above */
.view--vision .nw-door, .view--vision .nw-ask{
  border-color:rgba(216,239,252,.12);
  background:linear-gradient(180deg, rgba(22,30,66,.62), rgba(10,14,34,.70));
  box-shadow:inset 0 1px 0 rgba(216,239,252,.14), 0 24px 54px -36px rgba(0,0,0,.9), 0 0 60px -36px rgba(139,92,246,.45);
}
.view--vision .nw-door:hover{ border-color:rgba(216,239,252,.3); box-shadow:inset 0 1px 0 rgba(216,239,252,.2), 0 24px 54px -36px rgba(0,0,0,.9), 0 0 70px -30px rgba(139,92,246,.6); }
.view--vision .nw-door--soon{ border-color:rgba(255,217,160,.28); }
/* three doors, three equal columns: a 1fr track grows to fit its longest word
   ("MotusMoves.US/Davara"), so the doors came out 228 · 217 · 171 px wide */
@media (min-width:860px){
  .view--vision .nw-doors{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .view--vision .nw-door b{ overflow-wrap:anywhere; }   /* a fallback; the labels break after the slash (<wbr>) */
  .view--vision .nw-door{ align-items:center; }            /* icon, words and arrow on the one axis */
}