/* ============================================================
   CANDAI Canvass showcase (homepage, under the hero) — 2026-10-11
   Pure CSS phone frames, cross-fading real app screens, float +
   parallax + scroll reveal. Respects prefers-reduced-motion.
   Also carries small mobile fixes for the header/hero overflow.
   ============================================================ */

/* ---------- mobile overflow fixes (header + hero) ---------- */
@media (max-width:920px){
  .menu-btn{flex-shrink:0}
  .hdr-cta .btn-ghost{display:none}
  .nav{display:none}
  .nav.is-open{
    display:flex;position:absolute;top:56px;left:0;right:0;
    background:rgba(10,22,40,.98);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);padding:1rem 1.2rem;flex-direction:column;gap:.3rem;z-index:40;
    box-shadow:0 12px 30px rgba(0,0,0,.3);max-height:calc(100dvh - 56px);overflow-y:auto;overscroll-behavior:contain;
  }
  .nav.is-open a{padding:.6rem .7rem}
  .hero-grid > *{min-width:0}
  .hero-h .hl-cyan,.hero-h .hl-violet{white-space:normal}
  .hdr-cta > a:not(.btn){display:none}
}
@media (max-width:760px){
  .hdr-inner{gap:.6rem}
  .hdr-cta .btn-ghost{display:none}
  .hero-h .hl-cyan,.hero-h .hl-violet{white-space:normal}
  .hero-h{font-size:clamp(2rem,9vw,2.6rem)}
  .hero{padding:3.2rem 0 3.4rem}
  .hero-cta{flex-wrap:wrap}
  .hero-pills{flex-wrap:wrap}
  .hero-card{max-width:100%}
}
@media (max-width:520px){
  .hdr-cta .btn-primary{display:none}
}

