/* =============================================
   PortKiller Website Styles
   ============================================= */

/* ---------------------------------------------
   Self-Hosted Fonts
   --------------------------------------------- */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url('../fonts/SpaceGrotesk.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/JetBrainsMono.woff2') format('woff2');
}

/* ---------------------------------------------
   CSS Variables
   --------------------------------------------- */
:root {
    --theme-orange: #ED8111;
    --theme-blue: #2E76B0;
    --deep-dark: #050505;
    --crt-scanline: rgba(18, 16, 16, 0.3);
}

/* ---------------------------------------------
   Base Styles
   --------------------------------------------- */
body {
    font-family: 'Space Grotesk', sans-serif;
    background-color: var(--deep-dark);
    color: #e2e8f0;
    overflow-x: hidden;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='1' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg transform='rotate(-30 24 24)'%3E%3Crect x='10' y='2' width='20' height='24' rx='3' fill='%23111' stroke='%23ED8111' stroke-width='2' filter='url(%23glow)'/%3E%3Cline x1='16' y1='2' x2='16' y2='26' stroke='%232E76B0' stroke-width='1'/%3E%3Cline x1='22' y1='2' x2='22' y2='26' stroke='%232E76B0' stroke-width='1'/%3E%3Cline x1='10' y1='8' x2='30' y2='8' stroke='%232E76B0' stroke-width='1'/%3E%3Cline x1='10' y1='14' x2='30' y2='14' stroke='%232E76B0' stroke-width='1'/%3E%3Cline x1='10' y1='20' x2='30' y2='20' stroke='%232E76B0' stroke-width='1'/%3E%3Cline x1='20' y1='26' x2='20' y2='44' stroke='%23ED8111' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") 16 12, crosshair;
}

*, *::before, *::after {
    cursor: inherit;
}

a, button, .cursor-pointer {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='1' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg transform='rotate(-30 24 24)'%3E%3Crect x='10' y='2' width='20' height='24' rx='3' fill='%23111' stroke='%23ED8111' stroke-width='2' filter='url(%23glow)'/%3E%3Cline x1='16' y1='2' x2='16' y2='26' stroke='%232E76B0' stroke-width='1'/%3E%3Cline x1='22' y1='2' x2='22' y2='26' stroke='%232E76B0' stroke-width='1'/%3E%3Cline x1='10' y1='8' x2='30' y2='8' stroke='%232E76B0' stroke-width='1'/%3E%3Cline x1='10' y1='14' x2='30' y2='14' stroke='%232E76B0' stroke-width='1'/%3E%3Cline x1='10' y1='20' x2='30' y2='20' stroke='%232E76B0' stroke-width='1'/%3E%3Cline x1='20' y1='26' x2='20' y2='44' stroke='%23ED8111' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") 16 12, pointer;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* ---------------------------------------------
   CRT Overlay Effect
   --------------------------------------------- */
.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    pointer-events: none;
    background:
        linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 3px, 3px 100%;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.4);
}

/* ---------------------------------------------
   Text Effects
   --------------------------------------------- */
.rgb-split {
    text-shadow: 0.5px 0 rgba(255, 0, 0, 0.5), -0.5px 0 rgba(0, 0, 255, 0.5);
}

.glow-orange {
    text-shadow: 0 0 5px rgba(237, 129, 17, 0.6), 0 0 10px rgba(237, 129, 17, 0.2);
}

.glow-blue {
    text-shadow: 0 0 5px rgba(46, 118, 176, 0.6), 0 0 10px rgba(46, 118, 176, 0.2);
}

/* ---------------------------------------------
   Interactive Glitch Effects
   --------------------------------------------- */
.hover-glitch-row {
    transition: all 0.1s;
    position: relative;
}

.hover-glitch-row:hover {
    animation: glitch-skew 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
    background-color: rgba(237, 129, 17, 0.05);
    border-left: 2px solid var(--theme-orange);
}

.hover-glitch-row:hover .text-gray-500 {
    color: var(--theme-orange);
}

@keyframes glitch-skew {
    0% { transform: translate(0); }
    20% { transform: translate(-3px, 0) skewX(2deg); }
    40% { transform: translate(3px, 0) skewX(-2deg); }
    60% { transform: translate(-1px, 0); }
    80% { transform: translate(1px, 0); }
    100% { transform: translate(0); }
}

.hover-vibrate {
    transition: transform 0.2s;
}

.hover-vibrate:hover {
    animation: vibrate 0.1s linear infinite both;
    border-color: var(--theme-blue);
    box-shadow: -4px 0 var(--theme-orange), 4px 0 var(--theme-blue);
}

