@font-face {
    font-family: 'Helvetica';
    src: local('Helvetica Bold'), local('Helvetica-Bold'), local('Helvetica');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Helvetica';
    src: local('Helvetica Bold Oblique'), local('Helvetica-BoldOblique'), local('Helvetica Oblique');
    font-weight: 700;
    font-style: italic;
}

@keyframes fade-in-slide-down {
    from {
        opacity: 0;
        transform: translateY(-1rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* --- Dark Mode Widget Override --- */
body.dark {
    --widget-bg: var(--accent);
}

/* --- Eye Tracking Widget Styles --- */
.floating-eyes-widget {
    position: fixed;
    bottom: 12px;
    left: calc(100% - 12px - 76px); /* 100% = viewport without the scrollbar (100vw includes it) */
    z-index: 9999;

    background-color: var(--widget-bg, #0062AD);

    width: 76px;
    height: 76px;

    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    opacity: 1;
    transition: background-color 0.3s ease, opacity 0.4s ease-in-out, left 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Squircle corners where supported (bigger radius, since squircles curve in less) */
@supports (corner-shape: squircle) {
    .floating-eyes-widget {
        border-radius: 26px;
        corner-shape: squircle;
    }
}

/* Widget-sized eyes (the full-screen eyes keep the base .eye/.pupil sizes) */
.floating-eyes-widget .eye {
    width: 30px;
    height: 30px;
}

.floating-eyes-widget .pupil {
    width: 12px;
    height: 12px;
}

.floating-eyes-widget .eyes-wrapper {
    gap: 3px;
}

.floating-eyes-widget.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Speech bubble — fixed so it shows immediately independent of widget slide */
.widget-bubble {
    position: fixed;
    background: #000;
    color: #fff;
    padding: 8px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 10000;
}

.widget-bubble.show {
    opacity: 1;
}

.widget-bubble::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
}

/* Tail points right → bubble is to the LEFT of widget */
.widget-bubble.tail-right::after {
    right: -8px;
    border-left-color: #000;
    border-right-width: 0;
}

/* Tail points left → bubble is to the RIGHT of widget */
.widget-bubble.tail-left::after {
    left: -8px;
    border-right-color: #000;
    border-left-width: 0;
}


/* --- Fullscreen Eyes Background --- */
.fullscreen-eyes-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg);
    transition: background-color 0.3s ease, opacity 0.4s ease-in-out;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}

.fullscreen-eyes-bg.visible {
    opacity: 1;
    pointer-events: auto;
}

/* --- Fullscreen Back/Close Toggle --- */
.eyes-close-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10000;

    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;

    background-color: var(--close-btn-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.4s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

.eyes-close-btn.visible {
    opacity: 1;
    pointer-events: auto;
}

.eyes-close-btn:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

.eyes-wrapper {
    display: flex;
    flex-direction: row;
    gap: 4px;
    /* Scaled gap */
    align-items: center;
    justify-content: center;
    position: relative;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.fullscreen-eyes-bg .eyes-wrapper {
    transform: scale(4);
}

.eye {
    /* Larger eyes, filling the box */
    width: 40px;
    height: 40px;
    background-color: var(--cream-background, #fbf0dc);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.pupil {
    /* Proportionally larger pupils */
    width: 16px;
    height: 16px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
}

/* ------------------------------------- */


/* =========================================
   Home theme: sky blue (light mode only)
   ========================================= */
body.home-page:not(.dark) {
    --bg: #FAFDFF; /* off-white the sky fades into (sampled from the reference) */
    /* Dark navy keeps small text >= 4.5:1 on the blue */
    --text-primary: #061226;
    --text-secondary: #0F2444;
    --widget-bg: #000; /* eyes widget: black reads better on the blue */
}

/* Blue sky: solid through the first screen, fades to white as you scroll */
body.home-page:not(.dark) {
    /* Stops sampled top-to-bottom from the reference sky; the fade sits 10px lower */
    background-image: linear-gradient(180deg,
        #387FD9 0,
        #387FD9 12vh,
        #3B85E0 25vh,
        #468EE3 38vh,
        #4C98E5 calc(50vh + 10px),
        #5CA5E9 calc(55vh + 10px),
        #6DB0EC calc(60vh + 10px),
        #7FBCEF calc(65vh + 10px),
        #91C7F4 calc(70vh + 10px),
        #AAD3F5 calc(75vh + 10px),
        #C0DEF8 calc(80vh + 10px),
        #D2E8FB calc(85vh + 10px),
        #E6F3FD calc(90vh + 10px),
        #F8FDFF calc(95vh + 10px),
        #FAFDFF calc(100vh + 10px));
    background-repeat: no-repeat;
}

/* Pure black chrome on the blue (badge, nav, clock) */
body.home-page:not(.dark) .brand-text,
body.home-page:not(.dark) .icon-btn {
    color: #000;
}

body.home-page:not(.dark) .japan-time-label,
body.home-page:not(.dark) .japan-time-value {
    color: #fff;
}

body.home-page:not(.dark) .location-primary {
    color: #111;
}

/* Badge sits on the white end of the fade, so it stays dark */
body.home-page:not(.dark) .location-badge .location-muted {
    color: #6B7280;
}

/* Nav stays with you as you scroll, floating on a soft shadow */
body.home-page .glass-nav {
    position: fixed;
    box-shadow: 0 12px 32px -6px rgba(10, 40, 90, 0.4), 0 2px 8px rgba(10, 40, 90, 0.12);
}

body.home-page.dark .glass-nav {
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Pill nav that turns into a squircle card when the dropdown opens.
   40px > half the closed height, so it renders as a full pill, but it is close
   enough to the open radius that the corners change the moment you click
   (9999px only visibly changed at the very end of the open animation). */
.home-page .glass-nav,
.home-page .glass-nav::before {
    border-radius: 40px;
}

.home-page .glass-nav {
    transition: all 0.75s cubic-bezier(0.25, 1, 0.5, 1), border-radius 0.3s ease-out;
}

.home-page .glass-nav.expanded,
.home-page .glass-nav.expanded::before {
    border-radius: 32px;
    corner-shape: squircle; /* browsers without support keep plain rounded corners */
}

/* Whiter frosted nav on the blue, with a white border */
body.home-page:not(.dark) .glass-nav {
    border-color: #fff;
    background-image: linear-gradient(144.46deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.3) 100%);
}

/* =========================================
   Sky: drifting clouds behind the hero (light mode)
   ========================================= */
/* Hidden orbit cards near the right edge must not widen the page (sideways scrollbar).
   clip, unlike hidden, doesn't make this a scroll container */
.home-page .main-container {
    overflow-x: clip;
}

.sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    /* Clouds thin out where the blue fades to white */
    -webkit-mask-image: linear-gradient(#000 55%, transparent 90%);
    mask-image: linear-gradient(#000 55%, transparent 90%);
}

body.dark .sky {
    display: none;
}

.sky canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* =========================================
   Page entrance: everything starts blurred and pops into focus, staggered.
   `backwards` fill only, so no filter lingers afterwards (a leftover filter
   would interfere with the nav's backdrop blur). Uses the individual
   translate/scale properties so element transforms are left alone.
   ========================================= */
@keyframes blur-in {
    from {
        opacity: 0;
        filter: blur(18px);
        translate: 0 14px;
        scale: 0.97;
    }
}

body.home-page :is(.sky, .glass-nav, .japan-time, .hero-greeting, .hero-title-sans, .hero-title-script,
    .hero-tagline, .hero-orbit, .location-badge, .contact-hero, .form-shell, .toolkit-hero, .toolkit-grid) {
    animation: blur-in 1s cubic-bezier(0.2, 0.7, 0.2, 1) var(--enter-delay, 0s) backwards;
}

body.home-page .sky                { --enter-delay: 0s; }
body.home-page .glass-nav          { --enter-delay: 0.05s; }
body.home-page .japan-time         { --enter-delay: 0.1s; }
body.home-page .hero-greeting      { --enter-delay: 0.2s; }
body.home-page .hero-title-sans    { --enter-delay: 0.3s; }
body.home-page .hero-title-script  { --enter-delay: 0.42s; }
body.home-page .hero-tagline       { --enter-delay: 0.54s; }
body.home-page .hero-orbit         { --enter-delay: 0.35s; }
body.home-page .location-badge     { --enter-delay: 0.65s; }
body.home-page .contact-hero       { --enter-delay: 0.2s; }
body.home-page .form-shell         { --enter-delay: 0.35s; }
body.home-page .toolkit-hero       { --enter-delay: 0.2s; }
body.home-page .toolkit-grid       { --enter-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
    body.home-page :is(.sky, .glass-nav, .japan-time, .hero-greeting, .hero-title-sans, .hero-title-script,
        .hero-tagline, .hero-orbit, .location-badge, .contact-hero, .form-shell, .toolkit-hero, .toolkit-grid) {
        animation: none;
    }
}

/* =========================================
   Hero: intro text left, orbit right
   ========================================= */
.hero {
    width: 100%;
    max-width: 96rem;
    min-height: calc(100vh - 3rem);
    padding: 9.5rem 3rem 4rem; /* top clears the nav, bottom leaves room for the badge */
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: start; /* sit just under the nav, not mid-screen */
    position: relative;
    z-index: 1; /* above the clouds */
    align-items: center;
    gap: 2rem;
    font-family: 'Inter', sans-serif;
}

/* Wraps the H1 (greeting + title) and the name card, which is positioned from it */
.hero-heading {
    --greeting-size: 1.75rem;
    position: relative;
}

.hero-h1 {
    font: inherit;
}

.hero-greeting {
    font-size: var(--greeting-size);
    line-height: 1.5;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content; /* only the words trigger the name card, not the empty row */
    position: relative;
    z-index: 3; /* the faded title overlaps it; stay on top or the hover flickers */
    cursor: default;
    outline: none;
}

/* Hover (or tap) "Hey, I'm Aakash": everything else in the hero blurs back
   and a frosted card explains the name. .open is set by the script in index.html (hover on PC, tap on phones). */
.hero :is(.hero-title, .hero-tagline, .hero-orbit) {
    transition: filter 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero:has(.hero-greeting:is(.open, :focus-visible)) :is(.hero-title, .hero-tagline, .hero-orbit) {
    filter: blur(8px);
    opacity: 0.55;
}

.name-meaning {
    position: absolute;
    top: calc(var(--greeting-size) * 1.5 + 0.75rem); /* just under the greeting line */
    left: 0;
    z-index: 4;
    width: max-content;
    max-width: min(22rem, calc(100vw - 3rem));
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.85rem 1.1rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 32px -8px rgba(10, 40, 90, 0.35);
    color: #1a2b44;
    font-size: 0.95rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    translate: 0 -6px;
    scale: 0.96;
    transform-origin: top left;
    transition: opacity 0.35s ease, translate 0.45s cubic-bezier(0.25, 1, 0.5, 1), scale 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-heading:has(.hero-greeting:is(.open, :focus-visible)) .name-meaning {
    opacity: 1;
    translate: 0 0;
    scale: 1;
}

/* Bold without <strong>: the greeting already marks up "Aakash" once */
.name-meaning-name {
    font-weight: 700;
}

.name-meaning-word {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1;
    color: #2f6fd6; /* sky blue */
}

body.dark .name-meaning {
    background: rgba(30, 41, 59, 0.75);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 32px -8px rgba(0, 0, 0, 0.6);
    color: #e2e8f0;
}

body.dark .name-meaning-word {
    color: #6db0ec;
}

/* Title colour lives in a registered property so it can fade smoothly during the flag hover */
@property --hero-title-color {
    syntax: '<color>';
    inherits: true;
    initial-value: #fff;
}

.hero-title {
    display: flex;
    flex-direction: column;
    margin: 0.5rem 0 2rem;
    --hero-title-color: #fff;
    color: var(--hero-title-color);
    line-height: 0.85;
}

.hero-title-sans {
    font-weight: 500;
    font-size: clamp(4.5rem, 11vw, 10rem);
    letter-spacing: -0.05em;
}

.hero-title-script {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(4.25rem, 10vw, 9.5rem);
    margin: -0.1em 0 0 1.2em;
}

/* The page's H1, styled like the paragraph it used to be */
.hero-tagline {
    margin: 0;
    max-width: 30em; /* two balanced lines on desktop */
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
    text-wrap: balance;
}

.hero-orbit {
    width: 570px;
    height: 570px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* No-JS fallback avatar, replaced when the island mounts */
.hero-orbit > img {
    width: 6rem;
}

/* Desktop: intro text nudged 5px up */
@media (min-width: 901px) {
    .hero-text {
        position: relative;
        top: -5px;
    }
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: 0;
        padding-top: 11.5rem; /* nav drops below the badge here */
    }

    .hero-orbit {
        justify-self: center;
        width: 420px; /* middle orbit size, see SIZES in HeroOrbit.tsx */
        height: 420px;
    }
}

@media (max-width: 640px) {
    .hero {
        padding: 0 0 3rem; /* .main-container already clears clock + nav */
        gap: 1rem;
    }

    /* Phone hero fills the first screen: text at the top, orbit in the
       bottom-right corner above "BASED IN JAPAN" and clear of the eyes widget */
    .hero {
        min-height: 0;
        grid-template-rows: auto auto;
        padding-bottom: 2.5rem; /* room for "BASED IN JAPAN" */
    }

    /* Orbit centred in the space between the tagline and "BASED IN JAPAN" */
    .hero-orbit {
        width: min(340px, 100%); /* phone orbit size, see SIZES in HeroOrbit.tsx */
        height: auto;
        aspect-ratio: 1;
        justify-self: center;
        align-self: start;
        margin: 1.5rem 0 1rem; /* breathing room below the tagline and above "BASED IN JAPAN" */
    }

    .hero-heading {
        --greeting-size: 1.2rem;
    }

    .hero-title-sans {
        font-size: min(5.4rem, 20vw);
    }

    .hero-title-script {
        font-size: min(5rem, 15vw); /* keeps "designer" plus its offset inside narrow phones */
    }

    /* Wraps to two or three lines on phones */
    .hero-tagline {
        font-size: 1.1rem;
    }



    .hero-orbit > img {
        width: 2.25rem;
    }
}

/* =========================================
   Location Badge
   ========================================= */
.location-badge {
    position: absolute;
    align-items: flex-start; /* each line keeps its own width, so the second can be fitted to the first */
    bottom: 3.5rem; /* bottom-left of the first screen */
    /* Lines up with the hero text: container padding + hero side padding + centering gutter */
    left: calc(4.5rem + max(0px, (100% - 99rem) / 2));
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-family: var(--font-sans);
    z-index: 50;
    cursor: default;
}

.location-primary {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    line-height: 1.2;
    transition: color 0.3s ease;
}

.location-muted {
    font-weight: 600;
    color: var(--text-secondary);
}

.location-pin {
    width: 1.05em;
    height: 1.05em;
    margin-right: -0.15em;
}

/* Second line under "Based in Japan": quieter, with a globe. A script on the homepage
   scales its font size so the line is exactly as wide as "BASED IN JAPAN" */
.location-secondary {
    display: flex;
    align-items: center;
    gap: 0.4em;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: var(--text-secondary);
    line-height: 1.2;
    transition: filter 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}

.location-globe {
    width: 1.05em;
    height: 1.05em;
    flex: none;
}

body.home-page:not(.dark) .location-badge .location-secondary {
    color: #6B7280;
}

body.flag-on .location-secondary {
    filter: blur(4px);
}

/* =========================================
   Flag effect: body.flag-on is set by the script in index.html (hover on
   desktop, tap to toggle on touch screens, where hover would stick).
   Badge text blurs while the flag fades in behind
   ========================================= */
.location-primary {
    transition: filter 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}

body.flag-on .location-primary {
    filter: blur(4px);
}

/* =========================================
   Split-flap digit animation
   ========================================= */
.flip-char {
    display: inline-block;
}

@keyframes splitFlap {
    0%   { transform: rotateX(0deg);    opacity: 1;   }
    40%  { transform: rotateX(-90deg);  opacity: 0.2; }
    60%  { transform: rotateX(90deg);   opacity: 0.2; }
    100% { transform: rotateX(0deg);    opacity: 1;   }
}

.flip-char.flipping {
    animation: splitFlap 0.12s ease-in-out;
    transform-origin: center center;
}

/* Hinomaru sun: a big blurred red disc in the middle of the sky while the badge is hovered */
.hero-sun {
    position: absolute;
    top: 46%;
    left: 50%;
    width: min(56vh, 42vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #BC002D;
    filter: blur(48px);
    translate: -50% -50%;
    scale: 0.85;
    opacity: 0;
    pointer-events: none;
    z-index: 0; /* above the clouds, behind the hero text */
    transition: opacity 1.1s cubic-bezier(0.25, 1, 0.5, 1), scale 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}

body.flag-on .hero-sun {
    opacity: 0.85;
    scale: 1;
}

/* White field of the flag: fades over the blue sky and clouds (light mode) */
.flag-white {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}

body.home-page.flag-on:not(.dark) .flag-white {
    opacity: 1;
}

/* Phones: the hero is shorter than the screen, so the flag covers the whole
   screen (white field + sun centred on it), not just the hero */
@media (max-width: 640px) {
    /* The sections after the hero sit above the full-screen flag layer, so the
       flag only changes the background: My Work, hobbies etc. stay visible */
    body.landing > main > :is(.home-block, .work-section, .hobbies-section, .cta-band),
    body.landing > .site-footer,
    body.landing > div:has(> .hwf-root) {
        position: relative;
        z-index: 11;
    }

    .flag-white {
        position: fixed;
    }

    .hero-sun {
        position: fixed;
        top: 50%;
        width: 70vw;
        filter: blur(36px);
    }
}

/* The white hero text and clock fade to dark so they stay readable on the white */
.hero-greeting,
.hero-tagline,
body.home-page .japan-time-label,
body.home-page .japan-time-value {
    transition: color 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-title {
    transition: --hero-title-color 1.1s cubic-bezier(0.25, 1, 0.5, 1);
}

body.home-page.flag-on:not(.dark) .hero-title {
    --hero-title-color: #111;
}

body.home-page.flag-on:not(.dark) :is(.hero-greeting, .hero-title, .hero-tagline, .japan-time-label, .japan-time-value) {
    color: #111;
}

/* =========================================
   Japan Time Display
   ========================================= */
/* body.home-page: beats base.html's later .japan-time rule (top-right on other pages) */
body.home-page .japan-time {
    position: absolute;
    top: 2.25rem;
    left: 2.5rem;
    right: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    font-family: var(--font-sans);
    z-index: 50;
}

.japan-time-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.japan-time-label::after {
    content: '';
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    background-color: #39FF14;
    flex-shrink: 0;
}

.japan-time-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    transition: color 0.3s ease;
}

/* =========================================
   Work Section
   ========================================= */
.work-section {
    width: 100%;
    padding-top: 5rem;
    padding-bottom: 0; /* the gap to My Hobbies is the hobbies section's padding-top */
}

.work-header {
    padding: 0 1.5rem 1.5rem;
}

.work-label {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.work-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
    width: 100%;
    padding: 0 1.5rem;
}

/* First four projects only, until "See more" */
.work-grid:not(.show-all) > .work-card:nth-child(n + 5) {
    display: none;
}

/* The extra projects blur in when revealed, and blur out (last first) when hidden */
.work-grid.show-all > .work-card:nth-child(n + 5) {
    animation: blur-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc((var(--i, 4) - 4) * 90ms) backwards;
}

@keyframes blur-out {
    to {
        opacity: 0;
        filter: blur(18px);
        translate: 0 14px;
        scale: 0.97;
    }
}

.work-grid.show-all.closing > .work-card:nth-child(n + 5) {
    animation: blur-out 0.45s cubic-bezier(0.4, 0, 0.8, 0.3) forwards;
}

/* Page-wide progressive blur along the bottom edge of the screen (PageBlur island).
   Shown once the page is scrolled, so it never blurs the first screen. */
.page-blur {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 110px;
    z-index: 9000; /* above the content, below the nav and the eyes widget */
    pointer-events: none;
    opacity: 0;
    translate: 0 40px;
    transition: opacity 0.5s ease, translate 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Shown while scrolling through the page; slides away at the top and the very bottom */
.page-blur.on {
    opacity: 1;
    translate: 0 0;
}

/* Red YouTube play badge next to subscriber counts */
.hobby-card-subs {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.hobby-card-subs .yt-glyph {
    width: 20px;
    height: 14px;
    flex-shrink: 0;
}

/* Card border, built in CSS:
   a sky-blue border lights up around the cursor (no glow inside the card). The
   script in index.html adds the layer and sets --mx / --my. */
.magic-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    corner-shape: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.magic-ring {
    z-index: 5;
    padding: 2px; /* border width */
    background: radial-gradient(260px circle at var(--mx, -999px) var(--my, -999px), #387FD9, #6DB0EC, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

:is(.work-card, .hobby-card):hover .magic-ring {
    opacity: 1;
}

/* Spinning-text cursor over the cards (CardCursor island) */
@media (hover: hover) and (pointer: fine) {
    .has-card-cursor :is(.work-card, .hobby-card),
    .has-card-cursor :is(.work-card, .hobby-card) * {
        cursor: none;
    }
}

.card-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10002;
    pointer-events: none;
}

.card-cursor-disc {
    width: 104px;
    height: 104px;
    margin: -52px 0 0 -52px; /* centred on the pointer */
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(17, 17, 17, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    scale: 0.4;
    transition: opacity 0.25s ease, scale 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.card-cursor.on .card-cursor-disc {
    opacity: 1;
    scale: 1;
}

.card-cursor-text {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
}

.card-cursor-arrow {
    grid-area: 1 / 1;
    font-size: 26px !important;
}

/* App shelf under My Work: iPhone-style icons with names */
.apps-shelf {
    padding: 4.5rem 1.5rem 0; /* same as the gap down to My Hobbies */
    text-align: center;
}

.apps-label {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.apps-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.75rem 2rem;
}

.app-tile {
    width: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

.app-icon {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 22%;
    background: #fff;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.06);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1); /* eases the cursor-follow (data-magnetic in index.html) */
}

@supports (corner-shape: squircle) {
    .app-icon {
        border-radius: 36%;
        corner-shape: squircle;
    }
}

.app-tile:active .app-icon {
    transform: scale(0.94);
}

.app-name {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-primary);
}

@media (max-width: 640px) {
    /* All five in one row, like a home screen dock */
    .apps-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 1rem 0.4rem;
    }

    .app-tile {
        width: auto;
    }

    .app-icon {
        width: min(56px, 15vw);
        height: min(56px, 15vw);
    }

    .app-name {
        font-size: 0.7rem;
    }
}

.work-more-wrap {
    display: flex;
    justify-content: center;
    padding: 1.75rem 1.5rem 0;
}

.work-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.8rem 1.1rem 0.8rem 1.5rem;
    border: none;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none; /* it's a link to /work now */
    transition: transform 0.2s ease, background 0.2s ease;
}

.work-more:hover {
    background: #333;
    transform: translateY(-1px);
}

body.dark .work-more {
    background: #fff;
    color: #111;
}

.work-more .material-icons-round {
    transition: transform 0.3s ease;
}

.work-more[aria-expanded="true"] .material-icons-round {
    transform: rotate(180deg);
}

.work-more-hide,
.work-more[aria-expanded="true"] .work-more-show {
    display: none;
}

.work-more[aria-expanded="true"] .work-more-hide {
    display: inline;
}

.work-card {
    position: relative;
    aspect-ratio: 16 / 7.5;
    background-color: var(--card-bg);
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    /* Hidden until scrolled into view */
    opacity: 0;
    transform: translateY(48px);
    transition:
        opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: calc(var(--i, 0) * 80ms);
}

.work-section.in-view .work-card {
    opacity: 1;
    transform: translateY(0);
}

/* Cover image (project cards with photo) */
.work-card-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Gradient overlay so text is legible over the photo */
.work-card--has-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.work-card--has-cover .work-card-body {
    z-index: 2;
}

.work-card--has-cover .work-card-num,
.work-card--has-cover .work-card-tag {
    color: rgba(255, 255, 255, 0.65);
}

.work-card--has-cover .work-card-title {
    color: #ffffff;
}

.work-card--has-cover .work-card-arrow {
    z-index: 2;
    color: rgba(255, 255, 255, 0.7);
}

/* Subtle hover tint */
.work-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.work-card:hover::after {
    background: rgba(0, 0, 0, 0.05);
}

body.dark .work-card:hover::after {
    background: rgba(255, 255, 255, 0.05);
}

/* Cover cards don't need the plain hover tint */
.work-card--has-cover::after {
    display: none;
}

/* Name and who it is for bottom left, what was built bottom right */
.work-card-body {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: end;
    column-gap: 1.25rem;
    row-gap: 0.35rem;
    padding: 2rem;
}

.work-card-title,
.work-card-tag {
    grid-column: 1;
}

.work-card-kind {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    max-width: 15rem;
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: right;
    text-wrap: balance;
    color: var(--text-primary);
}

.work-card--has-cover .work-card-kind {
    color: rgba(255, 255, 255, 0.92);
}

.work-card-num {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.work-card-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.work-card-tag {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    margin-top: 0.25rem;
    transition: color 0.3s ease;
}

/* Arrow icon top right, fades in on hover */
.work-card-arrow {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 18px !important;
    color: var(--text-secondary);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.3s ease;
}

.work-card:hover .work-card-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* Make <a> work-cards look identical to <div> ones */
a.work-card {
    display: block;
    text-decoration: none;
}

/* Squircle corners where supported (bigger radius, since squircles curve in less) */
@supports (corner-shape: squircle) {
    .work-card,
    .hobby-card {
        border-radius: 40px;
        corner-shape: squircle;
    }
}

@media (max-width: 640px) {
    .work-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* =========================================
   Hobbies Section
   ========================================= */
.hobbies-section {
    width: 100%;
    padding-top: calc(4.5rem - 3px); /* same visible gap as above Apps */
    padding-bottom: 6rem;
}

.hobbies-header {
    padding: 0 1.5rem 1.5rem;
}

.hobbies-label {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.hobbies-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 14px;
    width: 100%;
    padding: 0 1.5rem;
}

.hobby-card {
    position: relative;
    aspect-ratio: 16 / 7.5; /* same shape as the work cards */
    background-color: var(--card-bg);
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0;
    transform: translateY(48px);
    transition:
        opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.65s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: calc(var(--i, 0) * 80ms);
}

.hobbies-section.in-view .hobby-card {
    opacity: 1;
    transform: translateY(0);
}

.hobby-card-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.hobby-card--has-cover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.2) 50%,
        rgba(0, 0, 0, 0) 100%
    );
    z-index: 1;
    pointer-events: none;
}

.hobby-card--has-cover .hobby-card-body {
    z-index: 2;
}

.hobby-card--has-cover .hobby-card-num,
.hobby-card--has-cover .hobby-card-tag {
    color: rgba(255, 255, 255, 0.65);
}

.hobby-card--has-cover .hobby-card-title {
    color: #ffffff;
}

.hobby-card--has-cover .hobby-card-arrow {
    z-index: 2;
    color: rgba(255, 255, 255, 0.7);
}

.hobby-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.hobby-card:hover::after {
    background: rgba(0, 0, 0, 0.05);
}

body.dark .hobby-card:hover::after {
    background: rgba(255, 255, 255, 0.05);
}

.hobby-card--has-cover::after {
    display: none;
}

.hobby-card-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    gap: 0.35rem;
}

.hobby-card-num {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.hobby-card-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.hobby-card-tag {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    margin-top: 0.25rem;
    transition: color 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hobby-card-arrow {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 18px !important;
    color: var(--text-secondary);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.3s ease;
}

.hobby-card:hover .hobby-card-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

a.hobby-card {
    display: block;
    text-decoration: none;
}

@media (max-width: 640px) {
    .hobbies-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* =========================================
   Contact CTA
   ========================================= */
/* Scroll reveal: elements with .reveal blur into focus when they reach the screen
   (script in index.html adds .in-view). Without JS they simply show. */
.js-reveal .reveal {
    opacity: 0;
    filter: blur(18px);
    translate: 0 24px;
    transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.js-reveal .reveal.in-view {
    opacity: 1;
    filter: none;
    translate: 0 0;
}

/* The arrow tile keeps its own hover tilt/scale animation (no reveal delay on those) */
.js-reveal .cta-band-btn.reveal {
    transition:
        opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s),
        filter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s),
        translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s),
        rotate 0.45s cubic-bezier(0.25, 1, 0.5, 1),
        scale 0.45s cubic-bezier(0.25, 1, 0.5, 1),
        background 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
    .js-reveal .reveal { opacity: 1; filter: none; translate: none; transition: none; }
}

/* Closing call to action: big heading on the left, tilted arrow tile on the right */
.cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    max-width: 96rem;
    margin: 0 auto;
    padding: 5rem 1.5rem 7rem;
}

.cta-band-heading {
    display: flex;
    flex-direction: column;
    line-height: 0.95;
    color: var(--text-primary);
}

.cta-band-sans {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: clamp(2.75rem, 7vw, 6rem);
    letter-spacing: -0.045em;
}

.cta-band-script {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: clamp(2.9rem, 7.4vw, 6.4rem);
    color: #387FD9; /* the sky blue */
    margin-left: 0.6em;
}

.cta-band-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: clamp(1.4rem, 2.6vw, 2.4rem) clamp(1.6rem, 3vw, 2.75rem);
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 28px;
    background: #111;
    color: #fff;
    rotate: -12deg;
    box-shadow: 0 18px 40px -12px rgba(10, 40, 90, 0.45);
    transition: rotate 0.45s cubic-bezier(0.25, 1, 0.5, 1), scale 0.45s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

@supports (corner-shape: squircle) {
    .cta-band-btn {
        border-radius: 48px;
        corner-shape: squircle;
    }
}

.cta-band-btn .material-icons-round {
    font-size: clamp(28px, 3.4vw, 48px);
    transition: translate 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.cta-band-btn:hover {
    rotate: 0deg;
    scale: 1.05;
}

.cta-band-btn:hover .material-icons-round {
    translate: 3px -3px;
}

.cta-band-btn:active {
    scale: 0.96;
}

body.dark .cta-band-btn {
    background: #fff;
    color: #111;
}

body.dark .cta-band-script {
    color: #6DB0EC;
}

/* =========================================
   App Store Modal
   ========================================= */
.as-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 10000; /* full-screen modal: above the nav */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.as-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.as-panel {
    width: 100%;
    max-width: 860px;
    background: #1c1c1e;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.as-overlay.visible .as-panel {
    transform: translateX(0);
}

.as-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.as-panel-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
}

.as-close-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.as-close-btn:hover { background: rgba(255,255,255,0.2); }

.as-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
}

.as-section-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
}

.as-list { display: flex; flex-direction: column; }

.as-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.as-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 0.75rem;
    cursor: pointer;
    border-right: 1px solid rgba(255,255,255,0.07);
    transition: background 0.18s;
}

.as-item:last-child { border-right: none; }
.as-item:hover { background: rgba(255,255,255,0.04); }

.as-item-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
}

.as-item-info { flex: 1; min-width: 0; }

.as-item-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.as-item-desc {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.1rem;
}

.as-item-iap {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.25);
    margin-top: 0.4rem;
}

.as-item-btn {
    flex-shrink: 0;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #2997ff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.28rem 0.85rem;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s;
}

.as-item-btn:hover { background: rgba(41,151,255,0.18); }

/* =========================================
   App Detail Modal
   ========================================= */
.asd-overlay {
    position: fixed;
    inset: 0;
    background: #1c1c1e;
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.asd-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.asd-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.asd-topbar {
    padding: 1.2rem 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.asd-back-btn {
    background: none;
    border: none;
    color: #2997ff;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
}

.asd-body {
    flex: 1;
    overflow-y: auto;
    padding: 2rem;
    max-width: 900px;
}

.asd-hero {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 1.5rem;
}

.asd-icon {
    width: 110px;
    height: 110px;
    border-radius: 22px;
    object-fit: cover;
    flex-shrink: 0;
}

.asd-name {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
}

.asd-tagline {
    font-size: 0.9rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 1rem;
}

.asd-price-btn {
    background: #2997ff;
    border: none;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 1.4rem;
    border-radius: 20px;
    cursor: pointer;
}

.asd-stats {
    display: flex;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 1.75rem;
}

.asd-stat {
    flex: 1;
    text-align: center;
    padding: 0.75rem 0.5rem;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.asd-stat:last-child { border-right: none; }

.asd-stat-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    margin-bottom: 0.3rem;
}

.asd-stat-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}

.asd-stat-sub {
    font-size: 0.65rem;
    color: rgba(255,255,255,0.3);
    margin-top: 0.15rem;
}

.asd-screenshots {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    margin-bottom: 1.75rem;
    scrollbar-width: none;
}

.asd-screenshots::-webkit-scrollbar { display: none; }

.asd-screenshot {
    height: 240px;
    border-radius: 10px;
    flex-shrink: 0;
    object-fit: cover;
}

.asd-platform {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.3);
    margin-bottom: 1rem;
}

.asd-description {
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.65);
    max-width: 660px;
    margin-bottom: 2rem;
}

.asd-dev-row {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1.25rem;
}

.asd-dev-link {
    font-size: 0.88rem;
    color: #2997ff;
    cursor: pointer;
}

/* =========================================
   Mobile Responsive – Hero Flow
   ========================================= */
@media (max-width: 640px) {
    body.home-page .japan-time {
        top: 1.5rem;
    }

    .location-badge {
        left: 1.5rem; /* hero text has no side padding here */
        bottom: 1.25rem; /* right under the orbit */
    }

    /* Convert hero to normal flow on mobile */
    .main-container {
        padding-top: 13rem;
        gap: 1.5rem;
        align-items: stretch;
    }

    /* App Store modal: bottom sheet on mobile */
    .as-overlay {
        align-items: flex-end;
        justify-content: stretch;
    }

    .as-panel {
        max-width: 100%;
        width: 100%;
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

    .as-overlay.visible .as-panel {
        transform: translateY(0);
    }

    /* App store items: single column on mobile */
    .as-row {
        grid-template-columns: 1fr;
    }

    /* Scale down fullscreen monster eyes */
    .fullscreen-eyes-bg .eyes-wrapper {
        transform: scale(2.2);
    }

    /* Floating eyes widget: smaller on mobile */
    .floating-eyes-widget {
        width: 50px;
        height: 50px;
        bottom: 10px;
        left: calc(100% - 10px - 50px);
    }

    .floating-eyes-widget .eye {
        width: 18px;
        height: 18px;
    }

    .floating-eyes-widget .pupil {
        width: 8px;
        height: 8px;
    }

    .floating-eyes-widget .eyes-wrapper {
        gap: 2px;
    }

    /* Contact CTA: tighter padding */
    .cta-band {
        flex-wrap: wrap;
        padding: 3.5rem 1.5rem 5rem;
        gap: 1.75rem 1rem;
    }

    .cta-band-heading {
        min-width: 0;
    }

    /* The button drops under the heading, on the right */
    .cta-band-btn {
        margin-left: auto;
        rotate: -6deg;
    }

    /* Card body padding */
    .work-card-body,
    .hobby-card-body {
        padding: 1.25rem;
    }

    .work-card-kind {
        max-width: 9rem;
        font-size: 0.75rem;
    }
}

/* =========================================
   Phone homepage: clock moves onto the greeting's line (right side),
   so the nav goes up to the top, slimmer, with the short name
   ========================================= */
.brand-short {
    display: none;
}

@media (max-width: 640px) {
    /* Hero only as tall as its content, so "My Work" peeks in on first load */
    .landing .main-container {
        padding-top: 8.25rem; /* below the nav, with some breathing room */
        min-height: 0;
    }

    /* Other pages: no clock on phones (the phone's own status bar shows the time) */
    body.home-page:not(.landing) .japan-time {
        display: none;
    }

    body.landing .japan-time {
        top: 8.25rem; /* same line as "Hey, I'm Aakash" */
        left: auto;
        right: 1.5rem;
        align-items: flex-end;
    }

    /* Same slim nav on every page in this design (body.: beats navigationbar.css) */
    body.home-page .glass-nav {
        margin-top: 0;
        top: 2.25rem; /* more space above the nav */
        width: calc(100% - 8rem); /* narrower than the content */
        padding: 0.58rem 0.5rem 0.58rem 0.9rem; /* 54px tall */
    }

    body.home-page .brand-logo {
        width: 2rem;
        height: 2rem;
    }

    body.home-page .brand-logo img {
        height: 28px !important; /* overrides the inline 36px */
    }

    body.home-page .brand-text {
        font-size: 1rem;
    }

    body.home-page .brand-full {
        display: none;
    }

    body.home-page .brand-short {
        display: block;
    }

    body.home-page .icon-btn {
        min-width: 36px;
        min-height: 36px;
        padding: 0.35rem;
    }
}

/* =========================================
   My Hobbies as an overlapping deck (wider screens).
   Back to front: AP Studios, Photography, 3D Printing, Graphic Design.
   Each card covers the one behind it except a strip on the left, where
   that card's title shows. Hovering a card lifts it to the front.
   ========================================= */
@media (min-width: 901px) {
    .hobbies-grid {
        position: relative;
        display: block;
        aspect-ratio: 16 / 4.6;
    }

    .hobbies-grid > .hobby-card {
        position: absolute;
        top: 3%;
        width: calc((100% - 3rem) * 0.6); /* inside the grid's 1.5rem side padding */
        aspect-ratio: 16 / 7.5;
        /* Strong shadow on the left edge so each card reads as its own sheet */
        box-shadow: -14px 0 30px -4px rgba(10, 30, 70, 0.45), -2px 0 6px rgba(10, 30, 70, 0.25);
        transition:
            opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1) calc(var(--i, 0) * 120ms),
            transform 0.65s cubic-bezier(0.25, 1, 0.5, 1) calc(var(--i, 0) * 120ms),
            translate 0.4s cubic-bezier(0.25, 1, 0.5, 1),
            scale 0.4s cubic-bezier(0.25, 1, 0.5, 1),
            box-shadow 0.4s ease;
    }

    .hobbies-grid > .hobby-card[href="/hobbies/youtube"]        { left: 1.5rem; z-index: 1; }
    .hobbies-grid > .hobby-card[href="/hobbies/photography"]    { left: calc(1.5rem + (100% - 3rem) * 0.1333); z-index: 2; }
    .hobbies-grid > .hobby-card[href="/hobbies/3d_printing"]    { left: calc(1.5rem + (100% - 3rem) * 0.2667); z-index: 3; }
    .hobbies-grid > .hobby-card[href="/hobbies/graphic_design"] { left: calc(1.5rem + (100% - 3rem) * 0.4); z-index: 4; }

    /* Grows from its centre (no sideways/upward move), so the card never slides out
       from under the cursor; moving it caused hover to drop and the card to flicker */
    .hobbies-grid > .hobby-card:hover {
        z-index: 10;
        scale: 1.02;
        box-shadow: 0 30px 60px -18px rgba(10, 30, 70, 0.6), 0 4px 12px rgba(10, 30, 70, 0.25);
    }

    /* Strips are narrow, so keep titles on one line */
    .hobbies-grid .hobby-card-title {
        white-space: nowrap;
    }
}

/* =========================================
   My Hobbies on phones/tablets: a vertical stack with each card's title at the
   top of its visible strip. "Show all" spreads them into the normal list and the
   titles glide back to the bottom-left. The script in index.html sets --card-h
   (card height) and each card's --shift (how far its text moves up).
   ========================================= */
.hobbies-toggle-wrap {
    display: none;
}

@media (max-width: 900px) {
    .hobbies-grid {
        --strip: 84px;
        --gap: 12px;
        position: relative;
        display: block;
        height: calc(var(--strip) * 3 + var(--card-h, 200px));
        transition: height 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .hobbies-grid.spread {
        height: calc(var(--card-h, 200px) * 4 + var(--gap) * 3);
    }

    .hobbies-grid > .hobby-card {
        position: absolute;
        left: 1.5rem;
        right: 1.5rem;
        top: calc(var(--i, 0) * var(--strip));
        z-index: calc(var(--i, 0) + 1);
        box-shadow: 0 -10px 24px -8px rgba(10, 30, 70, 0.45);
        transition:
            opacity 0.65s cubic-bezier(0.25, 1, 0.5, 1) calc(var(--i, 0) * 120ms),
            transform 0.65s cubic-bezier(0.25, 1, 0.5, 1) calc(var(--i, 0) * 120ms),
            top 0.7s cubic-bezier(0.25, 1, 0.5, 1) calc(var(--i, 0) * 60ms),
            box-shadow 0.5s ease;
    }

    .hobbies-grid.spread > .hobby-card {
        top: calc(var(--i, 0) * (var(--card-h, 200px) + var(--gap)));
        box-shadow: none;
    }

    /* Stacked: title sits at the top of the strip; spread: back to the bottom-left */
    .hobbies-grid .hobby-card-body {
        translate: 0 calc(-1 * var(--shift, 0px));
        transition: translate 0.7s cubic-bezier(0.25, 1, 0.5, 1);
        padding: 1.25rem 1.5rem;
    }

    .hobbies-grid.spread .hobby-card-body {
        translate: 0 0;
    }

    /* Dark shade follows the text: top while stacked, bottom when spread */
    .hobbies-grid .hobby-card--has-cover::before {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0) 70%);
    }

    .hobbies-grid.spread .hobby-card--has-cover::before {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
    }

    .hobbies-grid .hobby-card-title {
        white-space: nowrap;
    }

    .hobbies-toggle-wrap {
        display: flex;
        justify-content: center;
        padding: 1.75rem 1.5rem 0;
    }

    .hobbies-toggle .material-icons-round {
        transition: rotate 0.3s ease;
    }

    .hobbies-toggle[aria-expanded="true"] .material-icons-round {
        rotate: 180deg;
    }
}

/* Safety net: nothing on the homepage may widen the page past the screen
   (on phones that makes the browser zoom the whole page out) */
html:has(body.home-page) {
    overflow-x: clip;
}

/* Heavy page titles (toolkit, apps, widgets, tools, contact): Helvetica's heaviest
   face is Bold, so a hairline stroke in the text colour makes them a touch thicker */
:is(.contact-title, .toolkit-hero h1, .apps-page-title, .adp-name, .wdp-name,
    .tools-hero h1, .tools-intro h1, .soon h1) {
    -webkit-text-stroke: 0.028em currentColor;
}

/* Halftone wordmark footer: only the dotted word, no text rows */
.hwf-plain .hwf-top,
.hwf-plain .hwf-rule {
    display: none;
}

/* The regular footer flows straight into the wordmark below it */
body.home-page .site-footer {
    margin-bottom: 0;
    padding-bottom: 1rem;
}

/* Phones: the nav now sits at the very top on every page (no clock above it), so
   page content starts just under it, like the homepage. !important beats each
   page's own "nav drops below the clock" padding, which still applies on tablets. */
@media (max-width: 640px) {
    body.home-page:not(.landing) :is(.toolkit-content, .apps-page, .download-page, .wdp-page, .project-content) {
        padding-top: 7.5rem !important;
    }

    body.contact-sky .main-container {
        padding-top: 8rem !important;
    }
}

/* TRIAL: liquid glass on the nav and the "Aakash" name card (homepage only, Chromium).
   The script in index.html adds .liquid-glass; each element has its own lens filter. */
body.landing .glass-nav.liquid-glass,
body.landing .name-meaning.liquid-glass {
    background-image: none;
    /* Frosted tint so the text stays readable over busy content */
    background-color: rgba(255, 255, 255, 0.4);
    border-color: transparent;
    /* Bevel from LiquidGlassButton, lit from the top: bright top rim, darker lower edge */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.28),
        inset 0 2.4px 0 -2px rgba(255, 255, 255, 0.85),
        inset 0 -1.6px 0 -2px rgba(255, 255, 255, 0.6),
        inset 0 -6px 1px -6px rgba(255, 255, 255, 0.5),
        inset 0 -1px 4px 0 rgba(0, 0, 0, 0.08),
        inset 0 2px 4px -2px rgba(0, 0, 0, 0.12),
        0 4px 10px 0 rgba(10, 40, 90, 0.15),
        0 10px 24px 0 rgba(10, 40, 90, 0.12);
}

body.landing .glass-nav.liquid-glass {
    backdrop-filter: url(#liquid-nav-filter);
    -webkit-backdrop-filter: url(#liquid-nav-filter);
}

body.landing .name-meaning.liquid-glass {
    backdrop-filter: url(#liquid-card-filter);
    -webkit-backdrop-filter: url(#liquid-card-filter);
}

body.landing.dark :is(.glass-nav, .name-meaning).liquid-glass {
    background-color: rgba(30, 41, 59, 0.5);
}

/* Soft specular highlight near the top, like light catching the glass */
body.landing :is(.glass-nav, .name-meaning).liquid-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, 0.35), transparent 55%);
    z-index: 0;
}

/* Card text above the highlight (the nav's content already sits at z-index 1) */
.name-meaning > * {
    position: relative;
    z-index: 1;
}

/* =========================================
   Home: intro, services, how it works, FAQ
   ========================================= */
.home-block {
    width: 100%;
    padding-top: 5rem;
}

/* Intro: the photo in an Instax Mini frame (as on /about) left, the words right */
.home-intro-row {
    display: grid;
    grid-template-columns: auto minmax(0, 46rem);
    justify-content: center;
    align-items: center;
    gap: 4.5rem;
    padding: 0 1.5rem;
}

.home-intro-row .instax {
    width: 17rem;
    margin: 0;
    padding: 0.85rem 0.85rem 3.4rem; /* Instax film: thin sides and top, deep bottom border */
    background: #FBFBF8;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(10, 40, 90, 0.12), 0 22px 44px -12px rgba(10, 40, 90, 0.45);
    rotate: -4deg;
    position: relative;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.home-intro-row .instax img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 46 / 62; /* Instax Mini picture area */
    object-fit: cover;
    border-radius: 2px;
    background: #ddd;
}

.home-intro-row .instax figcaption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.7rem;
    text-align: center;
    font-family: 'Caveat', cursive;
    font-size: 1.9rem;
    font-weight: 700;
    color: #2B3A55;
}

/* More room between the hero and the intro, and between the intro and What I do */
#intro {
    padding-top: 8rem;
    padding-bottom: 3rem;
}

/* "About me" label above the intro words: handwritten like the hero's "designer", in the accent blue */
.home-eyebrow {
    margin-bottom: 0.5rem;
    font-family: 'Caveat', cursive;
    font-size: clamp(2.1rem, 3vw, 2.75rem);
    font-weight: 700;
    line-height: 1;
    color: #387FD9;
}

body.dark .home-eyebrow {
    color: #6DB0EC;
}

.home-intro {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 2.1rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    text-wrap: pretty;
}

.home-intro em {
    font-style: normal;
    color: #387FD9;
}

body.dark .home-intro em {
    color: #6DB0EC;
}

/* "Work with me" button under the intro, bottom right (as the About page's .ab-btn;
   drifts toward the cursor via data-magnetic) */
.home-intro-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.75rem;
}

.home-btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.6rem 0.6rem 1.6rem;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-weight: 600;
    font-size: 1.15rem;
    text-decoration: none;
    box-shadow: 0 18px 40px -18px rgba(10, 40, 90, 0.7);
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease, background-color 0.3s ease;
    will-change: transform;
}

.home-btn-arrow {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #387FD9;
    color: #fff;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.home-btn-arrow .material-icons-round {
    font-size: 1.4rem;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.home-btn:hover { box-shadow: 0 24px 50px -16px rgba(10, 40, 90, 0.8); }
.home-btn:hover .home-btn-arrow { transform: scale(1.08); }
.home-btn:hover .home-btn-arrow .material-icons-round { transform: translateX(3px) rotate(-45deg); }
.home-btn:active { transform: scale(0.96) !important; }
.home-btn:focus-visible { outline: 3px solid #387FD9; outline-offset: 4px; }

body.dark .home-btn {
    background: #fff;
    color: #111;
}

/* Text reveal words (script in index.html) */
.home-intro .tr-word {
    opacity: 0.15;
    transition: opacity 0.15s linear;
}

/* What I do: cards (ServiceCards island; same markup is the no-JS fallback).
   The spotlight and border beam colours, read by the island's layers: */
.home-svc-card {
    --spot-color: #387FD9;
    --beam-color: #387FD9;
}

body.dark .home-svc-card {
    --spot-color: #6DB0EC;
    --beam-color: #6DB0EC;
    --spot-opacity: 0.16;
}

.home-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 0 1.5rem;
}

.home-svc-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 22px;
    transition: border-color 0.3s ease;
}

@supports (corner-shape: squircle) {
    .home-svc-card {
        border-radius: 40px;
        corner-shape: squircle;
    }

    .home-svc-card .border-beam {
        corner-shape: inherit;
    }
}

.home-svc-link {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    min-height: 17rem;
    padding: 1.75rem 1.75rem 2rem;
    color: var(--text-primary);
    text-decoration: none;
}

.home-svc-link:focus-visible {
    outline: 2px solid #387FD9;
    outline-offset: -4px;
    border-radius: inherit;
}

/* Big faint icon in the corner: turns and grows a little on hover */
.home-svc-link .home-svc-deco {
    position: absolute;
    right: -1.25rem;
    bottom: -2.25rem;
    z-index: -1;
    font-size: 11rem;
    line-height: 1;
    color: var(--text-primary);
    opacity: 0.05;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

/* At 900px and below the ServiceCards island shows the cards as a looping carousel: one
   card at a time (neighbours just peek), swiped sideways (vertical page scroll still works:
   touch-action pan-y), with prev/next buttons beside the dots underneath. */
.home-svc-carousel {
    outline: none;
}

.home-svc-carousel:focus-visible .home-svc-slide.is-current .home-svc-card {
    outline: 2px solid #387FD9;
    outline-offset: 3px;
}

.home-svc-viewport {
    overflow: hidden;
    touch-action: pan-y;
}

.home-svc-viewport.is-dragging {
    user-select: none;
}

.home-svc-track {
    display: flex;
    will-change: transform;
}

.home-svc-slide {
    flex: none;
    display: flex;
    opacity: 0.45;
    transition: opacity 0.4s ease;
}

.home-svc-slide.is-current {
    opacity: 1;
}

.home-svc-slide > .home-svc-card {
    flex: 1;
}

.home-svc-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* 44px tap targets */
.home-svc-nav {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background-color: var(--card-bg);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.home-svc-nav .material-icons-round {
    font-size: 20px;
}

.home-svc-nav:active {
    border-color: #387FD9;
    color: #387FD9;
}

.home-svc-nav:focus-visible {
    outline: 2px solid #387FD9;
    outline-offset: 2px;
}

.home-svc-dots {
    display: flex;
    align-items: center;
}

/* The visible dot is small; the button around it is the 44px target */
.home-svc-dot {
    display: grid;
    place-items: center;
    height: 44px;
    min-width: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.home-svc-dot::before {
    content: '';
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 999px;
    background-color: var(--text-secondary);
    opacity: 0.35;
    transition: width 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.home-svc-dot[aria-current="true"]::before {
    width: 1.6rem;
    background-color: #387FD9;
    opacity: 1;
}

body.dark .home-svc-dot[aria-current="true"]::before {
    background-color: #6DB0EC;
}

body.dark .home-svc-nav:active {
    border-color: #6DB0EC;
    color: #6DB0EC;
}

@media (prefers-reduced-motion: reduce) {
    .home-svc-slide,
    .home-svc-dot::before {
        transition: none;
    }
}

/* Small looping illustration in its own light panel at the top of the card, across the
   full width. Solid colours; the loops are below. */
.home-svc-art {
    display: block;
    margin-bottom: auto; /* title and text sit at the bottom of the card */
    padding: 0.75rem;
    background-color: #EAF3FC;
    border: 1px solid #D5E5F6;
    border-radius: 14px;
    --art-ink: var(--text-primary);
    --art-paper: var(--card-bg);
    --art-soft: #DCEBFA;
    --art-blue: #387FD9;
    --art-light: #A9CFF3;
}

@supports (corner-shape: squircle) {
    .home-svc-art {
        border-radius: 26px;
        corner-shape: squircle;
    }
}

body.dark .home-svc-art {
    background-color: #17202B;
    border-color: #253447;
    --art-soft: #22324A;
    --art-blue: #6DB0EC;
    --art-light: #A9CFF3;
}

.home-svc-art svg {
    display: block;
    width: 100%;
    height: 8.5rem;
    overflow: visible;
}

.home-svc-art :is(g, rect, circle, path) {
    transform-box: fill-box;
    transform-origin: center;
}

.home-svc-art .art-panel { fill: var(--art-paper); stroke: var(--art-ink); stroke-width: 2.5; }
.home-svc-art .art-soft { fill: var(--art-soft); }
.home-svc-art .art-blue { fill: var(--art-blue); }
.home-svc-art .art-ink { fill: var(--art-ink); }
.home-svc-art .art-mute { fill: var(--art-ink); opacity: 0.3; }
.home-svc-art .art-white { fill: #fff; }
.home-svc-art .art-check { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.home-svc-art .art-trail { fill: none; stroke: var(--art-blue); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0.1 8; opacity: 0.5; }
.home-svc-art .art-wood { fill: var(--art-light); stroke: var(--art-ink); stroke-width: 2; }
.home-svc-art .art-grip { fill: var(--art-blue); stroke: var(--art-ink); stroke-width: 2; }
.home-svc-art .art-grain { fill: none; stroke: var(--art-blue); stroke-width: 2; stroke-linecap: round; opacity: 0.5; }
.home-svc-art .art-spark { fill: none; stroke: var(--art-blue); stroke-width: 2.5; stroke-linecap: round; }

/* Restaurant: an order bubble travels across into the phone, which shows a tick */
.home-svc-art--order .art-bubble { animation: art-send 3.6s ease-in-out infinite both; }
.home-svc-art--order .art-pop { animation: art-pop 3.6s ease-out infinite both; }

@keyframes art-send {
    0% { opacity: 0; transform: scale(0.6); }
    12%, 28% { opacity: 1; transform: none; }
    52%, 100% { opacity: 0; transform: translate(198px, 5px) scale(0.4); }
}

@keyframes art-pop {
    0%, 50% { opacity: 0; transform: scale(0.4); }
    58% { opacity: 1; transform: scale(1.12); }
    64%, 88% { opacity: 1; transform: none; }
    100% { opacity: 0; transform: none; }
}

/* Recruitment: a CV travels across onto the top job, which lights up with an "applied" tick */
.home-svc-art--apply .art-cv { animation: art-apply 3.6s ease-in-out infinite both; }
.home-svc-art--apply .art-pop { animation: art-pop 3.6s ease-out infinite both; }
.home-svc-art--apply .art-row { animation: art-row 3.6s ease infinite both; }

@keyframes art-apply {
    0% { opacity: 0; transform: translateX(-10px); }
    12%, 28% { opacity: 1; transform: none; }
    50%, 100% { opacity: 0; transform: translate(177px, -33px) scale(0.3); }
}

@keyframes art-row {
    0%, 48% { fill: var(--art-soft); }
    56%, 88% { fill: var(--art-blue); opacity: 0.45; }
    100% { fill: var(--art-soft); }
}

/* Trades: a claw hammer swings from the wrist (the end of its handle) and drives the
   nail into the plank in three hits (5px each), with a flash at each strike. */
.home-svc-art--hammer .art-hammer {
    transform-box: view-box;
    transform-origin: 224px 45px;
    transform: rotate(18deg);
    animation: art-hammer 3s infinite both;
}

.home-svc-art--hammer .art-nail {
    transform: translateY(15px);
    animation: art-nail 3s infinite both;
}

.home-svc-art--hammer .art-hit {
    opacity: 0;
    animation: art-hit 3s infinite both;
}

@keyframes art-hammer {
    0% { transform: rotate(18deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
    12% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
    24% { transform: rotate(18deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
    36% { transform: rotate(-3.9deg); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
    48% { transform: rotate(18deg); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
    60% { transform: rotate(-7.8deg); animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1); }
    74%, 100% { transform: rotate(18deg); }
}

@keyframes art-nail {
    0%, 12% { opacity: 1; transform: none; }
    13%, 36% { transform: translateY(5px); }
    37%, 60% { transform: translateY(10px); }
    61%, 86% { opacity: 1; transform: translateY(15px); }
    92% { opacity: 0; transform: translateY(15px); }
    93% { opacity: 0; transform: none; }
    100% { opacity: 1; transform: none; }
}

@keyframes art-hit {
    0%, 11% { opacity: 0; transform: none; }
    12% { opacity: 1; transform: none; }
    18%, 35% { opacity: 0; transform: translateY(5px); }
    36% { opacity: 1; transform: translateY(5px); }
    42%, 59% { opacity: 0; transform: translateY(10px); }
    60% { opacity: 1; transform: translateY(10px); }
    66%, 100% { opacity: 0; transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
    .home-svc-art * { animation: none !important; }
}

.home-svc-title {
    margin-top: 1.5rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.home-svc-text {
    font-size: 0.975rem;
    line-height: 1.55;
    color: var(--text-secondary);
    max-width: 30em;
}

/* Arrow top right, slides in on hover (as on the My Work cards) */
.home-svc-link .home-svc-arrow {
    position: absolute;
    top: 1.75rem;
    right: 1.75rem;
    font-size: 20px;
    color: var(--text-secondary);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.25s ease, transform 0.25s ease, color 0.3s ease;
}

.home-svc-card:hover {
    border-color: #387FD9;
}

.home-svc-card:hover .home-svc-deco {
    color: #387FD9;
    opacity: 0.1;
    transform: rotate(-10deg) scale(1.08);
}

.home-svc-card:hover .home-svc-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

body.dark .home-svc-card:hover {
    border-color: #6DB0EC;
}

/* Touch screens have no hover: keep the arrow visible as the "it's a link" cue */
@media (hover: none) {
    .home-svc-link .home-svc-arrow {
        opacity: 0.7;
        transform: none;
    }
}

.home-link {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 0.35rem;
    margin: 1.25rem 1.5rem 0 auto; /* right-aligned under the cards */
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
}

/* Only the words are underlined, not the arrow */
.home-link-text {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.home-link .material-icons-round {
    font-size: 18px;
    text-decoration: none;
    transition: translate 0.25s ease;
}

.home-link:hover .material-icons-round {
    translate: 3px 0;
}

.home-card-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.home-card-text {
    font-size: 0.975rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* How it works: numbered steps joined by a line. Lit by default (no JS); with JS
   (.js-steps) each one starts dim and lights up as it scrolls into view. */
.home-steps {
    --step: 2.75rem; /* number circle size */
    --gap: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap);
    list-style: none;
}

/* The steps sit in one card. The HowItWorks island lays animated beams
   (.home-beams) over it, behind the numbers, and adds .has-beams to drop the CSS line. */
.home-steps-box {
    position: relative;
    margin: 0 1.5rem;
    padding: 3rem 2.25rem 2.75rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 22px;
    --beam-color: #387FD9;
}

@supports (corner-shape: squircle) {
    .home-steps-box {
        border-radius: 40px;
        corner-shape: squircle;
    }
}

body.dark .home-steps-box {
    --beam-color: #6DB0EC;
}

.home-beams {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.home-steps-box.has-beams .home-step::before,
.home-steps-box.has-beams .home-step::after {
    display: none;
}

/* Each number pulses as the beam reaches it: 1, 2, 3, 4, pause, repeat.
   Timing matches HowItWorks.tsx (1.2s per step, 4.8s cycle). */
.home-steps-box.has-beams .home-step-num {
    animation: home-step-ping 4.8s ease-out calc(var(--i, 0) * 1.2s) infinite both;
}

@keyframes home-step-ping {
    0% { box-shadow: 0 0 0 0 rgba(56, 127, 217, 0.5); }
    18%, 100% { box-shadow: 0 0 0 12px rgba(56, 127, 217, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .home-steps-box.has-beams .home-step-num {
        animation: none;
    }
}

.home-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-right: 1.5rem;
    color: var(--text-primary);
}

.home-step-num {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--step);
    height: var(--step);
    margin-bottom: 0.85rem;
    border-radius: 50%;
    border: 2px solid #387FD9;
    background-color: #387FD9;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.3s ease, scale 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* The line to the next step: a grey track with a blue fill on top */
.home-step:not(:last-child)::before,
.home-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--step) / 2 - 1px);
    left: calc(var(--step) + 8px);
    right: calc(8px - var(--gap));
    height: 2px;
    border-radius: 2px;
    background-color: var(--border);
}

.home-step:not(:last-child)::after {
    background-color: #387FD9;
    transform-origin: left center;
    transition: scale 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.15s;
}

.home-step :is(.home-card-title, .home-card-text) {
    transition: opacity 0.4s ease;
}

.js-steps .home-step:not(.is-on) .home-step-num {
    background-color: var(--card-bg);
    border-color: var(--border);
    color: var(--text-secondary);
}

.js-steps .home-step:not(.is-on)::after {
    scale: 0 1;
}

.js-steps .home-step:not(.is-on) :is(.home-card-title, .home-card-text) {
    opacity: 0.4;
}

@media (hover: hover) {
    .home-step:hover .home-step-num {
        scale: 1.1;
        box-shadow: 0 0 0 6px rgba(56, 127, 217, 0.18);
    }
}

body.dark .home-step-num,
body.dark .home-step:not(:last-child)::after {
    border-color: #6DB0EC;
    background-color: #6DB0EC;
    color: #0b1a2e;
}

/* Desktop: the four steps come into view together, so light them one after another */
@media (min-width: 901px) {
    .home-step-num,
    .home-step :is(.home-card-title, .home-card-text) {
        transition-delay: calc(var(--i, 0) * 0.35s);
    }

    .home-step:not(:last-child)::after {
        transition-delay: calc(var(--i, 0) * 0.35s + 0.2s);
    }

    .home-step:hover .home-step-num {
        transition-delay: 0s;
    }
}

/* FAQ: its own solid sky-tint band. The gap above it (to My Hobbies) and below it
   (to the closing call to action) are the same, --home-faq-gap. */
body.home-page {
    --home-faq-gap: 4.5rem;
}

#hobbies {
    padding-bottom: var(--home-faq-gap);
}

#faq {
    padding: 4.5rem 0;
    background-color: #EAF3FC;
}

body.dark #faq {
    background-color: #17202B;
}

#contact-cta {
    padding-top: var(--home-faq-gap);
}

.home-faq-header {
    padding-bottom: 2rem;
    text-align: center;
}

.home-faq-header .work-label {
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

/* Two columns of questions; each column stacks on its own, so opening one doesn't stretch its neighbour */
.home-faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
    max-width: 76rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.home-faq-col {
    display: grid;
    gap: 12px;
}

.home-faq-item {
    overflow: hidden; /* the height slide in the FAQ script in index.html clips to this */
    padding: 0 1.75rem;
    background-color: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-primary);
}

.home-faq-item summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 0;
    font-size: 1.3rem;
    line-height: 1.35;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.home-faq-item summary::-webkit-details-marker {
    display: none;
}

.home-faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    transition: rotate 0.25s ease;
}

.home-faq-item[open] summary::after {
    rotate: 45deg;
}

.home-faq-item .home-card-text {
    padding-bottom: 1.5rem;
    font-size: 1.1rem;
}

.home-faq-item .home-card-text a {
    color: #387FD9;
    font-weight: 600;
    text-decoration: none;
}

.home-faq-item .home-card-text a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.dark .home-faq-item .home-card-text a {
    color: #6DB0EC;
}

@media (max-width: 900px) {
    .home-intro-row {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 2.75rem;
    }

    .home-intro-row .instax {
        width: 12.5rem;
    }

    .home-intro {
        max-width: 40rem;
    }

    .home-svc-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-svc-link {
        min-height: 0;
    }

    /* Steps stack, with the line running down the left */
    .home-steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .home-step {
        padding: 0 0 2rem calc(var(--step) + 1.1rem);
    }

    .home-step:last-child {
        padding-bottom: 0;
    }

    .home-step-num {
        position: absolute;
        top: -0.55rem;
        left: 0;
        margin: 0;
    }

    .home-step:not(:last-child)::before,
    .home-step:not(:last-child)::after {
        top: calc(var(--step) - 0.55rem + 6px);
        bottom: 0;
        left: calc(var(--step) / 2 - 1px);
        right: auto;
        width: 2px;
        height: auto;
    }

    .home-step:not(:last-child)::after {
        transform-origin: center top;
    }

    .js-steps .home-step:not(.is-on)::after {
        scale: 1 0;
    }
}

@media (max-width: 640px) {
    .home-block {
        padding-top: 3.5rem;
    }

    #intro {
        padding-top: 5.5rem;
    }

    body.home-page {
        --home-faq-gap: 3.5rem;
    }

    #faq {
        padding: 3.5rem 0;
    }

    .home-steps-box {
        padding: 2rem 1.25rem 1.75rem;
    }

    .home-svc-grid {
        gap: 12px;
    }

    .home-svc-link {
        padding: 1.4rem 1.4rem 1.6rem;
    }

    .home-svc-title {
        margin-top: 1.5rem;
    }

    .home-svc-art {
        padding: 0.5rem;
    }

    .home-svc-art svg {
        height: 6rem; /* compact on phones: the scene scales down and stays centred */
    }

    .home-svc-arrow {
        top: 1.4rem;
        right: 1.4rem;
    }

    .home-faq {
        grid-template-columns: minmax(0, 1fr);
    }

    .home-faq-item {
        padding: 0 1.25rem;
    }

    .home-faq-item summary {
        padding: 1.2rem 0;
        font-size: 1.15rem;
    }

    .home-faq-item .home-card-text {
        font-size: 1.025rem;
    }

    #intro {
        padding-bottom: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-step-num,
    .home-step::after,
    .home-step :is(.home-card-title, .home-card-text),
    .home-svc-deco {
        transition: none !important;
    }
}

/* Big screens (27" monitors): What I do, My work, How it works and My hobbies sit in from the
   window edges by twice the width of the clock (about 8.8rem). Their grids already pad 1.5rem. */
@media (min-width: 1800px) {
    #services,
    #work,
    #how-it-works,
    #hobbies {
        padding-inline: calc(8.8rem - 1.5rem);
    }
}