/* ==========================================================
   PROJECT DAWN
   MAIN.CSS
   PART 1
========================================================== */

/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

body{
    position:relative;
    overflow-x:hidden;
    background:var(--bg);
    color:var(--paper);
    font-family:var(--font-main);
}

/* ==========================================================
   UTILITIES
========================================================== */

.hidden{
    display:none !important;
}

.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
}

/* ==========================================================
   INTRO
========================================================== */

.intro{

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    justify-content:center;

    align-items:center;

    background:

linear-gradient(
    180deg,
    #080a10 0%,
    #10151d 55%,
    #171711 100%
);

   @keyframes introGlow{

    0%{

        background-position:45% 60%;

    }

    100%{

        background-position:55% 40%;

    }

}
   
    cursor:pointer;

    transition:
        opacity 2.6s ease,
        visibility 2.6s ease,
        background var(--world-transition);

   overflow:hidden;
isolation:isolate;

}

.intro::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.14;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");

    mix-blend-mode:overlay;

    animation:
        noiseMove 8s steps(4) infinite;

}

@keyframes noiseMove{

    0%{

        transform:translate(0,0);

    }

    25%{

        transform:translate(-2%,1%);

    }

    50%{

        transform:translate(1%,-2%);

    }

    75%{

        transform:translate(2%,2%);

    }

    100%{

        transform:translate(0,0);

    }

}

.intro.hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

.intro-content{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:34px;

    text-align:center;

    padding:40px;

   position:relative;
z-index:2;

}

.intro-logo{

    margin:0;

    font-size:clamp(2.2rem,5vw,5.8rem);

    font-weight:700;

   text-shadow:
    0 0 30px rgba(255,255,255,.08),
    0 0 80px rgba(255,220,140,.06);

    letter-spacing:.18em;

    color:#f5f0e6;

    text-transform:uppercase;

    transition:
        color var(--slow-transition),
        opacity 4s ease;

}

.intro-action{

    font-size:clamp(.95rem,1.6vw,1.15rem);

    letter-spacing:.42em;

    text-transform:uppercase;

    color:var(--muted);

    transition:
        color var(--slow-transition);

}

.intro:hover .intro-action{

    color:var(--gold);

}

/* ==========================================================
   WORLD
========================================================== */

.world{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    opacity:1;

    transition:
        opacity 2.8s ease;

}

/* ==========================================================
   BACKGROUND
========================================================== */

.background-layer{

    position:fixed;

    inset:0;

    z-index:-30;

    background:
        radial-gradient(
            circle at top,
            rgba(255,225,170,.045),
            transparent 55%
        ),
        linear-gradient(
            180deg,
            var(--bg-2),
            var(--bg)
        );

}

/* ==========================================================
   GRAIN
========================================================== */

.grain-layer{

    position:fixed;

    inset:-200px;

    z-index:-20;

    opacity:var(--grain-opacity);

    pointer-events:none;

    background-image:

        radial-gradient(
            rgba(255,255,255,.04) .6px,
            transparent .6px
        );

    background-size:5px 5px;

    transform:rotate(.35deg);

}

/* ==========================================================
   LIGHT
========================================================== */

.light-layer{

    position:fixed;

    inset:-25%;

    z-index:-10;

    pointer-events:none;

    background:

        radial-gradient(

            circle,

            var(--light),

            transparent 65%

        );

    filter:blur(80px);

    opacity:.75;

}

/* ==========================================================
   GHOST WORDS
========================================================== */

.ghost-words{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

    z-index:-5;

}

.ghost-words span{

    position:absolute;

    font-size:clamp(3rem,9vw,11rem);

    font-weight:700;

    letter-spacing:.55em;

    color:rgba(255,255,255,var(--ghost-opacity));

    text-transform:uppercase;

    user-select:none;

    white-space:nowrap;

}

.ghost-words span:nth-child(1){

    top:5%;
    left:4%;

}


.ghost-words span:nth-child(2){

    top:25%;
    right:-10%;

}


.ghost-words span:nth-child(3){

    bottom:35%;
    left:12%;

}


