@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");

/* ========================================
DESIGN SYSTEM
======================================== */

:root {
--charcoal: #2b2b32;
--red: #e63946;
--pink: #ff4f81;
--cyan: #19d3e6;
--off-white: #f4f1ea;

--grid-columns: 12;
--grid-gap: clamp(0.75rem, 2vw, 1.75rem);
--content-width: 90%;
--max-content-width: 1440px;

--display-font: "Orbitron", sans-serif;
--body-font: "Space Grotesk", sans-serif;
--mono-font: "Exo 2", sans-serif;
}

/* ========================================
RESET & GLOBAL STYLES
======================================== */

* {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
scroll-padding-top: 2rem;
}

body {
margin: 0;
background: var(--off-white);
color: var(--charcoal);
font-family: var(--body-font);
}

img {
display: block;
max-width: 100%;
}

a {
color: inherit;
text-decoration: none;
}

a:focus-visible {
outline: 2px solid var(--red);
outline-offset: 5px;
}

/* 12-COLUMN FLUID GRID */

.grid-shell {
width: min(var(--content-width), var(--max-content-width));
margin-inline: auto;

display: grid;
grid-template-columns:
repeat(var(--grid-columns), minmax(0, 1fr));

column-gap: var(--grid-gap);
}

/* ========================================
HEADER & NAVIGATION
======================================== */

.site-header {
min-height: clamp(4.5rem, 7vw, 6.25rem);
align-items: center;
border-bottom: 1px solid rgb(43 43 50 / 20%);
}

.wordmark {
grid-column: span 3;
width: fit-content;

font-family: var(--display-font);
font-size: clamp(1.2rem, 1.6vw, 1.5rem);
letter-spacing: 0.02em;
}

.wordmark span {
color: var(--red);
}

.wordmark i {
margin-left: 0.2em;
font-family: var(--mono-font);
font-size: 0.45em;
font-style: normal;
vertical-align: top;
}

.site-nav {
grid-column: 4 / span 9;

display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: wrap;
gap: clamp(0.75rem, 2.2vw, 2rem);
}

.site-nav a {
position: relative;
padding-block: 0.7rem;

font-family: var(--mono-font);
font-size: clamp(0.55rem, 0.75vw, 0.7rem);
letter-spacing: 0.06em;
text-transform: uppercase;
}

.site-nav a::after {
position: absolute;
right: 0;
bottom: 0.25rem;
left: 0;

height: 1px;
background: var(--red);
content: "";

transform: scaleX(0);
transform-origin: right;
transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
transform: scaleX(1);
transform-origin: left;
}

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

.hero {
position: relative;
isolation: isolate;
overflow: hidden;

min-height: clamp(40rem, 72vw, 56rem);
display: grid;
place-items: center;

padding: clamp(4rem, 8vw, 7rem) 5%;
background: var(--charcoal);
color: var(--off-white);
}

/* Home hero artwork */

.hero-background {
position: absolute;
z-index: -3;
inset: 0;

background-image: url("../home/images/index-hero.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

opacity: 0.72;
transform: scale(1.03);

animation: background-drift 24s ease-in-out infinite alternate;
}

.hero-shade {
position: absolute;
z-index: -2;
inset: 0;

background:
radial-gradient(
ellipse at center,
rgb(11 11 15 / 20%) 0%,
rgb(11 11 15 / 40%) 52%,
rgb(11 11 15 / 70%) 100%
),
linear-gradient(
90deg,
rgb(11 11 15 / 35%),
transparent 50%,
rgb(11 11 15 / 35%)
);
}

.hero-content {
width: min(100%, 1050px);
margin-inline: auto;
text-align: center;
z-index: 1;
}

.eyebrow {
margin: 0;
font-family: var(--mono-font);
font-size: clamp(0.58rem, 0.75vw, 0.7rem);
letter-spacing: 0.12em;
line-height: 1.7;
text-transform: uppercase;
}

.hero-eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: 0.7rem;
color: var(--off-white);
}

.eyebrow-dot {
width: 0.5rem;
aspect-ratio: 1;
flex: 0 0 auto;
border-radius: 50%;
background: var(--pink);
box-shadow: 0 0 1rem rgb(255 79 129 / 70%);
}

/* Centered title */

#hero-title {
margin: clamp(2rem, 5vw, 4rem) 0 1rem;

font-family: var(--display-font);
font-size: clamp(5rem, 16vw, 13rem);
font-weight: 400;
letter-spacing: 0.015em;
line-height: 0.76;
}

.title-look,
.title-again {
display: block;
}

.title-look {
color: var(--off-white);
text-shadow:
3px 3px 0 rgb(25 211 230 / 70%),
-3px -3px 0 rgb(255 79 129 / 75%);
}