@keyframes vibrate {
    0% { transform: translate(0); }
    20% { transform: translate(-1px, 1px); }
    40% { transform: translate(-1px, -1px); }
    60% { transform: translate(1px, 1px); }
    80% { transform: translate(1px, -1px); }
    100% { transform: translate(0); }
}

/* Popup entrance animation */
.popup-enter {
    animation: popup-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes popup-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.scan-text {
    position: relative;
    display: inline-block;
}

.scan-text:hover {
    animation: text-noise 0.4s steps(2) infinite;
    color: white;
}

@keyframes text-noise {
    0% { clip-path: inset(0 0 0 0); transform: translate(0); }
    25% { clip-path: inset(20% 0 30% 0); transform: translate(-2px, 1px); }
    50% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); }
    75% { clip-path: inset(10% 0 50% 0); transform: translate(-1px, 2px); }
    100% { clip-path: inset(0 0 0 0); transform: translate(0); }
}

/* ---------------------------------------------
   Background Effects
   --------------------------------------------- */
.retro-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 200vw;
    height: 200vh;
    background-image:
        linear-gradient(rgba(46, 118, 176, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46, 118, 176, 0.4) 1px, transparent 1px);
    background-size: 40px 40px;
    transform: perspective(300px) rotateX(60deg) translateY(-100px) translateZ(-200px);
    animation: grid-move 10s linear infinite;
    z-index: -3;
    pointer-events: none;
    opacity: 0.15;
    filter: drop-shadow(0 0 5px #2E76B0);
}

@keyframes grid-move {
    0% { transform: perspective(300px) rotateX(60deg) translateY(0) translateZ(-200px); }
    100% { transform: perspective(300px) rotateX(60deg) translateY(40px) translateZ(-200px); }
}

.scanline-roll {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0.1;
    animation: scanline 8s linear infinite;
    z-index: 50;
    pointer-events: none;
}

@keyframes scanline {
    0% { top: -20%; }
    100% { top: 120%; }
}

.glitch-scape {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.5;
}

.glitch-bar {
    position: absolute;
    background: rgba(237, 129, 17, 0.4);
    width: 100%;
    height: 2px;
    left: 0;
    box-shadow: 0 0 10px #ED8111;
    animation: glitch-bar-anim 2s infinite linear alternate-reverse;
}

.glitch-bar:nth-child(2) {
    top: 30%;
    height: 5px;
    animation-duration: 0.5s;
    background: rgba(46, 118, 176, 0.4);
    box-shadow: 0 0 10px #2E76B0;
}

.glitch-bar:nth-child(3) {
    top: 70%;
    height: 1px;
    animation-duration: 3s;
    background: rgba(255, 255, 255, 0.4);
}

@keyframes glitch-bar-anim {
    0% { opacity: 0; transform: scaleX(1); }
    5% { opacity: 1; transform: scaleX(1) skewX(20deg); }
    10% { opacity: 0; }
    100% { opacity: 0; }
}

/* ---------------------------------------------
   Glitch Text Effect
   --------------------------------------------- */
.glitch-wrapper {
    position: relative;
    display: inline-block;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    background: var(--deep-dark);
}

.glitch::before {
    left: 3px;
    text-shadow: -2px 0 var(--theme-blue);
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-2 0.5s infinite linear alternate-reverse;
}

.glitch::after {
    left: -3px;
    text-shadow: -2px 0 var(--theme-orange);
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 0.4s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% { clip: rect(11px, 9999px, 83px, 0); transform: skew(0.5deg); }
    20% { clip: rect(106px, 9999px, 9px, 0); transform: skew(0.5deg); }
    40% { clip: rect(29px, 9999px, 89px, 0); transform: skew(-0.5deg); }
    100% { clip: rect(5px, 9999px, 34px, 0); transform: skew(0); }
}

@keyframes glitch-anim-2 {
    0% { clip: rect(65px, 9999px, 100px, 0); transform: skew(0.5deg); }
    20% { clip: rect(45px, 9999px, 17px, 0); transform: skew(0.5deg); }
    40% { clip: rect(12px, 9999px, 32px, 0); transform: skew(-0.5deg); }
    100% { clip: rect(78px, 9999px, 25px, 0); transform: skew(0); }
}

