/*
  The homepage hero telephone: the drawing, its two tags and all hero motion. The final
  state (handset lifted, both bubbles shown, "Ring ring!" tag and ring waves hidden) is
  the plain CSS; every animation is layered on and skipped under reduced motion. Layout
  and bubbles live in home-hero.css.
  Timeline: the cradle shakes and the ring waves play 0.05 to 1.2 s, the "Ring ring!" tag
  0 to 1.3 s, the handset rattles until 0.75 s then lifts until 1.5 s, the assistant
  bubble pops at 1.25 s, its 15 words arrive 1.6 to about 2.8 s, "Answers 24/7" pops at
  1.9 s, the caller bubble at 3.1 s and its 8 words 3.4 to about 4.0 s. Words fade in with
  a linear 10 ms animation: a step-end one can finish at opacity 0 when the timeline
  rounds the end down. The word delays assume the word counts in index.html.
*/
/* the telephone. cqw is a percentage of .hp-stage's width (its container-type is set in
   home-hero.css). The negative top margin tucks the phone up under the speech bubbles. */
.hp-phone {
  position: relative;
  z-index: 1;
  width: 90cqw;
  margin: -17cqw 0 0 -3cqw;
}
.hp-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  stroke: var(--text);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* p-ink-fill is the hard drop shadow: a --text copy of a shape, offset 5 to 8 px in the
   markup and drawn under the real shape */
.hp-art .p-ink-fill,
.hp-art .p-ink-fill * {
  fill: var(--text);
}
.hp-art .p-ink-stroke {
  fill: none;
  stroke-width: 36;
  stroke: var(--text);
}
.hp-art .p-body,
.hp-art .p-horn {
  fill: var(--accent-yellow);
}
.hp-art .p-shine {
  fill: none;
  stroke: var(--surface);
  stroke-width: 6;
}
.hp-art .p-plate {
  fill: var(--surface);
}
.hp-art .p-holes circle {
  fill: var(--accent-yellow);
  stroke-width: 3;
}
.hp-art .p-stop {
  stroke-width: 6;
}
.hp-art .p-hub {
  fill: var(--primary);
}
.hp-art .p-hub-t {
  fill: var(--on-primary);
  stroke: none;
  font: 400 15px var(--display);
  letter-spacing: 0.04em;
  text-anchor: middle;
}
.hp-art .p-cord-ink {
  fill: none;
  stroke-width: 13;
  stroke-linecap: butt;
}
/* layered strokes: the cord is a thick ink line with a --bg dashed line on top, so the
   gaps read as coils */
.hp-art .p-cord-gap {
  fill: none;
  stroke: var(--bg);
  stroke-width: 15;
  stroke-linecap: butt;
  stroke-dasharray: 2.5 5.5;
}
/* the handset grip is a dark wider stroke (p-grip-edge) under the pink one (p-grip), which
   leaves a dark outline on both sides */
.hp-art .p-grip-edge {
  fill: none;
  stroke-width: 36;
}
.hp-art .p-grip {
  fill: none;
  stroke: var(--accent-pink);
  stroke-width: 28;
  stroke-linecap: butt;
}
.hp-art .p-cup {
  fill: var(--accent-pink);
}
.hp-art .p-vents circle {
  fill: var(--text);
  stroke: none;
}
.hp-art .p-badge use {
  fill: var(--primary);
  stroke: var(--text);
  stroke-width: 3;
}
.hp-art .p-badge-t {
  fill: var(--on-primary);
  stroke: none;
  font: 400 30px var(--display);
  letter-spacing: 0.02em;
  text-anchor: middle;
}
.hp-art .p-arcs path {
  fill: none;
  stroke: var(--primary);
  stroke-width: 6;
}
.hp-art .p-arcs {
  opacity: 0;
}

/* final state: the handset hinges on the mouthpiece and the earpiece rises. The same pose
   is the last keyframe of hplift below: change both together. */
