/* ════════════════════════════════════════════════════════════════
   DAVARA'S MOTUS VISION — the magical brief on the MINDSET page.
   The button is a small door; the panel is her thinking made visible.
   Soft glows only · opacity/transform motion · mobile-first.
   ════════════════════════════════════════════════════════════════ */

.dvision{ width:100%; margin:10px 0 4px; display:flex; flex-direction:column; align-items:center; gap:0; }

/* ── the door — DAVARA DISTINCT ── */
.dvision__btn{
  position:relative; display:inline-flex; align-items:center; gap:12px;
  padding:15px 22px 15px 16px; border-radius:99px; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:clamp(.9rem,3.8vw,1.02rem); letter-spacing:.015em;
  color:var(--ink); text-align:left;
  background:linear-gradient(160deg, rgba(13,17,30,.92), rgba(10,12,22,.88));
  border:1px solid transparent; background-clip:padding-box;
  box-shadow:0 0 34px -12px rgba(61,242,255,.45), 0 0 60px -24px rgba(177,92,255,.5), inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .25s var(--ease), box-shadow .4s var(--ease);
}
.dvision__btn::before{ /* the living gradient rim */
  content:""; position:absolute; inset:-1.5px; z-index:-1; border-radius:99px;
  background:conic-gradient(from var(--dvz-a,0deg), #37e9ff, #b15cff, #5ff3c0, #37e9ff);
  animation:dvzRim 5.5s linear infinite;
  filter:blur(.4px);
}
@property --dvz-a{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
@keyframes dvzRim{ to{ --dvz-a:360deg; } }
.dvision__btn::after{ /* the breath */
  content:""; position:absolute; inset:-14px; z-index:-2; border-radius:99px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(61,242,255,.16), rgba(177,92,255,.08) 60%, transparent);
  animation:dvzBreath 4.2s ease-in-out infinite;
}
@keyframes dvzBreath{ 0%,100%{ opacity:.5; transform:scale(.97);} 50%{ opacity:1; transform:scale(1.04);} }
.dvision__btn:hover{ transform:translateY(-2px); box-shadow:0 0 48px -10px rgba(61,242,255,.6), 0 0 90px -26px rgba(177,92,255,.65), inset 0 1px 0 rgba(255,255,255,.1); }
.dvision__btn:active{ transform:scale(.97); }
.dvision__btnlens{ width:34px; height:34px; flex:none; filter:drop-shadow(0 0 10px rgba(61,242,255,.6)); }
.dvision__btnlens .dvz-cres{ fill:url(#dvzBtnG); }
.dvision__btnlens .dvz-heart{ fill:#eaf9ff; animation:dvzHeart 2.6s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
.dvision__btn b{ color:var(--cyan-soft); text-shadow:0 0 14px rgba(61,242,255,.45); }
.dvision__btn .dvision__hint{ display:block; font-family:var(--mono); font-weight:400; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); margin-top:2px; }
.dvision.is-active .dvision__btn{ opacity:.55; }
@keyframes dvzHeart{ 0%,100%{ transform:scale(1);} 12%{ transform:scale(1.3);} 24%{ transform:scale(1.05);} 36%{ transform:scale(1.22);} 48%{ transform:scale(1);} }

/* ── the panel — her page ── */
.dvision__panel{
  position:relative; width:100%; max-width:680px; margin-top:18px;
  border-radius:26px; padding:clamp(18px,5vw,34px);
  background:linear-gradient(165deg, rgba(13,16,30,.88), rgba(8,10,20,.92));
  border:1px solid rgba(138,246,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 50px 110px -60px rgba(0,0,0,.95), 0 0 80px -40px rgba(61,242,255,.35);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; transform:translateY(14px) scale(.99);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  text-align:left;
}
.dvision__panel.is-open{ opacity:1; transform:none; }
.dvision__panel[hidden]{ display:none; }
/* the hidden attribute must always win over our display rules */
.dvz-think[hidden], .dvz-page[hidden], .dvz-end[hidden]{ display:none !important; }

/* controls — present, never loud */
.dvz-controls{ position:sticky; top:calc(env(safe-area-inset-top) + 10px); z-index:3; display:flex; justify-content:flex-end; gap:7px; margin:-6px -4px 6px 0; }
.dvz-ctl{ width:34px; height:34px; border-radius:50%; border:1px solid rgba(138,246,255,.2); background:rgba(8,10,20,.8); color:var(--ink-soft); cursor:pointer; font-size:13px; line-height:1; transition:.2s; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.dvz-ctl:hover{ color:var(--ink); border-color:rgba(61,242,255,.45); box-shadow:0 0 16px -6px rgba(61,242,255,.6); }

/* ── stage 1 · she thinks ── */
.dvz-think{ position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; padding:34px 0 30px; transition:opacity .45s var(--ease); }
.dvz-think.is-done{ opacity:0; }
.dvz-thinklens{ width:88px; height:88px; filter:drop-shadow(0 0 26px rgba(61,242,255,.55)); animation:dvzThink 2.4s ease-in-out infinite; }
.dvz-thinklens .dvz-cres{ fill:url(#dvzG); }
.dvz-thinklens .dvz-heart{ fill:#eaf9ff; animation:dvzHeart 1.6s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes dvzThink{ 0%,100%{ transform:scale(1) rotate(-1.5deg);} 50%{ transform:scale(1.06) rotate(1.5deg);} }
.dvz-mote{ position:absolute; top:50%; left:50%; width:5px; height:5px; margin:-46px 0 0 -2px; border-radius:50%; background:var(--cyan-soft); box-shadow:0 0 10px rgba(138,246,255,.9); transform-origin:2px 46px; animation:dvzOrbit 3.4s linear infinite; }
.dvz-mote:nth-child(3){ background:var(--violet-bright); box-shadow:0 0 10px rgba(214,168,255,.9); animation-duration:4.6s; animation-delay:-1.2s; }
.dvz-mote:nth-child(4){ background:var(--trust); box-shadow:0 0 10px rgba(95,243,192,.9); animation-duration:5.8s; animation-delay:-2.6s; }
@keyframes dvzOrbit{ to{ transform:rotate(360deg); } }
.dvz-think__t{ font-family:var(--mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cyan-soft); margin:0; opacity:.85; }
.dvz-think__t.in{ animation:dvzFadeUp .5s var(--ease) both; }

/* ── stage 2 · the writing ── */
.dvz-page{ display:flex; flex-direction:column; gap:2px; }
.dvz-line{ margin:0; font-size:clamp(.98rem,4.2vw,1.08rem); line-height:1.74; color:var(--ink-soft); min-height:1.2em; }
.dvz-line .dvz-b{ color:var(--ink); font-weight:600; }
.dvz-line .dvz-i{ font-style:italic; color:var(--ink); opacity:.94; }
.dvz-gap{ height:14px; }
.dvz-open{ font-size:clamp(1.06rem,4.6vw,1.2rem); color:var(--ink); }
.dvz-open .dvz-b{ color:var(--cyan-soft); text-shadow:0 0 16px rgba(61,242,255,.4); }
.dvz-see .dvz-b, .dvz-decl .dvz-b{ font-family:var(--display); font-size:1.12em; color:var(--ink); }
.dvz-decl{ margin-top:4px; }
.dvz-decl .dvz-b{ text-shadow:0 0 18px rgba(177,92,255,.35); }
.dvz-hi .dvz-b{ color:var(--cyan-soft); text-shadow:0 0 14px rgba(61,242,255,.4); }
.dvz-hi{ color:var(--ink); }
.dvz-quote{ font-family:var(--serif); color:var(--ink); padding-left:14px; border-left:2px solid rgba(61,242,255,.4); }
.dvz-mantra{ font-family:var(--display); font-weight:600; color:var(--ink); text-align:center; }
.dvz-final{ text-align:center; font-size:clamp(1.2rem,5.4vw,1.5rem); margin-top:6px; }
.dvz-final .dvz-b{ font-family:var(--display); color:var(--violet-bright); text-shadow:0 0 22px rgba(177,92,255,.5); }
.dvz-caret{ display:inline-block; width:2px; height:1.05em; vertical-align:-0.18em; margin-left:1px; background:var(--cyan); box-shadow:0 0 10px rgba(61,242,255,.9); animation:dvzCaret 0.9s steps(2) infinite; }
@keyframes dvzCaret{ 50%{ opacity:0; } }
.dvz-sig{ display:flex; align-items:center; gap:8px; justify-content:center; margin:16px 0 0; font-family:var(--serif); font-size:1.06rem; color:var(--cyan-soft); }
.dvz-siglens{ width:22px; height:22px; filter:drop-shadow(0 0 8px rgba(61,242,255,.55)); }
.dvz-siglens .dvz-cres{ fill:#37e9ff; }     /* self-reliant — never depends on another instance's gradient */
.dvz-siglens .dvz-heart{ fill:#eaf9ff; }
.dvz-thinklens .dvz-cres{ fill:#37e9ff; }   /* same guarantee for the thinking lens */
.dvz-bloom{ animation:dvzFadeUp .8s var(--ease-out) both; }
@keyframes dvzFadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* ── the flywheel model — a system you can touch ── */
.dvz-fw{ margin:18px auto 6px; max-width:340px; width:100%; text-align:center; }
.dvz-fw svg{ width:min(72vw,300px); height:auto; display:block; margin:0 auto; overflow:visible; }
.dvz-fw__ring{ fill:none; stroke:rgba(138,246,255,.18); stroke-width:1.5; }
.dvz-fw__dash{ fill:none; stroke:url(#dvzG); stroke:rgba(61,242,255,.7); stroke-width:2; stroke-linecap:round; stroke-dasharray:26 514; filter:drop-shadow(0 0 6px rgba(61,242,255,.7)); }
.dvz-fw__spin{ transform-origin:110px 110px; animation:dvzSpin 14s linear infinite; }
@keyframes dvzSpin{ to{ transform:rotate(360deg);} }
.dvz-fw__core{ fill:rgba(10,13,24,.9); stroke:rgba(177,92,255,.4); stroke-width:1.4; filter:drop-shadow(0 0 14px rgba(177,92,255,.4)); }
.dvz-fw__logo{ fill:var(--violet-bright); font-size:26px; text-anchor:middle; font-family:var(--display); }
.dvz-fw__node{ cursor:pointer; }
.dvz-fw__node:focus{ outline:none; }
.dvz-fw__c{ fill:rgba(10,13,24,.92); stroke:rgba(138,246,255,.3); stroke-width:1.3; transition:.25s; }
.dvz-fw__node:hover .dvz-fw__c, .dvz-fw__node:focus .dvz-fw__c{ stroke:rgba(61,242,255,.8); }
.dvz-fw__node.is-on .dvz-fw__c{ stroke:var(--cyan); filter:drop-shadow(0 0 12px rgba(61,242,255,.65)); }
.dvz-fw__g{ fill:var(--cyan-soft); font-size:15px; text-anchor:middle; }
.dvz-fw__k{ fill:var(--ink-soft); font-size:8.5px; letter-spacing:.12em; text-anchor:middle; font-family:var(--mono); }
.dvz-fw__node.is-on .dvz-fw__k{ fill:var(--ink); }
.dvz-fw__cap{ min-height:3.2em; margin:10px auto 0; max-width:30em; font-size:.82rem; line-height:1.55; color:var(--ink-mute); }
.dvz-fw__cap b{ color:var(--cyan-soft); font-family:var(--mono); letter-spacing:.08em; }
.dvz-fw__cap.in{ animation:dvzFadeUp .4s var(--ease) both; }

/* ── the end — give the floor back to August ── */
.dvz-end{ display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:22px; }
.dvz-endbtn{ font-family:var(--display); font-weight:600; font-size:.84rem; color:var(--ink-soft); padding:11px 18px; border-radius:99px; border:1px solid rgba(138,246,255,.22); background:rgba(255,255,255,.025); cursor:pointer; transition:.22s; }
.dvz-endbtn:hover{ color:var(--ink); border-color:rgba(61,242,255,.5); box-shadow:0 0 22px -8px rgba(61,242,255,.55); }
.dvz-endbtn--hide{ color:#04222b; background:linear-gradient(135deg, var(--cyan), var(--cyan-soft)); border-color:transparent; box-shadow:0 0 26px -8px rgba(61,242,255,.6); }
.dvz-endbtn--hide:hover{ color:#04222b; }

@media (prefers-reduced-motion: reduce){
  .dvision__btn::before, .dvision__btn::after, .dvz-thinklens, .dvz-mote, .dvz-caret,
  .dvz-fw__spin, .dvz-think__t.in, .dvz-bloom, .dvz-fw__cap.in,
  .dvision__btnlens .dvz-heart, .dvz-thinklens .dvz-heart{ animation:none; }
  .dvision__panel{ transition:none; }
}