/* ==========================================================
   PROJECT DAWN
   THEME
========================================================== */

:root{

    /* ---------- Typography ---------- */

    --font-main:
        Inter,
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    --font-display:
        Inter,
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    /* ---------- Timing ---------- */

    --world-transition:4s ease;
    --slow-transition:2.8s ease;
    --medium-transition:1.2s ease;
    --fast-transition:.45s ease;

 --world-progress:0;

    --world-brightness:.18;

    --world-saturation:.42;

    --world-warmth:0;

    --world-grain-opacity:.08;

    --world-light-opacity:.16;

    --cover-opacity:.35;

    --cover-scale:.985;
   
}

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

body{

    --bg:#0d0d0c;

    --bg-2:#141412;

    --paper:#f2efe7;

    --ink:#d8d6cf;

    --muted:#87857d;

    --gold:#d8b15a;

    --light:
        rgba(255,220,120,.06);

    --grain-opacity:.08;

    --cover-brightness:.55;

    --cover-saturation:.72;

    --cover-contrast:.92;

    --cover-scale:1;

    --cover-rotation:0deg;

    --cover-shadow:
        0 40px 80px rgba(0,0,0,.45);

    --ghost-opacity:.02;

    --interface-opacity:.86;

    --line-opacity:.18;

}

/* ==========================================================
   NIGHT
========================================================== */

body[data-world="night"]{

    --bg:#0b0b0a;

    --bg-2:#131310;

    --paper:#ece8df;

    --ink:#cfcac1;

    --muted:#6f6d68;

    --gold:#b89449;

    --light:
        rgba(255,200,120,.04);

    --grain-opacity:.11;

    --cover-brightness:.50;

    --cover-saturation:.68;

    --cover-contrast:.88;

    --ghost-opacity:.015;

}

/* ==========================================================
   DEEP NIGHT
========================================================== */

body[data-world="deep-night"]{

    --bg:#080808;

    --bg-2:#10100f;

    --paper:#ece7de;

    --ink:#cbc6bc;

    --muted:#696763;

    --gold:#b58b38;

    --light:
        rgba(255,180,90,.025);

    --grain-opacity:.13;

    --cover-brightness:.44;

    --cover-saturation:.58;

    --cover-contrast:.84;

    --ghost-opacity:.01;

}

/* ==========================================================
   PRE DAWN
========================================================== */

body[data-world="pre-dawn"]{

    --bg:#121210;

    --bg-2:#1b1a18;

    --paper:#f0ede5;

    --ink:#dad6cd;

    --muted:#8a857d;

    --gold:#d2aa56;

    --light:
        rgba(255,214,145,.08);

    --grain-opacity:.09;

    --cover-brightness:.72;

    --cover-saturation:.92;

    --cover-contrast:1;

    --ghost-opacity:.03;

}

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

body[data-world="dawn"]{

    --bg:#181713;

    --bg-2:#24221d;

    --paper:#f5f2ea;

    --ink:#ece7dd;

    --muted:#a59c90;

    --gold:#e0bb68;

    --light:
        rgba(255,224,160,.14);

    --grain-opacity:.06;

    --cover-brightness:.94;

    --cover-saturation:1.08;

    --cover-contrast:1.04;

    --ghost-opacity:.05;

}

/* ==========================================================
   MORNING
========================================================== */

body[data-world="morning"]{

    --bg:#24221d;

    --bg-2:#312d26;

    --paper:#faf8f2;

    --ink:#f4f0e8;

    --muted:#b5ab9d;

    --gold:#e8c46d;

    --light:
        rgba(255,230,175,.18);

    --grain-opacity:.04;

    --cover-brightness:1;

    --cover-saturation:1.15;

    --cover-contrast:1.06;

    --ghost-opacity:.065;

}

/* ==========================================================
   GLOBAL
========================================================== */

html{

    scroll-behavior:smooth;

}

body{

    margin:0;

    background:var(--bg);

    color:var(--paper);

    font-family:var(--font-main);

    transition:

        background var(--world-transition),

        color var(--world-transition);

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    color:var(--paper);

    text-decoration:none;

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

}

a:hover{

    color:var(--gold);

}

/* ==========================================================
   BUTTONS
========================================================== */

button{

    font:inherit;

    color:var(--paper);

    background:none;

    border:none;

    cursor:pointer;

    transition:

        color var(--slow-transition),

        opacity var(--slow-transition),

        transform var(--slow-transition);

}

button:hover{

    color:var(--gold);

}

button:active{

    transform:scale(.985);

}

/* ==========================================================
   IMAGES
========================================================== */

img{

    display:block;

    max-width:100%;

    user-select:none;

    -webkit-user-drag:none;

}

/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:var(--gold);

    color:#111;

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--bg);

}

::-webkit-scrollbar-thumb{

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

}

::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}

/* ==========================================================
   OUTRO
========================================================== */

.outro{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    display:flex;

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

    background:#050505;

    opacity:0;
    visibility:hidden;

    transition:
        opacity 2.2s ease,
        visibility 2.2s ease;

    z-index:99999;

}

.outro.visible{

    opacity:1;

    visibility:visible;

}

.outro-content{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    text-align:center;

}

.outro-button{

    position:relative;

    transform:translateY(0);

    margin:0;

}

.outro-button{

    max-width:90vw;

    white-space:normal;

    text-align:center;

    line-height:1.15;

}

