/* ==========================================================================
   ABEX3 hero — Alexa scan reveal/conceal + header copy shift
   Vanilla port. JS toggles ax-hidden / ax-in / ax-show / ax-out on .ax-fx.
   ========================================================================== */

.ax-presenter{
  position:absolute;left:0;top:0;z-index:1;pointer-events:none;
}
.ax-presenter .ax-frame{position:relative;margin:8px 0 0 8px;width:32vw;max-width:440px;overflow:hidden}
.ax-fx{position:relative}
.ax-fx video{width:100%;height:auto;display:block;user-select:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 80%,transparent 100%)}

.ax-fx.ax-hidden{clip-path:inset(100% 0 0 0)}
.ax-fx.ax-in{animation:axIn 5s ease forwards;-webkit-animation:axIn 5s ease forwards}
.ax-fx.ax-show{clip-path:inset(0 0 0 0)}
.ax-fx.ax-out{animation:axOut 5s ease forwards;-webkit-animation:axOut 5s ease forwards}

@keyframes axIn { from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0 0 0 0)} }
@keyframes axOut{ from{clip-path:inset(0 0 0 0)}   to{clip-path:inset(100% 0 0 0)} }

/* the white vertical scan bar (sweeps head -> feet during in and out) */
.ax-scanbar{
  position:absolute;left:-3%;right:-3%;top:-16%;height:16%;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%, rgba(180,240,255,.55) 40%, rgba(255,255,255,.95) 50%,
    rgba(180,240,255,.55) 60%, rgba(255,255,255,0) 100%);
  filter:blur(3px);mix-blend-mode:screen;opacity:0}
.ax-fx.ax-in  .ax-scanbar{animation:axBar 5s ease forwards;-webkit-animation:axBar 5s ease forwards}
.ax-fx.ax-out .ax-scanbar{animation:axBar 5s ease forwards;-webkit-animation:axBar 5s ease forwards}
@keyframes axBar{0%{top:-16%;opacity:0}10%{opacity:1}90%{top:100%;opacity:1}100%{top:100%;opacity:0}}

/* name badge */
.ax-badge{position:absolute;left:50%;bottom:30%;z-index:10;transform:translateX(-50%);
  border:1px solid rgba(245,197,66,.5);background:var(--accent3,#f5c542);border-radius:9px;
  padding:6px 16px;text-align:center;box-shadow:0 6px 24px rgba(245,158,11,.5);white-space:nowrap}
.ax-badge .n{font-weight:800;font-size:.9rem;line-height:1.1;color:#0a0a0a}
.ax-badge .r{font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(0,0,0,.75)}

/* header copy shift: present = shifted right; ax-centered = centred */
.hero-copy{transition:padding-left .9s cubic-bezier(.4,0,.2,1)}
@media(min-width:768px){
  .hero-copy{padding-left:34%}
  .hero-copy.ax-centered{padding-left:0}
}
/* on small screens the presenter is hidden; never shift */
@media(max-width:767px){ .ax-presenter{display:none} .hero-copy{padding-left:0!important} }

@media(prefers-reduced-motion:reduce){
  .ax-fx,.ax-fx.ax-hidden{clip-path:inset(0 0 0 0)!important;animation:none!important}
  .ax-scanbar{display:none}
  .hero-copy{transition:none}
}