/* ============================================================
   Hero banner — SMSACTIVE
   "Virtual numbers and emails for receiving SMS codes" card: map
   background with live location pins + an animated phone mockup
   streaming notification cards. Self-contained component: include this
   file + hero-banner.js + brand-icons.js + activation-data.js + the
   markup below wherever the hero should appear — it renders itself on
   load, no other wiring needed. Uses --blue-dark/--blue-mid/--blue-
   bright already defined on :root by service-panel.css/activations.css,
   so it doesn't redeclare them.
   ============================================================ */

/* Same 1650px cap + centering + horizontal padding every other section
   on the page uses (.act-layout, .site-header__bar, ...), so the card
   lines up with them edge-to-edge instead of sitting at a different
   width. */
.hero-banner-wrap{
  width:100%;
  max-width:1650px;
  margin:0 auto;
  padding:20px 16px 0;
}

.hero-card{
  border-radius:20px;
  background:
    linear-gradient(135deg, rgba(15,61,40,.6) 0%, rgba(31,122,82,.4) 55%, rgba(39,147,95,.25) 100%),
    url('https://raw.githubusercontent.com/zakariabe63-glitch/zachelson-hirafipro/refs/heads/main/file_0000000069448246a43da3e446df2ebf.png') center/cover no-repeat;
  padding:22px 24px 22px 24px;
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  color:#fff;
  position:relative;
  overflow:hidden;
}
/* Location pin markers over the map background image — a plain Maps pin
   per notification "slot". pingMapPin-equivalent logic (see
   hero-banner.js) activates the next free one in lockstep with each
   notification landing on the phone, so a marker lights up at the same
   moment each service's code appears, same STEP_MS cadence, and stays
   lit for exactly as long as that notification's card is still on the
   phone. Marker coordinates are randomized on each activation, clear of
   the text block and the phone. */
