/*
    File: style.css
    Project: PrismCode.dev Landing Page
    Author: Prabhjot Singh
    Description: Main stylesheet for all visual presentation and animations.
*/

/* ==========================================================================
   1. Base & Layout Styles
   ========================================================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #0a0f1f;
    color: #ffffff;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    transition: background-color 0.5s ease;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    position: relative;
    z-index: 3; /* Above background and spotlight */
}

/* ==========================================================================
   2. Preloader Component
   ========================================================================== */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0f1f;
    z-index: 100; /* Highest z-index to be on top */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

#preloader.loaded {
    opacity: 0;
    pointer-events: none; /* Allow interaction with page after fade */
}

.boot-sequence {
    font-family: 'Roboto Mono', monospace;
    color: #33ff4e;
    text-align: left;
    width: 90%;
    max-width: 500px;
}

.boot-line {
    margin-bottom: 0.5em;
    white-space: pre-wrap;
    opacity: 0;
    animation: fadeInLine 0.1s forwards;
}

.boot-line .status {
    color: #a0c8ff;
    font-weight: bold;
}

/* ==========================================================================
   3. Interactive Backgrounds & Effects
   ========================================================================== */

/* Initial state for main content reveal */
.matrix-background, .container {
    opacity: 0;
}

/* Staggered fade-in for a controlled reveal sequence */
body.ready .matrix-background {
    opacity: 1;
    transition: opacity 0.8s ease-in;
}
body.ready .container {
    opacity: 1;
    transition: opacity 0.8s ease-in 0.5s; /* Fades in after the background */
}

/* Mouse Spotlight Effect */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(167, 216, 255, 0.06) 0%,
        rgba(167, 216, 255, 0.0) 20%
    );
    transition: background 0.5s ease;
}

/* Matrix Text Background */
.matrix-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    font-family: 'Roboto Mono', monospace;
    font-size: 1rem;
    font-weight: 400;
    color: rgba(167, 216, 255, 0.07);
    user-select: none;
    transition: color 0.5s ease;
}

.matrix-row {
    white-space: nowrap;
    line-height: 1.2;
    width: 200%;
    flex-shrink: 0;
    will-change: transform; /* Performance hint for the browser */
}

.matrix-row:nth-child(odd) {
    animation: scroll-left 80s linear infinite;
}

.matrix-row:nth-child(even) {
    animation: scroll-right 80s linear infinite;
}

/* ==========================================================================
   4. Core Components (Title, Prism)
   ========================================================================== */

.title {
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #f0f4f8;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.1), 0 0 30px rgba(167, 216, 255, 0.2);
    opacity: 0;
    transform: translateY(30px);
    position: relative;
    transition: color 0.5s ease, text-shadow 0.5s ease;
}
.title.visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.dev-part {
    color: #a0c8ff;
    opacity: 0.9;
    font-weight: 500;
    transition: color 0.5s ease;
}

/* Terminal-style blinking cursor */
.dev-part::after {
    content: '';
    position: relative;
    display: inline-block;
    width: 0.6em;
    height: 0.8em;
    margin-left: 0.08em; 
    border-bottom: 0.08em solid;
    top: 0.1em; 
    animation: blink 1s steps(2, start) infinite;
}

.prism-animation {
    width: clamp(240px, 30vw, 350px);
    height: clamp(240px, 30vw, 350px);
    position: relative;
    opacity: 0;
    transform: scale(0.8);
}
.prism-animation.visible {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.prism {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: rotate 6s linear infinite;
    filter: 
        drop-shadow(0 0 7px rgba(255, 255, 255, 0.5)) 
        drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    transition: filter 0.5s ease;
}

/* The outer, colored part of the prism outline */
.prism::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, red, yellow, lime, cyan, blue, magenta, red);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    animation: rainbow-flow 4s linear infinite;
    transition: background 0.5s ease;
}

/* The inner part that "punches out" the center to create an outline */
.prism::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    background: #0a0f1f;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transition: background 0.5s ease;
}

/* ==========================================================================
   5. Special Effects (Glitch, Konami)
   ========================================================================== */

/* Title Glitch Effect */
.title.glitching {
    text-shadow: -2px 0 #ff00c1, 2px 0 #00fff9;
}

.title.glitching::before,
.title.glitching::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--glitch-bg, #0a0f1f);
    overflow: hidden;
    clip-path: inset(50% 0 50% 0);
}

.title.glitching::before {
    transform: translateX(-2px);
    text-shadow: 2px 0 #ff00c1;
    animation: glitch-anim-1 0.3s infinite linear alternate-reverse;
}

.title.glitching::after {
    transform: translateX(2px);
    text-shadow: -2px 0 #00fff9;
    animation: glitch-anim-2 0.3s infinite linear alternate-reverse;
}

/* Konami Code Theme Overrides */
body.matrix-mode {
    background-color: #000;
    --glitch-bg: #000; /* Update CSS variable for glitch background */
}
body.matrix-mode::before {
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(0, 255, 71, 0.1) 0%,
        rgba(0, 255, 71, 0.0) 20%
    );
}
body.matrix-mode .matrix-background {
    color: rgba(0, 255, 71, 0.1);
}
body.matrix-mode .title {
    color: #33ff4e;
    text-shadow: 0 0 10px #33ff4e;
}
body.matrix-mode .dev-part {
    color: #33ff4e;
}
body.matrix-mode .prism::before {
    background: linear-gradient(135deg, #33ff4e, #24e024, #14c414);
    animation: none; /* Disable rainbow flow for a static green */
}
body.matrix-mode .prism {
    filter: drop-shadow(0 0 15px #33ff4e);
}
body.matrix-mode .prism::after {
    background: #000;
}

/* ==========================================================================
   6. Keyframe Animations
   ========================================================================== */

@keyframes fadeInLine { to { opacity: 1; } }

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

@keyframes rainbow-flow {
    from { filter: hue-rotate(0deg) saturate(2) brightness(1.2); }
    to { filter: hue-rotate(360deg) saturate(2) brightness(1.2); }
}

@keyframes scroll-left {
    from { transform: translateX(0%); }
    to { transform: translateX(-50%); }
}

@keyframes scroll-right {
    from { transform: translateX(-50%); }
    to { transform: translateX(0%); }
}

@keyframes glitch-anim-1 {
    0% { clip-path: inset(40% 0 60% 0); }
    20% { clip-path: inset(10% 0 85% 0); }
    40% { clip-path: inset(50% 0 30% 0); }
    60% { clip-path: inset(25% 0 70% 0); }
    80% { clip-path: inset(80% 0 5% 0); }
    100% { clip-path: inset(45% 0 40% 0); }
}

@keyframes glitch-anim-2 {
    0% { clip-path: inset(70% 0 15% 0); }
    20% { clip-path: inset(90% 0 5% 0); }
    40% { clip-path: inset(35% 0 50% 0); }
    60% { clip-path: inset(60% 0 30% 0); }
    80% { clip-path: inset(20% 0 75% 0); }
    100% { clip-path: inset(80% 0 10% 0); }
}

@keyframes blink {
    to {
        visibility: hidden;
    }
}