/* =========================================================
   dogvision.css
   Wildridge: "See through your dogs eyes" interactive tool.
   Page-scoped: loaded only on dog-vision.php via $head_extra,
   so it never ships on the rest of the site. Reuses the global
   tokens (colors.css) and primitives (.container/.label/.btn).
   ========================================================= */

/* ---------- page intro ---------- */
.dv-hero{padding-bottom:0}
.dv-hero .label{display:block;margin-bottom:16px}
.dv-hero h1{font-size:clamp(2.5rem,6vw,4.4rem);font-weight:400;letter-spacing:-.01em;max-width:18ch}
.dv-hero h1 em{font-style:italic;color:var(--pine)}
.dv-lead{margin-top:20px;max-width:56ch;color:var(--bark);
  font-size:clamp(1.05rem,1.7vw,1.24rem);line-height:1.6}

/* ---------- the tool ---------- */
.dv-tool{padding-top:clamp(34px,5vw,52px)}
.dv-stage{max-width:760px;margin-inline:auto}

/* viewport card */
.dv-view{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius-lg);
  overflow:hidden;background:#1c1712;border:1px solid var(--border-primary);
  box-shadow:0 26px 60px -34px rgba(43,33,24,.6)}
.dv-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}

/* idle / message overlay */
.dv-overlay{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:28px;background:
    radial-gradient(120% 90% at 50% 18%, rgba(210,158,77,.16), transparent 60%),
    linear-gradient(170deg,#cfdbe0 0%,#d8cfa8 48%,#9fae84 100%)}
.dv-overlay[hidden]{display:none}
.dv-overlay .slot-grain{position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.dv-overlay-inner{position:relative;max-width:38ch}
.dv-overlay-inner .dv-paw{font-size:2rem;line-height:1;margin-bottom:6px}
.dv-overlay-inner h2{font-size:clamp(1.4rem,3vw,2rem);color:var(--ink);margin-bottom:8px}
.dv-overlay-inner p{font-size:.95rem;color:var(--bark);margin:0 auto 22px;line-height:1.6}
.dv-overlay-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* live mode badge */
.dv-mode-badge{position:absolute;left:14px;top:14px;z-index:3;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream);background:rgba(28,23,18,.55);backdrop-filter:blur(4px);
  padding:.45em .8em;border-radius:var(--radius-pill);pointer-events:none;
  opacity:0;transition:opacity var(--transition-fast)}
.dv-view.is-live .dv-mode-badge{opacity:1}

/* ---------- controls ---------- */
.dv-controls{margin-top:18px;display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap}
.dv-controls[hidden]{display:none}

/* segmented you / dog toggle */
.dv-toggle{display:inline-flex;background:var(--bone);border:1px solid var(--border-primary);
  border-radius:var(--radius-pill);padding:4px}
.dv-toggle button{appearance:none;border:0;cursor:pointer;background:none;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bark);padding:.55em .95em;border-radius:var(--radius-pill);
  transition:background var(--transition-fast),color var(--transition-fast)}
.dv-toggle button[aria-pressed="true"]{background:var(--pine);color:var(--bone)}

/* round icon buttons */
.dv-icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid rgba(63,94,65,.32);border-radius:50%;background:var(--bone);color:var(--pine);
  cursor:pointer;transition:transform var(--transition-fast),border-color var(--transition-fast),
    background var(--transition-fast)}
.dv-icon:hover{border-color:var(--pine);background:rgba(63,94,65,.08);transform:translateY(-2px)}
.dv-icon svg{width:20px;height:20px;display:block;fill:currentColor}
.dv-capture{width:54px;height:54px}
.dv-capture svg{width:24px;height:24px}

/* full-screen toggle (corner of the view; CSS-based so it works on iOS too) */
.dv-fs-btn{position:absolute;top:12px;right:12px;z-index:5;width:40px;height:40px;display:none;
  align-items:center;justify-content:center;border:0;border-radius:50%;color:var(--cream);
  background:rgba(28,23,18,.55);backdrop-filter:blur(4px);cursor:pointer;
  transition:background var(--transition-fast)}
.dv-view.is-live .dv-fs-btn{display:inline-flex}
.dv-fs-btn:hover{background:rgba(28,23,18,.78)}
.dv-fs-btn svg{width:20px;height:20px;fill:currentColor;display:block}
.dv-fs-btn .dv-fs-close{display:none}
.dv-view.is-fullscreen{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;
  aspect-ratio:auto;border-radius:0;border:0;z-index:9998;background:#000}
.dv-view.is-fullscreen .dv-fs-open{display:none}
.dv-view.is-fullscreen .dv-fs-close{display:block}

/* status line (aria-live) */
.dv-status{min-height:1.2em;margin-top:14px;text-align:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.dv-status.is-error{color:var(--beef)}

/* privacy note */
.dv-privacy{margin-top:10px;text-align:center;font-size:.82rem;color:var(--stone);max-width:48ch;
  margin-inline:auto;line-height:1.5}
.dv-privacy b{color:var(--bark);font-weight:600}

/* hidden helper elements */
.dv-srcvideo,.dv-fileinput{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* ---------- science section ---------- */
.dv-science{background:var(--bg-secondary)}
.dv-science .section-heading{text-align:center;max-width:620px;margin-inline:auto}
.dv-science .section-heading p{color:var(--bark);margin-top:14px}
.dv-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);
  gap:22px 36px;max-width:900px;margin-inline:auto}
.dv-facts li{position:relative;padding-left:46px}
.dv-facts .dv-fn{position:absolute;left:0;top:2px;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.1em;color:var(--wheat)}
.dv-facts b{display:block;font-family:var(--display);font-size:1.18rem;color:var(--ink);margin-bottom:5px}
.dv-facts p{margin:0;font-size:.95rem;color:var(--bark);line-height:1.6}

/* ---------- faq ---------- */
.dv-faq .section-heading{text-align:center;max-width:560px;margin-inline:auto}
.dv-faq-list{max-width:760px;margin:0 auto}
.dv-faq-item{border-bottom:1px solid var(--border-secondary);padding:22px 0}
.dv-faq-item h3{font-family:var(--display);font-size:1.2rem;font-weight:600;color:var(--pine);margin-bottom:8px}
.dv-faq-item p{margin:0;color:var(--bark);font-size:.97rem;line-height:1.7}

/* ---------- responsive ---------- */
@media(max-width:680px){
  .dv-facts{grid-template-columns:1fr}
  .dv-view{aspect-ratio:3/4}
}
@media(prefers-reduced-motion:reduce){
  .dv-icon:hover{transform:none}
}