/* =====================================================
   ABOUT PAGE - COMIC STYLES
   ===================================================== */

/* =====================================================
   SECTION 1: ABOUT HERO
   ===================================================== */
.about-hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    /* background: linear-gradient(135deg, #0f0c29 0%, #1a1a2e 40%, #16213e 100%); */
    background: linear-gradient(135deg, #f2ff00 0%, #ef5455 40%, #16213e 100%);

    padding-top: 80px;
}

.about-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    width: 100%;
    position: relative;
    z-index: 1;
}

.about-hero-bubble {
    margin-bottom: 20px;
}

.about-hero-title {
    font-size: 5rem;
    line-height: 1.05;
    color: #fff;
    text-transform: uppercase;
    margin: 24px 0;
    font-family: "Bangers", cursive;
    letter-spacing: 3px;
}

.about-hero-subtitle {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 30px;
    font-family: "Bangers", cursive;
    letter-spacing: 2px;
}

.about-hero-panel {
    transform: rotate(-2deg);
    box-shadow: 8px 8px 0px #333;
    transition: transform 0.3s;
}

.about-hero-panel:hover {
    transform: rotate(0deg) scale(1.02);
}

.about-hero-img {
    width: 100%;
    height: 550px;
    object-fit: cover;
    display: block;
}

/* =====================================================
   SECTION 2: DEVELOPER STORY
   ===================================================== */
.story-section {
    background: linear-gradient(180deg, #1a1a2e 0%, #0f0c29 100%);
}

.story-padding{
    padding: 10px 0 30px 0;
}
.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.story-comic-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.story-panel-large {
    grid-column: 1 / -1;
}

.story-panel {
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    transition:
        transform 0.3s,
        box-shadow 0.3s;
}

.story-panel:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 30px rgba(254, 237, 0, 0.15);
}

.story-panel-content .panel-icon {
    font-size: 2.5rem;
    color: #feed00;
    margin-bottom: 16px;
}

.story-panel-content h3 {
    font-size: 1.6rem;
    color: #fff;
    margin-bottom: 10px;
    font-family: "Bangers", cursive;
    letter-spacing: 1px;
}

.story-panel-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-family: "Bangers", cursive;
    letter-spacing: 0.5px;
}

/* =====================================================
   SECTION 3: APPLE COMPUTER / DIGITAL WORLD
   ===================================================== */
