/* ============================================================
   VISUALIZER PAGE — full-width embed
   ============================================================ */

/* ---------- Hero (compact) ---------- */
.viz-hero{
  background:#0a0d12;color:#fff;
  padding:160px 0 50px;
  margin-top:calc(-1 * (var(--nav-h) + var(--topbar-h) + 14px));
  text-align:center;
  position:relative;overflow:hidden;
}
.viz-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%,rgba(176,134,84,.12) 0%,transparent 70%);
  pointer-events:none;
}

/* === Ambient material scene (behind hero text) === */
.viz-hero .ambient{
  position:absolute;inset:0;
  pointer-events:none;
  z-index:1;
}

/* Faint blueprint grid */
.viz-hero .ambient .blueprint{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(184,140,84,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(184,140,84,.05) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 30%,transparent 75%);
  animation:bpDrift 60s linear infinite;
}
@keyframes bpDrift{
  0%{background-position:0 0,0 0}
  100%{background-position:48px 48px,48px 48px}
}

/* Material swatches floating in the periphery */
.viz-hero .ambient .swatch{
  position:absolute;
  width:64px;height:80px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 12px 30px -8px rgba(0,0,0,.5),
    0 0 0 1px rgba(184,140,84,.06) inset;
  opacity:.7;
  overflow:hidden;
}
/* Only featured swatches (sw1, sw3) display labels — others are silent accents */
.viz-hero .ambient .swatch.featured::after{
  content:attr(data-mat);
  position:absolute;bottom:-22px;left:50%;
  transform:translateX(-50%) rotate(calc(-1 * var(--r,0deg)));
  font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.7);font-weight:700;
  white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.7);
}
.viz-hero .ambient .swatch.featured{overflow:visible}

