/* ==========================================================
   VISUÆL
   STYLE.CSS
   ----------------------------------------------------------
   Foundation
   Variables
   Reset
   Base
========================================================== */


/* ==========================================================
   VARIABLES
========================================================== */

:root {

    /* Colors */

    --color-background: #171B25;
    --color-background-light: #1F2431;
    --color-background-dark: #11141D;

    --color-text: #F4F4F2;
    --color-text-soft: rgba(244, 244, 242, 0.72);

    --color-copper: #B98A55;
    --color-copper-light: #D8AA74;
    --color-copper-glow: rgba(185, 138, 85, 0.35);

    --color-overlay: rgba(9, 11, 18, 0.34);

    /* Typography */

    --font-family:
        "SF Pro Display",
        "Inter",
        "Segoe UI",
        sans-serif;

    --font-size-base: 16px;

    --line-height: 1.6;

    --letter-spacing: .04em;

    /* Spacing */

    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 7rem;
    --space-xxl: 10rem;

    /* Radius */

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;

    /* Layout */

    --content-width: 1100px;

    /* Shadows */

    --shadow-soft:
        0 12px 35px rgba(0,0,0,.18);

    --shadow-glow:
        0 0 35px rgba(185,138,85,.18);

    /* Animation */

    --ease:
        cubic-bezier(.22,.61,.36,1);

    --duration-fast: .25s;
    --duration-normal: .5s;
    --duration-slow: 1s;

}


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

*,
*::before,
*::after {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}

html {

    scroll-behavior: smooth;

    font-size: 100%;

    -webkit-text-size-adjust: 100%;

}

body,
button,
input,
textarea {

    font: inherit;

}

img,
picture,
video,
canvas,
svg {

    display: block;

    max-width: 100%;

}

button {

    border: none;

    background: none;

    cursor: pointer;

}

a {

    color: inherit;

    text-decoration: none;

}

ul,
ol {

    list-style: none;

}


/* ==========================================================
   BASE
========================================================== */

html {

    min-height: 100%;

    background: var(--color-background-dark);

}

body {

    min-height: 100vh;
    min-height: 100dvh;

}

body {

    position: relative;

    overflow-x: hidden;

    background:
        linear-gradient(
            180deg,
            var(--color-background-dark),
            var(--color-background)
        );

    color: var(--color-text);

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

    font-size: var(--font-size-base);

    line-height: var(--line-height);

    letter-spacing: var(--letter-spacing);

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}


/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-weight: 300;

    letter-spacing: .08em;

}

p {

    color: var(--color-text-soft);

}


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

::selection {

    background: rgba(185,138,85,.35);

    color: white;

}


/* ==========================================================
   FOCUS
========================================================== */

:focus-visible {

    outline: 2px solid var(--color-copper);

    outline-offset: 4px;

}


/* ==========================================================
   LIVING BACKGROUND FOUNDATION
========================================================== */

body::before,
body::after {

    content: "";

    position: fixed;

    inset: -20%;

    pointer-events: none;

    z-index: -2;

	opacity: .55;

	filter: blur(120px);

    will-change: transform;

}

body::before {

    background:

        radial-gradient(
            circle,
            rgba(185,138,85,.12) 0%,
            transparent 60%
        );

    top: -25%;

    left: -15%;

}

body::after {

    background:

        radial-gradient(
            circle,
            rgba(255,255,255,.05) 0%,
            transparent 70%
        );

    bottom: -20%;

    right: -15%;

}


/* ==========================================================
   GENERIC LAYOUT
========================================================== */

main {

    position: relative;

    z-index: 2;

}

.content {

    width: min(
        92%,
        var(--content-width)
    );

    margin-inline: auto;

}

