/*
  Styles & effects extracted from styles.html
  Intentionally excludes base page styles (body, demo controls, etc.)
*/

/* ===== 10 CRAZY STYLES ===== */

/* 1. Cyberpunk Neon */
.cyber {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  color: #00ffff;
  border: 2px solid #ff00ff;
  box-shadow:
    0 0 20px rgba(255, 0, 255, 0.5),
    0 0 40px rgba(0, 255, 255, 0.3),
    inset 0 0 20px rgba(255, 0, 255, 0.1);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}

.cyber .line-social-link {
  background: rgba(255, 0, 255, 0.3);
  border: 1px solid #ff00ff;
  box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

/* 2. Retro Vapor Wave */
.vapor {
  background: linear-gradient(135deg, #ff6ec4 0%, #7873f5 50%, #4facfe 100%);
  color: #fff;
  transform: perspective(500px) rotateX(2deg);
  box-shadow:
    0 20px 40px rgba(255, 110, 196, 0.4),
    0 0 100px rgba(120, 115, 245, 0.3);
  border: 3px solid #fff;
  font-family: 'Courier New', monospace;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.vapor .line-social-link {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid #fff;
  font-weight: bold;
}

/* 3. Dark Matrix Glitch */
.matrix {
  background: #000;
  color: #00ff00;
  border: 1px solid #00ff00;
  box-shadow:
    0 0 30px rgba(0, 255, 0, 0.5),
    inset 0 0 30px rgba(0, 255, 0, 0.1);
  text-shadow:
    0 0 5px #00ff00,
    0 0 10px #00ff00;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}

.matrix .line-social-link {
  background: rgba(0, 255, 0, 0.2);
  border: 1px solid #00ff00;
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
}

/* 4. Holographic */
.holo {
  background: linear-gradient(135deg,
    rgba(255, 0, 128, 0.3) 0%,
    rgba(0, 255, 255, 0.3) 25%,
    rgba(255, 255, 0, 0.3) 50%,
    rgba(0, 255, 128, 0.3) 75%,
    rgba(255, 0, 255, 0.3) 100%);
  background-size: 200% 200%;
  animation: holoShift 3s ease infinite;
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  box-shadow:
    0 8px 32px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 20px rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

@keyframes holoShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.holo .line-social-link {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 5. Fire Glow */
.fire {
  background: linear-gradient(135deg, #1a0000 0%, #330000 50%, #1a0000 100%);
  color: #ff6600;
  border: 2px solid #ff3300;
  box-shadow:
    0 0 40px rgba(255, 51, 0, 0.6),
    0 0 80px rgba(255, 102, 0, 0.4),
    inset 0 0 40px rgba(255, 51, 0, 0.2);
  text-shadow:
    0 0 10px #ff6600,
    0 0 20px #ff3300,
    0 0 30px #ff0000;
  animation: fireFlicker 2s ease-in-out infinite;
}

@keyframes fireFlicker {
  0%, 100% {
    box-shadow:
      0 0 40px rgba(255, 51, 0, 0.6),
      0 0 80px rgba(255, 102, 0, 0.4),
      inset 0 0 40px rgba(255, 51, 0, 0.2);
  }
  50% {
    box-shadow:
      0 0 60px rgba(255, 51, 0, 0.8),
      0 0 100px rgba(255, 102, 0, 0.6),
      inset 0 0 60px rgba(255, 51, 0, 0.3);
  }
}

.fire .line-social-link {
  background: rgba(255, 51, 0, 0.3);
  border: 1px solid #ff6600;
  box-shadow: 0 0 10px rgba(255, 102, 0, 0.5);
}

/* 6. Toxic Radioactive */
.toxic {
  background: radial-gradient(circle, #1a3a1a 0%, #0d1f0d 100%);
  color: #39ff14;
  border: 3px solid #39ff14;
  box-shadow:
    0 0 50px rgba(57, 255, 20, 0.6),
    inset 0 0 30px rgba(57, 255, 20, 0.2);
  text-shadow:
    0 0 10px #39ff14,
    0 0 20px #39ff14,
    0 0 30px #76ff03;
  animation: toxicPulse 2s ease-in-out infinite;
}

@keyframes toxicPulse {
  0%, 100% {
    border-color: #39ff14;
    box-shadow: 0 0 50px rgba(57, 255, 20, 0.6), inset 0 0 30px rgba(57, 255, 20, 0.2);
  }
  50% {
    border-color: #76ff03;
    box-shadow: 0 0 80px rgba(118, 255, 3, 0.8), inset 0 0 50px rgba(57, 255, 20, 0.4);
  }
}

.toxic .line-social-link {
  background: rgba(57, 255, 20, 0.2);
  border: 1px solid #39ff14;
  box-shadow: 0 0 10px rgba(57, 255, 20, 0.4);
}

/* 7. Electric Storm */
.electric {
  background: linear-gradient(135deg, #000428 0%, #004e92 100%);
  color: #00d4ff;
  border: 2px solid #00d4ff;
  box-shadow:
    0 0 30px rgba(0, 212, 255, 0.7),
    0 0 60px rgba(0, 212, 255, 0.4),
    inset 0 0 40px rgba(0, 212, 255, 0.1);
  text-shadow:
    0 0 8px #00d4ff,
    0 0 15px #00d4ff;
  position: relative;
  overflow: hidden;
}

.electric::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(0, 212, 255, 0.1) 50%, transparent 70%);
  animation: electricSweep 3s linear infinite;
}

@keyframes electricSweep {
  0% { transform: translate(-100%, -100%); }
  100% { transform: translate(100%, 100%); }
}

.electric .line-social-link {
  background: rgba(0, 212, 255, 0.2);
  border: 1px solid #00d4ff;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* 8. Galaxy Nebula */
.galaxy {
  background:
    radial-gradient(ellipse at top, #1b2735 0%, #090a0f 100%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="10" cy="10" r="1" fill="white" opacity="0.8"/><circle cx="50" cy="30" r="1" fill="white" opacity="0.6"/><circle cx="80" cy="60" r="1" fill="white" opacity="0.9"/><circle cx="30" cy="80" r="1" fill="white" opacity="0.7"/></svg>');
  color: #e0b3ff;
  border: 2px solid #b388ff;
  box-shadow:
    0 0 40px rgba(179, 136, 255, 0.5),
    inset 0 0 40px rgba(179, 136, 255, 0.2);
  text-shadow: 0 0 10px rgba(224, 179, 255, 0.8);
}

.galaxy .line-social-link {
  background: rgba(179, 136, 255, 0.3);
  border: 1px solid #b388ff;
  box-shadow: 0 0 10px rgba(179, 136, 255, 0.4);
}

/* 9. Ice Crystal */
.ice {
  background: linear-gradient(135deg, #e0f7fa 0%, #80deea 50%, #4dd0e1 100%);
  color: #006064;
  border: 3px solid #00acc1;
  box-shadow:
    0 0 40px rgba(0, 172, 193, 0.6),
    inset 0 0 30px rgba(224, 247, 250, 0.5);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

.ice .line-social-link {
  background: rgba(0, 172, 193, 0.3);
  border: 2px solid #00acc1;
  color: #006064;
  font-weight: bold;
}

/* 10. Blood Moon */
.blood {
  background: radial-gradient(circle, #2d0a0a 0%, #1a0000 70%, #0d0000 100%);
  color: #ff1744;
  border: 2px solid #d50000;
  box-shadow:
    0 0 50px rgba(213, 0, 0, 0.8),
    0 0 100px rgba(255, 23, 68, 0.4),
    inset 0 0 40px rgba(213, 0, 0, 0.2);
  text-shadow:
    0 0 10px #ff1744,
    0 0 20px #d50000;
}

.blood .line-social-link {
  background: rgba(213, 0, 0, 0.3);
  border: 1px solid #ff1744;
  box-shadow: 0 0 10px rgba(255, 23, 68, 0.5);
}

/* ===== 10 EFFECTS ===== */

/* 1. Glitch Effect */
.glitch {
  animation: glitchAnim 3s infinite;
}

@keyframes glitchAnim {
  0%, 90%, 100% { transform: translate(0); }
  91% { transform: translate(-2px, 2px); }
  92% { transform: translate(2px, -2px); }
  93% { transform: translate(-2px, -2px); }
  94% { transform: translate(2px, 2px); }
  95% { transform: translate(0); }
}

/* 2. 3D Flip */
.flip {
  animation: flip3D 2s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes flip3D {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

/* 3. Shake Crazy */
.shake {
  animation: crazyShake 0.5s ease-in-out infinite;
}

@keyframes crazyShake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-5px, -5px) rotate(-2deg); }
  20% { transform: translate(5px, 5px) rotate(2deg); }
  30% { transform: translate(-5px, 5px) rotate(-1deg); }
  40% { transform: translate(5px, -5px) rotate(1deg); }
  50% { transform: translate(-3px, -3px) rotate(-2deg); }
  60% { transform: translate(3px, 3px) rotate(2deg); }
  70% { transform: translate(-3px, 3px) rotate(-1deg); }
  80% { transform: translate(3px, -3px) rotate(1deg); }
  90% { transform: translate(-2px, -2px) rotate(-1deg); }
}

/* 4. Pulse Glow */
.pulse {
  animation: pulseCrazy 1.5s ease-in-out infinite;
}

@keyframes pulseCrazy {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.08);
    filter: brightness(1.3);
  }
}

/* 5. Wobble */
.wobble {
  animation: wobbleEffect 2s ease-in-out infinite;
}

@keyframes wobbleEffect {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

/* 6. Slide In */
.slide {
  animation: slideIn 1s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 7. Bounce */
.bounce {
  animation: bounceEffect 2s ease-in-out infinite;
}

@keyframes bounceEffect {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* 8. Spin */
.spin {
  animation: spinEffect 3s linear infinite;
}

@keyframes spinEffect {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 9. Fade In/Out */
.fade {
  animation: fadeInOut 3s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* 10. Zoom */
.zoom {
  animation: zoomEffect 2s ease-in-out infinite;
}

@keyframes zoomEffect {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

 

        /* ========================================
           POWERPOINT STYLE - Use class "ppt-style"
           ======================================== */

        /* Main line container */
        .line.ppt-style {
            position: relative !important;
            background: linear-gradient(135deg, #FFE600 0%, #FFC107 100%) !important;
            border-radius: 20px !important;
            padding: 30px !important;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
            margin: 20px auto !important;
            max-width: 900px !important;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden;
            left: auto !important;
            right: auto !important;
            top: auto !important;
        }

        .line.ppt-style::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(90deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7);
            background-size: 200% 100%;
            animation: shimmer 3s linear infinite;
            border-radius: 20px 20px 0 0;
        }

        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        .line.ppt-style:hover {
            transform: translateY(-5px);
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4) !important;
        }

        /* Line number badge */
        .line.ppt-style .line-no {
            background: linear-gradient(135deg, #111 0%, #333 100%);
            color: #FFE600;
            font-weight: bold;
            font-size: 24px;
            padding: 12px 24px;
            border-radius: 50px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            display: inline-block;
            margin-bottom: 20px;
            transition: transform 0.3s ease;
        }

        .line.ppt-style .line-no:hover {
            transform: scale(1.05);
        }

        /* Main content area */
        .line.ppt-style .line-main {
            position: relative;
            z-index: 1;
        }

        /* Title row with flag and name */
        .line.ppt-style .line-title-row {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .line.ppt-style .line-flag {
            font-size: 42px;
            filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
            animation: wave 2s ease-in-out infinite;
        }

        @keyframes wave {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-10deg); }
            75% { transform: rotate(10deg); }
        }

        .line.ppt-style .line-name {
            font-size: 32px;
            font-weight: bold;
            color: #111;
            text-decoration: none;
            transition: all 0.3s ease;
            text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
            position: relative;
        }

        .line.ppt-style .line-name::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 3px;
            background: #FF6B6B;
            transition: width 0.3s ease;
        }

        .line.ppt-style .line-name:hover {
            color: #FF6B6B;
            transform: translateX(5px);
        }

        .line.ppt-style .line-name:hover::after {
            width: 100%;
        }

        /* Message box */
        .line.ppt-style .line-message {
            background: rgba(255, 255, 255, 0.95);
            padding: 25px 30px;
            border-radius: 15px;
            margin: 25px 0;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            border-left: 6px solid #FF6B6B;
            font-size: 20px;
            font-weight: bold;
            font-style: italic;
            color: #111;
            line-height: 1.6;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .line.ppt-style .line-message::before {
            content: '"';
            position: absolute;
            top: -10px;
            left: 10px;
            font-size: 80px;
            color: rgba(255, 107, 107, 0.1);
            font-family: Georgia, serif;
        }

        .line.ppt-style .line-message:hover {
            transform: translateX(5px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
            border-left-width: 10px;
        }

        /* Social links container */
        .line.ppt-style .line-socials {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 25px;
        }

        .line.ppt-style .line-social-link {
            background: linear-gradient(135deg, #111 0%, #333 100%);
            color: #FFE600;
            text-decoration: none;
            padding: 14px 28px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 15px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .line.ppt-style .line-social-link::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 230, 0, 0.3);
            transform: translate(-50%, -50%);
            transition: width 0.5s, height 0.5s;
            z-index: -1;
        }

        .line.ppt-style .line-social-link:hover::before {
            width: 300px;
            height: 300px;
        }

        .line.ppt-style .line-social-link:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
            color: white;
        }

        /* Responsive design */
        @media (max-width: 600px) {
            .line.ppt-style {
                padding: 20px !important;
            }

            .line.ppt-style .line-name {
                font-size: 24px;
            }

            .line.ppt-style .line-message {
                font-size: 16px;
                padding: 20px;
            }

            .line.ppt-style .line-flag {
                font-size: 32px;
            }

            .line.ppt-style .line-social-link {
                padding: 10px 20px;
                font-size: 13px;
            }
        }