/* ==========================================================
   DREAMALITY INTERACTIVE
   Landing Page Stylesheet
   Part 1 - Foundation
========================================================== */

/* ---------- RESET ---------- */

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

html {
    scroll-behavior: smooth;
}

body {
    width: 100%;
    min-height: 100vh;
    overflow:hidden;

    font-family: "Space Grotesk", sans-serif;

    background: #050505;
    color: #ffffff;

    position: relative;
}



/* ---------- COLOUR VARIABLES ---------- */

:root {

    --background: #050505;

    --background-secondary: #0d0d0d;

    --text: #ffffff;

    --text-muted: #9c9c9c;

    --purple: #8B5CF6;

    --cyan: #22D3EE;

    --glass: rgba(255,255,255,0.04);

    --glass-border: rgba(255,255,255,0.08);

}
.hero-content,
footer,
.hero-glow{

    opacity:0;

}

/* ---------- BACKGROUND ---------- */

#background{

    position:fixed;

    inset:0;

    background:
    radial-gradient(circle at top,
    rgba(139,92,246,.18),
    transparent 45%),

    radial-gradient(circle at bottom,
    rgba(34,211,238,.10),
    transparent 50%),

    var(--background);

    z-index:-10;
transition: transform .25s ease-out;

}

/* ---------- DARK OVERLAY ---------- */

.background-overlay{

    position:fixed;

    inset:0;

    background:
    linear-gradient(
    180deg,
    rgba(0,0,0,.15),
    rgba(0,0,0,.55)
    );

    z-index:-9;

}

/* ---------- PARTICLES LAYER ---------- */

#particles{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-8;

}

/* ==========================================================
   FOG LEFT
========================================================== */

#fog-left{

    position:fixed;

    width:900px;

    height:900px;

    left:-250px;

    top:15%;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(139,92,246,.08),

        transparent 70%

    );

    filter:blur(120px);

    pointer-events:none;

    z-index:0;

    opacity:.65;

    will-change:transform;

}

/* ==========================================================
   FOG RIGHT
========================================================== */

#fog-right{

    position:fixed;

    width:1000px;

    height:1000px;

    right:-300px;

    bottom:-150px;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(34,211,238,.06),

        transparent 70%

    );

    filter:blur(150px);

    pointer-events:none;

    z-index:0;

    opacity:.6;

    will-change:transform;

}
/* ---------- HERO ---------- */

.hero{

    width:100%;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

    overflow:hidden;

    padding:2rem;
transition: transform .25s ease-out;
will-change: transform;

}

/* ---------- HERO CONTENT ---------- */

.hero-content{

    width:100%;

    max-width:850px;

    position:relative;

    z-index:5;
will-change: transform;

}

/* ---------- HERO GLOW ---------- */

.hero-glow{

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(139,92,246,.25),
    transparent 70%);

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    filter:blur(80px);

    z-index:0;

}

/* ---------- LOGO ---------- */

.logo{

    display:block;

    width:280px;

    margin:0 auto 1rem auto;

    user-select:none;

    pointer-events:none;

    position:relative;
will-change: transform;

    z-index:5;

    animation:
        logoFloat 6s ease-in-out infinite,
        logoGlow 4s ease-in-out infinite;

    filter:
        drop-shadow(0 0 35px rgba(139,92,246,.45))
        drop-shadow(0 0 75px rgba(139,92,246,.35))
        drop-shadow(0 0 120px rgba(34,211,238,.25));

}/* ---------- TYPOGRAPHY ---------- */

h1{

    font-size:6rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    margin-bottom:.6rem;

}

h2{

    font-size:1.35rem;

    letter-spacing:.6em;

    color:var(--text-muted);

    text-transform:uppercase;

    margin-bottom:2.2rem;

}

.tagline{

    margin-top:2.2rem;

    font-size:1.15rem;

    font-weight:500;

    color:white;

    letter-spacing:.08em;

}

/* ---------- ACCENT LINE ---------- */

.accent-line{

    width:120px;

    height:2px;

    margin:2rem auto;

    background:
    linear-gradient(
    90deg,
    var(--purple),
    var(--cyan)
    );

    border-radius:100px;

}

/* ---------- DESCRIPTION ---------- */

.description{

    max-width:650px;

    margin:auto;

    line-height:1.9;

    color:var(--text-muted);

    font-size:1.05rem;

}


/* ==========================================================
   DREAMALITY INTERACTIVE
   Part 2 - Buttons, Footer & Socials
========================================================== */


/* ---------- HERO BUTTON ---------- */

