/* 
  Strategic Mentorship - Layout & Decorative Styles
  Acted as your Expert Frontend Mentor. 
  Explanatory notes follow British English spelling.
*/

/* ─── SCREEN READERS ONLY (Accessibility) ─── */
.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;
}

/* ─── FILM GRAIN BACKGROUND (Moved from inline HTML for caching) ─── */
.film-grain {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0.045;
    transition: opacity 0.3s ease;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3C/svg%3E");
    background-size: 200px 200px;
    will-change: opacity;
}

.film-grain.scroll-active {
    opacity: 0.09;
}

:root {
    /* 
       DESIGN SYSTEM TOKENS:
       Using CSS variables (Custom Properties) allows for a single point of truth. 
       If we want to change the 'menthol' brand colour, we only change it here.
    */
    --menthol: #2dd4bf;
    --navy-deep: #020617;
}

html {
    /* 
       LAYOUT LOGIC: Smooth Scrolling
       Ensures when a user clicks 'About' in the nav, the browser scrolls 
       elegantly rather than jumping instantly.
    */
    scroll-behavior: smooth;
    /* Prevents the 'layout shift' when scrollbars appear/disappear */
    scrollbar-gutter: stable;
}

/* ─── SCROLLBAR STYLING ─── */
/* 
   Pedagogical Note: ::-webkit-scrollbar is a non-standard pseudo-element 
   supported by Chrome, Safari, and Edge. It allows fine-grained control 
   over the scrollbar's aesthetic to match the dark theme.
*/
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--navy-deep);
}

::-webkit-scrollbar-thumb {
    /* Subtle gradient thumb matches the 'premium' feel */
    background: linear-gradient(to bottom, #1e293b, rgba(45, 212, 191, 0.4));
    border-radius: 10px;
}

/* ─── TYPOGRAPHY & SELECTION ─── */
::selection {
    /* Using 'rgba' for transparency ensures the background is visible through the selection */
    background-color: rgba(45, 212, 191, 0.35);
    color: #e2e8f0;
}

body {
    line-height: 1.8;
    letter-spacing: 0.015em;
}

h1, h2, h3 {
    letter-spacing: -0.02em;
}

*:focus-visible {
    outline: 2px solid var(--menthol);
    outline-offset: 4px;
    box-shadow: 0 0 8px rgba(45, 212, 191, 0.4);
    transition: outline-offset 0.2s ease;
}

/* ─── LAYOUT ENGINE: Flexbox & Grid ─── */

/* 
   GLASSMORPHISM UTILITY:
   - 'backdrop-filter': Blurs whatever appears BEHIND this element.
   - Requires a semi-transparent 'background' to work visually.
*/
.glass {
    background: rgba(30, 41, 59, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 
   PRODUCT CARD: Magnetic Light-Source Mechanics
   This implements a "spotlight" effect that follows the mouse.
*/
.product-card {
    /* 
       TRANSITION: Using 'cubic-bezier' instead of 'ease-in-out' provides a 
       more "organic" and premium movement feel. 
    */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* 
   LAYOUT LOGIC: ::before Pseudo-element
   The 'spotlight' glow is actually this hidden element. 
   '--mouse-x' and '--mouse-y' are injected into the element's style 
   dynamically via JavaScript when the mouse moves.
*/
.product-card::before {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    /* Gradient goes from brand teal to transparent */
    background: radial-gradient(circle, rgba(45, 212, 191, 0.13) 0%, transparent 65%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.45s ease, opacity 0.45s ease;
    pointer-events: none; /* Crucial: clicks should pass THROUGH the glow to the button below */
    left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);
    opacity: 0;
    z-index: 0;
}

.product-card:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ─── RESPONSIVE DESIGN: Media Queries ─── */

/* 
   MOBILE-FIRST LOGIC:
   Standard 'mobile-first' strategy defines styles for small screens first, 
   then uses @media (min-width: ...) to add complexity for desktops. 
   However, this project uses @media (max-width: 768px) to 'undo' desktop styles 
   for mobile devices.
*/
@media (max-width: 768px) {
    .hero-title {
        /* Fluid typography: making text smaller for phone-sized viewports */
        font-size: 3.5rem;
        line-height: 1.1;
    }

    #hero-portrait-bg {
        /* For mobile, we shift the background portrait to keep the face visible */
        width: 150vw;
        left: 30%;
        opacity: 0.1;
    }
}

/* ─── KEYFRAME ANIMATIONS ─── */

@keyframes menthol-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.4);
    }
    70% {
        /* Creating a 'wave' effect by expanding the shadow to 15px then fading */
        box-shadow: 0 0 0 15px rgba(45, 212, 191, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(45, 212, 191, 0);
    }
}

/* ─── SCROLL REVEAL SYSTEM ─── */
/*
   Elements with .reveal-item start invisible and slightly shifted down.
   When the IntersectionObserver fires, it adds .reveal-item-active,
   triggering the CSS transition defined here. The JS never touches
   opacity directly — it just toggles a class. Clean separation of concerns.
*/
.reveal-item {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

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

/* ─── SCROLL PROGRESS BAR ─── */
/*
   A thin bar at the top of the viewport. JS sets width as a percentage.
   'position: fixed' + 'top: 0' places it above the header.
   z-index: 100 keeps it below the header (z-50 = 50) – wait, header is z-50,
   so we use z-[60] to ensure the bar is always visible above content but
   below modals.
*/
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: linear-gradient(to right, #2dd4bf, #5eead4);
    z-index: 60;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ─── LANGUAGE SWITCHER – Active State ─── */
/*
   JS adds/removes .lang-active via classList.toggle().
   This class provides the visual "pill" highlight for the selected language.
*/
.lang-active {
    background-color: #2dd4bf;
    color: #020617;
}

/* ─── TERMINAL WINDOW ─── */
/*
   The header bar mimics a real terminal title bar (traffic light buttons).
   The ::before pseudo-element generates the red/yellow/green dots without
   extra HTML elements.
*/
.terminal-window {
    background: #000;
    backdrop-filter: none;
}

.terminal-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(45, 212, 191, 0.1);
    position: relative;
}

.terminal-header::before {
    content: '● ● ●';
    position: absolute;
    left: 12px;
    font-size: 8px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.15);
}

.terminal-content {
    padding: 20px 24px;
}

.terminal-content p {
    margin-bottom: 1.25rem;
}

/* Blinking cursor for terminal output */
.terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    background-color: #2dd4bf;
    margin-left: 2px;
    animation: blink 1s step-end infinite;
    vertical-align: text-bottom;
}

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

