/* ===== Sports Carnival: industry hero phone component (.sc-hero-phones) =====
 * Shared by the /industries/* pillar heroes (help tickets #276–#286). Pages only
 * swap screenshots; markup comes from resources/views/partials/marketing/hero-phones.blade.php.
 *   .sc-hero-phones.is-double  → two overlapping phones (.sc-phone.back / .sc-phone.front)
 *   .sc-hero-phones.is-single  → one centred phone
 * Brand gradient colours (#5cc4ff, #9c7bff, #ff6ea4) are baked in as rgba so the
 * component is self-contained on any dark marketing hero.
 */
.sc-hero-phones{position:relative;width:100%;max-width:560px;aspect-ratio:1/1.08;margin-inline:auto;isolation:isolate}

/* pop of colour: brand gradient glow + soft ring behind the phones */
.sc-hero-phones::before{content:"";position:absolute;inset:2% -2% 0% -2%;z-index:-2;border-radius:50%;
  background:radial-gradient(closest-side at 30% 40%,rgba(92,196,255,.75),transparent 70%),
             radial-gradient(closest-side at 70% 35%,rgba(156,123,255,.7),transparent 72%),
             radial-gradient(closest-side at 55% 75%,rgba(255,110,164,.7),transparent 70%);
  filter:blur(30px);opacity:.85}
.sc-hero-phones::after{content:"";position:absolute;left:50%;top:50%;width:86%;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;border-radius:50%;
  border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 80px rgba(140,123,255,.12)}

/* frosted, see-through titanium-style frame */
.sc-phone{position:absolute;width:47%;aspect-ratio:9/19.5;border-radius:15% / 7%;padding:3.2%;
  background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.06) 40%,rgba(255,255,255,.14) 70%,rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.75),0 18px 36px -18px rgba(92,196,255,.35),inset 0 0 0 1px rgba(255,255,255,.08),inset 0 2px 6px rgba(255,255,255,.25)}

/* blue → pink rim light on the frame edge */
.sc-phone::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:linear-gradient(160deg,rgba(92,196,255,.9),rgba(156,123,255,.25) 35%,transparent 55%,rgba(255,110,164,.8));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}

/* side buttons: class sc-phone-btn, deliberately not the marketing CTA button class */
.sc-phone-btn{position:absolute;width:1.4%;background:rgba(255,255,255,.35);border-radius:2px}
.sc-phone-btn.b1{left:-1.4%;top:18%;height:5%}
.sc-phone-btn.b2{left:-1.4%;top:26%;height:9%}
.sc-phone-btn.b3{right:-1.4%;top:24%;height:12%}

.sc-screen{position:relative;width:100%;height:100%;border-radius:12.5% / 5.8%;overflow:hidden;background:#000;box-shadow:0 0 0 2px rgba(0,0,0,.85)}
.sc-screen img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top}

/* dynamic island */
.sc-screen::before{content:"";position:absolute;top:1.6%;left:50%;width:30%;height:3.4%;transform:translateX(-50%);background:#000;border-radius:999px;z-index:2}

/* glass reflection over the screen */
.sc-screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 28%,transparent 42%)}

/* layouts */
.sc-hero-phones.is-double .sc-phone.back{left:4%;top:3%;transform:rotate(-7deg);opacity:.92;filter:saturate(.95)}
.sc-hero-phones.is-double .sc-phone.front{right:4%;top:10%;transform:rotate(5deg);z-index:2}
.sc-hero-phones.is-single .sc-phone{width:50%;left:25%;top:4%;transform:rotate(-4deg)}

/* stacks under the hero copy at the same breakpoint the industry .hero-grid collapses */
@media (max-width:950px){.sc-hero-phones{max-width:420px}}

/* gentle float; off for prefers-reduced-motion */
@media (prefers-reduced-motion:no-preference){
  .sc-phone{animation:sc-phone-float 7s ease-in-out infinite}
  .sc-phone.back{animation-delay:-3.5s}
  @keyframes sc-phone-float{50%{translate:0 -8px}}
}