.ghost-words span:nth-child(4){

    bottom:5%;
    right:5%;

}


.ghost-words span:nth-child(5){

    top:55%;
    left:38%;

}

@media(max-width:768px){

    .ghost-words span{

        font-size:clamp(2.5rem,15vw,6rem);

        letter-spacing:.35em;

    }


    .ghost-words span:nth-child(1){

        top:10%;
        left:-5%;

    }


    .ghost-words span:nth-child(2){

        top:30%;
        right:-20%;

    }


    .ghost-words span:nth-child(3){

        bottom:35%;
        left:-5%;

    }


    .ghost-words span:nth-child(4){

        bottom:10%;
        right:-10%;

    }


    .ghost-words span:nth-child(5){

        top:55%;
        left:25%;

    }

}

.ghost-words span:nth-child(odd){
    opacity:.5;
}

.ghost-words span:nth-child(even){
    opacity:.25;
}

/* ==========================================================
   EDITION
========================================================== */

.edition{

    width:min(1380px,92vw);

    margin:0 auto;

    min-height:100vh;

    display:grid;

    grid-template-columns:
        minmax(380px,560px)
        minmax(420px,1fr);

    gap:110px;

    align-items:start;

    padding:
        70px
        0
        100px;

}

/* ==========================================================
   COVER AREA
========================================================== */

.cover-area{

    display:flex;

    justify-content:center;

    align-items:center;

}

.cover-area{

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;

    width:100%;

}

.album-cover{

    width:min(100%,540px);

    aspect-ratio:1/1;

    object-fit:cover;

    opacity:0;

    filter:

        brightness(var(--cover-brightness))

        saturate(var(--cover-saturation))

        contrast(var(--cover-contrast));

    transform:

        scale(var(--cover-scale))

        rotate(var(--cover-rotation));

    box-shadow:var(--cover-shadow);

    transition:

        opacity 2.8s cubic-bezier(.22,.61,.36,1),
        filter 4s ease,
        transform 4s ease,
        box-shadow 4s ease;

}

/* ==========================================================
   RIGHT COLUMN
========================================================== */

.meta-area{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    gap:28px;

    min-width:0;

}

/* ==========================================================
   END PART 1
========================================================== */
/* ==========================================================
   PART 2
   TYPOGRAPHY / META / ARTIST
========================================================== */

/* ==========================================================
   LANGUAGE
========================================================== */

.language-switch{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:18px;

    user-select:none;

}

.lang-btn{

    padding:0;

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--muted);

    opacity:.85;

}

.lang-btn.active{

    color:var(--paper);

    opacity:1;

}

.language-switch span{

    color:var(--muted);

}

/* ==========================================================
   TITLE
========================================================== */

.title-row{

    display:flex;

    align-items:flex-end;

    gap:16px;

    flex-wrap:wrap;

}

.album-title{

    margin:0;

    font-size:clamp(3.4rem,7vw,6.8rem);

    font-weight:800;

    line-height:.95;

    letter-spacing:-.05em;

    color:var(--paper);

}

.meta-label{

    margin-bottom:.7rem;

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--muted);

    transition:color var(--slow-transition);

}

.title-row:hover .meta-label{

    color:var(--gold);

}

/* ==========================================================
   ARTIST
========================================================== */

.artist-row{

    display:flex;

    align-items:flex-end;

    gap:16px;

    flex-wrap:wrap;

}

.artist-name{

    margin:0;

    font-size:clamp(2rem,3vw,3rem);

    font-weight:700;

    letter-spacing:-.02em;

    color:var(--paper);

}

.artist-row:hover .meta-label{

    color:var(--gold);

}

/* ==========================================================
   RELEASE
========================================================== */

.release-row{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:6px;

    font-size:1rem;

    letter-spacing:.08em;

}

.release-label{

    color:var(--muted);

    text-transform:uppercase;

}

.release-date{

    color:var(--paper);

    font-weight:500;

}

/* ==========================================================
   DESCRIPTION
========================================================== */

