/* ============================================================
   HERO DIAL — the interactive AI receptionist on the homepage hero.

   The receptionist sits at the centre of a concentric instrument: a breathing
   ring, two slowly-turning arcs, and a live waveform that runs behind the
   portrait and out either side. The whole thing is one <button> carrying
   data-nvoice-demo, so js/nvoice-demo.js wires it up exactly like the old
   "Hear Nexwin in action" CTA it replaced. No JavaScript is added here —
   every state below is CSS.

   Only index.html uses this; the layout is scoped to .hero-section--dial so
   the flex hero on every other page is untouched.
   ============================================================ */

/* ── Hero layout: 2×2 grid so the dial can sit between the copy and the CTAs
      on mobile without duplicating markup ── */
.hero-section--dial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "copy    visuals"
    "actions visuals";
  column-gap: 48px;
  row-gap: 8px;
  align-items: start;
}

.hero-section--dial .hero-copy    { grid-area: copy; }
.hero-section--dial .hero-actions { grid-area: actions; }
.hero-section--dial .hero-visuals { grid-area: visuals; }

/* Right column: dial over product shot, sized by their own content rather
   than by whichever row of the left column they happened to land in. */
.hero-visuals {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  min-width: 0;
}

.hero-section--dial .hero-copy p:last-child { margin-bottom: 0; }
.hero-section--dial .hero-actions .hero-cta { margin-top: 0; }

/* ── The dial ── */
.hero-dial {
  --dial-size: clamp(238px, 19vw, 296px);
  --dial-teal: 56, 191, 161;
  --dial-cyan: 34, 211, 238;
  /* How far the arcs reach past the stage box — see .nx-arcs inset. Whatever
     sits above or below the dial has to clear this, not just the portrait. */
  --arc-overhang: calc(var(--dial-size) * 0.13);
  display: flex;
  justify-content: center;
  padding-top: var(--arc-overhang);
}

.nx-dial {
  display: block;
  width: 100%;
  max-width: 360px;
  padding: 0 0 4px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Circular stage holding the portrait and everything orbiting it */
.nx-dial-stage {
  position: relative;
  display: block;
  width: var(--dial-size);
  height: var(--dial-size);
  margin: 0 auto calc(var(--arc-overhang) + 18px);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Waveform: a voice line running through her, strongest where it meets
       the disc and fading out into the hero --- */
.nx-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--dial-size) * 1.62);
  height: calc(var(--dial-size) * 0.44);
  transform: translate(-50%, -50%) scaleY(1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 0;
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
  transition: transform 0.45s ease, opacity 0.45s ease;
}

.nx-wave-bar {
  flex: 1 1 auto;
  min-width: 2px;
  max-width: 3px;
  height: calc(100% * var(--a, 0.6));
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(var(--dial-cyan), 0.75), rgba(var(--dial-teal), 0.75));
  transform: scaleY(0.14);
  animation: nxWaveRipple 7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 0.085s);
}

/* Quiet for most of the cycle, then one ripple travels across — an active
   line, not a music equaliser. */
@keyframes nxWaveRipple {
  0%, 38%   { transform: scaleY(0.14); }
  46%       { transform: scaleY(0.78); }
  54%       { transform: scaleY(0.24); }
  62%, 100% { transform: scaleY(0.14); }
}

/* --- Orbiting arcs --- */
.nx-arcs {
  position: absolute;
  inset: -13%;
  width: 126%;
  height: 126%;
  z-index: 1;
  overflow: visible;
  fill: none;
  pointer-events: none;
}

.nx-arcs circle {
  transform-origin: 50% 50%;
  transition: stroke 0.4s ease, opacity 0.4s ease;
}

.nx-arc-outer {
  stroke: rgba(var(--dial-cyan), 0.55);
  stroke-width: 1;
  stroke-linecap: round;
  /* the circles carry pathLength="360", so dash units read as degrees */
  stroke-dasharray: 68 52;
  animation: nxSpin 26s linear infinite;
}

.nx-arc-inner {
  stroke: rgba(var(--dial-teal), 0.42);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 26 94;
  animation: nxSpin 34s linear infinite reverse;
}

@keyframes nxSpin {
  to { transform: rotate(360deg); }
}

/* --- Breathing ring --- */
.nx-dial-ring {
  position: absolute;
  inset: -13px;
  z-index: 2;
  border-radius: 50%;
  border: 1px solid rgba(var(--dial-teal), 0.7);
  box-shadow:
    0 0 0 7px rgba(var(--dial-teal), 0.05),
    0 0 30px rgba(var(--dial-teal), 0.2);
  animation: nxBreathe 2.8s ease-in-out infinite;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  pointer-events: none;
}

@keyframes nxBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.015); }
}