noscript {

    display: block;

    padding: .9rem;

    text-align: center;

    background: #722;

    color: white;

    font-size: .9rem;

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

.intro {

    position: fixed;

    inset: 0;

    display: flex;

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

    background: var(--color-background-dark);

    z-index: 9999;

    overflow: hidden;

}

.intro-content {

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

    text-align: center;

}

.intro-logo {

    width: clamp(170px, 20vw, 250px);

    opacity: 0;

    transform: translateY(10px);

}

.intro-divider {

    width: 0;

    height: 1px;

    margin: 2rem 0;

    background: linear-gradient(
        90deg,
        transparent,
        var(--color-copper),
        transparent
    );

}

.intro-tagline {

    font-size: .95rem;

    letter-spacing: .38em;

    text-transform: uppercase;

    color: var(--color-text-soft);

    opacity: 0;

    transform: translateY(12px);

}


/* ==========================================================
   HERO
========================================================== */

.hero {

    position: relative;

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

    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;

    overflow: hidden;
	
	opacity: 0;

}

.hero-inner {

    position: relative;

    z-index: 5;

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

    text-align: center;

    padding-inline: 2rem;

    margin-top: -2vh;

}


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

.hero-background {

    position: absolute;

    inset: 0;

    overflow: hidden;

    z-index: 0;

}

.hero-background::before,
.hero-background::after {

    content: "";

    position: absolute;

    border-radius: 50%;

    filter: blur(130px);

    opacity: 0;

    pointer-events: none;

}

.hero-background::before {

    width: 60vw;
    height: 60vw;

    top: -18%;
    left: -16%;

    background:
        radial-gradient(
            circle,
            rgba(185,138,85,.42) 0%,
			rgba(185,138,85,.18) 38%,
            transparent 75%
        );
		
	animation: none;

    filter: blur(150px);

    opacity: 0;

}

.hero-background::after {

    width: 55vw;
    height: 55vw;

    bottom: -18%;
    right: -18%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.14),
            transparent 75%
        );

	animation: none;

    filter: blur(170px);

    opacity: 0;

}

.hero-background.animate::before {

    animation:
        glowFade 3s cubic-bezier(.22,.61,.36,1) forwards,
        driftLeft 17s ease-in-out 1.6s infinite alternate;

}

.hero-background.animate::after {

    animation:
        glowFade 3s cubic-bezier(.22,.61,.36,1) forwards,
        driftRight 20s ease-in-out 1.6s infinite alternate;

}

.hero::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 42%;

    width: 36rem;
    height: 36rem;

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

    border-radius: 50%;

    background:

        radial-gradient(

            circle,

            rgba(185,138,85,.07),

            transparent 70%

        );

    filter: blur(90px);

    pointer-events: none;

    z-index: 0;

}


/* ==========================================================
   HERO OVERLAY
========================================================== */

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(

            to bottom,

            rgba(0,0,0,.12),

            transparent 30%,

            transparent 70%,

            rgba(0,0,0,.22)

        );

}


/* ==========================================================
   LOGO
========================================================== */

.logo {

    width: clamp(230px, 27vw, 390px);

    user-select: none;

    pointer-events: none;

    filter:

        drop-shadow(0 8px 30px rgba(0,0,0,.25));

}


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

.copper-divider {

    width: clamp(160px, 18vw, 260px);

    height: 1px;

    margin:

        2.2rem
        0
        1.8rem;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--color-copper),

            transparent

        );

    box-shadow:

        0 0 18px rgba(185,138,85,.18);

}


/* ==========================================================
   HERO TAGLINE
========================================================== */

.tagline {

    max-width: 700px;

    color: var(--color-text-soft);

    font-size: clamp(.92rem, 1.15vw, 1.08rem);

    letter-spacing: .42em;

    text-transform: uppercase;

    line-height: 2;

    font-weight: 300;

    text-wrap: balance;

}
/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.scroll-indicator {

    position: absolute;

    left: 50%;
    bottom: 3.5rem;

    transform: translateX(-50%);

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

    width: 54px;
    height: 54px;

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

    border-radius: 999px;

    transition:
        color var(--duration-normal) var(--ease),
        transform var(--duration-normal) var(--ease);

    z-index: 10;

}

.arrow {

    font-size: 1.35rem;

    transition:
        transform .5s var(--ease),
        color .5s var(--ease),
        text-shadow .5s var(--ease);

}

.scroll-indicator:hover {

    color: var(--color-copper);

}

.scroll-indicator:hover .arrow {

    transform: translateY(3px);

    text-shadow:
        0 0 18px rgba(185,138,85,.45);

}


/* ==========================================================
   COMING SOON
========================================================== */

.coming-soon {

    position: relative;
	
	overflow: hidden;

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

    min-height: 100vh;

    padding:

        var(--space-xxl)
        0;

}

.coming-soon .content {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

}

.coming-soon::before,
.coming-soon::after {

    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(170px);

    opacity: .9;

}