.hero-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    margin-top:3rem;
    margin-bottom:1rem;

    padding:16px 42px;

    text-decoration:none;

    color:white;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    font-size:.9rem;

    border:1px solid rgba(255,255,255,.08);

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

    backdrop-filter:blur(14px);

    border-radius:100px;

    transition:.45s ease;

    position:relative;

    overflow:hidden;

    cursor:pointer;

}


/* Animated Shine */

.hero-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:100%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

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

        transparent

    );

    transition:.7s;

}

.hero-button:hover::before{

    left:120%;

}


/* Hover */

.hero-button:hover{

    transform:translateY(-4px);

    border-color:rgba(139,92,246,.55);

    box-shadow:

    0 0 18px rgba(139,92,246,.25),

    0 0 35px rgba(34,211,238,.18);

}


/* ---------- FOOTER ---------- */

footer{

    position:absolute;

    bottom:15px;

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:16px;

    z-index:10;

}

/* ---------- SOCIAL LINKS ---------- */

.socials{

    display:flex;

    gap:28px;

    align-items:center;

}


/* Individual Links */

.socials a{

    display:flex;

    align-items:center;

    gap:8px;

    text-decoration:none;

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

    font-size:.92rem;

    transition:.35s;

}


/* Icons */

.socials i{

    font-size:18px;

    transition:.35s;

}


/* Hover */

.socials a:hover{

    color:white;

    transform:translateY(-3px);

}

.socials a:hover i{

    color:var(--purple);

    text-shadow:

        0 0 12px rgba(139,92,246,.6);

}


/* ---------- COPYRIGHT ---------- */

.copyright{

    font-size:.82rem;

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

    letter-spacing:.08em;

}


/* ---------- LOCATION ---------- */

.location{

    font-size:.78rem;

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

    letter-spacing:.25em;

    text-transform:uppercase;

}


/* ---------- SELECTION ---------- */

::selection{

    background:var(--purple);

    color:white;

}


/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#050505;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        var(--purple),

        var(--cyan)

    );

    border-radius:100px;

}

/* ==========================================================
   DREAMALITY INTERACTIVE
   Part 3 - Animations & Premium Effects
========================================================== */


/* ---------- PAGE LOAD ---------- */

body{

    animation:pageFade 1.4s ease;

}

@keyframes pageFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* ---------- HERO CONTENT ---------- */

.hero-content{

    
}

@keyframes heroReveal{

    0%{

        opacity:0;

        transform:translateY(35px);

    }

    100%{

        opacity:1;

        transform:translateY(0);

    }

}


/* ---------- LOGO ---------- */

.logo{

    animation:

        logoFloat 6s ease-in-out infinite,

        logoGlow 4s ease-in-out infinite;

}


/* Floating */

@keyframes logoFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}


/* Glow */

@keyframes logoGlow{

    0%{

        filter:

        drop-shadow(0 0 10px rgba(139,92,246,.25));

    }

    50%{

        filter:

        drop-shadow(0 0 35px rgba(139,92,246,.6))

        drop-shadow(0 0 55px rgba(34,211,238,.35));

    }

    100%{

        filter:

        drop-shadow(0 0 10px rgba(139,92,246,.25));

    }

}


/* ---------- HERO GLOW ---------- */

.hero-glow{

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

}

@keyframes glowPulse{

    0%{

        transform:translate(-50%,-50%) scale(1);

        opacity:.30;

    }

    50%{

        transform:translate(-50%,-50%) scale(1.25);

        opacity:.55;

    }

    100%{

        transform:translate(-50%,-50%) scale(1);

        opacity:.30;

    }

}


/* ---------- FOG ---------- */

#fog-left{

    animation:leftFog 18s ease-in-out infinite;

}

#fog-right{

    animation:rightFog 22s ease-in-out infinite;

}


@keyframes leftFog{

    0%{

        transform:translateX(0) translateY(0);

    }

    50%{

        transform:translateX(120px) translateY(-60px);

    }

    100%{

        transform:translateX(0) translateY(0);

    }

}

@keyframes rightFog{

    0%{

        transform:translateX(0) translateY(0);

    }

    50%{

        transform:translateX(-140px) translateY(70px);

    }

    100%{

        transform:translateX(0) translateY(0);

    }

}


/* ---------- BACKGROUND ---------- */

#background{

    animation:backgroundMove 20s linear infinite;

}

@keyframes backgroundMove{

    0%{

        filter:hue-rotate(0deg);

    }

    50%{

        filter:hue-rotate(8deg);

    }

    100%{

        filter:hue-rotate(0deg);

    }

}


/* ---------- ACCENT LINE ---------- */

.accent-line{

    

}


