/* Home: hero, showcase frame, projects shortcut, notebook. */


/* Hero */

.hero-screen {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 40px 60px;
    position: relative;

    /* The hero is decorative: it lets scroll and click events through to the page. */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* will-change: promoted ahead of the entrance animation. */
.hero-logo-wrap {
    text-align: center;
    z-index: 2;
    will-change: opacity, transform;
}

.hero-logo {
    font-size: clamp(5rem, 14vw, 12rem);
    line-height: 0.85;
    color: var(--white);
    text-transform: uppercase;
    will-change: transform, filter;
    animation: sketch-wobble-hero 0.26s steps(1) infinite;
}

/* Starts invisible: the script animates the entrance. */
.hero-profession {
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.2vw, 1.6rem);
    font-weight: 300;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--red);
    margin-top: 14px;
    opacity: 0;
}

/* Small body, spaced capitals, muted white: the line must not compete with the logo. It enters
   after the profession line so the first second stays light. */
.hero-seeking {
    font-family: var(--font-body);
    font-size: clamp(0.68rem, 1.5vw, 0.82rem);
    font-weight: 300;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 62%);
    margin-top: 22px;
    opacity: 0;
}

.scroll-invite {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 3;
}

/* The line carries the dimming, so the label beside it stays at full contrast. It uses colour
   rather than opacity, which the pulse animation already drives. */
.scroll-line {
    width: 1px;
    height: 50px;
    background: var(--muted);
    animation: scroll-pulse 2s ease-in-out infinite;
    transform-origin: top;
}

.scroll-label {
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--red);
}

@media (max-width: 768px) {
    /* On phones the sentence wraps onto two lines: cap its width so it breaks cleanly instead of
       at random. */
    .hero-seeking {
        margin-top: 16px;
        letter-spacing: 0.11em;
        max-width: 30ch;
        margin-left: auto;
        margin-right: auto;
    }
}

/* The hero logo has its own variant of sketch-wobble. */
@keyframes sketch-wobble-hero {
    0%, 33% { filter: url("#sketch-1") drop-shadow(0 0 0 transparent); }
    34%, 66% { filter: url("#sketch-2") drop-shadow(0 0 0 transparent); }
    67%, 100% { filter: url("#sketch-3") drop-shadow(0 0 0 transparent); }
}

@keyframes scroll-pulse {
    0% {
        transform: scaleY(1);
        opacity: 1;
    }

    100% {
        transform: scaleY(0);
        opacity: 0;
    }
}


/* Showcase */

/* Starts invisible: the script animates the entrance. */
.home-showcase {
    padding: 0 60px;
    margin-bottom: 110px;
    opacity: 0;
    will-change: opacity, transform;
}

.home-showcase .frame-wrap {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: block;
}

.showcase-frame {
    position: relative;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    background: var(--white);
    cursor: pointer;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.showcase-frame .font-sketch {
    color: var(--ink);
    font-size: clamp(2.5rem, 6vw, 5rem);
    transform: rotate(-3deg);
    padding: 20px;
    text-align: center;
}

@media (max-width: 768px) {
    .home-showcase {
        padding: 0 16px;
        margin-bottom: 36px;
    }
}


/* Projects shortcut */

.projects-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    width: fit-content;
    margin: -25px auto 20px;
    cursor: pointer;
    text-align: center;

    /* No text selection on a double click. */
    -webkit-user-select: none;
    user-select: none;
    transition: transform var(--dur-med) var(--ease-out);
    will-change: opacity, transform;
}

.projects-shortcut-kicker {
    font-family: var(--font-sketch);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    color: var(--white);
    transform: translateY(18px) rotate(-4deg);
    z-index: 2;
    pointer-events: none;
    transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast);
    animation: sketch-wobble var(--sketch-timing);
}

.projects-shortcut-title {
    font-family: var(--font-display);
    font-size: clamp(3.8rem, 12vw, 9.8rem);
    font-weight: bold;
    line-height: 0.75;
    letter-spacing: -0.01em;
    color: var(--red);
    text-transform: uppercase;
    pointer-events: none;
    transition: transform var(--dur-med) var(--ease-out), color var(--dur-fast);
}

.projects-shortcut-underline {
    width: min(400px, 50vw);
    height: 16px;
    margin-top: 10px;
    pointer-events: none;
    z-index: 3;
}

.projects-shortcut-underline-path {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 0.5s var(--ease-out);
}

.projects-shortcut-hint {
    position: absolute;
    left: calc(50% + min(290px, 25vw));
    top: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    z-index: 4;
    transition: transform var(--dur-med) var(--ease-out);
    transform: rotate(5deg);
}