.album-description{

    max-width:640px;

    margin-top:18px;

    font-size:1.18rem;

    line-height:1.85;

    color:var(--ink);

    opacity:.94;

}

/* ==========================================================
   ARTIST CARD
========================================================== */

.artist-card{

    margin-top:34px;

    width:160px;

}

.artist-photo{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:4px;

    filter:

        grayscale(.1)

        contrast(1.02)

        brightness(.94);

    box-shadow:

        0 18px 40px rgba(0,0,0,.28);

    transition:

        transform 2s ease,

        filter 2s ease,

        box-shadow 2s ease;

}

.artist-card:hover .artist-photo{

    transform:translateY(-2px);

    filter:

        grayscale(0)

        contrast(1.05)

        brightness(1);

}

/* ==========================================================
   DIVIDERS
========================================================== */

.meta-area::after{

    content:"";

    display:block;

    width:90px;

    height:1px;

    margin-top:10px;

    background:

        linear-gradient(

            90deg,

            rgba(255,255,255,.25),

            transparent

        );

}

/* ==========================================================
   HOVER ACCENTS
========================================================== */

.album-title,
.artist-name,
.release-date,
.album-description{

    transition:

        color var(--slow-transition),

        opacity var(--slow-transition);

}

.album-title:hover{

    color:var(--gold);

}

.artist-name:hover{

    color:var(--gold);

}

.release-date:hover{

    color:var(--gold);

}

/* ==========================================================
   DESKTOP AIR
========================================================== */

@media (min-width:1200px){

    .meta-area{

        padding-right:40px;

    }

    .album-description{

        max-width:680px;

    }

}

/* ==========================================================
   TABLET
========================================================== */

@media (max-width:980px){

    .edition{

        grid-template-columns:1fr;

        gap:70px;

        padding-top:80px;

    }

    .cover-area{

        order:1;

    }

    .meta-area{

        order:2;

        align-items:center;

        text-align:center;

    }

    .title-row,
    .artist-row,
    .release-row{

        justify-content:center;

    }

    .album-description{

        max-width:680px;

    }

    .artist-card{

        width:190px;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:640px){

    .meta-area{

        gap:22px;

    }

    .album-title{

        font-size:3.4rem;

    }

    .artist-name{

        font-size:2rem;

    }

    .album-description{

        font-size:1rem;

        line-height:1.8;

        padding:0 6px;

    }

    .artist-card{

        width:170px;

    }

    .language-switch{

        margin-bottom:10px;

    }

}

/* ==========================================================
   END PART 2
========================================================== */
/* ==========================================================
   PART 3
   PLAYER / PLAYLIST
========================================================== */

/* ==========================================================
   PLAYER
========================================================== */

.player-panel{

    display:flex;

    flex-direction:column;

    gap:22px;

    margin-top:18px;

}

.player-controls{

    display:flex;

    align-items:center;

    gap:28px;

    flex-wrap:wrap;

}

.control-link{

    position:relative;

    padding:0;

    font-size:.96rem;

    font-weight:600;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--paper);

    opacity:.92;

}

.control-link::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-6px;

    width:0;

    height:1px;

    background:var(--gold);

    transition:
        width .8s ease;

}

.control-link:hover{

    color:var(--gold);

}

.control-link:hover::after{

    width:100%;

}

/* ==========================================================
   TIME
========================================================== */

.player-time{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:.88rem;

    letter-spacing:.18em;

    color:var(--muted);

}

.time-separator{

    opacity:.35;

}

/* ==========================================================
   PROGRESS
========================================================== */

.progress-track{

    touch-action:none;

    cursor:pointer;

    position:relative;

    width:100%;

    height:2px;

    overflow:hidden;

    background:rgba(255,255,255,.08);

}

.progress-track.locked{

    cursor:default;

}

.progress-fill{

    width:0%;

    height:100%;

    background:var(--gold);

    transition:width .25s linear;

}

/* ==========================================================
   PLAYLIST
========================================================== */

.playlist-section{

    margin-top:28px;

}

.playlist{

    display:flex;

    flex-direction:column;

}

