/* TAKE OVER V56.2 — MASCOT MOMENT V1
   Big Volt + Vaya presence outside the primary masthead.
   Keeps clean V56.2 navbar and locked modules untouched. */

.mascot-moment{
  position:relative;
  isolation:isolate;
  min-height:455px;
  padding:0;
  overflow:hidden;
  border:2px solid var(--ink);
  border-radius:25px;
  background:
    radial-gradient(circle at 80% 16%,rgba(207,255,58,.26),transparent 25%),
    linear-gradient(180deg,#171717 0%,#171717 54%,#0b0b0b 100%);
  color:var(--cream);
}
.mascot-moment::before{
  content:"1056";
  position:absolute;
  right:-24px;
  top:8px;
  z-index:0;
  font:1000 130px/.8 Impact,"Arial Black",sans-serif;
  letter-spacing:-.06em;
  color:transparent;
  -webkit-text-stroke:1px rgba(245,238,224,.12);
  transform:rotate(90deg) translateX(78%);
  transform-origin:100% 0;
}
.mascot-moment::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,8,0) 34%,rgba(8,8,8,.18) 52%,rgba(8,8,8,.92) 73%,#090909 100%);
}
.mascot-moment-signal{
  position:absolute;
  z-index:1;
  left:22px;
  right:22px;
  top:22px;
  height:3px;
  background:linear-gradient(90deg,var(--coral) 0 25%,transparent 25% 36%,var(--lime) 36% 39%,transparent 39% 100%);
  opacity:.95;
}
.mascot-moment-art{
  position:absolute !important;
  z-index:1;
  top:18px;
  left:50%;
  width:113% !important;
  max-width:none !important;
  height:auto !important;
  max-height:none !important;
  margin:0 !important;
  object-fit:contain;
  transform:translateX(-50%) !important;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.33)) !important;
}
.mascot-moment-copy{
  position:absolute;
  z-index:3;
  left:24px;
  right:24px;
  bottom:24px;
}
.mascot-eyebrow{display:block;color:var(--coral);font-size:9px;margin-bottom:8px;letter-spacing:.14em}
.mascot-moment h3{
  margin:0;
  font:1000 clamp(42px,4.5vw,66px)/.88 Impact,"Arial Black",sans-serif;
  letter-spacing:-.03em;
  color:var(--cream);
}
.mascot-moment h3 span{color:var(--coral)}
.mascot-moment-tagline{
  margin:8px 0 8px;
  font:1000 clamp(19px,2vw,28px)/.95 Impact,"Arial Black",sans-serif;
  letter-spacing:.01em;
}
.mascot-moment-tagline em{font-style:normal;color:var(--lime)}
.mascot-moment-body{margin:0 0 13px;max-width:320px;font-size:12px;line-height:1.38;color:rgba(245,238,224,.76)}
.mascot-moment-cta{position:relative;z-index:4}

@media(max-width:900px){
  .mascot-moment{min-height:500px;display:block}
  .mascot-moment-art{width:82% !important;top:-5px}
  .mascot-moment-copy{left:26px;right:26px;bottom:26px}
  .mascot-moment h3{font-size:54px}
}

@media(max-width:620px){
  .mascot-moment{
    min-height:555px;
    border-radius:20px;
    background:
      radial-gradient(circle at 78% 11%,rgba(207,255,58,.22),transparent 23%),
      linear-gradient(180deg,#171717 0%,#171717 58%,#090909 100%);
  }
  .mascot-moment::before{font-size:104px;right:-34px;opacity:.8}
  .mascot-moment::after{background:linear-gradient(180deg,rgba(8,8,8,0) 34%,rgba(8,8,8,.10) 50%,rgba(8,8,8,.90) 69%,#090909 100%)}
  .mascot-moment-signal{left:18px;right:18px;top:18px}
  .mascot-moment-art{
    width:109% !important;
    top:14px;
  }
  .mascot-moment-copy{left:20px;right:20px;bottom:25px}
  .mascot-eyebrow{font-size:8px;margin-bottom:7px}
  .mascot-moment h3{font-size:52px}
  .mascot-moment-tagline{font-size:23px;margin-top:7px}
  .mascot-moment-body{font-size:11.5px;max-width:300px;margin-bottom:12px}
}

@media(max-width:430px){
  .mascot-moment{min-height:530px}
  .mascot-moment-art{width:116% !important;top:18px}
  .mascot-moment h3{font-size:49px}
  .mascot-moment-tagline{font-size:21px}
}

@media(max-width:360px){
  .mascot-moment{min-height:500px}
  .mascot-moment-art{width:120% !important;top:21px}
  .mascot-moment-copy{left:17px;right:17px;bottom:22px}
  .mascot-moment h3{font-size:44px}
  .mascot-moment-tagline{font-size:19px}
  .mascot-moment-body{font-size:10.5px}
}