.computer-section {
    background: linear-gradient(135deg, #0f0c29 0%, #1a1a2e 50%, #16213e 100%);
}

.computer-showcase {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.computer-wrapper {
    position: relative;
}

.computer-img {
    width: 100%;
    height: auto;
    display: block;
    min-height: 400px;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.computer-screen-overlay {
    position: absolute;
    top: 4%;
    left: 12%;
    right: 12%;
    bottom: 18%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    z-index: 1;
}
.wael {
    /* border: 2px solid red; */
    position: relative;
    width: 13vw;
    height: 20vh;
    top: 3.5rem;
    left: 2rem;
}

@media (max-width: 576px) {
    .wael {
        width: 22vw;
        height: 8vh;
        top: 7rem;
        left: 1rem;
    }
}

@media (max-width: 375px) {
    .wael {
        width: 22vw;
        height: 6vh;
        top: 8rem;
        left: 0.7rem;
    }
}

.terminal-window {
    /* width: 100%;
  background: rgba(15, 12, 41, 0.95);
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid rgba(254,237,0,0.3);
  box-shadow: 0 0 40px rgba(254,237,0,0.15), inset 0 0 60px rgba(254,237,0,0.03); */
    font-family: "Courier New", monospace;
}

.terminal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.terminal-dots {
    display: flex;
    gap: 6px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-red {
    background: #ff5f56;
}
.dot-yellow {
    background: #ffbd2e;
}
.dot-green {
    background: #27c93f;
}

.terminal-title {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    letter-spacing: 1px;
}

.terminal-body {
    padding: 20px;
    min-height: 160px;
}

.terminal-line {
    margin-bottom: 10px;
    font-size: 0.85rem;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 8px;
}

.terminal-prompt {
    color: #4ecca3;
    font-weight: bold;
    flex-shrink: 0;
}

.terminal-text {
    color: #feed00;
}

.terminal-cursor {
    color: #feed00;
    animation: blink-cursor 1s step-end infinite;
    font-weight: bold;
}

@keyframes blink-cursor {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* =====================================================
   SECTION 4: SUPER POWERS
   ===================================================== */
.powers-section {
    background: linear-gradient(135deg, #16213e 0%, #1a1a2e 100%);
}

.powers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
    .about-hero-title {
        font-size: 3.5rem;
    }
    .powers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .about-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-hero-title {
        font-size: 2.8rem;
    }
    .about-hero-img {
        height: 350px;
    }

    .story-grid {
        grid-template-columns: 1fr;
    }

    .story-comic-panels {
        grid-template-columns: 1fr;
    }

    .computer-screen-overlay {
        top: 3%;
        left: 10%;
        right: 10%;
        bottom: 16%;
    }

    .terminal-body {
        padding: 14px;
        min-height: 140px;
    }

    .terminal-line {
        font-size: 0.7rem;
    }

    .powers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .about-hero,
    .story-section,
    .computer-section,
    .powers-section,
    .cta-section {
        padding: 60px 4%;
    }

    .scroll-indicator {
        bottom: 20px;
    }
}

@media (max-width: 480px) {
    .about-hero-title {
        font-size: 2.2rem;
        letter-spacing: 1px;
    }
    .about-hero-subtitle {
        font-size: 1.2rem;
    }
    .about-hero-img {
        height: 240px;
    }
    .powers-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .terminal-line {
        font-size: 0.6rem;
    }
    .terminal-body {
        padding: 10px;
        min-height: 120px;
    }

    .about-hero {
        padding: 50px 3% 80px;
    }

    .story-section,
    .computer-section,
    .powers-section {
        padding: 50px 3%;
    }

    .speech-bubble { padding: 16px 20px; font-size: 1rem; }
    .speech-bubble::after { bottom: -14px; left: 20px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 14px solid #fff; }
    .issue-tag { font-size: 0.75rem; padding: 5px 14px; letter-spacing: 2px; }
    .section-header { margin-bottom: 40px; }

    .story-panel { padding: 20px 16px; }
    .story-panel-content h3 { font-size: 1.3rem; }
    .story-panel-content p { font-size: 0.9rem; }

    .timeline-content h4 { font-size: 1.1rem; }
    .timeline-content p { font-size: 0.85rem; }

    .scroll-indicator {
        bottom: 16px;
        font-size: 0.75rem;
        letter-spacing: 2px;
    }
    .scroll-indicator i { font-size: 1rem; }
}

@media (max-width: 375px) {
    .about-hero-title {
        font-size: 1.9rem;
    }
    .about-hero-img {
        height: 200px;
    }
    .powers-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .about-hero {
        padding: 40px 3% 70px;
    }

    .story-section,
    .computer-section,
    .powers-section {
        padding: 40px 3%;
    }
}

/* =====================================================
   SHARED COMIC UTILITIES
   ===================================================== */

.comic-section {
    position: relative;
    font-family: 'Bangers', cursive;
}

.halftone-overlay {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 12px 12px;
    pointer-events: none;
    z-index: 0;
}

.comic-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.speed-lines {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    animation: rotate-slow 60s linear infinite;
}

.speed-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(254,237,0,0.08) 40%, rgba(254,237,0,0.02) 100%);
    transform-origin: left center;
}

.speed-line:nth-child(1) { transform: rotate(0deg); }
.speed-line:nth-child(2) { transform: rotate(30deg); }
.speed-line:nth-child(3) { transform: rotate(60deg); }
.speed-line:nth-child(4) { transform: rotate(90deg); }
.speed-line:nth-child(5) { transform: rotate(120deg); }
.speed-line:nth-child(6) { transform: rotate(150deg); }
.speed-line:nth-child(7) { transform: rotate(180deg); }
.speed-line:nth-child(8) { transform: rotate(210deg); }
.speed-line:nth-child(9) { transform: rotate(240deg); }
.speed-line:nth-child(10) { transform: rotate(270deg); }
.speed-line:nth-child(11) { transform: rotate(300deg); }
.speed-line:nth-child(12) { transform: rotate(330deg); }

.speed-line:nth-child(odd) {
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,107,107,0.06) 40%, rgba(255,107,107,0.01) 100%);
}

.speed-line:nth-child(3n) {
    height: 1px;
    width: 40%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 40%, transparent 100%);
}

@keyframes rotate-slow {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.comic-starburst {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(254,237,0,0.03) 5deg, transparent 10deg,
        transparent 15deg, rgba(254,237,0,0.02) 20deg, transparent 25deg,
        transparent 30deg, rgba(254,237,0,0.03) 35deg, transparent 40deg,
        transparent 45deg, rgba(254,237,0,0.02) 50deg, transparent 55deg,
        transparent 60deg, rgba(254,237,0,0.03) 65deg, transparent 70deg,
        transparent 75deg, rgba(254,237,0,0.02) 80deg, transparent 85deg,
        transparent 90deg, rgba(254,237,0,0.03) 95deg, transparent 100deg,
        transparent 105deg, rgba(254,237,0,0.02) 110deg, transparent 115deg,
        transparent 120deg, rgba(254,237,0,0.03) 125deg, transparent 130deg,
        transparent 135deg, rgba(254,237,0,0.02) 140deg, transparent 145deg,
        transparent 150deg, rgba(254,237,0,0.03) 155deg, transparent 160deg,
        transparent 165deg, rgba(254,237,0,0.02) 170deg, transparent 175deg,
        transparent 180deg, rgba(254,237,0,0.03) 185deg, transparent 190deg,
        transparent 195deg, rgba(254,237,0,0.02) 200deg, transparent 205deg,
        transparent 210deg, rgba(254,237,0,0.03) 215deg, transparent 220deg,
        transparent 225deg, rgba(254,237,0,0.02) 230deg, transparent 235deg,
        transparent 240deg, rgba(254,237,0,0.03) 245deg, transparent 250deg,
        transparent 255deg, rgba(254,237,0,0.02) 260deg, transparent 265deg,
        transparent 270deg, rgba(254,237,0,0.03) 275deg, transparent 280deg,
        transparent 285deg, rgba(254,237,0,0.02) 290deg, transparent 295deg,
        transparent 300deg, rgba(254,237,0,0.03) 305deg, transparent 310deg,
        transparent 315deg, rgba(254,237,0,0.02) 320deg, transparent 325deg,
        transparent 330deg, rgba(254,237,0,0.03) 335deg, transparent 340deg,
        transparent 345deg, rgba(254,237,0,0.02) 350deg, transparent 355deg
    );
    border-radius: 50%;
    animation: pulse-starburst 8s ease-in-out infinite;
}

@keyframes pulse-starburst {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}

.halftone-dots {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(254,237,0,0.06) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(255,107,107,0.04) 1px, transparent 1px);
    background-size: 24px 24px, 36px 36px;
    background-position: 0 0, 12px 12px;
    animation: drift-dots 20s linear infinite;
}