/* Material variants — actual Vita doors */
.viz-hero .ambient .sw1{
  /* Emerald Natural — warm oak */
  top:18%;left:5%;
  background:linear-gradient(165deg,#d4b890 0%,#c8a97d 45%,#a88860 100%);
  box-shadow:
    0 12px 30px -8px rgba(0,0,0,.5),
    0 0 0 1px rgba(184,140,84,.15) inset,
    inset 0 0 30px rgba(120,90,50,.2);
  transform:rotate(-8deg);
  animation:swatchFloat 8s ease-in-out infinite;
  width:78px;height:96px;
  opacity:.92;
}
.viz-hero .ambient .sw1::before{
  /* Subtle wood grain via repeating gradient layered on top */
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(92deg,
    transparent 0 5px,
    rgba(80,55,25,.18) 5px 6px,
    transparent 6px 14px,
    rgba(80,55,25,.1) 14px 15px);
  border-radius:inherit;
  pointer-events:none;
}
.viz-hero .ambient .sw3{
  /* Trillion White — soft cream */
  top:14%;right:5%;
  background:linear-gradient(160deg,#f5f1e6 0%,#ece8de 50%,#d8d2c2 100%);
  box-shadow:
    0 12px 30px -8px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.18) inset,
    inset 0 0 30px rgba(180,170,150,.15);
  transform:rotate(10deg);
  animation:swatchFloat 7.5s ease-in-out infinite -4s;
  width:78px;height:96px;
  opacity:.92;
}
.viz-hero .ambient .sw3::before{
  /* Subtle horizontal panel reveal — feels architectural like Trillion */
  content:"";position:absolute;
  left:8%;right:8%;top:42%;height:1px;
  background:rgba(120,110,90,.25);
  pointer-events:none;
}

@keyframes swatchFloat{
  0%,100%{transform:rotate(var(--r,0deg)) translateY(0)}
  50%{transform:rotate(var(--r,0deg)) translateY(-8px)}
}
.viz-hero .ambient .sw1{--r:-8deg}
.viz-hero .ambient .sw3{--r:10deg}

/* Tiny floating spec dots */
.viz-hero .ambient .spec{
  position:absolute;
  width:5px;height:5px;border-radius:50%;
  background:var(--gold-2);
  opacity:.4;
}
.viz-hero .ambient .spec.s1{top:30%;left:25%;animation:specDrift 7s ease-in-out infinite}
.viz-hero .ambient .spec.s2{top:70%;left:30%;animation:specDrift 8s ease-in-out infinite -2s;width:3px;height:3px}
.viz-hero .ambient .spec.s3{top:25%;right:22%;animation:specDrift 9s ease-in-out infinite -4s;width:3px;height:3px}
.viz-hero .ambient .spec.s4{top:72%;right:28%;animation:specDrift 7.5s ease-in-out infinite -1s}
.viz-hero .ambient .spec.s5{top:50%;left:32%;animation:specDrift 6s ease-in-out infinite -3s;width:3px;height:3px;background:#fff;opacity:.3}
.viz-hero .ambient .spec.s6{top:55%;right:32%;animation:specDrift 8.5s ease-in-out infinite -5s;width:3px;height:3px;background:#fff;opacity:.3}
@keyframes specDrift{
  0%,100%{transform:translate(0,0);opacity:.3}
  50%{transform:translate(8px,-12px);opacity:.8}
}

/* Cabinet outline silhouettes — far edges */
.viz-hero .ambient .cabinet{
  position:absolute;
  border:1px solid rgba(184,140,84,.18);
  border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,rgba(184,140,84,.04) 100%);
}
.viz-hero .ambient .cabinet::before,
.viz-hero .ambient .cabinet::after{
  content:"";position:absolute;
  background:rgba(184,140,84,.3);
  border-radius:99px;
}
.viz-hero .ambient .cab1{
  bottom:8%;left:3%;
  width:60px;height:80px;
  transform:rotate(-3deg);
  animation:cabinetSway 11s ease-in-out infinite;
}
.viz-hero .ambient .cab1::before{
  right:6px;top:50%;width:10px;height:1.5px;
  transform:translateY(-50%);
}
.viz-hero .ambient .cab2{
  bottom:6%;right:3%;
  width:54px;height:72px;
  transform:rotate(4deg);
  animation:cabinetSway 13s ease-in-out infinite -3s;
}
.viz-hero .ambient .cab2::before{
  left:6px;top:35%;width:1.5px;height:10px;
}
.viz-hero .ambient .cab2::after{
  left:6px;bottom:25%;width:1.5px;height:10px;
}
@keyframes cabinetSway{
  0%,100%{transform:rotate(var(--cr,0deg)) translateY(0)}
  50%{transform:rotate(var(--cr,0deg)) translateY(-4px)}
}
.viz-hero .ambient .cab1{--cr:-3deg}
.viz-hero .ambient .cab2{--cr:4deg}

/* Ensure container content sits above ambient */
.viz-hero .container{position:relative;z-index:2}

/* On smaller screens, swatches scale down */
@media(max-width:880px){
  .viz-hero .ambient .swatch{transform:scale(.8)}
  .viz-hero .ambient .cabinet{display:none}
}
@media(max-width:580px){
  .viz-hero .ambient .swatch{display:none}
  .viz-hero .ambient .blueprint{opacity:.6}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .viz-hero .ambient *{animation:none !important}
}

.viz-hero .eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-2);font-weight:700;
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:20px;
}
.viz-hero .eyebrow::before,.viz-hero .eyebrow::after{
  content:"";width:24px;height:1px;background:var(--gold-2);
}
.viz-hero h1{
  color:#fff;font-family:var(--serif);font-weight:300;
  font-size:clamp(40px,6vw,84px);line-height:1;letter-spacing:-.01em;
}
.viz-hero h1 em{font-style:italic;color:rgba(255,255,255,.55)}
.viz-hero p{
  color:rgba(255,255,255,.72);max-width:60ch;
  margin:18px auto 0;font-size:16px;line-height:1.6;
}

/* ---------- Embed frame ---------- */
.viz-embed{
  position:relative;
  background:#0a0d12;
  padding:0;
}
.viz-embed .frame-wrap{
  position:relative;
  width:100%;
  height:calc(100vh - 80px);
  min-height:640px;
  background:#0a0d12;
  overflow:hidden;
}
.viz-embed iframe{
  width:100%;height:100%;
  border:0;display:block;
  background:#fff;
}

