@import url('https://fonts.googleapis.com/css2?family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
    font-family: "NearvanaDEMO";
    src: 
      local("NearvanaDEMO"), 
      url("./assets/fonts/NearvanaDEMO.otf") format("opentype"), 
      url("./assets/fonts/NearvanaDEMO.woff") format("woff");
}

/* Loader Styles */
.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #120000 0%, #000000 60%);
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.6s ease;
    /* Center the loader content in all viewports */
    display: grid;
    place-items: center;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

 

/* Subtle scanline overlay for a serious, vintage tone */
.loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.055) 0px,
        rgba(255, 255, 255, 0.055) 1px,
        rgba(0, 0, 0, 0) 2px
    );
    mix-blend-mode: overlay;
    opacity: 0.08;
    background-size: 100% 3px;
    animation: scanlines 3s linear forwards;
}

.loading-text {
    /* Center via parent grid; keep text single line and responsive */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 2.2vw, 18px);
    white-space: nowrap;
    text-align: center;
    max-width: calc(100vw - 32px);
    padding: 0 16px;
}

.loading-text span {
    display: inline-block;
    /* margin replaced by flex gap above for consistent spacing */
    color: #c21818;
    font-family: "NearvanaDEMO", 'Quattrocento Sans', Arial, sans-serif;
    /* Responsive sizing to keep the entire word visible on one line */
    font-size: clamp(28px, 9vw, 60px);
    letter-spacing: clamp(1px, 0.9vw, 8px);
    text-shadow:
        0 0 6px rgba(160, 16, 16, 0.35),
        0 0 14px rgba(120, 8, 8, 0.2),
        0 1px 0 #220000;
    /* Serious tone: glow + single-pass blur wave over 3s total */
    will-change: opacity, filter, text-shadow;
    animation:
        glowPulse 3s ease-in-out forwards,
        blur-text 0.9s linear both;
}

/* Desktop-only: make loader larger while preserving single-line fit */
@media (min-width: 1024px) {
  .loading-text {
    gap: clamp(10px, 1.5vw, 28px);
  }
  .loading-text span {
    font-size: clamp(60px, 6vw, 100px);
    letter-spacing: clamp(4px, 0.6vw, 12px);
  }
}

.loading-text span:nth-child(1) {
    animation-delay: 0s, 0s;
    opacity: 1;
}

.loading-text span:nth-child(2) {
    animation-delay: 0s, 0.35s;
    opacity: 1;
}

.loading-text span:nth-child(3) {
    animation-delay: 0s, 0.7s;
    opacity: 1;
}

.loading-text span:nth-child(4) {
    animation-delay: 0s, 1.05s;
    opacity: 1;
}

.loading-text span:nth-child(5) {
    animation-delay: 0s, 1.4s;
    opacity: 1;
}

.loading-text span:nth-child(6) {
    animation-delay: 0s, 1.75s;
    opacity: 1;
}

.loading-text span:nth-child(7) {
    animation-delay: 0s, 2.1s;
    opacity: 1;
}

 

/* Additional loader animations: glow pulse and scanlines */
@keyframes glowPulse {
    0% {
        text-shadow:
            0 0 5px rgba(160, 16, 16, 0.30),
            0 0 12px rgba(120, 8, 8, 0.18),
            0 1px 0 #220000;
    }
    50% {
        text-shadow:
            0 0 8px rgba(180, 20, 20, 0.40),
            0 0 18px rgba(140, 10, 10, 0.25),
            0 1px 0 #2a0000;
    }
    100% {
        text-shadow:
            0 0 5px rgba(160, 16, 16, 0.30),
            0 0 12px rgba(120, 8, 8, 0.18),
            0 1px 0 #220000;
    }
}

/* Per-letter blur animation requested */
@keyframes blur-text {
    0% { filter: blur(0px); }
    100% { filter: blur(4px); }
}

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

.main-content {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.main-content.show {
    opacity: 1;
}

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

html, body {
    height: 100vh;
    overflow: hidden;
    font-family: "NearvanaDEMO", 'Quattrocento Sans', Arial, sans-serif;
    background: #0a0a0a;
    color: rgba(255, 255, 255, 0.9);
}


/* Main container */
.main-container {
    position: relative;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    z-index: 10;
}

/* Typography rendering tweaks for smoother edges */
@font-face {
    font-family: "NearvanaDEMO";
    src: url("assets/fonts/NearvanaDEMO.woff") format("woff"),
         url("assets/fonts/NearvanaDEMO.otf") format("opentype");
    font-display: swap;
}

html, body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --display-tracking: 0em; /* set to -0.02em for tighter density if desired */
    --display-smooth-shadow: 0 0 0.6px rgba(255, 255, 255, 0.28);
}

/* Desktop Navigation */
.navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(228, 226, 220, 0.1);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.nav-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.nav-item {
    display: flex;
    flex-direction: column;
    padding: clamp(0.5rem, 2vh, 1.5rem) 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-height: 0;
    justify-content: center;
    opacity: 0.6; /* less opacity by default for non-selected items */
}

.nav-item:hover:not(.active),
.nav-item:focus-visible:not(.active) {
    background: rgba(20, 20, 20, 0.8);
    border-right: 3px solid rgba(255, 0, 0, 0.5);
    padding-right: calc(2rem - 3px);
    transform: translateX(2px);
    opacity: 1; /* hovered items are fully opaque */
}

