/* ==========================================================================
   Adovvy V4 — shared components
   MediaPlaceholder · Avatar · ChatMessage · Message · Chip · Tile · Stat ·
   Field · the border light (.ring) · the cursor sheen (.lift) · reveals
   ========================================================================== */

/* --- MediaPlaceholder -------------------------------------------------------
   Holds the aspect ratio, crop and focal point of an asset that is still to
   come, so the layout is final before the file is. Press G (or ?guides=1)
   to show every region's label, ratio and focal point. */
.ph {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 64% at var(--focal-x, 50%) var(--focal-y, 46%), rgba(72, 87, 194, .10), transparent 72%),
    linear-gradient(160deg, var(--sand), var(--sand-2));
}
.ph--ratio { aspect-ratio: var(--ratio, 4 / 3); }
.ph--cover { position: absolute; inset: 0; }
.ph__img,
.ph__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focal-x, 50%) var(--focal-y, 50%);
}
.ph__video { opacity: 0; transition: opacity .8s var(--ease-out); }
.ph.is-video-ready .ph__video { opacity: 1; }
.ph__todo {
  position: absolute;
  inset: auto 14px 14px auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line-2);
  font: 600 11px/1 var(--font);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ph__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(72, 87, 194, .28);
  font-size: clamp(56px, 8vw, 110px);
}
.ph__guide { display: none; }
body.guides .ph__guide {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 1.5px dashed rgba(72, 87, 194, .7);
}
body.guides .ph__guide::after {
  content: attr(data-label);
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 6px 9px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: 600 11px/1.3 var(--font);
  max-width: calc(100% - 20px);
}

/* --- Brand marks ------------------------------------------------------------
   Facebook's mark is drawn from the sprite in currentColor, so it takes its
   brand blue here, wherever it appears, whatever its container's colour. */
.ico-fb { color: #1877F2; }

/* --- Avatar: initials on a tinted disc until a photo is supplied ---------- */
.avatar {
  flex: none;
  width: var(--av, 40px);
  height: var(--av, 40px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font: 700 calc(var(--av, 40px) * .34)/1 var(--font);
  box-shadow: 0 0 0 1px rgba(72, 87, 194, .12) inset;
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--b { background: var(--green-tint); color: var(--green-ink); box-shadow: 0 0 0 1px rgba(22, 121, 71, .14) inset; }
.avatar--c { background: var(--t-sky); color: var(--i-sky); box-shadow: 0 0 0 1px rgba(11, 110, 153, .16) inset; }

/* --- ChatMessage: the hero's conversation cards ------------------------------ */
.cmsg { display: flex; gap: 12px; align-items: flex-end; width: 100%; max-width: var(--cw, 420px); }
.cmsg__bubble {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px 20px 20px 6px;
  padding: 14px 18px 15px;
  box-shadow: var(--e-2);
  transition: transform var(--t-med) var(--ease-soft), box-shadow var(--t-med) var(--ease-out), border-color var(--t-med);
}
.cmsg:hover .cmsg__bubble { transform: translateY(-3px); box-shadow: var(--e-3); border-color: var(--accent-soft); }
.cmsg--out { flex-direction: row-reverse; }
.cmsg--out .cmsg__bubble { border-radius: 20px 20px 6px 20px; background: var(--accent); border-color: transparent; }
.cmsg--out .cmsg__text { color: #fff; }
.cmsg--out .cmsg__meta { color: rgba(255, 255, 255, .78); }
.cmsg__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  font: 600 11px/1 var(--font);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}
.cmsg__meta img,
.cmsg__meta svg { width: 14px; height: 14px; flex: none; object-fit: contain; }
.cmsg__time { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; }
.cmsg__text { margin: 0; font: 400 15px/1.45 var(--font); color: var(--ink); }
.cmsg--lead .cmsg__text { font: 500 clamp(16px, 1.35vw, 18.5px)/1.4 var(--font); }
.cmsg__typing { display: flex; align-items: center; gap: 5px; height: 20px; }
.cmsg__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-soft); display: block; }
.cmsg--out .cmsg__typing i { background: rgba(255, 255, 255, .8); }
.is-live-section .cmsg__typing i { animation: typedot 1.25s var(--ease-in-out) infinite; }
.is-live-section .cmsg__typing i:nth-child(2) { animation-delay: .16s; }
.is-live-section .cmsg__typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typedot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}
.cmsg__voice { display: flex; align-items: center; gap: 12px; }
.cmsg__play {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
}
.cmsg__wave { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; height: 26px; }
.cmsg__wave i {
  flex: 1;
  min-width: 2px;
  border-radius: 2px;
  background: var(--accent-soft);
  height: calc(6px + var(--h, .5) * 20px);
}
.is-live-section .cmsg--recording .cmsg__wave i {
  background: var(--accent);
  animation: wavebar 1.1s var(--ease-in-out) infinite;
  animation-delay: calc(var(--i, 0) * -0.055s);
}
@keyframes wavebar { 0%, 100% { transform: scaleY(.42); } 50% { transform: scaleY(1); } }
.cmsg__dur { flex: none; font: 600 12px/1 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.cmsg__rec { display: inline-flex; align-items: center; gap: 6px; color: var(--green-ink); text-transform: none; letter-spacing: 0; }
.cmsg__rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); display: block; }
.is-live-section .cmsg__rec i { animation: recpulse 1.9s var(--ease-in-out) -0.4s infinite; }
@keyframes recpulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--green-glow); }
  50%      { box-shadow: 0 0 0 6px rgba(77, 229, 129, 0); }
}