/* --- The portrait itself --- */
.nx-dial-face {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.nx-dial-face img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Melts the portrait's pale backdrop into the navy hero, so the disc reads as
   a lit surface rather than a white cut-out pasted on the page. */
.nx-dial-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 44%,
      rgba(5, 17, 34, 0) 40%,
      rgba(5, 17, 34, 0.4) 74%,
      rgba(5, 17, 34, 0.9) 99%),
    linear-gradient(160deg, rgba(var(--dial-cyan), 0.1), rgba(var(--dial-teal), 0.12));
  pointer-events: none;
}

/* --- Copy under the dial --- */
.nx-dial-label {
  display: block;
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.nx-dial-sub {
  display: block;
  max-width: 19em;
  margin: 7px auto 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
}

.nx-dial-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  padding: 5px 13px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.55);
  transition: border-color 0.3s ease, color 0.3s ease;
}

.nx-dial-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-color);
  box-shadow: 0 0 7px rgba(var(--dial-teal), 0.8);
  animation: nxDot 2.8s ease-in-out infinite;
}

@keyframes nxDot {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* --- Hover / focus --- */
.nx-dial:hover .nx-dial-stage,
.nx-dial:focus-visible .nx-dial-stage {
  transform: scale(1.025);
}

.nx-dial:hover .nx-dial-ring,
.nx-dial:focus-visible .nx-dial-ring {
  border-color: rgba(var(--dial-cyan), 0.85);
  box-shadow:
    0 0 0 6px rgba(var(--dial-cyan), 0.08),
    0 0 48px rgba(var(--dial-cyan), 0.3);
}

.nx-dial:hover .nx-arc-outer,
.nx-dial:focus-visible .nx-arc-outer { stroke: rgba(var(--dial-cyan), 0.7); }

.nx-dial:hover .nx-arc-inner,
.nx-dial:focus-visible .nx-arc-inner { stroke: rgba(var(--dial-teal), 0.5); }

.nx-dial:hover .nx-wave,
.nx-dial:focus-visible .nx-wave {
  transform: translate(-50%, -50%) scaleY(1.6);
  opacity: 0.95;
}

.nx-dial:hover .nx-dial-label,
.nx-dial:focus-visible .nx-dial-label {
  color: var(--primary-accent-color);
}

.nx-dial:hover .nx-dial-status,
.nx-dial:focus-visible .nx-dial-status {
  border-color: rgba(var(--dial-teal), 0.35);
  color: rgba(255, 255, 255, 0.78);
}

.nx-dial:active .nx-dial-stage { transform: scale(0.995); }

.nx-dial:focus { outline: none; }

.nx-dial:focus-visible {
  outline: 2px solid var(--primary-accent-color);
  outline-offset: 6px;
  border-radius: 20px;
}

/* ── Supporting product visuals — kept, just no longer the loudest thing
      on the right ── */
.hero-section--dial .hero-product-shot {
  flex: none;
  width: 100%;
  max-width: 480px;
  min-width: 0;
  margin: 0 auto;
  padding: 0 26px 30px 0;
}

.hero-section--dial .hero-phone-img { width: 152px; }

/* ── Tablet ── */
@media (max-width: 1024px) {
  .hero-section--dial { column-gap: 32px; }
  .hero-dial { --dial-size: clamp(180px, 21vw, 230px); }
  .hero-section--dial .hero-product-shot { max-width: 420px; }
  .hero-section--dial .hero-phone-img { width: 128px; }
}

/* Landscape tablets keep both columns — stacking here would push the
   receptionist below the fold, which is the one thing this hero can't afford. */
@media (max-width: 900px) {
  .hero-section--dial { column-gap: 24px; }
  .hero-dial { --dial-size: clamp(164px, 22vw, 196px); }
  .hero-section--dial .hero-product-shot { padding-right: 18px; }
  .hero-section--dial .hero-phone-img { width: 112px; }
  .nx-dial-label { font-size: 1.14rem; }
  .nx-dial-sub { font-size: 0.82rem; }
}

/* ── Stacked: headline → dial → CTAs → product shot ── */
@media (max-width: 820px) {
  .hero-section--dial {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "dial"
      "actions"
      "shot";
    row-gap: 30px;
  }

  /* The wrapper steps aside so the dial and the dashboard can take their own
     places in the stack, with the CTAs between them. */
  .hero-visuals { display: contents; }
  .hero-section--dial .hero-dial { grid-area: dial; }
  .hero-section--dial .hero-product-shot { grid-area: shot; }

  .hero-dial {
    --dial-size: clamp(196px, 44vw, 248px);
  }

  .hero-section--dial .hero-copy,
  .hero-section--dial .hero-actions {
    text-align: center;
  }

  .hero-section--dial .hero-copy p:last-child { margin-bottom: 0; }

  .hero-section--dial .hero-product-shot {
    max-width: 460px;
    padding: 0 40px 24px 0;
  }

  .hero-section--dial .hero-phone-img { width: 128px; }
}

@media (max-width: 560px) {
  .hero-section--dial { row-gap: 26px; }

  .hero-dial { --dial-size: clamp(180px, 52vw, 224px); }

  .nx-wave { width: calc(var(--dial-size) * 1.5); }

  .nx-dial-label { font-size: 1.1rem; }

  .nx-dial-sub {
    font-size: 0.84rem;
    max-width: 17em;
  }

  .hero-section--dial .hero-product-shot {
    max-width: 100%;
    padding: 0 22px 18px 0;
  }

  .hero-section--dial .hero-phone-img {
    right: 0;
    width: min(104px, 30vw);
  }
}

/* ── Product page (ai-phone-receptionist-australia.html) ──
   That page's own hero (nvoice.css .nvoice-hero--product) is a centred flex
   layout below 900px, because that is where *it* stacks. The dial layout holds
   two columns down to 820px, so across that band re-assert the left alignment;
   below 820px the shared stacked rules take over and centring is correct again. */
@media (min-width: 821px) and (max-width: 900px) {
  .hero-section--dial.nvoice-hero--product .hero-content {
    align-items: flex-start;
    text-align: left;
  }

  .hero-section--dial.nvoice-hero--product h1,
  .hero-section--dial.nvoice-hero--product .trust-certifications {
    text-align: left;
  }

  .hero-section--dial.nvoice-hero--product .nvoice-cta-buttons {
    justify-content: flex-start;
  }
}

/* This page's copy runs to four paragraphs, so the right column is much shorter
   than the left. Stretch it over both rows and push the two visuals apart, so
   the dial stays level with the headline and the dashboard lands beside the
   CTAs — the slack goes between them instead of pooling at the bottom.
   The shot also keeps the wider 560px cap nvoice.css gave it. */
.hero-section--dial.nvoice-hero--product .hero-visuals {
  align-items: center;
  align-self: stretch;
  justify-content: space-between;
}

/* Sized up a little from the homepage's dial: this is the page where someone
   is deciding whether the voice is good enough, so the demo carries more of
   the work here. Desktop only — this selector outranks the responsive tiers
   above, so leaving it unscoped would freeze the dial at 220px on phones. */
@media (min-width: 901px) {
  .hero-section--dial.nvoice-hero--product .hero-dial {
    --dial-size: clamp(246px, 21vw, 327px);
  }
}

/* The right column runs much taller than the copy on this page (dial + a
   recorded call + the dashboard), and .hero-visuals spans both rows. When both
   rows are sized `auto` they are both intrinsic, so the grid shares that extra
   height between them and opens a hole between the last paragraph and the CTAs
   — 75px before the recording went in, 172px after.

   Making row 2 flexible takes it out of intrinsic sizing, so the spanning
   column's slack lands there instead of being split: the buttons sit directly
   under the copy (8px row-gap) and the leftover space falls to the bottom of
   the column, where it reads as ordinary ragging rather than a gap.
   Two-column band only; below 821px the hero is a single stacked column. */
@media (min-width: 821px) {
  .hero-section--dial.nvoice-hero--product { grid-template-rows: auto 1fr; }
}

.hero-section--dial.nvoice-hero--product .hero-product-shot { max-width: 560px; }

.hero-section--dial.nvoice-hero--product .hero-browser { max-width: 500px; }

.hero-section--dial.nvoice-hero--product .hero-phone-img { width: 164px; }

/* The recorded call in this page's hero takes its own row once the hero
   stacks. The block's own styling lives in css/call-record.css. */
@media (max-width: 820px) {
  /* Only this page has a recording in the hero, so only this page gets the
     extra row — adding "call" to the shared area list would give every other
     dial hero an empty row and its row-gap as trailing dead space. */
  .hero-section--dial.nvoice-hero--product {
    grid-template-areas:
      "copy"
      "dial"
      "actions"
      "shot"
      "call";
  }

  .hero-section--dial .call-record { grid-area: call; }

  .call-record--hero {
    max-width: 430px;
    margin: 0 auto;
  }
}

/* ── Reduced motion: the instrument holds still, everything still works ── */
@media (prefers-reduced-motion: reduce) {
  .nx-arc-outer,
  .nx-arc-inner,
  .nx-dial-ring,
  .nx-dial-dot,
  .nx-wave-bar {
    animation: none;
  }

  .nx-wave-bar { transform: scaleY(0.22); }

  .nx-dial-stage,
  .nx-wave,
  .nx-dial-ring {
    transition: none;
  }

  .nx-dial:hover .nx-dial-stage,
  .nx-dial:focus-visible .nx-dial-stage {
    transform: none;
  }

  .nx-dial:hover .nx-wave,
  .nx-dial:focus-visible .nx-wave {
    transform: translate(-50%, -50%);
  }
}