/* V5.27: short VHS, 1990s CRT, Super 8 and digital faults on aria-hidden media copies. */
.az517-frame:is(.az527-vhs,.az527-crt90,.az527-super8,.az527-datamosh,.az527-photocopy)>.az517-frame-layer{
  background-size:cover;background-position:center;pointer-events:none;overflow:hidden
}
.az-photo-card:is(.az527-vhs,.az527-crt90,.az527-super8,.az527-datamosh,.az527-photocopy)>.az517-frame-layer{inset:8px 8px 32px}
.az-visual-card:is(.az527-vhs,.az527-crt90,.az527-super8,.az527-datamosh,.az527-photocopy)>.az517-frame-layer{inset:7px 7px 32px}
.az-repair-figure a:is(.az527-vhs,.az527-crt90,.az527-super8,.az527-datamosh,.az527-photocopy)>.az517-frame-layer{inset:8px}
.pro-photo-shot:is(.az527-vhs,.az527-crt90,.az527-super8,.az527-datamosh,.az527-photocopy)>.az517-frame-layer{inset:0 0 29px}
.ug-image-plate:is(.az527-vhs,.az527-crt90,.az527-super8,.az527-datamosh,.az527-photocopy)>.az517-frame-layer{background-position:68% center}
.az517-frame:is(.az527-vhs,.az527-crt90,.az527-super8,.az527-datamosh,.az527-photocopy)>.az517-frame-layer::before,
.az517-frame:is(.az527-vhs,.az527-crt90,.az527-super8,.az527-datamosh,.az527-photocopy)>.az517-frame-layer::after{
  content:'';position:absolute;pointer-events:none;opacity:0
}

/* VHS: chroma offset, scan noise and one abrupt tracking bar. */
.az517-frame.az527-vhs>.az517-frame-layer{
  filter:saturate(1.7) hue-rotate(-19deg) contrast(1.14);mix-blend-mode:screen;
  animation:az527-vhs-image .98s steps(1,end) both
}
.az517-frame.az527-vhs>.az517-frame-layer::before{
  inset:0;background:repeating-linear-gradient(0deg,rgba(3,25,29,.42) 0 2px,transparent 2px 5px),
    linear-gradient(90deg,rgba(60,186,189,.28),transparent 36%,rgba(208,87,71,.31));
  animation:az527-vhs-noise .98s steps(1,end) both
}
.az517-frame.az527-vhs>.az517-frame-layer::after{
  top:0;left:0;right:0;bottom:auto;width:100%;height:14%;
  background:linear-gradient(0deg,transparent,rgba(228,210,175,.52) 45%,rgba(57,177,183,.38) 56%,transparent);
  box-shadow:0 2px 0 rgba(196,80,73,.56);animation:az527-vhs-track .98s steps(1,end) both
}
@keyframes az527-vhs-image{
  0%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:none}
  10%{opacity:.68;clip-path:inset(8% 0 73% 0);transform:translateX(9px)}
  21%{opacity:.05}34%{opacity:.6;clip-path:inset(43% 0 36% 0);transform:translateX(-13px)}
  52%{opacity:.08}66%{opacity:.72;clip-path:inset(76% 0 8% 0);transform:translateX(7px)}
  83%{opacity:.05}
}
@keyframes az527-vhs-noise{
  0%,100%{opacity:0;transform:none}
  11%{opacity:.64;transform:translateX(-5px)}
  22%{opacity:.03}36%{opacity:.53;transform:translateX(6px)}
  54%{opacity:.04}68%{opacity:.49;transform:translateX(-3px)}
}
@keyframes az527-vhs-track{
  0%,100%{opacity:0;top:0}
  12%{opacity:.78;top:14%}
  24%{opacity:0;top:14%}
  42%{opacity:.71;top:57%}
  53%{opacity:0;top:57%}
  69%{opacity:.55;top:84%}
  80%{opacity:0;top:84%}
}