.title-again {
margin-top: 0.1em;
color: transparent;
-webkit-text-stroke: 2px var(--off-white);
text-shadow: 5px 5px 0 rgb(25 211 230 / 25%);
}

.hero-subtitle {
margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;

color: var(--cyan);
font-family: var(--mono-font);
font-size: clamp(0.7rem, 1.1vw, 0.9rem);
letter-spacing: 0.28em;
}

.hero-description {
max-width: 27rem;
margin: 1.5rem auto 0;

color: var(--off-white);
font-size: clamp(1rem, 1.5vw, 1.25rem);
line-height: 1.6;
}

/* Hero CTA */

.round-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1rem;

margin-top: 2rem;
padding: 0.7rem 0 0.7rem 1rem;

border: 1px solid rgb(244 241 234 / 65%);
color: var(--off-white);

font-family: var(--mono-font);
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;

transition:
border-color 180ms ease,
background-color 180ms ease;
}

.round-link:hover {
border-color: var(--cyan);
background: rgb(25 211 230 / 10%);
}

.round-arrow {
display: grid;
width: 2.5rem;
aspect-ratio: 1;
place-items: center;

background: var(--pink);
color: var(--charcoal);
font-size: 1.25rem;

transition:
transform 180ms ease,
background-color 180ms ease;
}

.round-link:hover .round-arrow {
transform: rotate(-45deg);
background: var(--cyan);
}

.hero-corner {
position: absolute;
bottom: 2rem;

color: rgb(244 241 234 / 75%);
font-family: var(--mono-font);
font-size: 0.58rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}

.hero-corner-left {
left: 5%;
}

.hero-corner-right {
right: 5%;
text-align: right;
}

.scroll-cue {
position: absolute;
bottom: 5rem;
left: 50%;

display: flex;
align-items: center;
gap: 0.7rem;

color: rgb(244 241 234 / 80%);
font-family: var(--mono-font);
font-size: 0.52rem;
letter-spacing: 0.1em;
text-align: center;
text-transform: uppercase;

transform: translateX(-50%);
}

.scroll-cue span {
width: 1.6rem;
height: 1px;
background: var(--cyan);
}

@keyframes background-drift {
from {
transform: scale(1.03) translate3d(0, 0, 0);
}

to {
transform: scale(1.1) translate3d(0, -1%, 0);
}
}

/* ========================================
SECTION MARKERS
======================================== */

.section-marker {
grid-column: 1 / -1;

display: flex;
align-items: center;
gap: 1rem;

margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-number {
color: var(--red);
font-family: var(--mono-font);
font-size: clamp(2rem, 4vw, 3.5rem);
line-height: 1;
}

.marker-rule {
width: 2.5rem;
height: 1px;
background: var(--charcoal);
}

/* ========================================
INTRODUCTION
======================================== */

.introduction {
position: relative;
align-items: start;

padding-block: clamp(4rem, 8vw, 7rem);
border-bottom: 1px solid rgb(43 43 50 / 20%);
}

.intro-heading {
grid-column: 1 / span 5;
align-self: stretch;
padding: clamp(1.25rem, 2.5vw, 2.25rem);
background: var(--charcoal);
border-left: 3px solid var(--pink);
}

.intro-heading > .eyebrow {
margin-bottom: clamp(1rem, 1.8vw, 1.5rem);
color: var(--cyan);
}

.intro-heading h2 {
color: var(--off-white);
font-size: clamp(2.25rem, 3.8vw, 3.75rem);
letter-spacing: -0.025em;
line-height: 1.08;
}

.intro-heading h2 span {
color: var(--pink);
-webkit-text-stroke: 0;
}

h2 {
margin: 0;
font-family: var(--display-font);
font-size: clamp(3rem, 5.8vw, 5.25rem);
font-weight: 400;
letter-spacing: 0.01em;
line-height: 0.9;
}

h2 span {
color: transparent;
-webkit-text-stroke: 1px var(--charcoal);
}

/* Animated border container */

.intro-frame {
position: relative;
isolation: isolate;
overflow: hidden;

grid-column: 6 / span 7;
align-self: center;
margin-left: 0;

padding: clamp(1.5rem, 3vw, 2.5rem);

background: var(--off-white);
border: 1px solid rgb(25 211 230 / 55%);
box-shadow: 0.5rem 0.5rem 0 rgb(255 79 129 / 18%);
}

/* Glowing line travelling around the border */

.intro-frame::before {
position: absolute;
z-index: -1;
inset: 0;

padding: 2px;
background: conic-gradient(
from var(--border-angle, 0deg),
transparent 0deg,
transparent 245deg,
var(--cyan) 285deg,
var(--pink) 320deg,
var(--red) 340deg,
transparent 360deg
);
}

/* Decorative corner markers */

.frame-corner {
position: absolute;
width: 0.75rem;
height: 0.75rem;
pointer-events: none;
}

.frame-corner-one {
top: 0;
left: 0;
border-top: 2px solid var(--pink);
border-left: 2px solid var(--pink);
}

.frame-corner-two {
right: 0;
bottom: 0;
border-right: 2px solid var(--cyan);
border-bottom: 2px solid var(--cyan);
}

.intro-copy {
position: relative;
z-index: 1;
}

.intro-copy > p {
max-width: none;
margin: 0;

font-size: clamp(1rem, 1.25vw, 1.15rem);
line-height: 1.8;
}

.text-link {
display: inline-flex;
align-items: center;
gap: 1.4rem;

margin-top: 2rem;
padding-bottom: 0.55rem;
border-bottom: 1px solid var(--charcoal);

font-family: var(--mono-font);
font-size: 0.65rem;
letter-spacing: 0.06em;
text-transform: uppercase;

transition: color 180ms ease;
}

.text-link:hover {
color: var(--red);
}

.text-link span {
color: var(--red);
font-size: 1rem;
}

.intro-coordinate {
display: block;
margin-top: 2rem;

color: rgb(43 43 50 / 60%);
font-family: var(--mono-font);
font-size: 0.58rem;
letter-spacing: 0.08em;
line-height: 1.8;
}

@keyframes border-travel {
to {
--border-angle: 360deg;
}
}

@property --border-angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}