/* Feature list glitch animations - asymmetric & independent */
@keyframes glitch-feature-odd {
    0% {
        clip: rect(12px, 9999px, 45px, 0);
        transform: translateX(-2px) skew(1deg);
    }
    25% {
        clip: rect(67px, 9999px, 23px, 0);
        transform: translateX(2px) skew(-0.5deg);
    }
    50% {
        clip: rect(34px, 9999px, 89px, 0);
        transform: translateX(-1px) skew(0.8deg);
    }
    75% {
        clip: rect(5px, 9999px, 56px, 0);
        transform: translateX(1px) skew(-1deg);
    }
    100% {
        clip: rect(78px, 9999px, 12px, 0);
        transform: translateX(0) skew(0);
    }
}

@keyframes glitch-feature-even {
    0% {
        clip: rect(45px, 9999px, 78px, 0);
        transform: translateX(2px) skew(-0.8deg);
    }
    30% {
        clip: rect(23px, 9999px, 12px, 0);
        transform: translateX(-1px) skew(1.2deg);
    }
    60% {
        clip: rect(89px, 9999px, 34px, 0);
        transform: translateX(1px) skew(-0.5deg);
    }
    100% {
        clip: rect(56px, 9999px, 67px, 0);
        transform: translateX(0) skew(0);
    }
}

/* Feature text glitch styles */
.feature-text {
    position: relative;
    display: inline-block;
}

.feature-text.glitch-active::before,
.feature-text.glitch-active::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* Odd items - faster, orange-tinted glitch */
.feature-item-1 .feature-text.glitch-active::before,
.feature-item-3 .feature-text.glitch-active::before,
.feature-item-5 .feature-text.glitch-active::before,
.feature-item-7 .feature-text.glitch-active::before,
.feature-item-9 .feature-text.glitch-active::before {
    text-shadow: -2px 0 #ED8111;
    animation: glitch-feature-odd 0.8s infinite linear alternate;
}

/* Even items - slower, blue-tinted glitch */
.feature-item-2 .feature-text.glitch-active::after,
.feature-item-4 .feature-text.glitch-active::after,
.feature-item-6 .feature-text.glitch-active::after,
.feature-item-8 .feature-text.glitch-active::after {
    text-shadow: 2px 0 #2E76B0;
    animation: glitch-feature-even 1.2s infinite linear alternate-reverse;
}

/* ---------------------------------------------
   Benefits Cycling System
   --------------------------------------------- */
#benefits-list {
    min-height: 180px;
}

.benefit-item {
    opacity: 0;
    transform: translateY(20px);
    transition: none;
}

.benefit-item.benefit-active {
    opacity: 1;
    transform: translateY(0);
}

.benefit-item.benefit-hidden {
    display: none;
}

/* Glitch-in entrance animation */
@keyframes benefit-glitch-in {
    0% {
        opacity: 0;
        transform: translateX(-20px) skewX(10deg);
        clip-path: inset(0 100% 0 0);
    }
    20% {
        opacity: 0.5;
        transform: translateX(10px) skewX(-5deg);
        clip-path: inset(0 60% 0 0);
    }
    40% {
        transform: translateX(-5px) skewX(3deg);
        clip-path: inset(0 30% 0 0);
    }
    60% {
        opacity: 0.8;
        transform: translateX(3px) skewX(-2deg);
        clip-path: inset(0 10% 0 0);
    }
    80% {
        transform: translateX(-2px) skewX(1deg);
    }
    100% {
        opacity: 1;
        transform: translateX(0) skewX(0);
        clip-path: inset(0 0 0 0);
    }
}

.benefit-enter {
    animation: benefit-glitch-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Glitch-out exit animation */
@keyframes benefit-glitch-out {
    0% {
        opacity: 1;
        transform: translateX(0) skewX(0);
    }
    20% {
        transform: translateX(-10px) skewX(5deg);
        text-shadow: 3px 0 #ED8111, -3px 0 #2E76B0;
    }
    40% {
        transform: translateX(15px) skewX(-8deg);
        opacity: 0.7;
        clip-path: inset(0 0 30% 0);
    }
    60% {
        transform: translateX(-20px) skewX(12deg);
        opacity: 0.4;
        clip-path: inset(20% 0 40% 0);
    }
    80% {
        transform: translateX(30px) skewX(-15deg);
        opacity: 0.2;
        clip-path: inset(50% 0 20% 0);
    }
    100% {
        transform: translateX(50px) skewX(20deg) scaleX(0.5);
        opacity: 0;
        clip-path: inset(70% 0 0 0);
    }
}

.benefit-exit {
    animation: benefit-glitch-out 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .benefit-enter,
    .benefit-exit {
        animation: none;
    }
    .benefit-enter {
        opacity: 1;
        transform: none;
    }
    .benefit-exit {
        opacity: 0;
    }
}

/* ---------------------------------------------
   Terminal Styles
   --------------------------------------------- */
.crt-terminal {
    box-shadow: 0 0 20px rgba(46, 118, 176, 0.2), inset 0 0 20px rgba(0,0,0,0.8);
    border: 1px solid rgba(46, 118, 176, 0.5);
}

#terminal-body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

#terminal-body::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.cursor-blink {
    animation: blink 1s step-end infinite;
    box-shadow: 0 0 10px #ED8111;
}

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