/* Loading shimmer while iframe loads */
.viz-embed .loading{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;
  background:linear-gradient(180deg,#0a0d12 0%,#11151c 100%);
  color:rgba(255,255,255,.6);
  transition:opacity .5s var(--ease);
  pointer-events:none;
}
.viz-embed .loading.hide{opacity:0}
.viz-embed .loading .spin{
  width:36px;height:36px;border-radius:99px;
  border:2px solid rgba(255,255,255,.1);
  border-top-color:var(--gold-2);
  animation:vizSpin 1s linear infinite;
}
@keyframes vizSpin{to{transform:rotate(360deg)}}
.viz-embed .loading .lbl{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;
}

/* ---------- Floating action bar (overlay on iframe) ---------- */
.viz-actions{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:10;
  display:inline-flex;align-items:center;gap:10px;
  background:rgba(10,13,18,.85);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:99px;
  padding:8px 8px 8px 18px;
  box-shadow:0 14px 40px -10px rgba(0,0,0,.5);
}
.viz-actions .lbl{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.65);font-weight:700;
}
.viz-actions .btn-mini{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;border-radius:99px;
  font-size:12px;font-weight:700;letter-spacing:.06em;
  background:rgba(255,255,255,.06);color:#fff;
  border:1px solid rgba(255,255,255,.1);
  transition:all .25s var(--ease);
}
.viz-actions .btn-mini:hover{background:#fff;color:var(--ink);border-color:#fff}
.viz-actions .btn-mini.gold{
  background:var(--gold);border-color:var(--gold);
}
.viz-actions .btn-mini.gold:hover{background:var(--gold-2);border-color:var(--gold-2);color:#fff}
.viz-actions .btn-mini svg{flex-shrink:0}

@media(max-width:680px){
  .viz-actions{
    bottom:14px;padding:6px 6px 6px 14px;
    flex-wrap:wrap;
  }
  .viz-actions .lbl{display:none}
  .viz-actions .btn-mini{font-size:11px;padding:8px 12px}
}

/* ---------- Below-frame info strip ---------- */
.viz-below{
  background:#0a0d12;color:#fff;
  padding:30px clamp(24px,4vw,60px);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:20px;
  border-top:1px solid rgba(255,255,255,.06);
}
.viz-below .stat{
  font-family:var(--serif);font-size:22px;font-weight:300;
  color:rgba(255,255,255,.85);
}
.viz-below .stat strong{color:var(--gold-2);font-weight:400}
.viz-below .ctas{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Help section underneath ---------- */
.viz-help{
  background:#fff;
  padding:clamp(60px,8vw,100px) 0;
  border-bottom:1px solid var(--line);
}
.viz-help .head{text-align:center;margin-bottom:50px;max-width:680px;margin-left:auto;margin-right:auto}
.viz-help .head h2{font-size:clamp(30px,4vw,46px);margin-bottom:10px}
.viz-help .head h2 em{font-style:italic;color:var(--gold)}
.viz-help .head p{color:var(--muted);font-size:15px;line-height:1.6}

.viz-tips{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media(max-width:880px){.viz-tips{grid-template-columns:1fr}}
.viz-tip{
  display:flex;flex-direction:column;gap:14px;
  padding:28px;border-radius:12px;
  background:var(--bg-2);border:1px solid var(--line);
  transition:all .25s var(--ease);
}
.viz-tip:hover{
  background:#fff;
  border-color:rgba(176,134,84,.3);
  transform:translateY(-3px);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.1);
}
.viz-tip .ico{
  width:44px;height:44px;border-radius:10px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%);
  display:grid;place-items:center;color:#fff;
}
.viz-tip h4{font-family:var(--serif);font-size:20px;font-weight:500;margin-bottom:4px}
.viz-tip p{font-size:13px;color:var(--muted);line-height:1.6}