/* ========================================================================
   HL2MP — G-Man Outro (module scoped)
   ===================================================================== */

.gman-outro { margin: 28px 0 8px; }

/* containerless: no decorative frame */
.gman-outro-wrapper{
  position:relative;
  overflow:hidden;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* Stage */
.gman-outro-section{
  position:relative;
  min-height: clamp(520px, 90vh, 980px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Fit artwork to viewport, anchored to bottom */
.gman-image{
  position:absolute;
  left:50%;
  bottom: 2vh;
  transform: translateX(-50%);
  height: clamp(520px, 78vh, 940px);
  width:auto; max-width:none;
  opacity:.55;
  z-index:0;
  pointer-events:none;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
}

/* Glassy message panel with subtle cyan/magenta bloom */
.gman-wrapper{
  position:relative;
  z-index:1;
  max-width: min(900px, 92vw);
  margin: 0 auto;
  text-align:center;
  background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.42));
  border:1px solid color-mix(in oklab, var(--cine-primary, #00e5ff) 38%, rgba(140,180,220,.18));
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 0 34px color-mix(in oklab, var(--cine-primary, #00e5ff) 24%, transparent) inset,
    0 0 28px color-mix(in oklab, var(--cine-accent, #ff00ea) 16%, transparent) inset;
  padding: clamp(16px, 3.5vw, 28px) clamp(14px, 3vw, 24px);
  border-radius: 16px;
  backdrop-filter: blur(3px) saturate(1.05);
  -webkit-backdrop-filter: blur(3px) saturate(1.05);
}

/* Headline with RGB glitch */
.gman-glitch{
  position:relative;
  font-family:"Orbitron", system-ui, sans-serif;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
  font-size: clamp(22px, 3.6vw + .8rem, 44px);
  line-height:1.18;
  margin:0;
  text-shadow:
    0 0 10px color-mix(in oklab, var(--cine-primary, #00e5ff) 40%, transparent),
    0 0 18px color-mix(in oklab, var(--cine-accent, #ff00ea) 28%, transparent);
  animation: gman-glitch-skew 1.5s infinite linear alternate-reverse;
}
.gman-glitch::before,
.gman-glitch::after{
  content: attr(data-text);
  position:absolute; inset:0;
  will-change: clip, transform;
}
.gman-glitch::before{
  left:2px;
  text-shadow:-2px 0 var(--cine-accent, #ff00ea);
  clip: rect(0, 9999px, 100%, 0);
  animation: gman-glitch-anim 4s infinite linear alternate-reverse;
}
.gman-glitch::after{
  left:-2px;
  text-shadow:-2px 0 var(--cine-primary, #00e5ff), 2px 2px var(--cine-accent, #ff00ea);
  animation: gman-glitch-anim2 1.5s infinite linear alternate-reverse;
}

/* Sub message — gradient ink + soft neon */
.gman-submsg{
  display:block;
  margin-top:.9rem;
  font: 700 clamp(12px, 1.2vw + .2rem, 16px)/1 "Orbitron", system-ui, sans-serif;
  letter-spacing:.12em;
  background: linear-gradient(90deg, var(--cine-primary, #00e5ff), var(--cine-accent, #ff00ea));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 8px color-mix(in oklab, var(--cine-primary, #00e5ff) 22%, transparent),
    0 0 12px color-mix(in oklab, var(--cine-accent, #ff00ea) 14%, transparent);
  opacity:.92;
}

/* ---- Glitch keyframes ---- */
@keyframes gman-glitch-anim{
  0%{clip:rect(14px,9999px,50px,0); transform:skew(.71deg);}
  5%{clip:rect(34px,9999px,73px,0); transform:skew(.21deg);}
  10%{clip:rect(34px,9999px,82px,0); transform:skew(.9deg);}
  15%{clip:rect(3px,9999px,74px,0); transform:skew(.41deg);}
  20%{clip:rect(100px,9999px,54px,0); transform:skew(.52deg);}
  25%{clip:rect(74px,9999px,67px,0); transform:skew(.52deg);}
  30%{clip:rect(92px,9999px,75px,0); transform:skew(.58deg);}
  35%{clip:rect(5px,9999px,67px,0); transform:skew(.72deg);}
  40%{clip:rect(85px,9999px,14px,0); transform:skew(.73deg);}
  45%{clip:rect(60px,9999px,18px,0); transform:skew(.11deg);}
  50%{clip:rect(5px,9999px,28px,0); transform:skew(.93deg);}
  55%{clip:rect(74px,9999px,95px,0); transform:skew(.82deg);}
  60%{clip:rect(55px,9999px,6px,0); transform:skew(.52deg);}
  65%{clip:rect(92px,9999px,51px,0); transform:skew(.83deg);}
  70%{clip:rect(6px,9999px,10px,0); transform:skew(.76deg);}
  75%{clip:rect(76px,9999px,95px,0); transform:skew(.39deg);}
  80%{clip:rect(14px,9999px,41px,0); transform:skew(.43deg);}
  85%{clip:rect(43px,9999px,56px,0); transform:skew(.65deg);}
  90%{clip:rect(50px,9999px,12px,0); transform:skew(.22deg);}
  95%{clip:rect(86px,9999px,45px,0); transform:skew(.98deg);}
  100%{clip:rect(72px,9999px,100px,0); transform:skew(.03deg);}
}
@keyframes gman-glitch-anim2{
  0%{clip:rect(61px,9999px,51px,0); transform:skew(.01deg);}
  5%{clip:rect(65px,9999px,93px,0); transform:skew(.09deg);}
  10%{clip:rect(7px,9999px,90px,0); transform:skew(.88deg);}
  15%{clip:rect(49px,9999px,68px,0); transform:skew(.82deg);}
  20%{clip:rect(56px,9999px,9px,0); transform:skew(.46deg);}
  25%{clip:rect(10px,9999px,93px,0); transform:skew(.15deg);}
  30%{clip:rect(57px,9999px,36px,0); transform:skew(.84deg);}
  35%{clip:rect(83px,9999px,27px,0); transform:skew(.3deg);}
  40%{clip:rect(77px,9999px,35px,0); transform:skew(.81deg);}
  45%{clip:rect(50px,9999px,81px,0); transform:skew(.72deg);}
  50%{clip:rect(97px,9999px,4px,0); transform:skew(.86deg);}
  55%{clip:rect(34px,9999px,18px,0); transform:skew(.9deg);}
  60%{clip:rect(40px,9999px,60px,0); transform:skew(.41deg);}
  65%{clip:rect(25px,9999px,19px,0); transform:skew(.31deg);}
  70%{clip:rect(68px,9999px,61px,0); transform:skew(.74deg);}
  75%{clip:rect(33px,9999px,5px,0); transform:skew(.2deg);}
  80%{clip:rect(70px,9999px,45px,0); transform:skew(.6deg);}
  85%{clip:rect(50px,9999px,13px,0); transform:skew(.69deg);}
  90%{clip:rect(24px,9999px,55px,0); transform:skew(.6deg);}
  95%{clip:rect(25px,9999px,83px,0); transform:skew(.26deg);}
  100%{clip:rect(44px,9999px,67px,0); transform:skew(.91deg);}
}
@keyframes gman-glitch-skew{
  0%{transform:skew(-1deg);} 10%{transform:skew(-2deg);} 20%{transform:skew(1deg);}
  30%{transform:skew(3deg);} 40%{transform:skew(-2deg);} 50%{transform:skew(-1deg);}
  60%{transform:skew(0deg);} 70%{transform:skew(-3deg);} 80%{transform:skew(2deg);}
  90%{transform:skew(3deg);} 100%{transform:skew(2deg);}
}

/* Responsive tweaks */
@media (max-width: 720px){
  .gman-image{ height: 72vh; opacity:.6; }
  .gman-wrapper{ padding: 14px 12px; }
  .gman-submsg{ letter-spacing:.09em; }
}
@media (prefers-reduced-motion: reduce){
  .gman-glitch, .gman-glitch::before, .gman-glitch::after{
    animation: none !important;
    text-shadow:
      0 0 8px color-mix(in oklab, var(--cine-primary, #00e5ff) 35%, transparent),
      0 0 12px color-mix(in oklab, var(--cine-accent, #ff00ea) 26%, transparent);
  }
}
@media (max-height: 780px){
  .gman-image{ height: 74vh; bottom: 1.5vh; }
}
@media (max-width: 720px){
  .gman-image{ height: 66vh; bottom: 1.5vh; }
}