.projects-shortcut-hint-text {
    font-size: 3rem;
    color: var(--red);
    white-space: nowrap;
    animation: sketch-wobble 0.28s steps(1) infinite;
    transform: translateY(-8px) rotate(4deg);
}

/* scaleX(-1) flips the curved stroke so that it points left. */
.projects-shortcut-hint-arrow {
    width: 72px;
    height: 48px;
    transform: scaleX(-1);
}

.projects-shortcut-hint-arrow path:first-child { animation: sketch-wobble var(--sketch-timing); }
.projects-shortcut:hover { transform: scale(1.03); }

.projects-shortcut:hover .projects-shortcut-kicker {
    transform: translateY(10px) rotate(-6deg) scale(1.08);
    color: var(--red);
}

.projects-shortcut:hover .projects-shortcut-title {
    transform: scaleY(1.06);
    color: var(--red-light);
}

.projects-shortcut:hover .projects-shortcut-underline-path { stroke-dashoffset: 0; }
.projects-shortcut:hover .projects-shortcut-hint { transform: scale(1.08) rotate(7deg); }

@media (max-width: 768px) {
    .projects-shortcut {
        margin-top: -10px;
        margin-bottom: 10px;
    }

    .projects-shortcut-title { font-size: clamp(3rem, 12vw, 7rem); }
    .projects-shortcut-underline { width: 80%; }

    /* Hidden until the shortcut scrolls into view (touch rule below). */
    .projects-shortcut-hint {
        opacity: 0;
        transition: all 0.6s var(--ease-back) 0.8s;
        transform: translateY(-40px) scale(1.2) rotate(5deg);
        left: auto;
        right: -10px;
        top: -15px;
    }

    .projects-shortcut-hint-text { font-size: 2.2rem; }

    .projects-shortcut-hint-arrow {
        width: 45px;
        height: 30px;
    }
}

@media (hover: none), (pointer: coarse) {
    /* Touch: the shortcut rises when it scrolls into view, and the hover effects are cancelled
       (a hover left by a tap would stay). */
    .projects-shortcut {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
        transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    }

    .projects-shortcut.is-in-view {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .projects-shortcut:hover { transform: none; }
    .projects-shortcut:hover .projects-shortcut-kicker { transform: translateY(18px) rotate(-4deg); }
    .projects-shortcut:hover .projects-shortcut-title { transform: none; }
    .projects-shortcut:hover .projects-shortcut-underline-path { stroke-dashoffset: 400; }

    .projects-shortcut.is-in-view .projects-shortcut-hint {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(5deg);
    }
}

/* After the touch rules, so that a press still shrinks the shortcut there. */
.projects-shortcut:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* Once the page is on display the entrance is over: the layer promotion is dropped. */
.page.is-active .home-showcase,
.page.is-active .projects-shortcut {
    will-change: auto;
}


/* Notebook */

.notebook-section {
    position: relative;
    color: var(--notebook-text);
}

/* will-change: the sheet stretches on hover; its own layer avoids repainting the text. */
.notebook-sheet {
    position: absolute;
    inset: -85px 0 0;
    background: var(--notebook-bg);
    clip-path: polygon(0% 2.5%, 10% 1.8%, 25% 2.8%, 40% 1.5%, 55% 3.2%, 70% 1.8%, 85% 2.8%, 100% 1.8%, 100% 97.2%, 85% 98.2%, 70% 97.2%, 55% 98.5%, 40% 97.2%, 25% 98.2%, 10% 97.2%, 0% 98.2%);
    z-index: 0;
    filter: url("#paper-tear");
    will-change: transform;
    transition: transform 0.8s var(--ease-sheet), clip-path 0.8s var(--ease-sheet);
    transform-origin: center;
    pointer-events: none;
}

/* The red margin lives on the sheet so that it follows its stretch. */
.notebook-sheet::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 80px;
    width: 2px;
    background: rgb(var(--red-rgb) / 30%);
    z-index: 1;
}

.notebook-sheet::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 84px;
    width: 1px;
    background: rgb(var(--red-rgb) / 18%);
    z-index: 1;
}

/* Hovering the section unrolls the paper and the torn edges morph. */
.notebook-section:hover .notebook-sheet {
    transform: scale(1.015, 1.07);
    clip-path: polygon(0% 3.5%, 10% 2.2%, 25% 3.8%, 40% 2%, 55% 4.2%, 70% 2.2%, 85% 3.8%, 100% 2.2%, 100% 96.2%, 85% 97.5%, 70% 96.2%, 55% 97.8%, 40% 96.2%, 25% 97.5%, 10% 96.2%, 0% 97.5%);
}