@keyframes drift-dots {
    0% { background-position: 0 0, 12px 12px; }
    100% { background-position: 24px 24px, 36px 36px; }
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}

.issue-tag {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 6px 20px;
    font-size: 0.85rem;
    letter-spacing: 3px;
    border: 2px solid #333;
    margin-bottom: 16px;
    font-family: 'Bangers', cursive;
}

.section-title {
    font-size: 3.5rem;
    color: #fff;
    text-transform: uppercase;
    line-height: 1.1;
    font-family: 'Bangers', cursive;
    letter-spacing: 2px;
}

.accent {
    color: #feed00;
}

.comic-panel {
    position: relative;
    background: #1a1a2e;
    border-radius: 8px;
    overflow: hidden;
}

.panel-border {
    position: absolute;
    inset: 0;
    border: 4px solid #fff;
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
}

.panel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-align: center;
    font-family: 'Bangers', cursive;
    z-index: 3;
}

.speech-bubble {
    position: relative;
    background: #fff;
    color: #111;
    border-radius: 20px;
    padding: 20px 28px;
    font-size: 1.1rem;
    line-height: 1.5;
    border: 3px solid #111;
    box-shadow: 4px 4px 0px #111;
    font-family: 'Bangers', cursive;
    letter-spacing: 0.5px;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 18px solid #fff;
    filter: drop-shadow(2px 3px 0px #111);
}

.title-line {
    display: block;
}

.title-line.accent {
    color: #feed00;
    text-shadow: 4px 4px 0px #b8a800;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tag {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 25px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 2px solid;
    font-family: 'Bangers', cursive;
    letter-spacing: 1px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.tag-laravel { border-color: #ff2d20; color: #ff2d20; background: rgba(255,45,32,0.1); }
.tag-livewire { border-color: #4ecca3; color: #4ecca3; background: rgba(78,204,163,0.1); }
.tag-react { border-color: #61dafb; color: #61dafb; background: rgba(97,218,251,0.1); }
.tag-php { border-color: #777bb4; color: #777bb4; background: rgba(119,123,180,0.1); }
.tag-js { border-color: #f7df1e; color: #f7df1e; background: rgba(247,223,30,0.1); }

.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-align: center;
    z-index: 1;
    font-family: 'Bangers', cursive;
    cursor: pointer;
    text-decoration: none;
}

.scroll-indicator-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.scroll-indicator:hover {
    color: rgba(255,255,255,0.8);
}

.scroll-indicator i {
    display: block;
    text-align: center;
    margin-top: 8px;
    font-size: 1.2rem;
    animation: bounce-down 1.5s infinite;
}

@keyframes bounce-down {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #feed00, #ff6b6b);
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
}

.timeline-dot {
    position: absolute;
    left: -35px;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #feed00;
    border: 3px solid #fff;
    box-shadow: 0 0 0 3px #feed00;
}

.timeline-content h4 {
    font-size: 1.3rem;
    color: #feed00;
    margin-bottom: 6px;
    font-family: 'Bangers', cursive;
    letter-spacing: 1px;
}

.timeline-content p {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
    font-family: 'Bangers', cursive;
    letter-spacing: 0.5px;
}

@media (max-width: 1024px) {
    .section-title { font-size: 2.8rem; }
}

@media (max-width: 480px) {
    .section-title { font-size: 1.8rem; }
    .tech-tags { gap: 8px; }
    .tag { padding: 4px 12px; font-size: 0.75rem; }
}