/* Inspired by Cong Min · Recoded by Claude */

:root {
    --bing-bg: url('https://congm.in/bing'); /* bing wallpaper */
    --body-bg: #eef0f2;                       /* cool graphite: light (screen 2) */
    --ink: #1b1e24;
    --filter-bg1: rgba(20, 24, 34, 0.32);     /* slate filter over the wallpaper */
    --filter-bg2: rgba(10, 12, 20, 0.48);
}

/* reset */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote,
body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl,
dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4,
h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li,
mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small,
span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead,
time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
html { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, td, th { text-align: left; font-weight: 400; vertical-align: middle; }
blockquote, q { quotes: none; }
blockquote::before, blockquote::after,
q::before, q::after { content: ''; content: none; }
a img { border: none; }

/* font */
@font-face {
    font-family: Ubuntu;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Ubuntu.woff2') format('woff2');
}

html, body { width: 100%; }
body {
    color: var(--ink);
    font-size: 16px;
    line-height: 1.5;
    font-family: Ubuntu, -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: none;
    user-select: none;
    overflow-x: hidden;
    background-color: var(--body-bg);
    touch-action: manipulation; /* no double-tap zoom (so double-tap-to-bottom works), snappier taps */
    -webkit-tap-highlight-color: transparent; /* no grey flash when tapping to scroll */
}

/* visually hidden (accessible heading for screen readers / SEO) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* both screens are fixed, stacked; the spacer below provides scroll height */
.screen {
    position: fixed;
    inset: 0;
}
.screen1 { z-index: 0; }
.screen2 {
    z-index: 1;
    background: var(--body-bg);
    isolation: isolate; /* contain screen 2's knockout blends within this layer, not against the cover */
    clip-path: circle(0px at 50% 50%); /* revealed by the cursor lens (screen 1) / grows to full on scroll */
}

/* cover (screen 1 wallpaper + filter + name) irises in from the centre once the image loads:
   a crisp circle whose radius grows from 0 to full coverage */
@property --cover-bloom {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}
.cover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    clip-path: circle(var(--cover-bloom) at 50% 50%); /* always blooms from the page centre */
    transition: --cover-bloom 0.6s ease-out;
}
.cover.revealed { --cover-bloom: 75%; } /* from centre, ~71% reaches the corners; fills over the full 0.6s */
@media (prefers-reduced-motion: reduce) {
    .cover { transition: none; }
}
.wallpaper {
    position: absolute;
    inset: 0;
    background: var(--bing-bg) center center / cover no-repeat #aaa;
}
.filter {
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, var(--filter-bg1), var(--filter-bg2));
}

/* watermark (screen 2), warped by the black-hole filter */
.watermark {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, 52px);
    align-content: center;
    justify-content: center;
    pointer-events: none;
    opacity: .24; /* darkest near the black hole; the mask fades it back to ~.10 away from the cursor */
    filter: url(#bhf);
    /* radial darkening that follows the black hole (--hot-x/--hot-y set by lens.js): the letters
       near the cursor read fuller, fading to the faint base level outside ~280px */
    -webkit-mask-image: radial-gradient(circle at var(--hot-x, 50%) var(--hot-y, 50%), #000 0, rgba(0, 0, 0, .4) 280px);
    mask-image: radial-gradient(circle at var(--hot-x, 50%) var(--hot-y, 50%), #000 0, rgba(0, 0, 0, .4) 280px);
}
.watermark span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    font-size: 20px;
    color: var(--ink);
}
/* touch has no cursor: drop the black-hole warp + its cursor-tracking darkening, leaving an
   evenly faint watermark; the lens simply expands from the centre on scroll */
@media (pointer: coarse) {
    .watermark {
        filter: none;
        -webkit-mask-image: none;
        mask-image: none;
        opacity: .12;
    }
}


/* name: solid + stroke; white on screen 1, dark on screen 2 */
.wordmark {
    position: relative;
    z-index: 1;
    display: block;
    width: min(90vw, 640px);
    height: auto;
    margin-bottom: 10px;
}
.wordmark text {
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    font-size: 130px;
    text-anchor: middle;
    stroke-width: 5px;
    stroke-linejoin: round;
    paint-order: stroke;
}
.wm-light text { fill: #fff; stroke: #fff; }
/* photo-filled name + motto: a full-viewport SVG <image> (the same aligned cover as screen 1)
   masked to the glyph shapes, composited source-over over the watermark + light bg. No
   mix-blend-mode reads the backdrop, so the watermark filter and lens clip cannot disturb it. */
.photo-name {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none; /* lens/scroll pass through; the motto hit-target re-enables itself */
}
/* mask content is luminance — pure white reveals the photo. The nested name svg shares
   screen 1's 630x180 viewBox + stroke geometry, so the revealed silhouette matches the white
   name on screen 1 (same font-size/weight/stroke/paint-order). */
.mask-wordmark text {
    font-family: Ubuntu, sans-serif;
    font-weight: 500;
    font-size: 130px;
    text-anchor: middle;
    fill: #fff;
    stroke: #fff;
    stroke-width: 5px;
    stroke-linejoin: round;
    paint-order: stroke;
}
.mask-motto {
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    font-size: 20px;
    fill: #fff;
    stroke: none;
}
/* transparent hover target overlaying the motto glyphs (mask content gets no pointer events) */
.motto-hit {
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    font-size: 20px;
    pointer-events: all;
}
/* loading: hide the photo so the grey fallback rect shows name + motto as grey ink (#4a515d);
   endIntro() removes .loading to reveal the photo */
.screen2.loading #photo-image { visibility: hidden; }

/* scroll-down hint at the bottom of the cover; faded in by lens.js after the image loads,
   and out as you scroll (overall opacity is JS-driven). The mouse stays still while its wheel
   dot slides down, fades, then pauses before repeating */
.scroll-hint {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6; /* above screen 2 so the lens never blocks the click */
    opacity: 0;
    padding: 10px; /* enlarge the click target around the small icon */
    cursor: pointer;
    line-height: 0;
}
.scroll-hint svg { display: block; }
.scroll-wheel {
    animation: scroll-wheel 2s ease-in-out infinite;
}
@keyframes scroll-wheel {
    0%   { transform: translateY(0);   opacity: 1; } /* dot present most of the cycle */
    65%  { transform: translateY(6px); opacity: 1; } /* glides slowly down, staying visible */
    80%  { transform: translateY(6px); opacity: 0; } /* brief fade at the bottom */
    81%  { transform: translateY(0);   opacity: 0; } /* reset to the top while invisible */
    100% { transform: translateY(0);   opacity: 1; } /* fade back in at the top */
}
@media (prefers-reduced-motion: reduce) {
    .scroll-wheel { animation: none; }
}

/* scroll height (the screens themselves are fixed) */
.scroll-spacer {
    height: 200vh;
    height: 200dvh;
}