.hp-art .p-handset {
  transform-origin: 274px 150px;
  transform: translate(0, -10px) rotate(30deg);
}

.hp-ringtag,
.hp-247 {
  position: absolute;
  z-index: 3;
  padding: 5px 12px 3px;
  border: 3px solid var(--text);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--text);
  font: 400 1.125rem/1 var(--display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* the tag is a ring-time cue only: it shows during hpring and is hidden otherwise, so
   under reduced motion (no animation) it never appears */
.hp-ringtag {
  top: 22%;
  right: -2%;
  background: var(--accent-orange);
  opacity: 0;
  transform: rotate(8deg);
}
.hp-247 {
  left: -6px;
  bottom: 4px;
  background: var(--accent-pink);
  transform: rotate(-6deg);
}

/* ---------- animation (skipped under reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hp-ai {
    animation: hppop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 1.25s both;
  }
  .hp-caller {
    animation: hppop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) 3.1s both;
  }
  .hp-line .w {
    animation: hpword 0.01s linear both;
    animation-delay: calc(1.6s + var(--i) * 0.085s);
  }
  .hp-line .w.c {
    animation-delay: calc(3.4s + var(--i) * 0.085s);
  }
  .hp-wave i {
    animation: hpwave 0.8s ease-in-out 1.4s infinite alternate;
  }
  .hp-wave i:nth-child(2n) {
    animation-duration: 0.6s;
    animation-delay: 1.5s;
  }
  .hp-wave i:nth-child(3n) {
    animation-duration: 0.95s;
    animation-delay: 1.3s;
  }
  .hp-art .p-jig {
    transform-origin: 180px 318px;
    animation: hpjig 0.28s ease-in-out 0.1s 4;
  }
  .hp-art .p-handset {
    animation: hplift 1.5s both;
  }
  .hp-art .p-arcs {
    animation: hparcs 1.1s linear 0.05s both;
  }
  .hp-ringtag {
    animation: hpring 1.3s ease-in-out both;
  }
  .hp-247 {
    animation: hpsticker 0.4s cubic-bezier(0.3, 1.8, 0.5, 1) 1.9s both;
  }
}
@keyframes hppop {
  from {
    opacity: 0;
    transform: scale(0.6) translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hpword {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes hpwave {
  from {
    transform: scaleY(0.25);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes hpjig {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-2.2deg) translateX(-2px);
  }
  75% {
    transform: rotate(2.2deg) translateX(2px);
  }
}
/* rattles on the cradle until 0.75 s, then lifts; the last frame matches .p-handset above */
@keyframes hplift {
  0% {
    transform: none;
  }
  8% {
    transform: translate(0, -5px) rotate(-2deg);
  }
  16% {
    transform: none;
  }
  24% {
    transform: translate(0, -5px) rotate(2deg);
  }
  32% {
    transform: none;
  }
  40% {
    transform: translate(0, -5px) rotate(-2deg);
  }
  50% {
    transform: none;
  }
  100% {
    transform: translate(0, -10px) rotate(30deg);
    animation-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1);
  }
}
@keyframes hparcs {
  0%,
  100% {
    opacity: 0;
  }
  15%,
  45% {
    opacity: 1;
  }
  55% {
    opacity: 0.15;
  }
  70% {
    opacity: 1;
  }
  90% {
    opacity: 0.6;
  }
}
@keyframes hpring {
  0%,
  80% {
    opacity: 1;
    transform: rotate(8deg) scale(1);
  }
  10%,
  30%,
  50% {
    transform: rotate(12deg) scale(1.1);
  }
  20%,
  40%,
  60% {
    transform: rotate(5deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(8deg) scale(0.7);
  }
}
@keyframes hpsticker {
  from {
    opacity: 0;
    transform: rotate(-6deg) scale(0.4);
  }
  to {
    opacity: 1;
    transform: rotate(-6deg);
  }
}