/* adhoc.quest - Chrome Metallic Zen Design */
/* Palette: #0c0e14 (deep void), #161a24 (dark chrome), #3a3f4e (chrome surface),
   #e8eaef (chrome highlight), #b0b8c9 (body text), #5ea8d4 (accent glow), #c4ccd8 (liquid mercury) */

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

html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(170deg, #0c0e14 0%, #161a24 50%, #0c0e14 100%);
    background-attachment: fixed;
    color: #b0b8c9;
    font-family: 'Varela Round', sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 2.0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ===== BLOB LAYER ===== */
.blob-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
}

.blob {
    position: absolute;
    width: 500px;
    height: 500px;
    opacity: 0.07;
    transition: opacity 0.5s ease;
}

.blob-1 {
    top: -10%;
    left: -5%;
    animation: blobDrift1 25s ease-in-out infinite;
}

.blob-2 {
    top: 30%;
    right: -10%;
    animation: blobDrift2 28s ease-in-out infinite;
}

.blob-3 {
    bottom: 10%;
    left: 20%;
    animation: blobDrift3 22s ease-in-out infinite;
}

.blob-4 {
    bottom: -5%;
    right: 15%;
    animation: blobDrift4 30s ease-in-out infinite;
}

@keyframes blobDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, 40px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

@keyframes blobDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-40px, 30px) scale(0.96); }
    66% { transform: translate(20px, -30px) scale(1.04); }
}

@keyframes blobDrift3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(25px, -35px) scale(1.03); }
    66% { transform: translate(-15px, 25px) scale(0.97); }
}

@keyframes blobDrift4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-30px, -20px) scale(1.06); }
    66% { transform: translate(35px, 15px) scale(0.94); }
}

/* ===== BLOB PATH MORPHING ===== */
.blob-1 .blob-path {
    animation: blobMorph1 25s ease-in-out infinite;
}

.blob-2 .blob-path {
    animation: blobMorph2 28s ease-in-out infinite;
}

.blob-3 .blob-path {
    animation: blobMorph3 22s ease-in-out infinite;
}

.blob-4 .blob-path {
    animation: blobMorph4 30s ease-in-out infinite;
}

@keyframes blobMorph1 {
    0%, 100% { d: path('M300,520C180,520,80,420,80,300C80,180,180,80,300,80C420,80,520,180,520,300C520,420,420,520,300,520Z'); }
    50% { d: path('M320,510C200,540,60,410,70,290C80,170,200,70,330,90C460,110,540,210,530,330C520,450,440,480,320,510Z'); }
}

@keyframes blobMorph2 {
    0%, 100% { d: path('M300,500C160,500,60,400,60,280C60,160,180,60,320,60C460,60,540,160,540,280C540,400,440,500,300,500Z'); }
    50% { d: path('M280,510C150,480,80,370,100,250C120,130,240,50,360,80C480,110,550,240,520,360C490,480,410,540,280,510Z'); }
}

@keyframes blobMorph3 {
    0%, 100% { d: path('M280,510C150,490,70,380,90,260C110,140,230,60,360,80C490,100,550,230,530,350C510,470,410,530,280,510Z'); }
    50% { d: path('M310,520C180,530,60,420,80,290C100,160,210,80,340,100C470,120,560,250,530,370C500,490,440,510,310,520Z'); }
}

@keyframes blobMorph4 {
    0%, 100% { d: path('M320,530C190,540,70,430,60,310C50,190,150,70,290,60C430,50,560,170,550,300C540,430,450,520,320,530Z'); }
    50% { d: path('M290,520C170,510,80,400,90,280C100,160,200,60,330,70C460,80,550,200,540,330C530,460,410,530,290,520Z'); }
}

/* ===== NAVIGATION ===== */
.nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 0;
}

.nav-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #3a3f4e 30%, #3a3f4e 70%, transparent 100%);
    opacity: 0.4;
}

.nav-content {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 0.8rem 2rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.nav-bar:hover .nav-content {
    opacity: 1;
    transform: translateY(0);
}

.nav-link {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #b0b8c9;
    text-decoration: none;
    transition: color 0.4s ease;
}

.nav-link:hover {
    color: #5ea8d4;
}

/* ===== REVEAL ANIMATION ===== */
.reveal {
    filter: blur(12px);
    opacity: 0;
    transform: translateY(20px);
    transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
}

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

/* ===== OPENING VOID ===== */
.opening-void {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.domain-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 4.5rem);
    letter-spacing: 0.04em;
    color: #e8eaef;
    text-shadow: 0 0 40px rgba(180, 190, 210, 0.3);
    mix-blend-mode: screen;
}