.nav-item.active {
    opacity: 1; /* fully opaque for selected item */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border-right: 2px solid rgba(226, 74, 66, 0.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.nav-item .index {
    font-family: "NearvanaDEMO", 'Quattrocento Sans', Arial, sans-serif;
    font-size: clamp(0.8rem, 2vh, 1.1rem);
    letter-spacing: 0.5em;
    color: rgba(228, 226, 220, 0.72);
    margin-bottom: 0.25rem;
}

.nav-item .index::before {
    content: '';
    margin-right: 0.25rem;
}

.nav-item .label {
    font-family: "NearvanaDEMO", 'Quattrocento Sans', Arial, sans-serif;
    font-size: clamp(2.4rem, 5.8vh, 3.8rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: #ffffff;
    /* Center the section name text horizontally and allow tiny optical nudge */
    display: block;
    width: 100%;
    text-align: center;
    transform: translateX(var(--label-offset-x, 0px));
}

/* Apply shared density and smoothing for Nearvana display text */
.nav-item .label,
.mobile-topbar .topbar-title {
    letter-spacing: var(--display-tracking);
    font-kerning: normal;
    text-shadow: var(--display-smooth-shadow);
}

 

/* Content area */
.content-area {
    margin-left: 320px;
    height: 100vh;
    overflow: hidden;
    position: relative;
    display: grid;
}

/* Content sections */
/* merged into main .content-area block above to avoid duplication */
/* Utility */
.hidden { display: none !important; }

.content-section {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
    padding: 2rem;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 400ms ease;
}

.content-section.active {
    opacity: 1;
    pointer-events: auto;
}


 

/* Responsive typography */
/* Removed orphaned typography rules for content-section since there are no h1/h2/p elements inside sections */

/* Mobile top bar */
.mobile-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: rgba(10, 10, 10, 0.9);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 1002;
    display: none;
    align-items: center;
    padding: 0 12px;
    backdrop-filter: blur(10px);
    gap: 8px;
}

/* Fallbacks for environments without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .navigation,
    .mobile-topbar {
        background: rgba(10, 10, 10, 0.95);
    }
}

.mobile-topbar .topbar-title {
    font-family: monospace;
    font-size: 0.95rem;
    letter-spacing: 0.35em;
    color: rgba(228, 226, 220, 0.9);
    text-align: center;
    flex: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .navigation { 
        display: none !important; 
    }
    
    .content-area { 
        margin-left: 0;
        padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px));
        height: 100vh; /* fallback */
        height: 100dvh; /* dynamic viewport for modern browsers */
        overflow: hidden;
    }
    
    .mobile-topbar { 
        display: flex; 
        justify-content: space-between;
        align-items: center;
        gap: 0; /* ensure perfect symmetry */
    }

    /* Mobile-only: Nearvana title — denser and smoother */
    .mobile-topbar .topbar-title {
        font-family: "NearvanaDEMO", 'Quattrocento Sans', Arial, sans-serif;
        font-weight: 900;
        font-size: 1.5rem; /* slightly smaller per user request */
        line-height: 1.1;
        white-space: nowrap;
        text-align: center;
        display: block;
        flex: 1; /* occupy the center area between arrows */
        /* shared tracking + smoothing handled globally via combined selector */
    }
    
    .content-section { 
        height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top, 0px)); /* fallback */
        height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top, 0px)); /* dynamic viewport */
        padding: 0; /* remove extra padding so sections can truly center under the fixed top bar */
        box-sizing: border-box;
    }


    /* Mobile-only: hide section-level headings/descriptions without affecting inner card labels */
    .content-section > h1,
    .content-section > h2,
    .content-section > h3,
    .content-section > p {
        display: none !important;
    }
    

}

 

/* Focus styles for accessibility */
.nav-item:focus {
    outline: 2px solid rgba(255, 0, 0, 0.5);
    outline-offset: 2px;
}

/* Simplified full-section transitions: crossfade + blur via CSS transitions */

/* Grid layouts for content sections */

 

/* Cleaned stray token and duplicate nav-item block */
    /* Topbar swipe arrows */
    .swipe-top-arrow {
        background: transparent;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--topbar-btn-size);
        height: var(--topbar-btn-size);
        flex: 0 0 var(--topbar-btn-size); /* reserve equal space on both sides */
        padding: 0;
        margin: 0;
        cursor: pointer;
        touch-action: manipulation;
        opacity: 0.35;
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .swipe-top-arrow.available { opacity: 0.85; }
    .swipe-top-arrow:active { transform: scale(0.96); }

    .mobile-topbar .arrow-svg {
        width: 26px;
        height: 26px;
        filter: drop-shadow(0 0 3px rgba(195, 66, 60, 0.6));
    }

    .mobile-topbar .arrow-svg path {
        fill: none;
        stroke: #c3423c;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
/* Section video styles */
.section-video-container {
    position: fixed;
    top: 0;
    left: 320px;
    width: calc(100vw - 320px);
    height: 100vh;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms ease;
}

.section-video-container.active {
    opacity: 1;
}

.section-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    opacity: 1;
    pointer-events: none;
}

/* Mobile responsive for section videos */
@media (max-width: 768px) {
    .section-video-container {
        left: 0;
        top: 56px;
        width: 100vw;
        height: calc(100vh - 56px);
    }
}

/* Logo positioning */
.logo-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    pointer-events: none;
}

.logo {
    width: 80px;
    height: 80px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    object-fit: contain;
    display: block;
}

.logo:hover {
    opacity: 1;
}

/* Mobile responsive for logo */
@media (max-width: 768px) {
    .logo-container {
        bottom: 15px;
        right: 15px;
    }
    
    .logo {
        width: 64px;
        height: 64px;
    }
}

/* Global variables */
:root {
    /* Mobile top bar height used in calculations */
    --topbar-h: 56px;
    /* Consistent arrow button size for perfect symmetry */
    --topbar-btn-size: 44px;
}