/* ===========================
   ADVERT BASE + ANIMATIONS
   =========================== */

.advert_banner {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.advert_banner img,
.advert_banner video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Edge outline elements */
.advert_edge {
  position: absolute;
  pointer-events: none;
}
.advert_edge::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
}
.advert_edge_top, .advert_edge_bottom { left: 0; right: 0; height: 4px; }
.advert_edge_top { top: 0; }
.advert_edge_bottom { bottom: 0; }
.advert_edge_left, .advert_edge_right { top: 0; bottom: 0; width: 4px; }
.advert_edge_left { left: 0; }
.advert_edge_right { right: 0; }

/* --- Shared Keyframes --- */
@keyframes waveShine { 0%{background-position:0% 50%;}100%{background-position:200% 50%;}}
@keyframes diagonalSweep {
  0%{transform:translate(-100%,-100%) rotate(25deg);opacity:0;}
  30%,70%{opacity:1;}
  100%{transform:translate(100%,100%) rotate(25deg);opacity:0;}
}
@keyframes pulseVibrant {
  0%,100%{opacity:0.6;transform:scale(1);}
  50%{opacity:1;transform:scale(1.07);}
}
@keyframes shineOverlay {0%{left:-75%;}100%{left:125%;}}
@keyframes rainbowWave {0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
@keyframes led-run {to{--angle:360deg;}}
@keyframes led-pulse {0%,100%{--pulse:1;}50%{--pulse:1.5;}}
@keyframes hue-cycle {to{--h:360;}}
@keyframes advert9_hue {from{filter:hue-rotate(0deg);}to{filter:hue-rotate(360deg);}}

/* --- Style 1 – Floating glow --- */
.advert_style-1::after {
  content:"";
  position:absolute;
  width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,0.8) 0%,
    rgba(0,255,255,0.6) 40%,
    rgba(255,0,150,0.5) 70%,
    rgba(255,255,0,0.4) 100%);
  filter:blur(25px);
  animation: sexySnake 10s ease-in-out infinite;
  pointer-events:none;z-index:2;
}

/* --- Style 2 – Sweep line --- */
.advert_style-2 .advert_edge::before {
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.9),transparent);
  animation: diagonalSweep 2.5s linear infinite;
}

/* --- Style 3 – Pulsing edges --- */
.advert_style-3 .advert_edge::before {
  background:#fff;
  animation:pulseVibrant .21s ease-in-out infinite;
  border-radius:inherit;
  box-shadow:0 0 25px rgba(255,0,150,.6),0 0 45px rgba(0,150,255,.4);
}

/* --- Style 4 – Shiny diagonal overlay --- */
.advert_style-4::after {
  content:"";position:absolute;top:0;left:-75%;
  width:100%;height:100%;
  background:linear-gradient(75deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.6) 50%,rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);
  animation:shineOverlay 2.5s ease-in-out infinite;
  pointer-events:none;
}

/* --- Style 5 – Rainbow edges --- */
.advert_style-5 .advert_edge::before {
  background:linear-gradient(270deg,red,orange,yellow,green,cyan,blue,violet,red);
  background-size:400% 400%;
  animation:rainbowWave 3s linear infinite;
}

/* --- Styles 6–7 – LED / Neon border --- */
@property --angle {syntax:"<angle>";inherits:false;initial-value:0deg;}
@property --pulse {syntax:"<number>";inherits:false;initial-value:1;}

.advert_style-6,.advert_style-7{
  position:relative;display:inline-block;border-radius:10px;overflow:hidden;
}
.advert_style-6::before,.advert_style-7::before{
  content:"";position:absolute;inset:0;padding:3px;border-radius:inherit;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:led-run var(--advert-animation-speed) linear infinite,
           led-pulse calc(var(--advert-animation-speed)*0.8) ease-in-out infinite;
}
.advert_style-6::before{
  background:conic-gradient(from var(--angle),
    rgba(255,0,0,calc(var(--advert-animation-opacity)*var(--pulse)))0deg,
    rgba(0,255,255,calc(var(--advert-animation-opacity)*var(--pulse)))270deg,
    rgba(255,0,0,calc(var(--advert-animation-opacity)*var(--pulse)))360deg);
}
.advert_style-7::before{
  background:conic-gradient(from var(--angle),
    hsla(200,100%,60%,calc(var(--advert-animation-opacity)*var(--pulse)))0deg,
    hsla(300,100%,70%,calc(var(--advert-animation-opacity)*var(--pulse)))180deg,
    hsla(200,100%,60%,calc(var(--advert-animation-opacity)*var(--pulse)))360deg);
}
.advert_style-6::after,.advert_style-7::after{
  content:"";position:absolute;inset:-8px;border-radius:inherit;pointer-events:none;
  filter:blur(20px);
  animation:led-run var(--advert-animation-speed) linear infinite;
}

/* --- Style 8 – Snake border (motion path) --- */
@property --h {syntax:"<number>";inherits:false;initial-value:0;}
.advert_style-8{position:relative;display:inline-block;padding:var(--snake-thickness);
  border-radius:var(--snake-radius);overflow:hidden;isolation:isolate;}
.advert_style-8>img{display:block;width:100%;height:auto;border-radius:calc(var(--snake-radius)-2px);}
.advert_style-8 .snake{position:absolute;z-index:2;width:var(--snake-length-px);height:var(--snake-thickness);
  background:hsl(var(--h)100%60%/var(--core-alpha));border-radius:calc(var(--snake-thickness)/2);
  animation:snake-move var(--snake-speed) linear infinite,hue-cycle calc(var(--snake-speed)*var(--hue-mult)) linear infinite;}
@keyframes snake-move{
  0%,24.999%{top:0;left:0;width:var(--snake-length-px);}
  25%,49.999%{top:0;left:calc(100%-var(--snake-thickness));height:var(--snake-length-px);}
  50%,74.999%{top:calc(100%-var(--snake-thickness));left:calc(100%-var(--snake-length-px));width:var(--snake-length-px);}
  75%,99.999%{top:calc(100%-var(--snake-length-px));left:0;height:var(--snake-length-px);}
}

/* --- Style 9 – Rim glow --- */
.advert_style-9{position:relative;display:inline-block;overflow:hidden;isolation:isolate;border-radius:var(--outer-rad);}
.advert_style-9::before,.advert_style-9::after{content:"";position:absolute;inset:calc(var(--thick)-0.5px);border-radius:inherit;animation:advert9_hue var(--h-sec) linear infinite;}
.advert_style-9::after{filter:blur(var(--blur));}