@media(max-width:600px){

    #outroGoDeeper{

        max-width:85vw;

        font-size:42px;

        letter-spacing:.08em;

    }

}

#outroGoDeeper{

    max-width:90vw;

    padding:0 20px;

    background:none;
    border:none;

    color:#f7f6f3;

    cursor:pointer;

    font-size:clamp(42px,8vw,110px);

    font-weight:300;

    letter-spacing:.12em;

    line-height:1.15;

    text-align:center;

    white-space:normal;

}

#outroGoDeeper:hover{

    opacity:1;

    transform:scale(1.02);

    text-shadow:

        0 0 18px rgba(180,210,255,.25),

        0 0 60px rgba(120,160,255,.12);

}

#outroGoDeeper{

    animation:outroBreath 6s ease-in-out infinite;

}

@keyframes outroBreath{

    0%{

        opacity:.72;

        text-shadow:none;

    }

    50%{

        opacity:1;

        text-shadow:

            0 0 20px rgba(170,200,255,.22);

    }

    100%{

        opacity:.72;

        text-shadow:none;

    }

}

.world.outro-active{

    opacity:0;

    filter:blur(4px);

    transition:

        opacity 2s ease,

        filter 2s ease;

}

.outro.hidden{

    display:none;

}

.outro.visible{

    display:flex;

    opacity:1;

    visibility:visible;

}

/* ==========================================================
   THEO VIEWPORT
========================================================== */

.theo-viewport{

    width:100%;

    height:500px;

}

/* ==========================================================
   THEO DEBUG
========================================================== */

.theo-layer{

    position:fixed;

    inset:0;

    overflow:hidden;

    background:#050505;

}

.theo-viewport{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    z-index:0;

}

.theo-caption{

    position:absolute;

    top:7vh;

    left:6vw;

    width:280px;

    text-align:left;

}

.theo-caption h2{

    font-size:44px;

    letter-spacing:.28em;

}

.theo-caption p{

    color:#b89b63;

    letter-spacing:.25em;

    font-size:18px;

    opacity:.82;

    margin:8px 0;

}

@keyframes theoGlow{

    0%{

        text-shadow:
            0 0 6px rgba(215,184,120,.15),
            0 0 18px rgba(215,184,120,.05);

    }

    50%{

        text-shadow:
            0 0 10px rgba(215,184,120,.28),
            0 0 28px rgba(215,184,120,.12);

    }

    100%{

        text-shadow:
            0 0 6px rgba(215,184,120,.15),
            0 0 18px rgba(215,184,120,.05);

    }

}

.theo-caption h2{

    animation:
        theoGlow
        9s
        ease-in-out
        infinite;

}

.theo-object{

    margin-top:26px;

}

.theo-date{

    margin-top:16px;

}

.myth-entry {

    position:absolute;

    left:50%;
    bottom:4vh;

    transform:translateX(-50%);

    opacity:0;

    pointer-events:none;

    transition:
        opacity 3s ease;

}


.myth-entry.visible {

    opacity:1;

    pointer-events:auto;

}

.myth-entry{

    perspective:1200px;

}

#mythButton{

    background:none;

    border:none;

    cursor:pointer;

    font-family:"Modak", cursive;

    font-size:92px;

    font-weight:400;

    line-height:.92;

    letter-spacing:.015em;

    color:transparent;

    text-transform:uppercase;

    background-image:

        linear-gradient(

            180deg,

            #ffffff 0%,

            #fcfcfc 18%,

            #ececec 38%,

            #ffffff 54%,

            #ededed 72%,

            #d8d8d8 100%

        );

    -webkit-background-clip:text;
    background-clip:text;

    filter:

        drop-shadow(0 2px 0 rgba(255,255,255,.25))
        drop-shadow(0 10px 20px rgba(0,0,0,.35));

    transition:

        filter .8s ease,
        transform .8s ease;

}

/* @keyframes mythFlow{

    from{

        background-position:0% 50%;

    }

    to{

        background-position:240% 50%;

    } */

.myth-entry{

    white-space:nowrap;

}

#mythCanvas{

    position:absolute;

    left:50%;
    bottom:4vh;

    width:760px;
    height:160px;

    z-index:2;

    pointer-events:auto;

    display:block;

    cursor:pointer;

    transform:
        translateX(-50%)
        scale(1);

    transition:
        transform .5s ease,
        filter .5s ease;

}

#mythCanvas:hover{

    transform:
        translateX(-50%)
        scale(1.015);

    filter:
        drop-shadow(0 0 12px rgba(255,255,255,.08));

}

.outro{
    position:fixed !important;
    inset:0 !important;

    width:100vw !important;
    height:100vh !important;

    display:flex !important;

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

    z-index:99999;
}

.outro-content{
    width:100%;
    height:100%;

    display:flex;

    align-items:center;
    justify-content:center;
}


#outroGoDeeper{

    visibility:visible !important;

    display:block;

}

.outro{

    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100vw !important;
    height:100vh !important;

    min-height:100vh !important;

    display:flex !important;

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

}

.outro{
    isolation:isolate;
}

background-image:

linear-gradient(...),

radial-gradient(circle at 20% 30%, rgba(255,255,255,.22) 0 2px, transparent 3px),

radial-gradient(circle at 75% 55%, rgba(255,255,255,.16) 0 1px, transparent 2px),

radial-gradient(circle at 55% 75%, rgba(255,255,255,.18) 0 2px, transparent 3px);