/* ===== FONTS ===== */
@font-face {
    font-family: 'Clash Grotesk';
    src: url('../Fonts/Clash Grotesk/ClashGrotesk-Variable.ttf') format('truetype');
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Brockmann';
    src: url('../Fonts/Brockmann/brockmann-regular-webfont.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Brockmann';
    src: url('../Fonts/Brockmann/brockmann-medium-webfont.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Brockmann';
    src: url('../Fonts/Brockmann/brockmann-semibold-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Brockmann';
    src: url('../Fonts/Brockmann/brockmann-bold-webfont.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ===== TOKENS (from Figma PF26) ===== */
:root {
    --bg: #F2F2F2;
    --ink: #282B32;
    --ink-muted: #82849A;
    --ink-faint: #D7D8E4;
    --accent: #EC4F10;

    --font-display: 'Clash Grotesk', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Brockmann', system-ui, -apple-system, sans-serif;

    --gutter: 40px;          /* page edge */
    --header-h: 144px;       /* carousel starts here */
    --switch-bottom: 40px;   /* segmented control distance from bottom */
}

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

html {
    -webkit-text-size-adjust: 100%;   /* stop iOS Safari enlarging text on its own */
    text-size-adjust: 100%;
}

html,
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    margin: 0;
}

/* Balanced line breaks (no orphans) for all copy */
p,
h1,
h2,
h3,
dt,
dd,
li,
figcaption {
    text-wrap: pretty;
}

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

::selection {
    background: var(--accent);
    color: #FFFFFF;
}

/* ===== HOME LAYOUT ===== */
body.home {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

.site-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding: var(--gutter) var(--gutter) 0;
    pointer-events: none; /* let drags pass through to the carousel... */
}

.site-header a,
.site-header p {
    pointer-events: auto; /* ...but keep text and links interactive */
}

/* Logomark */
.logomark {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.logomark img {
    display: block;
    width: 24px;
    height: 24px;
}

.logomark-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2rem;          /* 32px */
    line-height: 1;
    color: var(--ink);
    white-space: nowrap;
    text-box: trim-both cap alphabetic;
}

/* Intro copy */
.intro {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.who-i-am,
.what-i-do {
    font-weight: 500;
    font-size: 1rem;          /* 16px */
    line-height: 1.4;
    letter-spacing: -0.02em;
}

/* Balanced wrapping at every breakpoint (no media query overrides it). "pretty" alone can
   still leave a lone link on the last line (the letter-roll links are atomic boxes, which
   also ignore  ), so short phrases are kept together: "Alumni of CIID." and
   "Currently at Scapia." in .nowrap spans, "interruption of it." with   */
.home .who-i-am,
.home .what-i-do > p,
.home .links {
    text-wrap: pretty;
}

.nowrap {
    white-space: nowrap;
}

.who-i-am {
    width: 372px;
}

.what-i-do {
    width: 390px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.accent {
    color: var(--accent);
}

.links {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.links a {
    color: var(--ink-muted);
}

.links .dot {
    color: var(--ink-faint);
}

/* ===== LETTER ROLL (hover) =====
   Ported from portfolio '25: each letter is doubled and both copies slide up one line,
   staggered 20ms per letter, 400ms, cubic-bezier(0.34, 1.56, 0.64, 1). */
.roll-word {
    display: inline-flex;
    white-space: pre;
    vertical-align: bottom;
}

.roll-letter {
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.roll-a,
.roll-b {
    display: inline-block;
    transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--i) * 20ms);
    will-change: transform;
}

.roll-b {
    position: absolute;
    left: 0;
    top: 100%;
}

@media (hover: hover) and (pointer: fine) {
    .roll:hover .roll-a,
    .roll:hover .roll-b,
    .roll:focus-visible .roll-a,
    .roll:focus-visible .roll-b {
        transform: translateY(-100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .roll-a,
    .roll-b {
        transition: none;
    }
}

.email-link.is-copied {
    color: var(--ink);
}

/* ===== CAROUSEL STAGE ===== */
.stage {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Where the cards sit (matches the IMAGE-FOR-REFERENCE slot in Figma). Invisible: js/home.js
   measures it and centres/sizes the cards inside it. */
.carousel-frame {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--header-h);
    bottom: 34px;           /* 982 - (144 + 804) in the Figma frame */
    pointer-events: none;
    visibility: hidden;
}

/* The WebGL canvas covers the whole window so the Stretch flares are never clipped.
   position is also set inline in index.html: the component forces position:relative
   and a 640px fallback height unless it is. */
#work-carousel {
    position: absolute;
    inset: 0;
    height: auto;
    cursor: default;         /* grab / pointer are set per zone by js/home.js */
    outline: none;
}

.effect-switch {
    position: absolute;
    left: 50%;
    bottom: var(--switch-bottom);
    transform: translateX(-50%);
    z-index: 3;
    border-radius: 1000px;
}


/* ===== INTRO (home) =====
   Each piece fades in from a blur, staggered: wordmark → descriptions → carousel → tabs.
   Text starts on load; the carousel and tabs wait until the carousel has drawn its first
   frame (body.is-ready, set in js/home.js) so they never appear before there's anything to show. */
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes blur-in {
    from { opacity: 0; filter: blur(12px); transform: translateY(12px); }
    to   { opacity: 1; filter: blur(0);    transform: none; }
}

.home .logomark,
.home .who-i-am,
.home .what-i-do > p,
.home .links,
.home #work-carousel,
.home #effect-control {
    opacity: 0;
}

.home .logomark,
.home .who-i-am,
.home .what-i-do > p,
.home .links {
    animation: blur-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--intro-delay, 0s) forwards;
}

.home .logomark      { --intro-delay: 0.10s; }
.home .who-i-am      { --intro-delay: 0.25s; }
.home .what-i-do > p { --intro-delay: 0.38s; }
.home .links         { --intro-delay: 0.50s; }

/* Opacity-only fade (a blur filter on the full-window WebGL canvas would cost frames);
   the carousel's own fly-in (js/home.js) is the main event */
.home.is-ready #work-carousel {
    animation: carousel-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--carousel-delay, 0s) forwards;
}

@keyframes carousel-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Tabs arrive together with the carousel */
.home.is-ready #effect-control {
    display: inline-block;
    animation: blur-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--carousel-delay, 0s) forwards;
}

/* Back from a project: no intro — everything is simply there (the carousel, which has to
   boot, gets a quick fade so it doesn't pop) */
.returning .home .logomark,
.returning .home .who-i-am,
.returning .home .what-i-do > p,
.returning .home .links,
.returning .home #effect-control {
    opacity: 1;
    animation: none;
}