.coming-soon::before {

    width: 40vw;
    height: 40vw;

    top: -18%;
    left: -12%;

    background:

        radial-gradient(

            circle,

            rgba(145,170,255,.13),

            transparent 72%

        );
	
	animation:
		driftLeft 22s ease-in-out infinite alternate;

}

.coming-soon::after {

    width: 42vw;
    height: 42vw;

    bottom: -18%;
    right: -12%;

    background:

        radial-gradient(

            circle,

            rgba(185,138,85,.18),

            transparent 72%

        );
		
	animation:
		driftRight 25s ease-in-out infinite alternate;

}


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

.description {

    max-width: 720px;

    font-size: clamp(1rem,1.45vw,1.26rem);

    line-height: 1.9;

    color: var(--color-text-soft);

}


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

.section-divider {

    width: clamp(150px,16vw,230px);

    height: 1px;

    margin:

        3rem
        0;

    background:

        linear-gradient(

            90deg,

            transparent,

            var(--color-copper),

            transparent

        );

    box-shadow:

        0 0 20px rgba(185,138,85,.18);
		
	transform-origin: center;

	opacity: 0;

	transform: scaleX(0);

}


/* ==========================================================
   SOCIALS
========================================================== */

.socials {

    display: flex;

    gap: 2.8rem;

    justify-content: center;

    align-items: center;

}

.socials a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 102px;

    height: 102px;

    border-radius: 50%;

    opacity: 0;

	transform: translateY(20px) scale(.90);

    transition:

        opacity .55s var(--ease),
        transform .55s var(--ease),
        color .45s var(--ease),
        background .45s var(--ease),
        box-shadow .45s var(--ease);

}

.socials svg {

    width: 60px;

    height: 60px;

}

.socials a:hover {

    color: var(--color-copper);

	transform:

		translateY(-5px)
		scale(1.05);

    background:

        rgba(255,255,255,.025);

    box-shadow:

        0 0 22px rgba(185,138,85,.18);

}


/* ==========================================================
   CONTACT
========================================================== */

.contact {

    display: inline-flex;

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

    margin-top: 4rem;

    padding:
        1.35rem
        4rem;

    border: 1px solid rgba(185,138,85,.55);

    border-radius: 999px;

    background:
        rgba(255,255,255,.015);
		
	box-shadow:
    0 0 18px rgba(185,138,85,.08);

	cursor: pointer;

	overflow: hidden;

    color: var(--color-text);

    font-size: 1.1rem;

    letter-spacing: .28em;

    text-transform: uppercase;

    transition:

		background .45s var(--ease),
		border-color .45s var(--ease),
		box-shadow .45s var(--ease),
		color .45s var(--ease),
		transform .45s var(--ease);

}

.contact:hover {

    color: white;

    border-color: var(--color-copper);

    background:
        rgba(185,138,85,.05);

	transform:
		translateY(-2px) scale(1.03);;

    box-shadow:
        0 0 32px rgba(185,138,85,.18),
        0 0 55px rgba(185,138,85,.10);

}

/* ===========================================
   COPY MAIL
=========================================== */

.copy-mail {

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    margin-top: 1rem;

    text-align: center;

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

    font-size: .88rem;

    transition: opacity .35s var(--ease);

}

.copy-mail button {

    background: none;

    border: none;

    color: var(--color-copper);

    cursor: pointer;

    font: inherit;

    text-decoration: underline;

    padding: 0;

    display: inline;

    transition: color .35s var(--ease);

}

}

.copy-mail button:hover {

    color: white;

}


/* ==========================================================
   INITIAL REVEAL STATES
========================================================== */

.description,
.socials,
.contact {

    opacity: 0;

    transform: translateY(30px);

    transition:
        opacity .9s var(--ease),
        transform .9s var(--ease);

}

.section-divider {

    transition:

        opacity .6s var(--ease),
        transform .8s var(--ease);

}

.description {

    transition-delay: .40s;

}

.section-divider {

    transition-delay: 1s;

}

.socials {

    transition-delay: 1.6s;

}

.contact {

    transition-delay: 2.2s;

}

.description.reveal,
.socials.reveal {

    opacity: 1;

    transform: translateY(0);

}

.socials a.reveal {

    opacity: 1;

    transform: translateY(0) scale(1);

}

.contact.reveal {

    opacity: 1;

    transform: translateY(0);

}

.section-divider.reveal {

    opacity: 1;

    transform: scaleX(1);

}

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

.intro-logo.animate {

    animation:
        introLogo .9s var(--ease) forwards;

}

