/**
 * LTD animated logo — scoped for Divi Theme Builder.
 * Derived from the supplied standalone HTML logo animation.
 */

:root {
  --ltd-logo-glitch: var(--ltd-cyan, #00dce6);
  --ltd-logo-color: #E3FDFF;
  --ltd-logo-width: 180px;
}

.ltd-logo-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 32px;
  line-height: 0;
}

.ltd-logo-glitch {
  position: relative;
  width: min(72vw, var(--ltd-logo-width));
  max-width: 100%;
  aspect-ratio: 1121 / 1070;
  isolation: isolate;
}

.ltd-logo-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  pointer-events: none;
}

.ltd-logo-layer .ltd-logo-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ltd-logo-base {
  position: relative;
  z-index: 2;
}

.ltd-logo-base path,
.ltd-logo-base polygon,
.ltd-logo-base rect,
.ltd-logo-base circle,
.ltd-logo-base ellipse {
  fill: var(--ltd-logo-color);
}

.ltd-glitch-layer {
  z-index: 3;
  opacity: 0;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 7px rgba(0,220,230,.65))
    drop-shadow(0 0 18px rgba(0,220,230,.20));
}

.ltd-glitch-layer path,
.ltd-glitch-layer polygon,
.ltd-glitch-layer rect,
.ltd-glitch-layer circle,
.ltd-glitch-layer ellipse {
  fill: var(--ltd-logo-glitch) !important;
  stroke: var(--ltd-logo-glitch) !important;
}

.ltd-g1 { clip-path: inset(7% 0 76% 0); }
.ltd-g2 { clip-path: inset(27% 0 54% 0); }
.ltd-g3 { clip-path: inset(48% 0 33% 0); }
.ltd-g4 { clip-path: inset(67% 0 16% 0); }
.ltd-g5 { clip-path: inset(82% 0 5% 0); }

.ltd-logo-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 44%,
    rgba(0,220,230,.42) 44.2%,
    rgba(0,220,230,.16) 45%,
    transparent 46%
  );
  mix-blend-mode: screen;
}

.ltd-logo-scanlines {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: .07;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.16) 0,
    rgba(255,255,255,.16) 1px,
    transparent 1px,
    transparent 4px
  );
}

.ltd-logo-glitch.glitching .ltd-logo-base { animation: ltdBaseJitter 650ms steps(2,end); }
.ltd-logo-glitch.glitching .ltd-g1 { animation: ltdSlice1 650ms steps(1,end); }
.ltd-logo-glitch.glitching .ltd-g2 { animation: ltdSlice2 650ms steps(1,end); }
.ltd-logo-glitch.glitching .ltd-g3 { animation: ltdSlice3 650ms steps(1,end); }
.ltd-logo-glitch.glitching .ltd-g4 { animation: ltdSlice4 650ms steps(1,end); }
.ltd-logo-glitch.glitching .ltd-g5 { animation: ltdSlice5 650ms steps(1,end); }
.ltd-logo-glitch.glitching .ltd-logo-flash { animation: ltdFlash 650ms steps(1,end); }

@keyframes ltdBaseJitter {
  0%, 12%, 28%, 44%, 62%, 78%, 100% { transform: translate(0,0) skewX(0); filter: none; }
  16% { transform: translate(-7px, 1px) skewX(-1deg); filter: brightness(1.15); }
  35% { transform: translate(6px,-1px) skewX(1.1deg); }
  68% { transform: translate(-3px,1px); filter: brightness(1.25); }
}

@keyframes ltdSlice1 {
  0%, 8%, 28%, 100% { opacity: 0; transform: translateX(0); }
  10% { opacity: .95; transform: translateX(34px); }
  15% { opacity: .65; transform: translateX(-18px); }
  20% { opacity: .85; transform: translateX(22px); }
  24% { opacity: 0; }
}
@keyframes ltdSlice2 {
  0%, 21%, 51%, 100% { opacity: 0; transform: translateX(0); }
  23% { opacity: .95; transform: translateX(-42px); }
  30% { opacity: .65; transform: translateX(19px); }
  39% { opacity: .9; transform: translateX(-27px); }
  47% { opacity: 0; }
}
@keyframes ltdSlice3 {
  0%, 37%, 70%, 100% { opacity: 0; transform: translateX(0); }
  39% { opacity: .8; transform: translateX(28px); }
  47% { opacity: 1; transform: translateX(-36px); }
  56% { opacity: .65; transform: translateX(18px); }
  66% { opacity: 0; }
}
@keyframes ltdSlice4 {
  0%, 53%, 87%, 100% { opacity: 0; transform: translateX(0); }
  55% { opacity: .9; transform: translateX(-31px); }
  63% { opacity: .7; transform: translateX(42px); }
  73% { opacity: .95; transform: translateX(-16px); }
  83% { opacity: 0; }
}
@keyframes ltdSlice5 {
  0%, 65%, 97%, 100% { opacity: 0; transform: translateX(0); }
  67% { opacity: .85; transform: translateX(23px); }
  75% { opacity: .95; transform: translateX(-46px); }
  86% { opacity: .6; transform: translateX(30px); }
  94% { opacity: 0; }
}
@keyframes ltdFlash {
  0%, 17%, 22%, 48%, 53%, 76%, 82%, 100% { opacity: 0; transform: translateY(0); }
  18% { opacity: .9; transform: translateY(-8px); }
  49% { opacity: .7; transform: translateY(11px); }
  77% { opacity: .8; transform: translateY(-4px); }
}

@media (max-width: 980px) {
  .ltd-logo-link { margin-bottom: 16px; }
  .ltd-logo-glitch { width: min(34vw, 120px); }
}

@media (prefers-reduced-motion: reduce) {
  .ltd-glitch-layer, .ltd-logo-flash { display: none; }
  .ltd-logo-glitch.glitching .ltd-logo-base { animation: none; }
}