.playlist{
    transform:translateY(-20px);
}

/* ==========================================================
   TRACK
========================================================== */

.track{

    position:relative;

    display:grid;

    grid-template-columns:

        52px

        1fr

        auto;

    align-items:center;

    gap:18px;

    padding:16px 0;

    border-bottom:

        1px solid rgba(255,255,255,.07);

    transition:

        border-color 1.4s ease,

        opacity 1.4s ease,

        transform 1.4s ease;

}

.track:hover{

    border-color:

        rgba(216,177,90,.28);

}

/* ==========================================================
   NUMBER
========================================================== */

.track-number{

    font-size:.84rem;

    letter-spacing:.24em;

    color:var(--muted);

}

/* ==========================================================
   TITLE
========================================================== */

.track-title{

    font-size:1.08rem;

    font-weight:500;

    color:var(--paper);

    letter-spacing:.02em;

    transition:

        color 2s ease,

        opacity 2s ease;

}

/* ==========================================================
   ENCODED TITLE
========================================================== */

.track.locked .track-title{

    color:rgba(255,255,255,.34);

    letter-spacing:.18em;

}

.track.current .track-title{

    color:var(--paper);

}

.track.completed .track-title{

    color:var(--paper);

}

/* ==========================================================
   STATUS
========================================================== */

.track-status{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:10px;

    min-width:70px;

    font-size:.85rem;

    color:var(--muted);

}

/* ==========================================================
   COMPLETED
========================================================== */

.track.completed .track-status{

    color:var(--gold);

}

.track.completed .track-status::before{

    content:"☼";

    font-size:1rem;

}

/* ==========================================================
   SKIPPED
========================================================== */

.track.skipped{

    opacity:.62;

}

.track.skipped .track-status::before{

    content:"—";

}

/* ==========================================================
   CURRENT
========================================================== */

.track.current{

    transform:translateX(10px);

}

.track.current::before{

    content:"";

    position:absolute;

    left:-14px;

    top:50%;

    width:6px;

    height:6px;

    margin-top:-3px;

    border-radius:50%;

    background:var(--gold);

}

/* ==========================================================
   HIDDEN SECTIONS
========================================================== */

.hidden-section{

    margin-top:140px;

    opacity:.06;

    pointer-events:none;

    transition:

        opacity 4s ease;

}

.hidden-section.unlocked{

    opacity:1;

    pointer-events:auto;

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:640px){

    .player-controls{

        justify-content:center;

        gap:22px;

    }

    .track{

        grid-template-columns:

            40px

            1fr

            auto;

        gap:12px;

    }

    .track-title{

        font-size:1rem;

    }

}
/* ==========================================================
   PART 4
   HIDDEN LAYERS / MYTH / COMMUNICATION
========================================================== */

/* ==========================================================
   HIDDEN SECTIONS
========================================================== */

.hidden-section {
    display: none;
}

.hidden-section.unlocked{

    opacity:1;

    pointer-events:auto;

    transform:translateY(0);

}

.hidden-section h3{

    margin:0 0 42px;

    font-size:clamp(2rem,4vw,3rem);

    font-weight:700;

    letter-spacing:.02em;

    color:var(--paper);

}

/* ==========================================================
   COMMUNICATION
========================================================== */

.communication-form{

    display:flex;

    flex-direction:column;

    gap:18px;

    max-width:720px;

}

.communication-form input,
.communication-form textarea{

    width:100%;

    padding:18px 0;

    background:none;

    border:none;

    border-bottom:1px solid rgba(255,255,255,.12);

    color:var(--paper);

    font:inherit;

    resize:vertical;

    transition:

        border-color 1s ease,

        color 1s ease;

}

.communication-form input:focus,
.communication-form textarea:focus{

    outline:none;

    border-color:var(--gold);

}

.communication-form textarea{

    min-height:180px;

}

.communication-form button{

    align-self:flex-start;

    margin-top:18px;

    padding:0;

    font-size:.95rem;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:var(--paper);

}

.communication-form button:hover{

    color:var(--gold);

}