.intro-divider.animate {

    animation:
        introDivider .8s var(--ease) forwards;

}

.intro-tagline.animate {

    animation:
        introTagline .9s var(--ease) forwards;

}

/* ==========================================================
   HERO ANIMATIONS
========================================================== */

@keyframes glowFade {

    from {

        opacity: 0;

    }

    to {

        opacity: 0.95;

    }

}

.logo {

    opacity: 0;

    transform: translateY(18px);

}

.copper-divider {

    width: 0;

    opacity: 0;

}

.tagline {

    opacity: 0;

    transform: translateY(14px);

}

.scroll-indicator {

    opacity: 0;

}

.hero.visible {

    opacity: 1;

}

.logo.animate {

    animation:
        heroLogo .9s var(--ease) forwards;

}

.copper-divider.animate {

    animation:
        heroDivider .8s var(--ease) forwards,
        dividerGlow 12s ease-in-out .8s infinite;

}

.tagline.animate {

    animation:
        heroTagline .9s var(--ease) forwards;

}

.scroll-indicator.animate {

    animation:
        fadeIn .9s ease forwards;

}

/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes dividerReveal {

    from {

        opacity: 0;

        transform:
            scaleX(0)
            translateY(18px);

        transform-origin: left;

    }

    to {

        opacity: 1;

        transform:
            scaleX(1)
            translateY(0);

        transform-origin: left;

    }

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(18px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes introAppear {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

@keyframes introLogo {

    from {

        opacity: 0;

        transform:

            translateY(10px)
            scale(.98);

    }

    to {

        opacity: 1;

        transform:

            translateY(0)
            scale(1);

    }

}

@keyframes introDivider {

    from {

        width: 0;

        opacity: 0;

    }

	to {

		width: clamp(170px, 20vw, 250px);

		opacity: 1;

	}

}

@keyframes introTagline {

    from {

        opacity: 0;

        transform: translateY(12px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes heroLogo {

    from {

        opacity: 0;

        transform:

            translateY(18px);

    }

    to {

        opacity: 1;

        transform:

            translateY(0);

    }

}

@keyframes heroDivider {

    from {

        width: 0;

        opacity: 0;

    }

    to {

        width: clamp(160px,18vw,260px);

        opacity: 1;

    }

}

@keyframes heroTagline {

    from {

        opacity: 0;

        transform:

            translateY(14px);

    }

    to {

        opacity: 1;

        transform:

            translateY(0);

    }

}

@keyframes heroReveal {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

@keyframes logoFloat {

    0% {

        transform:

            translateY(0);

    }

    50% {

        transform:

            translateY(-6px);

    }

    100% {

        transform:

            translateY(0);

    }

}

@keyframes dividerGlow {

    0% {

        opacity: .75;

        box-shadow:

            0 0 8px rgba(185,138,85,.10);

    }

    50% {

        opacity: 1;

        box-shadow:

            0 0 24px rgba(185,138,85,.28);

    }

    100% {

        opacity: .75;

        box-shadow:

            0 0 8px rgba(185,138,85,.10);

    }

}
@keyframes driftLeft {

    0% {
        transform: translate(0, 0) scale(1);
    }
	

	50% {

		transform:
			translate(3%, 5%)
			scale(1.10);

	}

	100% {

		transform:
			translate(10%, -3%)
			scale(1.20);

	}

}

@keyframes driftRight {

    0% {
        transform: translate(0, 0) scale(1);
    }
	

    50% {

		transform:
			translate(-3%, -4%)
			scale(1.08);

	}

	100% {

		transform:
			translate(-10%, 4%)
			scale(1.17);

	}

}

@keyframes heroGlowOne {

    from {

        transform:

            translateY(0)
            scale(1);

    }

    to {

        transform:

            translateY(-3%)
            scale(1.08);

    }

}

@keyframes heroGlowTwo {

    from {

        transform:

            translateY(0)
            scale(1);

    }

    to {

        transform:

            translateY(3%)
            scale(1.06);

    }

}


/* ==========================================================
   HOVER MICRO INTERACTIONS
========================================================== */

.logo {

    transition:

        filter .6s var(--ease);

}

.hero:hover .logo {

    filter:

        drop-shadow(0 8px 35px rgba(0,0,0,.28))
        drop-shadow(0 0 20px rgba(185,138,85,.12));

}

/* ==========================================================
   RESPONSIVE DESIGN
========================================================== */

/* -------------------------
   Large Desktop
------------------------- */

@media (min-width: 1440px) {

    .hero-inner {

        margin-top: -4vh;

    }

    .logo {

        width: 430px;

    }

    .copper-divider {

        width: 280px;

        margin-top: 2.6rem;
        margin-bottom: 2.1rem;

    }

    .tagline {

        font-size: 1.05rem;

        letter-spacing: .48em;

    }

    .description {

        max-width: 760px;

        font-size: 1.18rem;

    }

    .socials {

        gap: 2.7rem;

    }

}

/* -------------------------
   Desktop
------------------------- */

@media (max-width: 1200px) {

    .logo {

        width: 330px;

    }

}

@media (min-width: 901px) {

    .contact {

		padding:
			1.1rem
			3.3rem;

		font-size: 1.14rem;

		letter-spacing: .30em;

	}

    .socials {

        gap: 2.6rem;

    }

    .socials a {

        width: 92px;
        height: 92px;

    }

    .socials svg {

        width: 54px;
        height: 54px;

    }

}

/* -------------------------
   Tablet
------------------------- */

@media (max-width: 900px) {

    .hero-inner {

        margin-top: -2vh;

    }

    .logo {

        width: 270px;

    }

    .tagline {

        letter-spacing: .32em;

        line-height: 1.9;

    }

    .description {

        font-size: 1rem;

        max-width: 90%;

    }

    .socials {

        gap: 1.8rem;

    }

}

/* -------------------------
   Mobile
------------------------- */

@media (max-width: 600px) {

    .intro-logo {

        width: 180px;

    }

    .logo {

        width: 210px;

    }

    .intro-divider,
    .copper-divider,
    .section-divider {

        width: 150px;

    }

    .tagline {

        font-size: .82rem;

        letter-spacing: .22em;

        line-height: 1.8;

    }

    .description {

        font-size: 1.1rem;

        line-height: 1.8;

    }

    .socials {

        gap: 1.25rem;

    }

    .socials a {

		width: 76px;
		height: 76px;

}

	.socials svg {

		width: 42px;
		height: 42px;

}

    .contact {

        font-size: .8rem;

        letter-spacing: .18em;

    }
	
	.copy-mail {

    font-size: .82rem;
	
	}

    .scroll-indicator {

        bottom: 2rem;

    }
	
	/* ==========================================================
   MOBILE HERO GLOW
	========================================================== */

	.hero-background::before {

    width: 185vw;
    height: 185vw;

    top: -78%;
    left: -95%;

    filter: blur(155px);

    opacity: 1;
	
	transform: scale(1.08);

	}

	.hero-background::after {

    width: 200vw;
    height: 200vw;

    bottom: -82%;
    right: -105%;

    filter: blur(155px);

    opacity: 1;
	
	transform: scale(1.08);

	}
	
	/* ==========================================================
   MOBILE COMING SOON GLOW
	========================================================== */

	.coming-soon::before {

    width: 175vw;
    height: 175vw;

    top: -60%;
    left: -82%;

    opacity: 1;

    filter: blur(120px);

	}

	.coming-soon::after {

    width: 195vw;
    height: 195vw;

    bottom: -75%;
    right: -100%;

    opacity: 1;

    filter: blur(130px);

	}
	
	/* ==========================================================
   MOBILE BACKGROUND FOUNDATION
	========================================================== */

	body::before {

    opacity: .90;
    filter: blur(85px);

	}

	body::after {

    opacity: .85;
    filter: blur(95px);

	}
	
}

/* -------------------------
   Small Mobile
------------------------- */

@media (max-width: 380px) {

    .logo {

        width: 180px;

    }

    .tagline {

        letter-spacing: .16em;

    }

}

/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    *,
    *::before,
    *::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;

    }

}

/* ==========================================================
   PERFORMANCE
========================================================== */

.intro-logo,
.socials a,
.arrow,
.hero-background::before,
.hero-background::after {

    backface-visibility:hidden;

    transform:translateZ(0);

}

.logo {

    backface-visibility:hidden;

}

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

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: var(--color-background-dark);

}

::-webkit-scrollbar-thumb {

    background: rgba(185,138,85,.45);

    border-radius: 999px;

}

::-webkit-scrollbar-thumb:hover {

    background: var(--color-copper);

}

/* ==========================================================
   END OF FILE
========================================================== */