/* ─── HERO PORTRAIT ─── */
#hero-portrait-bg {
    position: absolute;
    right: -5%;
    top: 50%;
    transform: translateY(-50%);
    width: 55vw;
    max-width: 700px;
    opacity: 0.12;
    filter: grayscale(100%);
    pointer-events: none;
    user-select: none;
}

/* ─── HERO GRADIENT OVERLAY ─── */
/* Fades the portrait into the dark background so it blends naturally */
#hero-gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        #020617 30%,
        transparent 60%,
        #020617 90%
    );
    pointer-events: none;
}



/* ─── GATEKEEPER TOGGLE ─── */
input[type="checkbox"].gatekeeper-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gatekeeper-label {
    position: relative;
    padding-left: 3rem;
    cursor: pointer;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.85rem;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    text-align: left;
    display: inline-block;
}

.gatekeeper-label::before {
    content: '[ ]';
    position: absolute;
    left: 0;
    color: #475569;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

input[type="checkbox"].gatekeeper-input:checked + .gatekeeper-label {
    opacity: 1;
}

input[type="checkbox"].gatekeeper-input:checked + .gatekeeper-label::before {
    content: '[X]';
    color: #2dd4bf;
    text-shadow: 0 0 8px rgba(45, 212, 191, 0.6);
}

/* ─── PRODUCT MODAL ─── */
/*
   The overlay covers the full viewport. It's hidden by default (opacity:0,
   pointer-events:none). The .modal-open class makes it visible.
   We animate with opacity + transform for a premium feel.
*/
#product-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#product-modal-overlay.modal-open {
    opacity: 1;
    pointer-events: auto;
}

#product-modal-box {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid rgba(45, 212, 191, 0.2);
    border-radius: 1.5rem;
    padding: 3rem 2.5rem 2.5rem;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 0 60px rgba(45, 212, 191, 0.1), 0 30px 80px rgba(0, 0, 0, 0.6);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

#product-modal-overlay.modal-open #product-modal-box {
    transform: translateY(0) scale(1);
}

#product-modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}

#product-modal-close:hover {
    background: rgba(45, 212, 191, 0.15);
    color: #2dd4bf;
}

#modal-icon-wrap {
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
}

#modal-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

#modal-description {
    color: #94a3b8;
    line-height: 1.75;
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

#modal-price {
    display: inline-block;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2dd4bf;
    background: rgba(45, 212, 191, 0.08);
    border: 1px solid rgba(45, 212, 191, 0.25);
    border-radius: 0.5rem;
    padding: 0.4rem 0.9rem;
    margin-bottom: 1.75rem;
    letter-spacing: 0.04em;
}

#modal-cta {
    display: inline-block;
    padding: 0.85rem 2rem;
    background: #2dd4bf;
    color: #020617;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 0 20px rgba(45, 212, 191, 0.3);
}

#modal-cta:hover {
    background: #5eead4;
    box-shadow: 0 0 30px rgba(45, 212, 191, 0.5);
}