/* ==========================================================
   GO DEEPER
========================================================== */

.go-deeper{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    pointer-events:none;

    transition:

        opacity 4s ease;

}

.go-deeper.visible{

    opacity:1;

    pointer-events:auto;

}

.go-deeper-button{

    font-size:clamp(2rem,5vw,5rem);

    font-weight:700;

    letter-spacing:.08em;

    color:var(--paper);

    transition:

        color 2s ease,

        letter-spacing 2s ease,

        transform 2s ease;

}

.go-deeper-button:hover{

    color:var(--gold);

    letter-spacing:.14em;

    transform:translateY(-3px);

}

/* ==========================================================
   MYTH PORTAL
========================================================== */

.myth-portal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#040404;

    opacity:0;

    pointer-events:none;

    transition:

        opacity 5s ease;

    z-index:300;

}

.myth-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #000;
}

.myth-portal.visible{

    opacity:1;

    pointer-events:auto;

}

.myth-title{

    font-size:clamp(2.4rem,7vw,7rem);

    font-weight:700;

    letter-spacing:.24em;

    text-transform:uppercase;

    color:var(--paper);

    animation:

        mythReveal 8s ease forwards;

}

/* ==========================================================
   DIVIDER
========================================================== */

.hidden-section::before{

    content:"";

    display:block;

    width:120px;

    height:1px;

    margin-bottom:48px;

    background:

        linear-gradient(

            90deg,

            rgba(255,255,255,.18),

            transparent

        );

}

/* ==========================================================
   MATERIALS
========================================================== */

.album-cover{

    will-change:

        transform,

        filter;

}

.artist-photo{

    will-change:

        transform,

        filter;

}

.ghost-words span{

    will-change:

        transform,

        opacity;

}

.light-layer{

    will-change:

        opacity,

        transform;

}

/* ==========================================================
   FUTURE LAYERS
========================================================== */

.world{

    isolation:isolate;

}

.world::before{

    content:"";

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:0;

    transition:opacity 6s ease;

}

.world.world-awake::before{

    opacity:1;

}

/* ==========================================================
   MYTH ANIMATION
========================================================== */