.returning .home.is-ready #work-carousel {
    animation: carousel-in 0.3s ease-out 0s forwards;
}

@media (prefers-reduced-motion: reduce) {
    .home .logomark,
    .home .who-i-am,
    .home .what-i-do > p,
    .home .links,
    .home.is-ready #work-carousel,
    .home.is-ready #effect-control {
        animation-name: fade-in;
        animation-duration: 0.4s;
    }

    @keyframes fade-in {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1280px) {
    .intro {
        gap: 40px;
    }

    .who-i-am {
        width: 300px;
    }

    .what-i-do {
        width: 340px;
    }
}

@media (max-width: 1024px) {
    :root {
        --header-h: 220px;
    }

    .site-header {
        flex-direction: column;
        gap: 32px;
    }

    .intro {
        width: 100%;
        max-width: 760px;
    }

    .who-i-am,
    .what-i-do {
        flex: 1;
        width: auto;
    }
}

@media (max-width: 640px) {
    :root {
        --gutter: 24px;
        --header-h: 330px;
        --switch-bottom: 24px;
    }

    .logomark-name {
        font-size: 1.5rem;    /* 24px */
    }

    .who-i-am,
    .what-i-do {
        font-size: 0.875rem;  /* 14px on phones */
    }

    .site-header {
        gap: 24px;
    }

    .intro {
        flex-direction: column;
        gap: 16px;
    }

    .carousel-frame {
        bottom: 72px;
    }

    .effect-switch {
        transform: translateX(-50%) scale(0.84);
        transform-origin: 50% 100%;
    }
}