/* home.css - Homepage: a list of links, a gradient per section, an arrow beside the active one */

/* ==========================================================================
   Backgrounds: one turning gradient, recoloured per section, with grain and specks over it
   ========================================================================== */

.home {
    --footer-h: 3rem;
    --page-x: clamp(1.25rem, 6vw, 7rem);
}

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

/* How far the gradient has faded towards black: 0 is the normal picture, 1 is nearly black */
@property --fade {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@property --c1 { syntax: '<color>'; inherits: true; initial-value: hotpink; }
@property --c2 { syntax: '<color>'; inherits: true; initial-value: #4a0530; }
@property --c3 { syntax: '<color>'; inherits: true; initial-value: #7c3aed; }
@property --c4 { syntax: '<color>'; inherits: true; initial-value: #ff9ecb; }

/* The shapes are the same for every section, so there is one gradient, turning without a break.
   A section only changes its four colours, which blend from one set to the next. */
.home {
    transition: --c1 0.9s ease, --c2 0.9s ease, --c3 0.9s ease, --c4 0.9s ease;
}

.home[data-section="thoughts"] { --c1: hotpink;   --c2: #4a0530; --c3: #7c3aed; --c4: #ff9ecb; }
.home[data-section="music"]    { --c1: limegreen; --c2: #0b3a14; --c3: #06b6d4; --c4: #bef264; }
.home[data-section="design"]   { --c1: crimson;   --c2: #3a0510; --c3: #ff7a45; --c4: #6d28d9; }
.home[data-section="photos"]   { --c1: #6366f1;   --c2: #1b1a55; --c3: #22d3ee; --c4: #c026d3; }
.home[data-section="issues"]   { --c1: gold;      --c2: #4a3608; --c3: #ff6b35; --c4: #dc143c; }
.home[data-section="theories"] { --c1: #4ade80;   --c2: #052e2b; --c3: #22d3ee; --c4: #4f46e5; }

.home-backgrounds {
    position: fixed;
    inset: 0;
    background-color: var(--dark-base);
    background-image:
        radial-gradient(95% 95% at calc(50% + 22% * cos(var(--spin))) calc(50% + 22% * sin(var(--spin))),
            color-mix(in srgb, var(--c1) 50%, transparent) 0%,
            color-mix(in srgb, var(--c1) 32%, transparent) 25%,
            color-mix(in srgb, var(--c1) 14%, transparent) 55%,
            color-mix(in srgb, var(--c1) 4%, transparent) 80%,
            transparent 100%),
        radial-gradient(100% 100% at calc(50% + 22% * cos(calc(var(--spin) + 90deg))) calc(50% + 22% * sin(calc(var(--spin) + 90deg))),
            color-mix(in srgb, var(--c3) 42%, transparent) 0%,
            color-mix(in srgb, var(--c3) 26%, transparent) 25%,
            color-mix(in srgb, var(--c3) 11%, transparent) 55%,
            color-mix(in srgb, var(--c3) 3%, transparent) 80%,
            transparent 100%),
        radial-gradient(105% 105% at calc(50% + 22% * cos(calc(var(--spin) + 180deg))) calc(50% + 22% * sin(calc(var(--spin) + 180deg))),
            color-mix(in srgb, var(--c4) 37%, transparent) 0%,
            color-mix(in srgb, var(--c4) 22%, transparent) 25%,
            color-mix(in srgb, var(--c4) 10%, transparent) 55%,
            color-mix(in srgb, var(--c4) 2%, transparent) 80%,
            transparent 100%),
        radial-gradient(110% 110% at calc(50% + 22% * cos(calc(var(--spin) + 270deg))) calc(50% + 22% * sin(calc(var(--spin) + 270deg))),
            color-mix(in srgb, var(--c2) 92%, transparent) 0%,
            color-mix(in srgb, var(--c2) 60%, transparent) 30%,
            color-mix(in srgb, var(--c2) 24%, transparent) 60%,
            transparent 100%),
        linear-gradient(160deg, color-mix(in srgb, var(--c2) 40%, black), black);
    animation: spin 45s linear infinite, fade 40s ease-in-out infinite alternate;
}

@keyframes spin {
    to { --spin: 360deg; }
}

@keyframes fade {
    to { --fade: 1; }
}

/* Fine grain, blended into the gradient */
.home-backgrounds::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0.47 0.47 0.47 0 -0.2  0.47 0.47 0.47 0 -0.2  0.47 0.47 0.47 0 -0.2  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: 0.9;
    pointer-events: none;
}

/* Sparse flecks over a dark scrim that keeps the links legible, and carries the slow fade to black */
.home-backgrounds::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 4.5 -3.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"),
        linear-gradient(rgb(0 0 0 / calc(0.25 + 0.55 * var(--fade))), rgb(0 0 0 / calc(0.45 + 0.45 * var(--fade))));
    background-size: 240px 240px, auto;
    pointer-events: none;
}

/* ==========================================================================
   Stage: the list
   ========================================================================== */

.home-stage {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--md) var(--page-x) calc(var(--footer-h) + var(--md));
}

.home-lines {
    font-size: clamp(1.6rem, min(8vw, 8.8vh), 6.5rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-align: left;
}

.home-name {
    margin: 0 0 0.45em;
    font: inherit;
    letter-spacing: inherit;
    color: white;
}

.home-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home-links .line {
    --link: hotpink;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.2em;
}

.home-links .line[data-section="thoughts"] { --link: hotpink; }
.home-links .line[data-section="music"]    { --link: limegreen; }
.home-links .line[data-section="design"]   { --link: crimson; }
.home-links .line[data-section="photos"]   { --link: #6366f1; }
.home-links .line[data-section="issues"]   { --link: gold; }
.home-links .line[data-section="theories"] { --link: #4ade80; }

.home-lines .word {
    color: rgb(255 255 255 / 0.25);
    text-decoration: none;
    transition: color 0.3s ease;
}

.home-lines .word.is-active {
    color: var(--link);
}

.home-lines .word:focus-visible {
    outline: none;
}

/* ==========================================================================
   Arrow: beside the active link
   ========================================================================== */

.go {
    font-size: 0.8em;
    line-height: 1;
    color: var(--link);
    text-decoration: none;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-0.3em);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.line.is-active .go {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
    animation: nudge 1.2s ease-in-out 0.3s infinite;
}

.go:hover,
.go:focus-visible {
    color: var(--link);
    animation-play-state: paused;
    transform: translateX(0.12em) scale(1.12);
}

@keyframes nudge {
    50% { transform: translateX(0.16em); }
}

/* Portrait screens (phones): more space between the links */
@media (orientation: portrait) {
    .home-links {
        row-gap: 0.32em;
    }

    .home-name {
        margin-bottom: 0.6em;
    }
}

/* Short landscape screens: the list goes into two columns */
@media (max-height: 520px) and (min-aspect-ratio: 3/2) {
    .home-lines {
        font-size: clamp(1.2rem, min(4vw, 7vh), 3rem);
    }

    .home-links {
        display: grid;
        grid-template-columns: repeat(2, auto);
        column-gap: 1.2em;
        justify-items: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-backgrounds,
    .line.is-active .go {
        animation: none;
    }

    .home,
    .home-lines .word,
    .go {
        transition: none;
    }
}