/* ========================================
EXPERIMENTAL DETAILS
======================================== */

.experimental {
position: relative;
align-items: start;

padding-block: clamp(4rem, 8vw, 7rem);
}

.experimental-heading {
grid-column: 1 / span 4;
}

.experimental-heading > .eyebrow {
margin-bottom: 1.5rem;
color: var(--red);
}

.experimental-heading h2 span {
-webkit-text-stroke-color: var(--red);
}

.experimental-description {
max-width: 24rem;
margin: 1.75rem 0 0;

font-size: clamp(1rem, 1.2vw, 1.1rem);
line-height: 1.75;
}

/* Optical illusion image */

.experimental-art {
grid-column: 5 / span 8;
align-self: center;

min-width: 0;
margin: 0;
}

.experimental-art img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;

border: 1px solid rgb(43 43 50 / 15%);
box-shadow: 0.75rem 0.75rem 0 var(--cyan);

transition:
transform 300ms ease,
box-shadow 300ms ease;
}

.experimental-art:hover img {
transform: translate(-3px, -3px);
box-shadow: 1rem 1rem 0 var(--pink);
}

.experimental-art figcaption {
display: flex;
align-items: center;
gap: 0.75rem;

margin-top: 1.5rem;

font-family: var(--mono-font);
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.experimental-art figcaption span:first-child {
color: var(--red);
}

.caption-line {
flex: 1;
height: 1px;
background: rgb(43 43 50 / 35%);
}

.experimental-footer {
grid-column: 1 / -1;

display: flex;
justify-content: space-between;
gap: 1rem;

margin-top: clamp(3rem, 6vw, 5rem);
padding-top: 1rem;

border-top: 1px solid rgb(43 43 50 / 25%);

font-family: var(--mono-font);
font-size: 0.58rem;
letter-spacing: 0.08em;
}

/* ========================================
FOOTER
======================================== */

.site-footer {
min-height: 6rem;
align-items: center;

border-top: 1px solid rgb(43 43 50 / 20%);
}

.site-footer .wordmark {

grid-column: span 3;

font-family: "Orbitron", sans-serif;
font-size: 0.95rem;
}

.site-footer .wordmark span {
color: var(--red);
}


.site-footer p {
grid-column: 4 / span 6;
margin: 0;

color: rgb(43 43 50 / 70%);
font-size: 0.85rem;
text-align: center;
}

.site-footer > a:last-child {
grid-column: 10 / span 3;
justify-self: end;

font-family: "Orbitron", sans-serif;
font-size: 0.6rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}

/* Consistent section-label typography */

.eyebrow,
.hero-corner,
.intro-coordinate,
.experimental-footer,
.section-number {
font-family: "Orbitron", sans-serif;
font-weight: 600;
letter-spacing: 0.1em;
}

.eyebrow {
font-size: clamp(0.62rem, 0.7vw, 0.7rem);
line-height: 1.6;
}

.page-identifier {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
color: var(--charcoal);
text-transform: uppercase;
}

.page-identifier .identifier-number {
color: var(--red);
}

.page-identifier .identifier-separator {
color: var(--cyan);
}

.hero-eyebrow.page-identifier {
justify-content: center;
color: var(--off-white);
}

/* Reduced-motion accessibility */

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}

.hero-background {
transform: none;
}
}