/* ============================================================
   THE PLINTH — CSS phone mockup, shared component
   An obsidian handset seated in a champagne bezel, presented like
   a piece in a vitrine: breathing aura, travelling specular glare,
   and a soft ground shadow. Used on the hero, the download page
   and inside the arc carousel.
   Screen aspect is locked to the real capture ratio (1280x2800).
   ============================================================ */

.plinth {
  --dev-w: 300px;
  --dev-radius: 34px;
  position: relative;
  width: var(--dev-w);
  margin-inline: auto;
  isolation: isolate;
}

/* Breathing aura behind the handset */
.plinth::before {
  content: "";
  position: absolute;
  inset: -14% -26% -8%;
  z-index: -2;
  background:
    radial-gradient(ellipse 50% 42% at 50% 42%, var(--ruby-glow), transparent 70%),
    radial-gradient(ellipse 62% 30% at 50% 78%, rgba(201,169,97,.2), transparent 72%);
  filter: blur(30px);
  animation: plinth-aura 11s var(--ease-io) infinite;
}
@keyframes plinth-aura {
  0%, 100% { opacity: .68; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.07); }
}

/* Ground shadow */
.plinth::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -5%;
  width: 78%; height: 26px;
  translate: -50% 0;
  z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.86), transparent 72%);
  filter: blur(11px);
  animation: plinth-shadow 6.5s var(--ease-io) infinite;
}
@keyframes plinth-shadow {
  0%, 100% { transform: translateX(-50%) scaleX(1);    opacity: .85; }
  50%      { transform: translateX(-50%) scaleX(.86);  opacity: .62; }
}

/* The handset body */
.plinth-body {
  position: relative;
  border-radius: var(--dev-radius);
  padding: 9px;
  background:
    linear-gradient(150deg, var(--gold-400) 0%, var(--gold-700) 16%, #241a14 38%,
                    #17100f 62%, var(--gold-700) 86%, var(--gold-300) 100%);
  box-shadow:
    0 34px 74px -26px rgba(0,0,0,.92),
    0 2px 0 rgba(255,255,255,.1) inset,
    0 0 0 1px rgba(0,0,0,.6);
  animation: plinth-float 8.5s var(--ease-io) infinite;
}
@keyframes plinth-float {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%      { transform: translateY(-13px) rotate(-.5deg); }
}

/* Inner obsidian rim */
.plinth-screen {
  position: relative;
  border-radius: calc(var(--dev-radius) - 8px);
  background: var(--ink-abyss);
  overflow: hidden;
  aspect-ratio: 1280 / 2800;
  box-shadow: inset 0 0 0 2px #0b0708, inset 0 0 22px rgba(0,0,0,.9);
}
.plinth-screen img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}

/* Notch / pill island */
.plinth-notch {
  position: absolute;
  top: 8px; left: 50%;
  translate: -50% 0;
  z-index: 3;
  width: 30%; height: 15px;
  border-radius: 99px;
  background: #060405;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05);
}
.plinth-notch::after {
  content: "";
  position: absolute; right: 16%; top: 50%;
  translate: 0 -50%;
  width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a2f34, #0d090b 70%);
}

/* Travelling glass glare */
.plinth-glare {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.plinth-glare::before {
  content: "";
  position: absolute;
  top: -40%; left: -60%;
  width: 46%; height: 190%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13) 42%, rgba(255,255,255,.05) 58%, transparent);
  rotate: 16deg;
  animation: plinth-glare 7.5s var(--ease-io) infinite;
}
@keyframes plinth-glare {
  0%, 66%  { translate: 0 0;    opacity: 0; }
  70%      { opacity: 1; }
  100%     { translate: 340% 0; opacity: 0; }
}

/* Side hardware */
.plinth-btn {
  position: absolute;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold-600), var(--gold-800));
}
.plinth-btn.is-power  { right: -2px; top: 24%; height: 8%; }
.plinth-btn.is-vol-up { left: -2px;  top: 18%; height: 5%; }
.plinth-btn.is-vol-dn { left: -2px;  top: 25%; height: 5%; }

/* ---------- FLOATING INFO CHIPS ---------- */
.plinth-chip {
  position: absolute;
  z-index: 5;
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem .8rem;
  background: rgba(22,16,19,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--gold-hair);
  border-radius: var(--radius-sm);
  box-shadow: var(--sh-lg);
  white-space: nowrap;
  animation: chip-drift 7s var(--ease-io) infinite;
}
.plinth-chip-ico {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-xs);
  background: var(--ruby-tint);
  color: var(--ruby-300);
}
.plinth-chip-ico svg { width: 14px; height: 14px; }
.plinth-chip-ico.is-gold { background: var(--gold-tint); color: var(--gold-300); }
.plinth-chip-txt { display: flex; flex-direction: column; line-height: 1.25; }
.plinth-chip-txt b {
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700; color: var(--ink-50);
}
.plinth-chip-txt span {
  font-size: 10px; letter-spacing: var(--ls-micro); text-transform: uppercase; color: var(--ink-300);
}

@keyframes chip-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}
/* Anchored to the handset edge then pushed out by a share of their OWN width,
   so a chip always sits mostly beside the screen rather than on top of it,
   whatever the chip's text length. `translate` composes with the drift
   animation's `transform`, so the two do not fight. */
.plinth-chip.at-tl { top: 10%; left: 0;  translate: -72% 0; animation-delay: -1.2s; }
.plinth-chip.at-br { bottom: 16%; right: 0; translate: 72% 0; animation-delay: -3.4s; }
.plinth-chip.at-ml { top: 50%; left: 0;  translate: -80% 0; animation-delay: -5.1s; }

/* ---------- STACKED PAIR (download page) ---------- */
.plinth-pair {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 620px;
  padding-block: var(--sp-6);
}
.plinth-pair .plinth { position: absolute; }
.plinth-pair .plinth.is-back {
  --dev-w: 236px;
  z-index: 1;
  translate: -38% 0;
  rotate: -9deg;
  opacity: .82;
  filter: saturate(.85) brightness(.8);
}
.plinth-pair .plinth.is-back .plinth-body { animation-delay: -3s; }
.plinth-pair .plinth.is-front {
  --dev-w: 288px;
  z-index: 2;
  translate: 16% 0;
  rotate: 4deg;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .plinth::before, .plinth::after,
  .plinth-body, .plinth-chip { animation: none; }
  .plinth-glare { display: none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .plinth-pair { min-height: 540px; }
  .plinth-pair .plinth.is-back  { --dev-w: 206px; translate: -34% 0; }
  .plinth-pair .plinth.is-front { --dev-w: 252px; translate: 14% 0; }
}
@media (max-width: 620px) {
  .plinth { --dev-w: 232px; --dev-radius: 28px; }
  /* Less room beside the handset on a phone, so the chips tuck in closer
     and the middle one drops out entirely. */
  .plinth-chip { padding: .45rem .6rem; }
  .plinth-chip.at-tl { translate: -34% 0; }
  .plinth-chip.at-br { translate: 34% 0; }
  .plinth-chip.at-ml { display: none; }
  .plinth-pair { min-height: 440px; }
  .plinth-pair .plinth.is-back  { --dev-w: 168px; translate: -40% 0; }
  .plinth-pair .plinth.is-front { --dev-w: 206px; translate: 18% 0; }
}
@media (max-width: 380px) {
  .plinth { --dev-w: 200px; }
  .plinth-chip.at-tl, .plinth-chip.at-br { scale: .88; }
}