.bg-theme-gradient {
    background: radial-gradient(circle at center, rgba(46, 118, 176, 0.15) 0%, transparent 80%);
}

/* ---------------------------------------------
   Flying Port Mini-game
   --------------------------------------------- */
#flying-port {
    position: fixed;
    width: 50px;
    height: 50px;
    pointer-events: auto;
    cursor: inherit;
    z-index: 100;
    transition: transform 0.1s ease-out;
    filter: drop-shadow(0 0 8px rgba(0,0,0,0.8));
}

#flying-port.port-spawn {
    animation: port-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes port-pop-in {
    0% {
        opacity: 0;
        scale: 0;
    }
    60% {
        opacity: 1;
        scale: 1.2;
    }
    100% {
        opacity: 1;
        scale: 1;
    }
}

.wings {
    transform-origin: center;
    animation: flutter 0.08s infinite alternate;
}

@keyframes flutter {
    0% { transform: scaleX(1) rotate(0deg); }
    100% { transform: scaleX(0.7) rotate(20deg); }
}

.splat {
    position: fixed;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #ED8111 20%, #333 80%);
    clip-path: polygon(10% 0%, 30% 20%, 60% 0%, 80% 20%, 100% 0%, 90% 40%, 100% 60%, 80% 80%, 60% 100%, 30% 80%, 10% 100%, 0% 60%);
    pointer-events: none;
    z-index: 99;
    opacity: 1;
    transform: scale(1) rotate(0deg);
    animation: debris-anim 0.6s forwards;
    box-shadow: 0 0 15px var(--theme-orange);
}

@keyframes debris-anim {
    0% { transform: scale(0.5) rotate(0deg); opacity: 1; }
    50% { opacity: 1; }
    100% { transform: scale(1.5) rotate(180deg); opacity: 0; }
}

/* ---------------------------------------------
   Utility Animations
   --------------------------------------------- */
.animate-float {
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.boom-effect {
    animation: boom 0.3s forwards;
}

@keyframes boom {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.8; background-color: var(--theme-orange); }
    100% { transform: scale(0); opacity: 0; }
}

/* ---------------------------------------------
   Horror Background Text
   --------------------------------------------- */
.horror-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.horror-text-new {
    font-size: clamp(8rem, 20vw, 25rem);
    font-weight: 900;
    font-family: 'Space Grotesk', sans-serif;
    color: transparent;
    -webkit-text-stroke: 3px rgba(255, 255, 255, 0.03);
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: -10px;
    transform: rotate(-5deg) skewX(-10deg);
    opacity: 1;
    filter: blur(2px);
    mix-blend-mode: overlay;
    animation: pulse-horror 5s infinite ease-in-out;
}

.horror-text-new::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-text-stroke: 0px;
    color: rgba(237, 129, 17, 0.05);
    transform: translate(10px, 10px);
    z-index: -1;
}

@keyframes pulse-horror {
    0%, 100% { transform: rotate(-5deg) skewX(-10deg) scale(1); filter: blur(2px); }
    50% { transform: rotate(-5deg) skewX(-10deg) scale(1.02); filter: blur(1px); opacity: 0.8; }
}

/* ---------------------------------------------
   Accessibility Utilities
   --------------------------------------------- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------
   Pause Animations When Tab Hidden
   --------------------------------------------- */
body.tab-hidden *,
body.tab-hidden *::before,
body.tab-hidden *::after {
    animation-play-state: paused !important;
}

/* ---------------------------------------------
   Viewport Animation Classes
   --------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for sequential reveals */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* Pair-based reveal delays for features (2 at a time) */
.reveal-pair-1 { transition-delay: 0.1s; }  /* Items 1-2 */
.reveal-pair-2 { transition-delay: 0.3s; }  /* Items 3-4 */
.reveal-pair-3 { transition-delay: 0.5s; }  /* Items 5-6 */
.reveal-pair-4 { transition-delay: 0.7s; }  /* Items 7-8 */
.reveal-pair-5 { transition-delay: 0.9s; }  /* Item 9 */

/* ---------------------------------------------
   Reduced Motion Support
   --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}