@keyframes mythReveal{

    0%{

        opacity:0;

        transform:translateY(30px);

        letter-spacing:.45em;

    }

    25%{

        opacity:1;

        transform:translateY(0);

    }

    70%{

        opacity:1;

    }

    100%{

        opacity:0;

        letter-spacing:.65em;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:640px){

    .hidden-section{

        margin-top:120px;

    }

    .communication-form{

        gap:16px;

    }

    .go-deeper-button{

        font-size:2.4rem;

    }

}

/* ==========================================================
   END MAIN.CSS
========================================================== */

/* ==========================================================
   POLISH PASS I
   DAWN COMPOSITION
========================================================== */

/* ---------- DESKTOP LAYOUT ---------- */

@media (min-width: 1024px){

    .left-column{

        justify-content:flex-start;

        padding-top:2rem;

    }

    .album-cover{

        width:min(430px,100%);
        margin-bottom:2.8rem;

        align-self:center;

    }

    .artist-card{

        transform:scale(1.08);

        transform-origin:top left;

        margin-top:.5rem;

    }

}

/* ---------- COVER AFTER INTRO ---------- */

.album-cover{

    filter:

        brightness(.88)

        contrast(1.02)

        saturate(.98);

    transition:

        opacity 5s ease,

        filter 6s ease,

        transform 6s ease;

}

.world-awake .album-cover{

    filter:

        brightness(.98)

        contrast(1.03)

        saturate(1);

}

/* ---------- PLAYLIST POSITION ---------- */

.playlist{

    width:100%;

    max-width:720px;

    margin-left:0;

    padding-left:0;

}

.track{

    padding-left:0;

    gap:1.2rem;

}

/* ---------- TRACK TITLE ---------- */

.track-title{

    flex:1;

    min-width:0;

}

/* ---------- ARTIST INFO ---------- */

.artist-card{

    display:flex;

    align-items:center;

    gap:1rem;

}

.artist-avatar{

    width:82px;
    height:82px;

}

/* ---------- BUTTON GROUP ---------- */

.secondary-links{

    gap:1.3rem;

}

/* ---------- INTRO MOBILE ---------- */

@media (max-width:640px){

    .intro{

        padding-inline:1.5rem;

    }

    .intro-title{

        white-space:nowrap;

        font-size:clamp(1.6rem,5vw,2rem);

        letter-spacing:.18em;

    }

    .intro-subtitle{

        margin-top:1.4rem;

    }

}

.sun circle {

    fill:white;
    opacity:.8;

}

/* ==========================================================
   MYTH MAP
========================================================== */

.myth-screen {
    position: fixed;
    inset: 0;
    z-index: 1000;

    background: #050505;

    overflow: hidden;
}

.myth-viewport{

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px;

    box-sizing:border-box;

}

.myth-map{

    width:min(92vw,900px);
    height:auto;

    max-height:88vh;

}


.myth-path{

    fill:none;

    stroke:#d9c58a;

    stroke-width:4;

    stroke-dasharray:2000;

    stroke-dashoffset:2000;

}


.myth-path.draw{

    animation:pathDraw 2s forwards;

}


@keyframes pathDraw{

to{

stroke-dashoffset:0;

}

}


.myth-node{

    cursor:pointer;

}


.myth-node text{

    fill:white;

    font-size:24px;

    letter-spacing:.3em;

}


.reveal{

    opacity:1 !important;

    transition:
        opacity 1.5s ease;

}

@media(max-width:768px){

    .myth-map{

        width:92vw;
        height:auto;

    }


    .myth-viewport{

        padding:10px;

    }

}

.myth-point{

fill:#c8dcff;

filter:url(#blueGlow);

animation:
mythPulse 3s ease-in-out infinite;

}


@keyframes mythPulse{

0%,100%{

opacity:.45;

}


50%{

opacity:1;

}

}


.myth-label{

    fill:white;

    font-size:28px;

    letter-spacing:.35em;

    opacity:.85;

    text-transform:uppercase;

}


.myth-sphere{

    transform-origin:center;

}


.sphere-grid{

    opacity:.45;

}


@keyframes sphereMove{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}


.road{

    stroke:#f5d98b;

    stroke-width:5;

    fill:none;

}


.stars circle{

    fill:white;

    animation:
    mythPulse 4s infinite;

}

.myth-figure{

stroke:#dbe8ff;

stroke-width:3;

fill:none;

opacity:.55;

filter:
drop-shadow(
0 0 12px rgba(150,190,255,.5)
);

}


.myth-label{

fill:#ffffff;

font-size:42px;

letter-spacing:.45em;

opacity:.85;

font-family:Inter,sans-serif;

}

.myth-svg {

    width:100%;
    height:100%;

    max-width:100vw;
    max-height:100vh;

}

@media(max-width:600px){

    .myth-svg {

        transform:scale(1.25);

    }

}

    .listen-platforms.show {

    animation:
    listenGlow 5s infinite;

}

.explore-story {

    opacity:0;

    font-size:14px !important;

    letter-spacing:4px;

    text-anchor:middle;

    fill:white;

}


.explore-story.show {

    animation:
    listenGlow 5s infinite;

}

.artist{

opacity:0;

fill:#ffffff;

font-size:28px;

letter-spacing:34px;

font-weight:300;

}

.artist.show{

animation:
artistFade 2.5s forwards;

}

@keyframes artistFade{

from{

opacity:0;

}

to{

opacity:.95;

}

}

.sun-disc {

    fill:none;

    stroke:white;

    stroke-width:2;

    opacity:.65;

    animation:
    sunPulse 7s ease-in-out infinite;

}

.sun-rays {

    fill:none;
    stroke:white;
    stroke-width:1.5;
    opacity:.25;

    animation:
    rayGlow 8s ease-in-out infinite;

}

@keyframes rayGlow {

0%,100% {

    opacity:.15;

}

50% {

    opacity:.65;

}

}

/* @keyframes sunPulse {


0%,100% {

    opacity:.45;

    transform:scale(1);

} */


50% {

    opacity:.9;

    transform:scale(1.08);

}

}

.sun-disc,
.sun-rays {

    transform-box:fill-box;

    transform-origin:center;

}
.birds path {

    fill:none;
    stroke:white;
    stroke-width:2;
    opacity:.5;

    animation:
    birdGlow 8s ease-in-out infinite;

}


@keyframes birdGlow {

0%,100% {

    opacity:.35;

}


50% {

    opacity:.8;

}

}

/* ==========================================================
   PATH
========================================================== */

.myth-path {
    fill: none;

    stroke: rgba(255,255,255,.65);

    stroke-width: 1.2;

    stroke-linecap: round;

    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;

    transition:
        stroke-dashoffset 5s ease;
}

.myth-path.draw {
    stroke-dashoffset: 0;
}

/* ==========================================================
   NODES
========================================================== */

.myth-node {
    cursor: pointer;

    transition:
        opacity 2s ease,
        transform 2s ease;
}

.myth-node:hover {
    filter: url(#mythGlow);
}

.myth-pulse {
    fill: white;

    transform-box: fill-box;
    transform-origin: center;

    animation:
        mythPulse 2.8s ease-in-out infinite;
}

/* ==========================================================
POST MYTH NAVIGATION
========================================================== */

.myth-navigation{

    display:flex;
    flex-direction:column;
    align-items:center;

    width:100%;

    margin-top:37px;

    gap:18px;
}

.myth-navigation.hidden{

    display:none !important;

}

.myth-navigation.visible{

    display:flex !important;

}

.myth-navigation button{

    position:relative;

    padding:0;

    background:none;
    border:none;

    font:inherit;

    font-size:1.08rem;
    font-weight:500;
    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--paper);

    opacity:.88;

    cursor:pointer;

    transition:
        color var(--slow-transition),
        opacity var(--slow-transition),
        letter-spacing var(--slow-transition);

}

.myth-navigation button::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:-8px;

    width:0;
    height:1px;

    transform:translateX(-50%);

    background:var(--gold);

    transition:
        width .8s ease;

}