/* CRT90: restrained RGB phosphor grid and a single rolling scan line. */
.az517-frame.az527-crt90>.az517-frame-layer{
  filter:saturate(1.28) hue-rotate(6deg) contrast(1.12);mix-blend-mode:screen;
  animation:az527-crt-image .98s steps(1,end) both
}
.az517-frame.az527-crt90>.az517-frame-layer::before{
  inset:0;background:
    repeating-linear-gradient(0deg,rgba(5,23,27,.43) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(194,80,64,.3) 0 1px,rgba(53,143,137,.26) 1px 2px,rgba(223,184,124,.2) 2px 3px,transparent 3px 5px);
  animation:az527-crt-phosphor .98s steps(1,end) both
}
.az517-frame.az527-crt90>.az517-frame-layer::after{
  top:0;bottom:auto;left:0;right:0;width:100%;height:4px;
  background:rgba(224,216,187,.73);box-shadow:0 0 13px 3px rgba(71,177,177,.4);
  animation:az527-crt-roll .98s steps(1,end) both
}
@keyframes az527-crt-image{
  0%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:none}
  13%{opacity:.39;clip-path:inset(0);transform:translateX(2px)}
  29%{opacity:.2;transform:translateX(-2px)}
  47%{opacity:.44;transform:translateX(1px)}
  68%{opacity:.25;transform:none}
}
@keyframes az527-crt-phosphor{
  0%,100%{opacity:0}
  12%{opacity:.68}27%{opacity:.3}46%{opacity:.72}61%{opacity:.22}74%{opacity:.56}
}
@keyframes az527-crt-roll{
  0%,100%{opacity:0;top:0}
  13%{opacity:.66;top:8%}
  29%{opacity:.45;top:33%}
  47%{opacity:.67;top:58%}
  66%{opacity:.48;top:86%}
  80%{opacity:0;top:95%}
}

/* Super 8: warm gate weave, small sprocket impressions and a transient scratch. */
.az517-frame.az527-super8>.az517-frame-layer{
  filter:sepia(.78) saturate(1.35) contrast(1.16);mix-blend-mode:normal;
  animation:az527-super8-gate 1.02s steps(1,end) both
}
.az517-frame.az527-super8>.az517-frame-layer::before{
  inset:0;background:
    radial-gradient(circle,transparent 0 3px,rgba(230,193,138,.82) 3.5px 5px,transparent 5.5px) left top/16px 34px repeat-y,
    radial-gradient(circle,transparent 0 3px,rgba(230,193,138,.82) 3.5px 5px,transparent 5.5px) right top/16px 34px repeat-y,
    radial-gradient(ellipse at center,transparent 46%,rgba(117,62,31,.31) 100%);
  box-shadow:inset 14px 0 rgba(42,24,17,.35),inset -14px 0 rgba(42,24,17,.35);
  animation:az527-super8-edge 1.02s steps(1,end) both
}
.az517-frame.az527-super8>.az517-frame-layer::after{
  top:0;bottom:0;left:39%;width:2px;height:auto;
  background:linear-gradient(0deg,transparent 0 18%,rgba(250,226,175,.84) 29% 59%,transparent 81%);
  box-shadow:2px 0 2px rgba(111,57,33,.35);animation:az527-super8-scratch 1.02s steps(1,end) both
}
@keyframes az527-super8-gate{
  0%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:none}
  13%{opacity:.52;clip-path:inset(0);transform:translate(2px,-2px)}
  27%{opacity:.38;transform:translate(-2px,1px)}
  44%{opacity:.57;transform:translate(1px,2px)}
  62%{opacity:.4;transform:translate(-1px,-1px)}
  79%{opacity:.16;transform:none}
}
@keyframes az527-super8-edge{
  0%,100%{opacity:0;transform:none}
  14%{opacity:.9;transform:translateX(1px)}
  31%{opacity:.62;transform:translateX(-1px)}
  49%{opacity:.85;transform:none}
  67%{opacity:.45;transform:translateX(1px)}
}
@keyframes az527-super8-scratch{
  0%,100%{opacity:0;left:39%}
  18%{opacity:.86;left:39%}
  30%{opacity:0;left:39%}
  46%{opacity:.92;left:61%}
  58%{opacity:0;left:61%}
}