/* --- Message rows (the demo conversation) ------------------------------------- */
.msg {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  align-self: flex-start;
  max-width: 86%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px 18px 18px 6px;
  padding: 11px 16px 11px 11px;
  box-shadow: var(--e-1);
  font: 400 15px/1.45 var(--font);
  color: var(--ink);
}
.msg--out {
  align-self: flex-end;
  flex-direction: row-reverse;
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  border-radius: 18px 18px 6px 18px;
  padding: 11px 11px 11px 16px;
}
.msg__ch {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  overflow: hidden;
  font-size: 14px;
  color: var(--accent);
}
.msg--out .msg__ch { background: rgba(255, 255, 255, .18); color: #fff; }
.msg__ch img { width: 16px; height: 16px; object-fit: contain; }
.msg p { margin: 0; }
.msg b { font-weight: 600; }

/* --- Chips, pills, tags ---------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background: var(--card);
  border: 1px solid var(--line-2);
  font: 600 12.5px/1 var(--font);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip img,
.chip .icon { width: 15px; height: 15px; object-fit: contain; font-size: 15px; }
.chip--accent { background: var(--accent-tint); border-color: transparent; color: var(--accent-ink); }
.chip--green { background: var(--green-tint); border-color: transparent; color: var(--green-ink); }
.chip--on-deep { background: rgba(244, 242, 238, .08); border-color: rgba(244, 242, 238, .14); color: var(--on-deep); }

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 var(--green-glow);
  flex: none;
}
.is-live-section .live-dot { animation: recpulse 1.9s var(--ease-in-out) infinite; }

/* --- Icon tile -------------------------------------------------------------------- */
.itile {
  display: grid;
  place-items: center;
  width: var(--it, 44px);
  height: var(--it, 44px);
  border-radius: calc(var(--it, 44px) * .3);
  background: var(--tint, var(--accent-tint));
  color: var(--hue, var(--accent));
  font-size: calc(var(--it, 44px) * .48);
  flex: none;
}

/* --- Stat ------------------------------------------------------------------------ */
.stat b {
  display: block;
  font: 600 clamp(36px, 3.9vw, 56px)/1 var(--display);
  letter-spacing: -.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  margin-top: 10px;
  font: 600 12px/1.35 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.section--deep .stat b { color: var(--on-deep); }
.section--deep .stat span { color: var(--on-deep-3); }

/* --- Form fields (on the dark contact band) --------------------------------------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label {
  font: 600 12px/1 var(--font);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-deep-3);
}
.field input,
.field textarea {
  width: 100%;
  font: 400 15.5px/1.4 var(--font);
  color: #fff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(190, 198, 245, .26);
  border-radius: var(--r-md);
  padding: 15px 17px;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.field textarea { resize: vertical; min-height: 104px; }
.field input::placeholder,
.field textarea::placeholder { color: rgba(205, 210, 242, .5); }
.field input:hover,
.field textarea:hover { border-color: rgba(190, 198, 245, .45); }
.field input:focus,
.field textarea:focus { outline: none; border-color: var(--green); background: rgba(255, 255, 255, .09); }
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.field .err { font: 500 12.5px/1.3 var(--font); color: #FFB4B4; min-height: 1em; }
.field.is-invalid input,
.field.is-invalid textarea { border-color: #FF8E8E; }

/* --- The border light ----------------------------------------------------------------
   A single soft arc travelling a shape's stroke, masked to the ring so the
   surface underneath is untouched. Slow on purpose: a light on the border has
   somewhere to be at every moment, so it never reads as a flash going past. */
@property --ring { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.ring { position: relative; isolation: isolate; }
.ring::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: var(--ring-w, 1.5px);
  background: conic-gradient(from var(--ring, 0deg),
    transparent 0deg,
    rgba(142, 155, 255, 0) 30deg,
    rgba(142, 155, 255, var(--ring-a, .9)) 78deg,
    rgba(142, 155, 255, 0) 128deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
  pointer-events: none;
  z-index: 2;
}
.is-live-section .ring::after {
  opacity: 1;
  animation: ringTravel var(--ring-t, 9s) linear infinite;
  animation-delay: calc(var(--i, 0) * -1.6s);
}
@keyframes ringTravel { to { --ring: 360deg; } }

/* --- The cursor sheen --------------------------------------------------------------- */
.lift { position: relative; }
.lift::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(72, 87, 194, .08), transparent 64%);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.lift:hover::before { opacity: 1; }
.lift--deep::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(142, 155, 255, .16), transparent 64%); }

/* Anything marked data-reveal rises in when its section arrives. There is
   deliberately no CSS here: the reveal scene sets the starting state itself,
   because only JS may hide what JS is going to give back. A stylesheet rule
   hiding these would leave them invisible wherever the script did not run. */