/* ---------- section ---------- */
.cvh{
  --cv-w:clamp(196px,19vw,268px);
  position:relative;
  padding:clamp(3.5rem,7vw,6.5rem) 0;
  border-bottom:1px solid var(--line,rgba(34,211,238,.1));
  overflow:hidden;            /* fallback */
  overflow:clip;              /* never creates horizontal scroll */
  isolation:isolate;
  background:
    radial-gradient(ellipse 55% 60% at 78% 45%, rgba(34,211,238,.10), transparent 62%),
    radial-gradient(ellipse 45% 55% at 62% 70%, rgba(139,92,246,.12), transparent 65%),
    linear-gradient(180deg, #0a1628 0%, #0b1a31 55%, #0a1628 100%);
}
.cvh::before{ /* faint grid, matches hero */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(34,211,238,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,238,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 70% 50%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 70% at 70% 50%,#000 20%,transparent 75%);
}
.cvh-grid{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,4vw,4rem);align-items:center;
}
.cvh-grid > *{min-width:0}

/* ---------- copy ---------- */
.cvh-eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1rem;
  font-family:var(--font-mono,ui-monospace,monospace);font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cyan,#22d3ee);
}
.cvh-eyebrow b{
  font-weight:700;color:#0a1628;background:var(--gradient,linear-gradient(135deg,#22d3ee,#8b5cf6));
  padding:.18rem .5rem;border-radius:999px;letter-spacing:.08em;
}
.cvh-title{
  font-family:var(--font-display,system-ui,sans-serif);
  font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.06;font-weight:700;letter-spacing:-.025em;
  margin:0 0 1rem;color:var(--ink,#e2e8f0);
}
.cvh-title .cvh-grad{
  background:var(--gradient,linear-gradient(135deg,#22d3ee,#8b5cf6));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cvh-sub{color:var(--ink-dim,#94a3b8);font-size:1.02rem;max-width:34rem;margin:0 0 1.3rem}
.cvh-sub strong{color:var(--ink,#e2e8f0)}
.cvh-results{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.6rem;padding:0;list-style:none}
.cvh-results li{
  font-family:var(--font-mono,ui-monospace,monospace);font-size:.74rem;font-weight:600;letter-spacing:.04em;
  padding:.32rem .7rem;border-radius:999px;border:1px solid currentColor;background:rgba(10,22,40,.6);
}
.cvh-results .r-b{color:#7aa7ff}.cvh-results .r-nc{color:#fbbf24}.cvh-results .r-dbo{color:#f87171}
.cvh-results .r-pm{color:#c4a5ff}.cvh-results .r-s{color:#4ade80}.cvh-results .r-r{color:#fb923c}
.cvh-cta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.cvh-note{margin:.9rem 0 0;font-size:.82rem;color:var(--ink-muted,#8294ad)}

/* ---------- stage + phones ---------- */
.cvh-stage{
  position:relative;height:calc(var(--cv-w) * 2.36);
  display:flex;align-items:center;justify-content:center;
  perspective:1400px;
  --py:0px;                  /* parallax, set by JS */
}
.cvh-glow{
  position:absolute;left:50%;top:50%;width:calc(var(--cv-w) * 2.4);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(34,211,238,.32) 0%,rgba(139,92,246,.22) 38%,transparent 68%);
  filter:blur(28px);
  animation:cvh-pulse 7s ease-in-out infinite;
}
.cvh-ring{
  position:absolute;left:50%;top:50%;width:calc(var(--cv-w) * 2.05);aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;pointer-events:none;
  border:1px dashed rgba(34,211,238,.18);
  animation:cvh-spin 60s linear infinite;
}
.cvh-phone{
  --tilt:0deg;--dx:0px;--dy:0px;--pf:1;--delay:0s;
  position:absolute;left:50%;top:50%;margin:0;
  width:var(--cv-w);aspect-ratio:390/858;
  translate:calc(-50% + var(--dx)) calc(-50% + var(--dy) + var(--py) * var(--pf));
  rotate:var(--tilt);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), translate .25s linear;
  will-change:transform;
}
.cvh-float::before{ /* side buttons */
  content:"";position:absolute;right:-2px;top:22%;width:3px;height:12%;border-radius:2px;
  background:linear-gradient(#3b4b68,#1a2438);
}
.cvh-screen{
  position:relative;display:block;width:100%;height:100%;overflow:hidden;
  border-radius:calc(var(--cv-w) * .125);background:#f7f8fa;
}
.cvh-screen::after{ /* island + glass sheen */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 100%);
}
.cvh-screen picture,.cvh-screen img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
}
/* the screenshots carry their own top bar; push them under the island slightly */
.cvh-screen::before{content:"";position:absolute;z-index:4;top:2.6cqw;left:50%;width:27cqw;height:7.4cqw;transform:translateX(-50%);border-radius:99px;background:#05090f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.cvh-screen img{padding-top:12.5%;background:#fff;box-sizing:border-box}
.cvh-screen{container-type:inline-size}
.cvh-status{
  position:absolute;left:0;right:0;top:0;height:12.5cqw;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:.6cqw 9cqw 0;font:600 4cqw/1 -apple-system,'Inter',system-ui,sans-serif;color:#0b1220;background:#fff;pointer-events:none;
}
.cvh-status b{font-weight:700}
.cvh-sig{width:15cqw;height:3.6cqw;background:
  linear-gradient(#0b1220,#0b1220) 0 100%/2.2cqw 40% no-repeat,
  linear-gradient(#0b1220,#0b1220) 3cqw 100%/2.2cqw 65% no-repeat,
  linear-gradient(#0b1220,#0b1220) 6cqw 100%/2.2cqw 100% no-repeat,
  linear-gradient(#0b1220,#0b1220) 9.4cqw 50%/5.4cqw 100% no-repeat;border-radius:1px}
.cvh-slide{opacity:0;transition:opacity 1.1s ease, transform 6s ease-out;transform:scale(1.035)}
.cvh-slide.is-on{opacity:1;transform:scale(1)}
.cvh-slide:first-child{opacity:1;transform:none}
.cvh-ready .cvh-slide:first-child:not(.is-on){opacity:0}

.cvh-main{z-index:3}
.cvh-left{--tilt:-9deg;--dx:calc(var(--cv-w) * -.78);--dy:calc(var(--cv-w) * .18);--pf:-.6;--delay:-2.2s;z-index:2;width:calc(var(--cv-w) * .86);--fw:.86}
.cvh-right{--tilt:8deg;--dx:calc(var(--cv-w) * .8);--dy:calc(var(--cv-w) * .1);--pf:.9;--delay:-4.1s;z-index:1;width:calc(var(--cv-w) * .86);--fw:.86}
.cvh-left,.cvh-right{filter:saturate(.95) brightness(.92)}

/* gentle float (on the inner wrapper so it composes with translate/rotate) */
.cvh-float{position:relative;display:block;width:100%;height:100%;box-sizing:border-box;animation:cvh-float 7s ease-in-out infinite;animation-delay:var(--delay);
  border-radius:calc(var(--cv-w) * .16);
  padding:calc(var(--cv-w) * .035);
  background:linear-gradient(145deg,#2a3956 0%,#0c1424 38%,#05090f 62%,#22314c 100%);
  box-shadow:
    0 0 0 1px rgba(148,163,184,.25),
    inset 0 0 0 1.5px rgba(255,255,255,.06),
    0 40px 80px -20px rgba(0,0,0,.75),
    0 18px 40px -12px rgba(34,211,238,.25);
}

/* floating chips */
.cvh-chip{
  position:absolute;z-index:5;display:flex;align-items:center;gap:.55rem;
  padding:.55rem .8rem;border-radius:14px;white-space:nowrap;
  font-size:.8rem;font-weight:600;color:#e2e8f0;
  background:rgba(15,31,58,.78);border:1px solid rgba(34,211,238,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 14px 34px rgba(0,0,0,.45);
  animation:cvh-float 6s ease-in-out infinite;
  translate:0 calc(var(--py) * -.4);
}
.cvh-chip i{
  display:grid;place-items:center;width:24px;height:24px;border-radius:8px;font-style:normal;font-size:.8rem;
  background:rgba(74,222,128,.16);color:#4ade80;
}
.cvh-chip small{display:block;font-weight:500;color:#94a3b8;font-size:.7rem}
.cvh-chip-a{left:calc(50% - var(--cv-w) * 1.3);top:3%;animation-delay:-1.5s}
.cvh-chip-b{right:calc(50% - var(--cv-w) * 1.3);bottom:13%;animation-delay:-3.5s}
.cvh-chip-b i{background:rgba(139,92,246,.2);color:#c4a5ff}

/* ---------- scroll reveal ---------- */
.cvh.cvh-js .cvh-copy{opacity:0;transform:translateY(22px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
.cvh.cvh-js .cvh-phone{opacity:0}
.cvh.cvh-js .cvh-main{transform:translateY(60px) scale(.94)}
.cvh.cvh-js .cvh-left{transform:translateX(50px) rotate(6deg)}
.cvh.cvh-js .cvh-right{transform:translateX(-50px) rotate(-6deg)}
.cvh.cvh-js .cvh-chip{opacity:0;transition:opacity .7s ease .7s}
.cvh.cvh-in .cvh-copy{opacity:1;transform:none}
.cvh.cvh-in .cvh-phone{opacity:1;transform:none}
.cvh.cvh-in .cvh-left{transition-delay:.15s}
.cvh.cvh-in .cvh-right{transition-delay:.28s}
.cvh.cvh-in .cvh-chip{opacity:1}

/* dots */
.cvh-dots{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);display:flex;gap:6px;z-index:6}
.cvh-dots span{width:6px;height:6px;border-radius:99px;background:rgba(148,163,184,.35);transition:width .4s,background .4s}
.cvh-dots span.is-on{width:20px;background:var(--cyan,#22d3ee)}

@keyframes cvh-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes cvh-pulse{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
@keyframes cvh-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .cvh{--cv-w:min(46vw,236px)}
  .cvh-grid{grid-template-columns:minmax(0,1fr)}
  .cvh-copy{text-align:center}
  .cvh-sub{margin-inline:auto}
  .cvh-results,.cvh-cta{justify-content:center}
  .cvh-stage{order:-1;margin-bottom:.5rem}
}
@media (max-width:520px){
  .cvh{--cv-w:min(47vw,200px);padding:2.8rem 0 3.2rem}
  .cvh-left{--dx:calc(var(--cv-w) * -.66)}
  .cvh-right{--dx:calc(var(--cv-w) * .66)}
  .cvh-chip{font-size:.72rem;padding:.42rem .6rem;border-radius:12px}
  .cvh-chip i{width:20px;height:20px}
  .cvh-chip small{display:none}
  .cvh-chip-a{left:2px;top:6%}
  .cvh-chip-b{right:2px;bottom:8%}
  .cvh-cta .btn{flex:1 1 100%;justify-content:center}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .cvh-glow,.cvh-ring,.cvh-float,.cvh-chip{animation:none}
  .cvh-phone,.cvh-copy,.cvh-chip,.cvh-slide{transition:none !important}
  .cvh.cvh-js .cvh-copy,.cvh.cvh-js .cvh-phone,.cvh.cvh-js .cvh-chip{opacity:1;transform:none}
  .cvh-stage{--py:0px !important}
}