.map-pins{position:absolute;inset:0;pointer-events:none;}
.map-marker{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
/* Hidden by default — only lit up once its notification's card has
   actually landed, and stays lit for as long as that card is still on
   the phone. The fade-in transition lives only on the .active rule, not
   the base one: removing .active means the element's new (base) style
   has no transition property at all, so it snaps to opacity:0 instantly
   instead of fading out — appear smooth, disappear all at once, ready to
   pop up somewhere new next time. position:relative so .map-pin-glow can
   center itself on top of it. */
.map-pin{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;
  filter:drop-shadow(0 4px 8px rgba(6,20,14,.5));
  opacity:0;
}
.map-pin > img{width:100%;height:100%;object-fit:contain;display:block;}
.map-pin.active{
  opacity:1;
  transition:opacity .3s ease;
}
/* Only the icon itself keeps bouncing, continuously, for as long as it's
   shown — .map-pin-glow (below) is a sibling, not a child of this
   animated img, so it stays perfectly still at its fixed spot under the
   pin's tip while the pin moves above it, like a marker hovering over a
   stationary ground dot rather than the whole marker (glow included)
   moving together. */
.map-pin.active > img{
  animation:mapPinPing 1.6s ease-in-out infinite;
}
@keyframes mapPinPing{
  0%, 100%{transform:scale(1) translateY(0);}
  50%{transform:scale(1.12) translateY(-3px);}
}
/* Plain, static dot fixed at the pin's bottom tip — no animation of its
   own, so it never moves or pulses while the pin above it bounces. */
.map-pin-glow{
  position:absolute;left:50%;top:88%;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;
  background:#fff;
}

.hero-text{display:flex;flex-direction:column;flex:1 1 300px;max-width:360px;}
.hero-head{margin-top:auto;}
.hero-card .badge{
  display:inline-flex;align-items:center;gap:6px;
  background:#fff;
  border:1px solid rgba(255,255,255,.25);
  color:#000;
  padding:5px 11px;border-radius:999px;
  font-size:10px;margin-bottom:13px;
}
.hero-card .badge svg{width:11px;height:11px;flex-shrink:0;}
.hero-card h1{font-size:21px;line-height:1.22;margin:0 0 10px;font-weight:700;}
.hero-title-line1{color:#000;}
.hero-title-line2{color:#2d636d;}
.hero-card .subtext{font-size:12px;line-height:1.5;opacity:.92;max-width:260px;margin:0 0 16px;}
.hero-card .cta-row{display:flex;gap:10px;flex-wrap:wrap;}
.hero-card .btn{
  padding:10px 20px;border-radius:999px;font-weight:700;font-size:12px;
  letter-spacing:.2px;
  border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background .16s ease;
  text-decoration:none;
}
.hero-card .btn-primary{background:#27935f;color:#0f3d28;}
.hero-card .btn-primary:hover{background:#1f7a52;}
.hero-card .btn-secondary{background:#f39c1f;color:#0f3d28;}
.hero-card .btn-secondary:hover{background:#e97a0c;}

/* ============ PHONE MOCKUP ============ */
/* Fixed-size, pinned to the top-left corner of a smaller footprint and
   scaled down as a whole unit: every child inside .phone (notch, status
   row, notification cards...) is positioned with fixed px values tuned
   for the 178x362 design size, so scaling the box itself (rather than
   re-tuning each of those) is what shrinks the phone — and with it
   .hero-card's height, which the phone's height otherwise drives — while
   keeping every internal proportion intact. */
/* .phone itself carries the 3D tilt (see its transform below), standing
   upright with just a slight perspective turn toward the globe on the
   left, plus a soft ambient shadow under it via ::after. */
.phone-wrap{flex:0 0 auto;position:relative;width:142px;height:290px;align-self:center;margin-right:-16px;}
.phone-wrap::after{
  /* ambient contact shadow, blurred ellipse pinned to the floor under
     the tilted phone */
  content:'';
  position:absolute;
  left:14px;right:26px;bottom:-6px;
  height:22px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 72%);
  filter:blur(4px);
  z-index:-1;
}
.phone{
  width:178px;
  height:362px;
  background:linear-gradient(155deg,#3d3d40 0%, #131315 25%, #0a0a0b 60%, #2a2a2d 100%);
  border-radius:34px;
  padding:4px;
  box-shadow:
    0 22px 42px -16px rgba(0,0,0,.5),
    0 8px 16px -6px rgba(0,0,0,.3),
    inset 0 0 0 2px rgba(255,255,255,.12);
  position:absolute;
  top:0;
  left:0;
  transform:perspective(1000px) rotateY(10deg) rotateX(3deg) scale(.8);
  transform-origin:top left;
}
.phone::before{
  /* volume buttons */
  content:'';position:absolute;left:-3px;top:72px;width:3px;height:19px;
  background:#151517;border-radius:2px 0 0 2px;
  box-shadow:0 27px 0 #151517, 0 54px 0 #151517;
}
.phone::after{
  /* power button */
  content:'';position:absolute;right:-3px;top:91px;width:3px;height:35px;
  background:#151517;border-radius:0 2px 2px 0;
}
.phone-bezel{
  width:100%;height:100%;
  border-radius:30px;
  background:#000;
  padding:6px;
  position:relative;
}
.phone-screen{
  width:100%;height:100%;
  border-radius:25px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 45%),
    radial-gradient(90% 55% at 85% 100%, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(165deg,#0a2e24 0%, #0e5c46 45%, #1c8069 78%, #23926f 100%);
  position:relative;
  overflow:hidden;
}
.phone-screen::before{
  /* soft diagonal glass sheen */
  content:'';
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 78%, rgba(255,255,255,.05) 100%);
}
.phone-screen::after{
  /* edge vignette for depth */
  content:'';
  position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 70px rgba(0,0,0,.35), inset 0 -40px 60px -20px rgba(0,0,0,.3);
}
.phone .notch{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:44px;height:16px;background:#000;border-radius:10px;z-index:5;
}
.phone .notch::after{
  content:'';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #3a5a8f 0%, #0d1520 70%);
  box-shadow:0 0 0 1px rgba(255,255,255,.05);
}
.phone .status-row{
  position:absolute;top:12px;right:13px;z-index:5;
  display:flex;gap:3px;align-items:center;color:#fff;font-size:10px;opacity:.9;
}
.phone .status-row svg{width:10px;height:10px;}
.phone .status-row .battery{display:flex;align-items:center;}
.phone .lock-time{
  position:absolute;top:37px;left:0;right:0;text-align:center;color:#fff;z-index:4;
}
.phone .lock-time .date{font-size:9.5px;opacity:.85;margin-bottom:2px;}
.phone .lock-time .time{font-size:30px;font-weight:600;letter-spacing:.4px;}

/* ---- notification viewport: this is the ONLY moving part ---- */
.notif-viewport{
  position:absolute;
  top:98px;left:8px;right:8px;bottom:13px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end; /* new cards stack from the bottom, pushing older ones up */
  gap:6px;
  /* fade the top edge so cards leaving the top look like they're fading out */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
}

.notif-card{
  display:flex;
  align-items:flex-start;
  gap:7px;
  background:rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:11px;
  padding:6px 7px;
  color:#fff;
  flex-shrink:0;
  animation:heroCardIn 550ms cubic-bezier(.2,.8,.2,1) both;
}
.notif-card .icon{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.25);
  padding:5px;
  position:relative;
}
.notif-card .icon-badge{
  position:absolute;bottom:-3px;right:-3px;
  width:13px;height:13px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding:2.5px;
  box-shadow:0 0 0 1.5px #fff;
}
.notif-card .icon-badge svg{width:100%;height:100%;display:block;}
.notif-card .icon svg{
  width:100%;height:100%;display:block;
}
.notif-card .body{flex:1;min-width:0;}
.notif-card .row1{display:flex;justify-content:space-between;gap:6px;align-items:baseline;}
.notif-card .app-name{font-size:12px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.notif-card .time{font-size:9px;opacity:.7;white-space:nowrap;flex-shrink:0;}
.notif-card .code{font-size:12.5px;font-weight:700;letter-spacing:.4px;margin-top:2px;}
.notif-card .sub{font-size:9.5px;opacity:.75;margin-top:1px;}

@keyframes heroCardIn{
  from{opacity:0; transform:translateY(16px);}
  to{opacity:1; transform:translateY(0);}
}

@media (max-width:560px){
  .hero-card{justify-content:center;text-align:center;padding:24px 20px;}
  .hero-text{max-width:320px;}
  .hero-card .cta-row{justify-content:center;}
  /* Mobile only: show the phone / live-notifications feed first, right
     under the header, with the heading/CTA text below it. Desktop and
     tablet keep the text-first DOM order untouched — this is a pure
     visual reorder via flex `order`, not a markup change. */
  .phone-wrap{order:-1;margin-right:0;}
  .phone-wrap::after{display:none;}
  .phone{transform:scale(.8);}
  .hero-text{order:1;}
  /* Text stacks above the phone instead of sitting beside it at this
     width, and the pins' safe-zone math (randomMapPos in hero-banner.js)
     is tuned for the wide desktop card — on the now much narrower, taller
     stack a pin can still land right behind the heading. Simplest fix:
     the pins are decorative, so just hide them below the breakpoint where
     the layout itself already changes shape. */
  .map-pins{display:none;}
  /* The world-map photo behind everything works on the wide desktop
     card, where it's mostly clear space next to the text — stacked
     narrow on mobile, its dot pattern sits directly behind both the
     phone and the heading/subtext at once, competing with them instead
     of reading as a backdrop. A clean brand-green gradient keeps the
     card feeling premium while putting all the contrast where it
     belongs: on the phone and the copy. */
  .hero-card{background:linear-gradient(160deg, #0f3d28 0%, #1f7a52 60%, #23926f 100%);}
}

@media (prefers-reduced-motion: reduce){
  .notif-card{animation:none;}
}