@keyframes lineGrow{

    from{

        width:0;

        opacity:0;

    }

    to{

        width:120px;

        opacity:1;

    }

}

@keyframes lineGlow{

    0%{

        box-shadow:none;

    }

    50%{

        box-shadow:

        0 0 15px rgba(139,92,246,.5),

        0 0 25px rgba(34,211,238,.35);

    }

    100%{

        box-shadow:none;

    }

}


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

h1{

    animation:titleGlow 5s ease-in-out infinite;

}

@keyframes titleGlow{

    0%{

        text-shadow:none;

    }

    50%{

        text-shadow:

        0 0 18px rgba(139,92,246,.35);

    }

    100%{

        text-shadow:none;

    }

}


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

.hero-button{

    
}

@keyframes buttonAppear{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   DREAMALITY INTERACTIVE
   Part 4 - Responsive & Final Polish
========================================================== */


/* ---------- RESPONSIVE ---------- */

@media (max-width:1200px){

    .hero-content{

        max-width:700px;

    }

    h1{

        font-size:4rem;

    }

}

@media (max-width:900px){

    h1{

        font-size:3.2rem;

    }

    h2{

        letter-spacing:.45em;

        font-size:1.1rem;

    }

    .description{

        width:90%;

        font-size:1rem;

    }

    .hero-button{

        padding:15px 34px;

    }

}

@media (max-width:768px){

    .logo{

        width:110px;

    }

    h1{

        font-size:2.6rem;

    }

    h2{

        font-size:1rem;

        letter-spacing:.35em;

    }

    .tagline{

        font-size:1rem;

        padding:0 20px;

    }

    .description{

        font-size:.95rem;

        line-height:1.8;

    }

    .socials{

        gap:18px;

        flex-wrap:wrap;

        justify-content:center;

    }

}

@media (max-width:480px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:.9rem;

    }

    .logo{

        width:90px;

    }

    .hero-button{

        width:100%;

        max-width:280px;

    }

    footer{

        bottom:20px;

    }

}


/* ---------- SMOOTHER TRANSITIONS ---------- */

.logo,
.hero-button,
.socials a,
.accent-line,
h1,
h2,
.tagline,
.description{

    transition:.35s ease;

}


/* ---------- IMPROVED TEXT RENDERING ---------- */

body{

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


/* ---------- IMAGE QUALITY ---------- */

img{

    max-width:100%;

    display:block;

}


/* ---------- REMOVE BLUE HIGHLIGHTS ---------- */

a{

    -webkit-tap-highlight-color:transparent;

}


/* ---------- ACCESSIBILITY ---------- */

.hero-button:focus{

    outline:2px solid var(--purple);

    outline-offset:5px;

}


/* ---------- REDUCE MOTION SUPPORT ---------- */

@media (prefers-reduced-motion: reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/* ---------- READY FOR JAVASCRIPT ---------- */

body.loaded .hero-content{

    opacity:1;

}

/* ==========================================================
   PARTICLES
========================================================== */

#particles{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}

.particle{

    position:absolute;

    border-radius:50%;

    animation:particleFloat linear infinite;

    box-shadow:0 0 12px currentColor;

}

@keyframes particleFloat{

    0%{

        transform:
        translate(0,30px)
        scale(.6);

        opacity:0;

    }

    15%{

        opacity:inherit;

    }

    85%{

        opacity:inherit;

    }

    100%{

        transform:
        translate(var(--drift),var(--rise))
        scale(1.3);

        opacity:0;

    }

}/* ==========================================================
   AURORA MOVEMENT
========================================================== */

#background,
#fog-left,
#fog-right{

    will-change: transform;

    backface-visibility: hidden;

    transform: translateZ(0);

}

/* ==========================================================
   CURSOR GLOW
========================================================== */

#cursor-glow{

    position:fixed;

    width:550px;

    height:550px;

    left:50%;

    top:50%;

    transform:translate(-50%, -50%);

    pointer-events:none;

    border-radius:50%;

    background:radial-gradient(

        circle,

        rgba(139,92,246,.12) 0%,

        rgba(34,211,238,.08) 40%,

        transparent 75%

    );

    filter:blur(40px);

    z-index:0;

    will-change:left, top;

}

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

#scotland-map{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:0;

    opacity:.06;

    background-image:url("assets/scotland-outline.png");

    background-repeat:no-repeat;

    background-position:center;

    background-size:42%;

    filter:

        drop-shadow(0 0 30px rgba(139,92,246,.30))

        drop-shadow(0 0 80px rgba(34,211,238,.18));

    transition:opacity .8s ease;

}