/* Safari recomputes the torn-paper filter on every frame, so the script draws the sheet once
   into an image and sets this class. The red margin lines are part of the image. */
.notebook-sheet.is-prerendered {
    filter: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.notebook-sheet.is-prerendered::before,
.notebook-sheet.is-prerendered::after {
    display: none;
}

.notebook-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 110px 80px 130px;
    position: relative;
    z-index: 1;
}

/* Empty container: the script fills it with ruled lines of random length. */
.notebook-rules {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.notebook-rule {
    position: absolute;
    height: 4px;
    background: var(--notebook-line);
    border-radius: 2px;
}

.notebook-content {
    position: relative;
    z-index: 2;
    padding-left: 30px;
    cursor: default;
}

.notebook-title-wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 24px;
}

.notebook-title {
    font-size: clamp(3.2rem, 6vw, 5rem);
    line-height: 1;
    color: var(--notebook-text);
}

/* The text sits on the ruled lines: 34px line height and paragraph gap match their spacing,
   and -2px lands the baseline on the line. */
.notebook-text {
    font-size: 1.1rem;
    line-height: 34px;
    color: rgb(var(--bg-rgb) / 75%);
    max-width: 640px;
    margin-bottom: 34px;
    transition: transform var(--dur-base) var(--ease-out);
    position: relative;
    top: -2px;
}

.notebook-hover-zone:hover .notebook-text { animation: notebook-wobble 0.4s ease-out; }
.notebook-title-wrap:hover .notebook-title { animation: notebook-wobble 0.5s ease-out; }

.notebook-annotation {
    display: inline-block;
    font-size: 1.9rem;
    color: var(--red);
    margin-top: 24px;
    transform: rotate(-2deg);
    opacity: 0.85;
}

/* Signature with a curved arrow, shown only while the title is hovered. */
.notebook-signature {
    position: absolute;
    bottom: 25%;
    left: 95%;
    z-index: 3;
    opacity: 0;
    transform: translateY(10px) translateX(-10px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
    pointer-events: none;
    display: flex;
    align-items: flex-end;
}

.notebook-title-wrap:hover .notebook-signature {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

.signature-arrow {
    position: absolute;
    left: 0;
    bottom: -15px;
    width: 80px;
    height: 60px;
}

.signature-arrow path:first-child { animation: sketch-wobble var(--sketch-timing); }

.signature-name {
    font-size: 3rem;
    color: var(--red);
    transform: rotate(-6deg);
    white-space: nowrap;
    margin-left: 65px;
    margin-bottom: 25px;
}

@media (hover: none), (pointer: coarse) {
    /* Touch: the signature drops in when the section scrolls into view. The resting and in-view
       rules weigh as much as the hover rule and come after it, so a hover left by a tap changes
       nothing. */
    .notebook-signature {
        transition: all 0.6s var(--ease-back) 0.8s;
    }

    .notebook-section:not(.is-in-view) .notebook-signature {
        transform: translateY(-40px) translateX(20px) scale(1.2);
    }

    .notebook-section.is-in-view .notebook-sheet {
        transform: scale(1.02) rotate(-1deg);
        transition-delay: 0.3s;
    }

    .notebook-section.is-in-view .notebook-signature {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1);
    }
}

@media (max-width: 991px) {
    /* Anchored on the right, reserving the margin its scale(1.2) needs. The resting transform also
       holds while the title is hovered. */
    .notebook-signature {
        left: auto;
        right: 22px;
    }

    .notebook-section:not(.is-in-view) .notebook-signature {
        transform: translateY(-40px) scale(1.2);
    }
}

@media (max-width: 768px) {
    .notebook-sheet { top: -45px; }
    .notebook-sheet::before { left: 20px; }
    .notebook-sheet::after { left: 24px; }
    .notebook-inner { padding: 80px 20px 100px; }
    .notebook-content { padding-left: 12px; }
}

@media (max-width: 480px) {
    .notebook-signature { right: 16px; }

    .notebook-section:not(.is-in-view) .notebook-signature {
        transform: translateY(-36px) scale(1);
    }
}

@keyframes notebook-wobble {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-0.3deg) translateX(-1px); }
    50% { transform: rotate(0.2deg) translateX(1px); }
    75% { transform: rotate(-0.15deg); }
    100% { transform: rotate(0deg); }
}