.myth-navigation button:hover{

    color:var(--gold);

    opacity:1;

    letter-spacing:.18em;

}

.myth-navigation button:hover::after{

    width:100%;

}

@media (min-width:769px){

    .myth-navigation{

        margin-top:7px;

    }

}

/* ==========================================================
   DAWN SHIMMER
========================================================== */

@keyframes dawnShimmer{

    0%{
        color:#d9d2c2;
        text-shadow:none;
    }

    25%{
        color:#f3df9d;
        text-shadow:
            0 0 10px rgba(245,215,120,.18);
    }

    50%{
        color:#d8e7ff;
        text-shadow:
            0 0 12px rgba(170,205,255,.18);
    }

    75%{
        color:#f5e6b5;
        text-shadow:
            0 0 10px rgba(245,220,150,.16);
    }

    100%{
        color:#d9d2c2;
        text-shadow:none;
    }

}

body.myth-completed .myth-navigation button,
body.myth-completed .track-title{

    animation:dawnShimmer 14s ease-in-out infinite;

}

body.myth-completed .myth-navigation button:hover,
body.myth-completed .track:hover .track-title{

    color:#fff5c7;

    text-shadow:

        0 0 18px rgba(255,220,120,.45),

        0 0 40px rgba(160,190,255,.22);

}

.ghost-words span{

    filter:blur(5px);

}

/* ==========================================================
   THEO TRANSITION
========================================================== */

.myth-screen.sleep{

    opacity:0;

    pointer-events:none;

    filter:blur(8px);

    transform:scale(.985);

    transition:
        opacity .7s ease,
        filter .7s ease,
        transform .7s ease;

}

#theoViewport{

    position:fixed;

    inset:0;

    z-index:6000;

    background:#050505;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .7s ease;

}

#theoViewport.active{

    opacity:1;

    pointer-events:auto;

}