/* Digital packet damage: a few chunky blocks instead of analog scan lines. */
.az517-frame.az527-datamosh>.az517-frame-layer{
  filter:hue-rotate(73deg) saturate(2) contrast(1.28);mix-blend-mode:screen;
  animation:az527-mosh-image .96s steps(1,end) both
}
.az517-frame.az527-datamosh>.az517-frame-layer::before{
  inset:0;background:repeating-linear-gradient(90deg,rgba(50,189,171,.39) 0 18px,rgba(188,89,92,.44) 18px 36px,transparent 36px 58px),
    repeating-linear-gradient(0deg,transparent 0 20px,rgba(217,188,132,.31) 20px 39px,transparent 39px 60px);
  animation:az527-mosh-blocks .96s steps(1,end) both
}
@keyframes az527-mosh-image{
  0%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:none}
  12%{opacity:.58;clip-path:polygon(7% 16%,46% 16%,46% 30%,7% 30%,54% 62%,94% 62%,94% 75%,54% 75%);transform:translateX(12px)}
  28%{opacity:.05}46%{opacity:.62;clip-path:polygon(23% 38%,76% 38%,76% 53%,23% 53%,5% 79%,40% 79%,40% 91%,5% 91%);transform:translateX(-15px)}
  64%{opacity:.06}75%{opacity:.38;clip-path:inset(56% 20% 26% 35%);transform:translateX(5px)}
}
@keyframes az527-mosh-blocks{
  0%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:none}
  14%{opacity:.62;clip-path:inset(19% 42% 57% 8%);transform:translateX(5px)}
  28%{opacity:.05}48%{opacity:.53;clip-path:inset(45% 7% 32% 52%);transform:translateX(-8px)}
  68%{opacity:.04}
}

/* Photocopy: stark monochrome misregistration and a compact halftone patch. */
.az517-frame.az527-photocopy>.az517-frame-layer{
  filter:grayscale(1) contrast(2.5) invert(.38);mix-blend-mode:screen;
  animation:az527-copy-image .96s steps(1,end) both
}
.az517-frame.az527-photocopy>.az517-frame-layer::before{
  inset:0;background:radial-gradient(circle,rgba(225,214,187,.58) 0 1px,transparent 1.5px) 0 0/7px 7px;
  animation:az527-copy-grain .96s steps(1,end) both
}
.az517-frame.az527-photocopy>.az517-frame-layer::after{
  top:0;bottom:0;left:0;width:3px;height:auto;background:#e8d7b6;
  box-shadow:3px 0 rgba(5,31,36,.8),7px 0 rgba(230,215,180,.45);
  animation:az527-copy-edge .96s steps(1,end) both
}
@keyframes az527-copy-image{
  0%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:none}
  13%{opacity:.62;clip-path:inset(8% 17% 71% 5%);transform:translate(4px,-3px)}
  29%{opacity:.04}47%{opacity:.59;clip-path:inset(39% 4% 35% 33%);transform:translate(-5px,3px)}
  66%{opacity:.04}76%{opacity:.39;clip-path:inset(78% 31% 5% 12%);transform:translate(2px,-1px)}
}
@keyframes az527-copy-grain{
  0%,100%{opacity:0;clip-path:inset(0 0 100% 0)}
  15%{opacity:.55;clip-path:inset(10% 18% 68% 8%)}
  32%{opacity:.04}49%{opacity:.45;clip-path:inset(40% 6% 31% 35%)}
  69%{opacity:.04}
}
@keyframes az527-copy-edge{
  0%,100%{opacity:0;left:0}
  15%{opacity:.7;left:12%}
  27%{opacity:0;left:12%}
  48%{opacity:.58;left:67%}
  62%{opacity:0;left:67%}
}

@media(max-width:650px){
  .az-photo-card:is(.az527-vhs,.az527-crt90,.az527-super8,.az527-datamosh,.az527-photocopy)>.az517-frame-layer{inset:5px 5px 29px}
}
@media(prefers-reduced-motion:reduce){
  .az517-frame[class*="az527-"]>.az517-frame-layer{display:none!important;animation:none!important}
}
html.motion-off .az517-frame[class*="az527-"]>.az517-frame-layer,
html.az517-save-data .az517-frame[class*="az527-"]>.az517-frame-layer{display:none!important;animation:none!important}
