/* TwinPare Health & Fitness — visual refresh phase 1
   Goal: premium presentation of real product screenshots without changing product claims. */

.health-v2__hero-visual {
  min-height: 650px !important;
  isolation: isolate;
}

.health-v2__hero-visual::before {
  content: "";
  position: absolute;
  inset: 7% 2% 8% 0;
  z-index: -2;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 44px;
  background:
    radial-gradient(circle at 30% 18%, rgba(0,229,255,.16), transparent 34%),
    radial-gradient(circle at 78% 22%, rgba(187,134,252,.18), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 40px 110px rgba(0,0,0,.24);
  backdrop-filter: blur(18px);
}

.health-v2__hero-visual::after {
  content: "";
  position: absolute;
  width: 76%;
  height: 24%;
  left: 12%;
  bottom: 2%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,229,255,.16), rgba(187,134,252,.08) 42%, transparent 72%);
  filter: blur(26px);
  opacity: .82;
}

.health-v2__hero-visual > .health-v2__phone {
  display: block !important;
  content: normal !important;
  padding: 5px;
  background: linear-gradient(145deg, #151923, #05070c 60%, #1a1f2a);
  border: 1px solid rgba(255,255,255,.17);
  outline: 1px solid rgba(0,0,0,.72);
  object-fit: cover;
  filter: saturate(.98) contrast(1.02);
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease;
}

.health-v2__hero-visual > .health-v2__phone--main {
  width: 300px !important;
  left: 4% !important;
  top: 12px !important;
  z-index: 3 !important;
  transform: rotate(-3.5deg) translateZ(0) !important;
  box-shadow:
    0 45px 95px rgba(0,0,0,.48),
    0 0 0 1px rgba(0,229,255,.08),
    0 0 46px rgba(0,229,255,.08);
}

.health-v2__hero-visual > .health-v2__phone--second {
  width: 252px !important;
  right: 2% !important;
  top: 96px !important;
  z-index: 2 !important;
  opacity: .92 !important;
  transform: rotate(5deg) translateZ(0) !important;
  box-shadow:
    0 38px 82px rgba(0,0,0,.42),
    0 0 0 1px rgba(187,134,252,.09),
    0 0 42px rgba(187,134,252,.07);
}

@media (hover:hover) and (pointer:fine) {
  .health-v2__hero-visual:hover > .health-v2__phone--main {
    transform: rotate(-2.2deg) translateY(-8px) !important;
  }

  .health-v2__hero-visual:hover > .health-v2__phone--second {
    transform: rotate(3.6deg) translateY(-4px) !important;
    opacity: 1 !important;
  }
}

html[data-color-mode="light"] body.theme-health .health-v2__hero-visual::before {
  border-color: rgba(31,54,88,.09);
  background:
    radial-gradient(circle at 30% 18%, rgba(20,183,205,.14), transparent 34%),
    radial-gradient(circle at 78% 22%, rgba(121,91,231,.12), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(240,247,252,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 34px 80px rgba(28,45,70,.12);
}

html[data-color-mode="light"] body.theme-health .health-v2__hero-visual > .health-v2__phone {
  box-shadow: 0 38px 78px rgba(25,42,64,.18);
}

/* Phase 2 — replace the static overview banner presentation with a live composition
   made from verified TwinPare Health assets already in the repository. */
.health-v2__showcase {
  position: relative;
  min-height: 500px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 34px;
  background:
    radial-gradient(circle at 18% 20%, rgba(0,229,255,.13), transparent 33%),
    radial-gradient(circle at 82% 18%, rgba(187,134,252,.15), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  box-shadow: 0 34px 90px rgba(0,0,0,.22);
}

.health-v2__showcase::before,
.health-v2__showcase::after,
.health-v2__showcase > img {
  position: absolute;
  display: block;
  border-radius: 28px;
  background-color: #090b12;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 30px 72px rgba(0,0,0,.38);
}

.health-v2__showcase > img {
  content: url('/images/apps/health/latest-2026-08-26/home-energy-focus.webp');
  width: 42% !important;
  height: auto !important;
  max-height: none !important;
  left: 29%;
  top: 7%;
  z-index: 3;
  padding: 5px;
  object-fit: contain;
  transform: rotate(-1.5deg);
}

.health-v2__showcase::before,
.health-v2__showcase::after {
  content: "";
  width: 34%;
  aspect-ratio: 351 / 760;
  top: 18%;
  z-index: 2;
  padding: 5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.health-v2__showcase::before {
  left: 4%;
  background-image: url('/images/apps/health/latest-2026-08-26/my-health-overview.webp');
  transform: rotate(-6deg);
}

.health-v2__showcase::after {
  right: 4%;
  background-image: url('/images/apps/health/latest-2026-08-26/heart-trends.webp');
  transform: rotate(6deg);
}

.health-v2__showcase:hover > img {
  transform: rotate(-.7deg) translateY(-5px);
}

.health-v2__showcase > img,
.health-v2__showcase::before,
.health-v2__showcase::after {
  transition: transform .35s ease, box-shadow .35s ease;
}

html[data-color-mode="light"] body.theme-health .health-v2__showcase {
  border-color: rgba(31,54,88,.09);
  background:
    radial-gradient(circle at 18% 20%, rgba(20,183,205,.11), transparent 33%),
    radial-gradient(circle at 82% 18%, rgba(121,91,231,.10), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,247,252,.86));
  box-shadow: 0 30px 70px rgba(31,49,72,.12);
}

html[data-color-mode="light"] body.theme-health .health-v2__showcase::before,
html[data-color-mode="light"] body.theme-health .health-v2__showcase::after,
html[data-color-mode="light"] body.theme-health .health-v2__showcase > img {
  box-shadow: 0 26px 58px rgba(31,49,72,.18);
}

@media(max-width:980px) {
  .health-v2__hero-visual {
    min-height: 570px !important;
    width: min(100%, 560px);
    margin-inline: auto;
  }

  .health-v2__hero-visual::before {
    inset: 5% 4% 8%;
  }

  .health-v2__hero-visual > .health-v2__phone--main {
    width: 270px !important;
    left: 8% !important;
  }

  .health-v2__hero-visual > .health-v2__phone--second {
    width: 225px !important;
    right: 6% !important;
    top: 88px !important;
  }

  .health-v2__showcase {
    min-height: 460px;
  }
}

@media(max-width:620px) {
  .health-v2__hero-visual {
    min-height: 430px !important;
    margin-top: 18px;
  }

  .health-v2__hero-visual::before {
    inset: 5% 1% 7%;
    border-radius: 30px;
  }

  .health-v2__hero-visual::after {
    width: 88%;
    left: 6%;
    bottom: 0;
  }

  .health-v2__hero-visual > .health-v2__phone {
    padding: 3px;
    border-radius: 30px !important;
  }

  .health-v2__hero-visual > .health-v2__phone--main {
    width: 205px !important;
    left: 5% !important;
    top: 8px !important;
  }

  .health-v2__hero-visual > .health-v2__phone--second {
    width: 174px !important;
    right: 2% !important;
    top: 82px !important;
  }

  .health-v2__showcase {
    min-height: 390px;
    border-radius: 28px;
  }

  .health-v2__showcase > img {
    width: 49% !important;
    left: 25.5%;
    top: 5%;
  }

  .health-v2__showcase::before,
  .health-v2__showcase::after {
    width: 38%;
    top: 20%;
  }

  .health-v2__showcase::before { left: 1%; }
  .health-v2__showcase::after { right: 1%; }
}