/* ===== CHROME LINES ===== */
.chrome-line {
    position: relative;
    z-index: 1;
    height: 1px;
    margin: max(10vh, 80px) auto;
}

.chrome-line-1 {
    width: 25%;
    margin-left: 15%;
    background: linear-gradient(90deg, transparent, #3a3f4e, transparent);
}

.chrome-line-2 {
    width: 30%;
    margin-left: auto;
    margin-right: 20%;
    background: linear-gradient(90deg, transparent, #3a3f4e, transparent);
}

.chrome-line-3 {
    width: 20%;
    margin-left: 40%;
    background: linear-gradient(90deg, transparent, #3a3f4e, transparent);
}

.chrome-line-4 {
    width: 35%;
    margin-left: 10%;
    background: linear-gradient(90deg, transparent, #3a3f4e, transparent);
}

/* ===== ENCOUNTERS (CONTENT SECTIONS) ===== */
.encounter {
    position: relative;
    z-index: 1;
    min-height: 80vh;
    display: flex;
    align-items: center;
    padding: max(20vh, 200px) 0;
}

.content-block {
    max-width: 520px;
}

.content-block p {
    max-width: 48ch;
}

/* First encounter: left positioned */
.encounter-first {
    justify-content: flex-start;
}

.content-left {
    margin-left: clamp(8vw, 15vw, 200px);
}

/* Second encounter: right positioned */
.encounter-second {
    justify-content: flex-end;
    position: relative;
}

.content-right {
    margin-left: auto;
    margin-right: clamp(8vw, 15vw, 200px);
}

/* Crystal background motif */
.crystal-bg {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 350px;
    height: 350px;
    pointer-events: none;
}

.crystal-rotate {
    transform-origin: center;
    animation: crystalSpin 60s linear infinite;
}

@keyframes crystalSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.crystal-line {
    stroke-dasharray: 400;
    stroke-dashoffset: 0;
    animation: crystalDraw 15s linear infinite;
}

@keyframes crystalDraw {
    0% { stroke-dashoffset: 0; }
    50% { stroke-dashoffset: 400; }
    100% { stroke-dashoffset: 800; }
}

/* Third encounter: centered narrow */
.encounter-third {
    justify-content: center;
}

.content-center {
    max-width: 380px;
    margin: 0 auto;
    text-align: center;
}

/* Fourth encounter: left positioned */
.encounter-fourth {
    justify-content: flex-start;
}

/* ===== TYPOGRAPHY ===== */
.headline {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    letter-spacing: 0.04em;
    color: #e8eaef;
    text-shadow: 0 0 40px rgba(180, 190, 210, 0.3);
    mix-blend-mode: screen;
    margin-bottom: 1.5rem;
}

.body-text {
    color: #b0b8c9;
    line-height: 2.0;
    max-width: 48ch;
}

/* ===== CLOSING VOID ===== */
.closing-void {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: max(20vh, 200px) 0;
}

.crystal-glyph-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    cursor: pointer;
}

.crystal-glyph {
    width: 180px;
    height: 180px;
}

.glyph-rotate {
    transform-origin: 150px 150px;
    animation: glyphSpin 60s linear infinite;
    transition: stroke 0.8s ease;
}

.crystal-glyph-container:hover .glyph-rotate {
    animation-duration: 15s;
    stroke: #5ea8d4;
}

@keyframes glyphSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.glyph-line {
    stroke-dasharray: 300;
    stroke-dashoffset: 0;
    animation: glyphDraw 20s linear infinite;
}

@keyframes glyphDraw {
    0% { stroke-dashoffset: 0; }
    50% { stroke-dashoffset: 300; }
    100% { stroke-dashoffset: 600; }
}

.glyph-label {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #c4ccd8;
    transition: color 0.8s ease;
}

.crystal-glyph-container:hover .glyph-label {
    color: #5ea8d4;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .blob {
        width: 350px;
        height: 350px;
    }

    .encounter {
        padding: max(12vh, 120px) 1.5rem;
    }

    .content-left,
    .content-right {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
    }

    .content-center {
        margin: 0 1.5rem;
    }

    .content-block {
        max-width: 100%;
    }

    .crystal-bg {
        width: 200px;
        height: 200px;
        top: 5%;
        left: 2%;
    }

    .nav-content {
        gap: 1.5rem;
    }

    .chrome-line {
        margin-left: 10% !important;
        margin-right: 10% !important;
        width: 80% !important;
    }
}