/* =========================================================
   Armin Rahimi — site styles
   Layout and spacing mostly come from Tailwind classes in the HTML.
   This file holds everything Tailwind can't express.
   ========================================================= */

html, body {
    font-family: 'Barlow', sans-serif;
    background-color: #050505;
    color: #e5e7eb;
    width: 100%;
    min-height: 100vh;
    overflow-x: clip;
    overscroll-behavior: none;
}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- Modals ---------- */
/* Pop-ups don't hide the page's scrollbar (that would shift the layout); script stops the page scrolling under them instead */
.modal .quote-panel { overscroll-behavior: contain; }
.modal { display: none; }
.modal.is-open { display: flex; }

.lightbox-thumb-wrapper { transition: transform 0.2s ease-in-out; }
.lightbox-thumb-wrapper:hover { transform: scale(1.05); }
.lightbox-thumb-img { opacity: 0.4; transition: opacity 0.3s, filter 0.3s; }
.lightbox-thumb-img.active { border: 2px solid white; opacity: 1; filter: brightness(1.2); }

/* ---------- Links & navigation ---------- */
.animated-underline { position: relative; display: inline-flex; padding-bottom: 2px; }
.animated-underline::after {
    content: '';
    position: absolute; bottom: 0; left: 0;
    width: 100%; height: 2px;
    background-color: currentColor;
    transform: scaleX(0); transform-origin: right bottom;     /* leaves towards the right */
    scale: 1 1;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), scale 0s linear 0.35s;
}
@media (hover: hover) and (pointer: fine) {
    /* comes in from the left at full weight, then slowly thins down to a hairline */
    .animated-underline:hover::after { transform: scaleX(1); transform-origin: left bottom; scale: 1 0.35;
        transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), scale 1.6s cubic-bezier(0.25, 0.8, 0.25, 1) 0.2s; }
}

.nav-link { font-weight: 300; color: #9ca3af; transition: color 0.3s ease, font-weight 0.3s ease; }
.nav-link.active { font-weight: 700; color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
    .nav-link:hover { color: #ffffff; }
}

/* Mobile pill tags: thin white by default, solid when active */
.mobile-tag { transition: all 0.3s ease; color: #ffffff !important; font-weight: 300 !important; }
.mobile-tag.active { background-color: #ffffff !important; color: #000000 !important; border-color: #ffffff !important; font-weight: 900 !important; }
@media (hover: hover) and (pointer: fine) {
    .mobile-tag:hover:not(.active) { border-color: #ffffff !important; background-color: rgba(255, 255, 255, 0.1) !important; }
}

.concept-art-sub { position: relative; }
.concept-art-sub::before {
    content: '';
    position: absolute; top: 6px; bottom: 6px; left: 0;
    width: 1px; background-color: #1f2937;
}

a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
    outline: 1px solid #ffffff;
    outline-offset: 3px;
}

/* ---------- Page and item fade-in ---------- */
.page-view { animation: fadeInPage 0.5s ease forwards; width: 100%; }
#app-root.is-swapping > :not(#gravity-grid-container):not(.lessons):not(.giz),
#app-root.is-swapping:not(.swap-keep) > :is(.lessons, .giz) { opacity: 0; transition: opacity 0.2s ease; }
#gravity-grid-container { transition: opacity 0.4s ease; }
/* Same colour on both sides: the lessons page leaves by playing its intro backwards, Gizmosis sinks out */
#app-root.swap-keep .lessons .hero-box, #app-root.swap-keep .lessons section:not(#top):not(.after-hero) { opacity: 0; transition: opacity 0.25s ease; }
#app-root.swap-keep .lessons-subnav { animation: subnavOut 0.34s cubic-bezier(0.5, 0, 0.75, 0) both; }
#app-root.swap-keep .after-hero { animation: riseOut 0.36s cubic-bezier(0.5, 0, 0.75, 0) both; }
#app-root.swap-keep .giz .rise { animation: sinkOut 0.3s cubic-bezier(0.5, 0, 0.75, 0) both; }
@keyframes subnavOut { from { translate: 0 0; } to { translate: 0 -105%; } }
@keyframes riseOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(110px); } }
@keyframes sinkOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(24px); } }
@keyframes fadeInPage { from { opacity: 0; } to { opacity: 1; } }

@keyframes projectFadeIn {                                  /* a proper slide up into place, settling softly */
    from { opacity: 0; transform: translateY(56px); }
    40% { opacity: 1; }
    to { opacity: 1; transform: translateY(0); }
}
/* Items start hidden only when JavaScript is running, so content is never lost without it. */
.js .reveal { opacity: 0; }
.reveal.is-visible { animation: projectFadeIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: var(--delay, 0ms); }

/* ---------- Side panel & top bar ---------- */
#sidebar { transform: translateX(-100%); }
#sidebar.open { transform: none; }                       /* phones: slides over the page */
body.loaded #sidebar { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
body.loaded #app-root { transition: margin-left 0.5s cubic-bezier(0.16, 1, 0.3, 1), width 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.7s; }
body.loaded #mobile-header { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
body.loaded #mobile-header .bar-bg { transition: padding-left 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s ease, border-color 0.5s ease; }
@media (min-width: 1024px) {                              /* desktop: pushes the page over and stays open */
    body.panel-open #sidebar { transform: none; }
    body.panel-open #app-root { margin-left: 17.5rem; width: calc(100% - 17.5rem); }
    body.panel-open #mobile-header .bar-bg { padding-left: 17.5rem; }   /* the bar runs under the panel, so no gap opens while both slide in */
}
body.nav-hidden #mobile-header { transform: translateY(-100%); }

/* Home: the landing has no bar or panel; they appear once you scroll into the index */
body.home-active #app-root { padding-top: 0 !important; }
body.home-active:not(.index-past) #mobile-header { transform: translateY(-100%); }
body.home-active:not(.index-past) #sidebar:not(.open) { transform: translateX(-100%); }
body.home-active:not(.index-past) #app-root { margin-left: 0; width: 100%; }
body.home-active #mobile-footer { display: none !important; }

/* Bar colours follow the page: dark, white or Gizmosis yellow */
#mobile-header { --bar-rgb: 5, 5, 5; --bar-ink: 255, 255, 255; }
body[data-bar="light"] #mobile-header { --bar-rgb: 255, 255, 255; --bar-ink: 0, 0, 0; }
/* 'clear': no background at all, black links (kept in reserve: set 'bar' => 'clear' on a page) */
body[data-bar="clear"] #mobile-header { --bar-ink: 0, 0, 0; }
body[data-bar="clear"] #mobile-header .bar-bg { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bar-bg { transition: background-color 0.5s ease, border-color 0.5s ease; }
.bar-bg { background: rgb(var(--bar-rgb)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(var(--bar-ink), 0.1); }
.bar-burger { color: rgba(var(--bar-ink), 0.6); }
.bar-burger:hover { color: rgb(var(--bar-ink)); }
/* 'fade': the bar melts into the page instead of ending in a hard edge */
body[data-bar-style="fade"] .bar-bg {
    background: linear-gradient(180deg, rgba(var(--bar-rgb), 0.94) 0%, rgba(var(--bar-rgb), 0.86) 55%, rgba(var(--bar-rgb), 0.45) 78%, rgba(var(--bar-rgb), 0) 100%);
    -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 0; padding-bottom: 1.4rem;
}
body[data-bar-style="fade"] #mobile-header { pointer-events: none; }
body[data-bar-style="fade"] #mobile-header a, body[data-bar-style="fade"] #mobile-header button { pointer-events: auto; }
body[data-bar-style="fade"][data-bar="dark"] .mob-link, body[data-bar-style="fade"][data-bar="dark"] .crumb { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7); }

.crumbs { color: rgba(var(--bar-ink), 0.45); }
.crumb { color: rgba(var(--bar-ink), 0.5); transition: color 0.3s ease; }
.crumb:hover { color: rgb(var(--bar-ink)); }
.crumb.is-current { color: rgb(var(--bar-ink)); font-weight: 600; }
.crumb-sep { opacity: 0.35; }
.crumb-swap { animation: crumbIn 0.45s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes crumbIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Animated cross grid ---------- */
#gravity-grid-container { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.gravity-point {
    position: absolute;
    will-change: transform, opacity;
    transition: opacity 0.5s ease;
    display: flex; align-items: center; justify-content: center;
}

/* ---------- Home page animations ---------- */
.clip-reveal { overflow: hidden; display: block; padding-bottom: 0.15em; }
:where(.clip-reveal > *) { display: block; } /* zero specificity, so Tailwind's flex / inline-block on the element always win */
.clip-reveal > * {
    transform: translateY(120%);
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
#page-home.revealed .clip-reveal > *, #page-portfolio.revealed .clip-reveal > * { transform: translateY(0); }
/* Home -> portfolio: grid fades out at the tail of the slide, then the next page fades in */
body.is-leaving #gravity-grid-container { opacity: 0; transition: opacity 0.5s ease 0.15s; }
#page-home.leaving { transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.6s; transform: translateY(-100vh); opacity: 0; }

.scroll-line-anim { animation: scrollDropSleek 2s cubic-bezier(0.77, 0, 0.175, 1) infinite; transform-origin: top; }
@keyframes scrollDropSleek {
    0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
    10% { opacity: 1; }
    40% { transform: scaleY(1); transform-origin: top; }
    40.1% { transform-origin: bottom; }
    70% { transform: scaleY(0); transform-origin: bottom; opacity: 1; }
    80% { opacity: 0; }
    100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .clip-reveal > * { transform: none !important; transition: none !important; }
    .js .reveal { opacity: 1; }
    .reveal.is-visible { animation: none; }
    .scroll-line-anim { animation: none; }
}

/* ---------- Portfolio index: five big words; desktop hover fades the artwork in behind ---------- */
.pf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.pf-link { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 1.5rem; color: #fff; transition: opacity 0.45s ease; }
.pf-name { font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; font-size: clamp(1.7rem, 7.6vw, 4.6rem); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.pf-blurb { font-size: 0.8rem; font-weight: 500; color: rgba(255, 255, 255, 0.45); }
.pf-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pf-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 0.7s ease, transform 1.6s cubic-bezier(0.16, 1, 0.3, 1); }
.pf-bg img.is-active { opacity: 0.32; transform: none; }
.pf-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,5,5,0.85) 0%, rgba(5,5,5,0.35) 70%, rgba(5,5,5,0.6) 100%); }
@media (max-width: 1023px) { .pf-bg { display: none; } .pf-blurb { display: none; } }
@media (min-width: 1024px) {
    .pf-list:hover .pf-link { opacity: 0.28; }
    .pf-list .pf-link:hover { opacity: 1; }
    .pf-link:hover .pf-name { transform: translateX(0.6rem); }
}

/* ---------- Placeholders: facts still to fill in (see inc/site.php) ---------- */
.ph {
    outline: 1px dashed #facc15;
    outline-offset: 2px;
    background: rgba(250, 204, 21, 0.12);
    color: inherit;
    padding: 0 0.2em;
    border-radius: 2px;
}

/* ---------- Long-form text pages (About, Lessons, Hire) ---------- */
.prose-site p + p { margin-top: 1em; }
.prose-site a { text-decoration: underline; text-underline-offset: 4px; }

/* FAQ: hide the default disclosure triangle */
.faq summary::-webkit-details-marker { display: none; }
.text-balance { text-wrap: balance; }

/* ---------- Guitar lessons: blood red fading into black ---------- */
.lessons-hero { background: #a3141a; }
/* the fade into black hangs off the top of How it works, so the two rise in together as one piece on arrival */
/* (.after-hero is whichever section comes right after the poster) */
.after-hero { position: relative; }
.after-hero::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 220px; pointer-events: none;
    background: linear-gradient(180deg, rgba(163, 20, 26, 0) 0%, #5a0d10 59%, #0b0909 100%); }
.lessons-hero > .hero-box { position: relative; z-index: 1; }

.after-hero { animation: riseBlock 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
@keyframes riseBlock { from { opacity: 0; transform: translateY(110px); } to { opacity: 1; transform: none; } }
.lessons-fade { background: linear-gradient(180deg, #a3141a 0, #6e0f12 120px, #2a0a0b 340px, #0b0909 560px); }
.lessons-end { background: linear-gradient(180deg, #0b0909 0%, #a3141a 45%, #a3141a 100%); }

/* ---------- "Start a project" pop-up ---------- */
#quote-modal .quote-backdrop, #services-modal .quote-backdrop, #about-modal .quote-backdrop, #updates-modal .quote-backdrop { opacity: 0; transition: opacity 0.3s ease; }
#quote-modal .quote-panel, #services-modal .quote-panel, #about-modal .quote-panel, #updates-modal .quote-panel { transform: translateY(24px); opacity: 0; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; }
#quote-modal.is-shown .quote-backdrop, #services-modal.is-shown .quote-backdrop, #about-modal.is-shown .quote-backdrop, #updates-modal.is-shown .quote-backdrop { opacity: 1; }
#quote-modal.is-shown .quote-panel, #services-modal.is-shown .quote-panel, #about-modal.is-shown .quote-panel, #updates-modal.is-shown .quote-panel { transform: none; opacity: 1; }
#q-drop.is-drag { border-color: #fff; background: rgba(255, 255, 255, 0.04); }

/* ---------- Guitar lessons: poster intro, launch code, sub-menu ---------- */
.lessons-hero { position: relative; overflow: hidden; }
/* (the dark wipe over the poster was removed: the red is simply there from the first frame, under the menus too) */
.lh-title { line-height: 1.02; }
.lh-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.lh-line > span { display: inline-block; animation: lhUp 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--d, 0s); }
.lh-in { animation: lhFade 0.8s ease both; animation-delay: var(--d, 0s); }
@keyframes lhWipe { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes lhUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes lhFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Launch code: a ticket with a slowly marching dashed edge and a light sweep across the code */
.promo-ticket { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; padding: 0.6rem 1rem; border-radius: 0.3rem;
    background-image: linear-gradient(90deg, #0b0909 55%, transparent 55%), linear-gradient(90deg, #0b0909 55%, transparent 55%), linear-gradient(0deg, #0b0909 55%, transparent 55%), linear-gradient(0deg, #0b0909 55%, transparent 55%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px;
    background-position: 0 0, 0 100%, 0 0, 100% 0; animation: ants 1.4s linear infinite; }
@keyframes ants { to { background-position: 12px 0, -12px 100%, 0 -12px, 100% 12px; } }
.promo-label { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; }
.promo-code { font-weight: 900; font-size: 1.15rem; letter-spacing: -0.01em; text-transform: uppercase;
    background: linear-gradient(100deg, #0b0909 0%, #0b0909 40%, #ffd1d1 50%, #0b0909 60%, #0b0909 100%); background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; animation: codeSweep 3.6s ease-in-out infinite; }
@keyframes codeSweep { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
.promo-terms { font-size: 0.72rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .promo-ticket, .promo-code { animation: none; } }

.lessons-subnav a { position: relative; color: rgba(255, 255, 255, 0.5); transition: color 0.3s ease; padding: 0.9rem 0; }
.lessons-subnav a:hover, .lessons-subnav a.is-active { color: #fff; }
.lessons-subnav a::after { content: ''; position: absolute; left: 0; right: 0.3em; bottom: 0.55rem; height: 2px; background: #ff4d4d; transform: scaleX(0); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.lessons-subnav a.is-active::after { transform: scaleX(1); }
/* The sub-menu sits flush under the top bar and slides with it, same timing, so no gap ever opens */
.lessons-subnav { background: linear-gradient(180deg, #050505 0%, rgba(5, 5, 5, 0.92) 40%, rgba(5, 5, 5, 0.55) 72%, rgba(5, 5, 5, 0) 100%); padding-bottom: 1.1rem; margin-bottom: -1.1rem; pointer-events: none; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); margin-top: -1px; }
.lessons-subnav a { pointer-events: auto; }
body.nav-hidden .lessons-subnav { transform: translateY(-3rem); }
body.lessons-page #mobile-header .bar-bg { border-bottom-color: transparent; background: #050505; }

@media (prefers-reduced-motion: reduce) {
    .after-hero { animation: none; }
    .lh-line > span, .lh-in { animation: none; }
}

/* ---------- Mobile top bar ---------- */
.mob-link { color: rgba(var(--bar-ink), 0.5); font-weight: 400; position: relative; transition: color 0.3s ease; }
.mob-link:hover { color: rgba(var(--bar-ink), 0.85); }
.mob-link.active { color: rgb(var(--bar-ink)); font-weight: 700; }
.mob-link::after { content: ''; position: absolute; left: 50%; bottom: 0.45rem; width: 0; height: 1px; background: currentColor; transform: translateX(-50%); transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.mob-link.active::after { width: calc(100% - 0.5rem); }

/* ---------- Home index: full-screen sections that snap as you scroll ---------- */
@media all {
    html.index-snap { scroll-snap-type: y mandatory; overflow-anchor: none; }   /* no scroll anchoring: it nudged the page a few px whenever a screen changed inside (the Portfolio flip) */
    .ix { min-height: 100svh; min-height: var(--ixh, 100dvh); scroll-snap-align: start; scroll-snap-stop: always; position: relative; z-index: 2; }
    .ix-lessons { background: #a3141a; }
    .ix-gizmosis { background: #facc15; }
    #contact.ix { background: #050505; }

    /* Each section's intro plays the first time it snaps into view */
    .ix .ix-r { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
    .ix.ix-in .ix-r { opacity: 1; transform: none; }
    .ix-line { display: block; clip-path: inset(0 -100vw -0.05em -100vw); padding-bottom: 0.05em; }   /* hides the word below its line for the intro, never at the sides */
    .ix .ix-line > span { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 90ms + 120ms); }
    .ix.ix-in .ix-line > span { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ix .ix-r, .ix .ix-line > span { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Single-word display titles; script sets the exact size, 15vw is the fallback */
.fit-word { width: 100%; white-space: nowrap; font-size: 15vw; }
.fit-word.is-fitting { transition: font-size 0.55s cubic-bezier(0.16, 1, 0.3, 1); }
.fit-word > span { display: inline-block; }
.ix-portfolio { background: #fff; }

/* Guitar courses: collapsed on phones, tap to open; always open on desktop */
.course-body { display: none; }
.course.is-open .course-body { display: flex; animation: lhFade 0.45s ease both; }
.course.is-open .course-chevron { transform: rotate(180deg); }
@media (min-width: 1024px) { .course-body { display: flex; } .course-head { pointer-events: none; cursor: default; } }

/* ---------- Landing: the five squares ---------- */
.corner-dots { position: relative; width: 20px; height: 12px; }
.corner-dots span { position: absolute; left: 0; top: 0; width: 4px; height: 4px; background: #fff; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); }

/* ---------- Contact screen: shape-shifting "something" ---------- */
.morph { display: inline-block; height: 0.95em; vertical-align: baseline; white-space: nowrap; }
.morph-dot { display: inline-block; margin-left: 0.04em; transition: transform 0.12s ease; }
.morph-inner { display: inline-block; line-height: 0.95; white-space: nowrap; transform-origin: left bottom; }
.morph.is-glitching .morph-inner { animation: morphGlitch var(--glitch, 0.17s) steps(2) both; }
@keyframes morphGlitch {
    0% { clip-path: inset(0 0 55% 0); translate: -4px 0; text-shadow: 3px 0 #ff004c, -3px 0 #00e5ff; }
    50% { clip-path: inset(45% 0 0 0); translate: 5px 0; text-shadow: -3px 0 #ff004c, 3px 0 #00e5ff; }
    100% { clip-path: inset(0 0 0 0); translate: 0 0; }
}

/* ---------- Buttons ---------- */
.btn-fx { display: inline-flex; align-items: center; gap: 0.6rem; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background-color 0.3s ease, color 0.3s ease; }
.btn-fx:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6); }
/* Explore / Watch: a slow, soft lift (all eased the same way, in and out) */
.btn-zoom { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), scale 0.7s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease; }
.btn-zoom:hover { scale: 1.035; transform: translateY(-1px); box-shadow: 0 14px 34px -16px rgba(0, 0, 0, 0.55); }
.btn-zoom .btn-arrow { transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.btn-fx:active { transform: translateY(0) scale(0.98); }
.btn-arrow { display: inline-block; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-fx:hover .btn-arrow { transform: translateX(4px); }
.btn-ghost { display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 9999px; padding: 0.8rem 1rem; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: #d1d5db; transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease; }
.btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.05); }
.social-big { display: flex; align-items: center; justify-content: center; width: clamp(42px, 2.75rem, 50px); height: clamp(42px, 2.75rem, 50px); color: #8b8b8b; transition: color 0.3s ease; }
/* the icons keep the same size and breathing room at every screen size, instead of swelling with the big-screen type */
.social-big svg { width: clamp(21px, 1.35rem, 25px) !important; height: clamp(21px, 1.35rem, 25px) !important; }
.social-big:hover { color: #fff; }

/* Pop-up windows: the page stays as it is; the window itself frosts whatever is behind it */
.glass-panel { background: rgba(12, 12, 12, 0.6); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); border: 1px solid rgba(255, 255, 255, 0.12); }

/* Frosted panels so the animated grid never fights the text */
.glass-row { background: rgba(10, 10, 10, 0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.glass-row:hover { border-color: rgba(255, 255, 255, 0.28); background: rgba(18, 18, 18, 0.7); transform: translateY(-2px); }

/* ---------- All Work: one artwork at a time (default) or a grid ---------- */
.aw-toggle { display: flex; gap: 2px; padding: 3px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); flex-shrink: 0; }
.aw-toggle button { width: 34px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; color: rgba(255, 255, 255, 0.4); transition: color 0.25s ease, background 0.25s ease; }
.aw-toggle button[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, 0.12); }
.aw-list { display: flex; flex-direction: column; gap: 3rem; max-width: 68.75rem; margin: 0 auto; width: 100%; }
.aw-item { margin: 0; }
.aw-media { position: relative; display: block; border-radius: 0.6rem; overflow: hidden; background: #0d0d0d; }
.aw-media img, .aw-media video { display: block; width: 100%; height: auto; }
.aw-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.85); }
.aw-item figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.75rem; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: #6b7280; }
.aw-item figcaption a { color: #d1d5db; transition: color 0.3s ease; }
.aw-item figcaption a:hover { color: #fff; }
.aw[data-view="grid"] .aw-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; max-width: none; }
@media (min-width: 768px) { .aw[data-view="grid"] .aw-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; } }
@media (min-width: 1280px) { .aw[data-view="grid"] .aw-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.aw[data-view="grid"] .aw-media { aspect-ratio: 1; border-radius: 0.25rem; }
.aw[data-view="grid"] .aw-media img, .aw[data-view="grid"] .aw-media video { height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.aw[data-view="grid"] .aw-media:hover img { transform: scale(1.08); }
.aw[data-view="grid"] .aw-item figcaption { display: none; }

/* ---------- Gallery pages: quiet end links, floating jump buttons ---------- */
.end-link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #c4c7cc; transition: color 0.3s ease; }
.end-link:hover { color: #fff; }

/* ---------- How it works: line illustrations ---------- */
.how-art { width: 100%; height: auto; display: block; overflow: visible; color: #f4ece0;
    /* mostly black & white: two greys, plus one spot colour per drawing */
    --ha: 214 206 194; --hb: 112 106 102; --pop: 255 77 77; --lit: 255 210 105; }
.how-art .ha-rays .ha-l { stroke: rgb(var(--lit)); }
.how-art .ha-l { stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.how-art .ha-blob { fill: rgb(var(--ha) / 0.13); }
.how-art .ha-skin { fill: #171313; }
.how-art .ha-white { fill: #f4ece0; }
.how-art .ha-dot { fill: #0b0909; }
.how-art .ha-mouth { fill: #0b0909; }
.how-art .ha-fa { fill: rgb(var(--ha)); }
.how-art .ha-pop { fill: rgb(var(--pop)); }
.how-art .ha-fb { fill: rgb(var(--hb) / 0.85); }
.how-art .ha-fa-soft { fill: rgb(var(--ha) / 0.45); }
.how-art .ha-fb-soft { fill: rgb(var(--hb) / 0.35); }
.how-art .ha-accent { stroke: rgb(var(--ha)); }
.how-art .ha-accent-b { stroke: rgb(var(--hb)); }
.how-art .ha-star { stroke: none; }
.how-art .ha-band { stroke: rgb(var(--ha)); stroke-width: 6; stroke-linecap: round; fill: none; }
.how-art .ha-blush { fill: rgb(var(--hb) / 0.55); }
.how-art .ha-fire { fill: #ff9a5a; stroke: #ffd9a8; }
.how-art .ha-fire-in { fill: #ffe7b0; }
.how-art .ha-hot { stroke: #ff6a3a; stroke-width: 11; stroke-linecap: round; opacity: 0.4; }
.how-art .ha-heat { fill: none; stroke: #ff7a3a; stroke-width: 40; stroke-linecap: round; opacity: 0.16; filter: blur(8px); }

/* ---------- ☰ that turns into ✕ (desktop: the same button opens and closes the side panel) ---------- */
.burger { position: relative; width: 18px; height: 12px; display: block; }
.burger span { position: absolute; left: 0; width: 100%; height: 1.75px; border-radius: 2px; background: currentColor; transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease, top 0.45s cubic-bezier(0.65, 0, 0.35, 1), width 0.45s cubic-bezier(0.65, 0, 0.35, 1), left 0.45s cubic-bezier(0.65, 0, 0.35, 1); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 5px; }
.burger span:nth-child(3) { top: 10px; }
/* Panel open (desktop): the three lines fold into a minimal "<" */
.burger span { transform-origin: 0 50%; }
@media (min-width: 1024px) {
    body.panel-open .burger span:nth-child(1) { top: 5px; width: 62%; left: 3px; transform: rotate(-42deg); }
    body.panel-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
    body.panel-open .burger span:nth-child(3) { top: 5px; width: 62%; left: 3px; transform: rotate(42deg); }
}
.bar-burger { transition: color 0.3s ease; }

/* Where-am-I row starts right under the "Portfolio" link (script measures where that is) */

/* Big titles: pull the first letter back so its edge lines up with the text under it */
.optical-left { margin-left: -0.055em; }

/* ---------- Guitar lessons: the first three parts snap like the home index, then the FAQ scrolls freely ---------- */
/* (snapping tried and dropped: normal scrolling) The red poster still fills the first screen */
.lessons-hero.lsnap { display: block; }
.lessons section[id] { scroll-margin-top: 5.25rem; }
.lessons-courses { background: #0b0909; }

/* "Everyone's welcome": a thin red rule down the side, a small red label, light type; nothing shouting */
/* Everyone's welcome: a friendly note right under the three steps */
.welcome-note { text-align: center; margin-top: 4rem; }
@media (min-width: 1024px) { .welcome-note { margin-top: 5.25rem; } }
.welcome-title { font-size: clamp(1.6rem, 3.4vw, 3.1rem); font-weight: 700; letter-spacing: -0.02em; color: #fff; margin-bottom: 0.9rem; line-height: 1.1; }
.marker { font-family: 'Permanent Marker', cursive; font-weight: 400; text-transform: none; letter-spacing: 0.01em; color: #ff3b3b; display: inline-block; transform: rotate(-2.5deg); padding: 0 0.06em; }
.welcome-word { margin-right: 0.03em; padding: 0.05em 0.1em 0.1em 0.04em; transform: rotate(-3deg) translateY(0.02em);
    background: linear-gradient(95deg, #5eead4 0%, #a78bfa 52%, #f472b6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.marker-end { color: #fff; transform: rotate(-3deg) translateY(-0.04em); font-size: 0.92em; letter-spacing: 0.02em; }   /* on the red: white, like it was written on the poster */
/* section heads on the lessons page: big title, centred, with one quiet line under it */
.l-head { text-align: center; margin-bottom: 2.5rem; }
@media (min-width: 1024px) { .l-head { margin-bottom: 3.25rem; } }
.l-lead { margin-top: 1rem; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; row-gap: 0.9rem;
    font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); line-height: 1; }
.l-lead .lg-g { display: inline-flex; align-items: center; white-space: nowrap; }
.l-lead .sep { display: inline-block; width: 4px; height: 4px; border-radius: 9999px; background: #ff3b3b; margin: 0 1.1em 0 0.85em; flex-shrink: 0; }
.l-lead .lg-bar { display: inline-block; width: 1px; height: 1.1em; background: rgba(255, 255, 255, 0.25); margin: 0 1.3em; }
/* the link reads like "Ask me anything": plain, light, a thin red line under it */
.l-lead .l-link { font-size: 12px; font-weight: 300; letter-spacing: 0; text-transform: none; color: #fff; white-space: nowrap; padding-bottom: 0.2rem;
    background: linear-gradient(#ff4d4d, #ff4d4d) 0 100% / 100% 1px no-repeat; transition: background-size 0.35s ease, color 0.3s ease; }
.l-lead .l-link:hover { color: #ff4d4d; background-size: 100% 2px; }
@media (max-width: 639px) {   /* phones: the facts on one line, the link under it */
    .l-lead { flex-direction: column; font-size: 9px; letter-spacing: 0.1em; }
    .l-lead .sep { width: 3px; height: 3px; margin: 0 0.9em 0 0.8em; }
    .l-lead .lg-bar { display: none; }
}
.course { container-type: inline-size; }
.course .course-name { font-size: min(1.5rem, 8.2cqi); }
@media (min-width: 768px) { .course .course-name { font-size: min(1.875rem, 8.2cqi); } }
.welcome-rest { margin-left: 0.04em; }
.welcome-quote { font-size: clamp(1.1rem, 1.8vw, 1.6rem); font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, 0.88); max-width: 50rem; margin: 0 auto; text-wrap: balance; }
@media (min-width: 768px) { .welcome-quote { max-width: none; text-wrap: nowrap; } }   /* desktop: the two sentences, one line each */
.welcome-sub { margin-top: 0.9rem; font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.6); }
/* the poster recedes as How it works slides up over it */
.lessons-hero.is-receding { position: sticky; z-index: 0; }
/* the poster rides with the top bar (slides up with it, same timing), and as How it works comes over it, it
   steps back into the distance: a little smaller, softly out of focus, a touch darker */
.lessons-hero.is-receding { position: sticky; top: 0; z-index: 0; transition: translate 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
body.nav-hidden .lessons-hero.is-receding { translate: 0 -3rem; }   /* rides up with the menus */
.lessons-hero.is-receding > .hero-box { padding-top: calc(var(--hy, 0px) + 2.5rem); transform: scale(var(--hs, 1)); transform-origin: 50% 35%; filter: blur(var(--hb, 0)); opacity: var(--ho, 1); will-change: transform, filter, opacity; }
@media (min-width: 1024px) { .lessons-hero.is-receding > .hero-box { padding-top: calc(var(--hy, 0px) + 3rem); } }
.lessons-hero.is-receding::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #0b0909; opacity: var(--hd, 0); }
.lessons-hero.is-receding ~ section { position: relative; z-index: 1; }
[data-parallax] { transform: translateY(var(--py, 0)) scale(1.12); will-change: transform; }
.welcome-ask { padding-bottom: 0.15rem; background: linear-gradient(#ff4d4d, #ff4d4d) 0 100% / 100% 1px no-repeat; transition: background-size 0.35s ease, color 0.3s ease; }
.welcome-ask:hover { color: #ff4d4d; background-size: 100% 2px; }
.welcome-ask .btn-arrow { display: inline-block; transition: transform 0.35s ease; }
.welcome-ask:hover .btn-arrow { transform: translateX(4px); }

/* ---------- Guitar courses: two colours each, drifting clouds of light; they glow brighter under the pointer ---------- */
@property --c1x { syntax: '<percentage>'; initial-value: 20%; inherits: true; }
@property --c1y { syntax: '<percentage>'; initial-value: 25%; inherits: true; }
@property --c2x { syntax: '<percentage>'; initial-value: 80%; inherits: true; }
@property --c2y { syntax: '<percentage>'; initial-value: 75%; inherits: true; }
@property --c3x { syntax: '<percentage>'; initial-value: 60%; inherits: true; }
@property --c3y { syntax: '<percentage>'; initial-value: 20%; inherits: true; }
@keyframes c1x { from { --c1x: 4%; } to { --c1x: 78%; } }
@keyframes c1y { from { --c1y: 6%; } to { --c1y: 70%; } }
@keyframes c2x { from { --c2x: 96%; } to { --c2x: 22%; } }
@keyframes c2y { from { --c2y: 96%; } to { --c2y: 26%; } }
@keyframes c3x { from { --c3x: 35%; } to { --c3x: 65%; } }
@keyframes c3y { from { --c3y: -10%; } to { --c3y: 110%; } }
.glow-card { position: relative; isolation: isolate; overflow: hidden; --mx: -400px; --my: -400px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.03), rgba(14, 12, 12, 0.94) 45%);
    border: 1px solid rgba(255, 255, 255, 0.09);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease, box-shadow 0.6s ease; }
.card-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: 0.22; transition: opacity 0.8s ease;
    background:
        radial-gradient(110% 60% at var(--c3x) var(--c3y), rgb(var(--cb) / 0.18), transparent 72%),
        radial-gradient(105% 100% at var(--c1x) var(--c1y), rgb(var(--ca) / 0.24), transparent 74%),
        radial-gradient(100% 95% at var(--c2x) var(--c2y), rgb(var(--cb) / 0.22), transparent 74%);
    /* every card runs its own clock, so the three never move in step */
    animation: c1x calc(16s * var(--k, 1)) ease-in-out var(--d1, 0s) infinite alternate, c1y calc(21s * var(--k, 1)) ease-in-out var(--d2, 0s) infinite alternate, c2x calc(18s * var(--k, 1)) ease-in-out var(--d3, 0s) infinite alternate, c2y calc(24s * var(--k, 1)) ease-in-out var(--d1, 0s) infinite alternate, c3x calc(15s * var(--k, 1)) ease-in-out var(--d2, 0s) infinite alternate, c3y calc(13s * var(--k, 1)) ease-in-out var(--d3, 0s) infinite alternate; }
.course:nth-child(1) .card-fx { --k: 1; --d1: -2s; --d2: -7s; --d3: -4s; }
.course:nth-child(2) .card-fx { --k: 1.23; --d1: -9s; --d2: -1s; --d3: -11s; }
.course:nth-child(3) .card-fx { --k: 0.86; --d1: -5s; --d2: -12s; --d3: -2s; }
.card-fx::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(120% 60% at 50% 120%, rgb(var(--cb) / 0.12), transparent 60%); }
@media (hover: hover) {
    .glow-card:hover { transform: translateY(-5px) scale(1.012); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9); }
    /* courses: the card lifts and comes towards you, its own colours glow faintly inside it,
       and the name fades into the Book button's colours */
    .course.glow-card { transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.7s ease, box-shadow 0.9s ease; }
    .course.glow-card:hover { transform: translateY(-26px) scale(1.075); z-index: 2; border-color: rgb(var(--ca) / 0.28);
        box-shadow: 0 40px 90px -45px rgb(var(--cb) / 0.4), 0 30px 70px -30px rgba(0, 0, 0, 0.9); }
    .course .card-fx { display: block; opacity: 0; transition: opacity 0.9s ease; }
    .course:hover .card-fx { opacity: 0.5; }
    .course:hover .course-name > span::after { opacity: 1; }
}
.course-name > span { position: relative; display: inline-block; transition: color 0.8s ease, letter-spacing 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
@media (hover: hover) { .course-name > span { white-space: nowrap; } .course:hover .course-name > span { color: transparent; letter-spacing: 0.008em; } }   /* the white fades out under the colours; the letters open up a hair, and the name never wraps mid-hover */
.course-name > span::after { content: attr(data-t); position: absolute; inset: 0; color: transparent; pointer-events: none; opacity: 0; transition: opacity 0.8s ease;
    background-image: linear-gradient(110deg, rgb(var(--ca)), rgb(var(--cb)), rgb(var(--ca)), rgb(var(--cb))); background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text; animation: nameFlow 2.6s ease-in-out infinite alternate; filter: drop-shadow(0 0 14px rgb(var(--cb) / 0.4)); }
@keyframes nameFlow { from { background-position: 0% 0; } to { background-position: 100% 0; } }


/* The cards are black & white; only the price tag and the Book button carry each course's colours */
.course-tag { color: #9ca3af; }
.course-plus { color: rgba(255, 255, 255, 0.35); }
.course-promo { color: rgb(var(--ca)); border-color: rgb(var(--ca) / 0.35); }
.course-book { flex-shrink: 0; position: relative; color: #0b0909; background: linear-gradient(110deg, rgb(var(--ca)), rgb(var(--cb)), rgb(var(--ca))); background-size: 220% 100%; background-position: 0 0; transition: background-position 0.8s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease; }
.course-book:hover { background-position: 100% 0; box-shadow: 0 10px 30px -10px rgb(var(--cb) / 0.7); }
@media (prefers-reduced-motion: reduce) { .card-fx { animation: none; } }

/* ---------- How it works: three illustrated steps that draw themselves in ---------- */
.how-step { position: relative; padding: 1.25rem 1.5rem 1.75rem; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, 0.07); background: linear-gradient(180deg, rgb(var(--ha) / 0.05), rgba(255, 255, 255, 0) 60%);
    opacity: 0; transform: translateY(90px); transition: opacity 1s ease, transform 1.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease; transition-delay: calc(var(--i) * 200ms); }
.how-list.is-in .how-step { opacity: 1; transform: none; }
.how-step::after { content: ''; position: absolute; left: 1.5rem; right: 1.5rem; bottom: 0; height: 2px; background: rgba(255, 255, 255, 0.16); transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i) * 160ms + 500ms); }
.how-list.is-in .how-step::after { transform: scaleX(1); }
.how-art-wrap { max-width: 17.5rem; margin: 0 auto 1.5rem; }
.how-num { font-size: 1.9rem; line-height: 1; font-weight: 900; color: transparent; -webkit-text-stroke: 1.5px rgb(var(--ha)); transition: color 0.4s ease; }
@media (hover: hover) { .how-step:hover { border-color: rgb(var(--ha) / 0.35); } .how-step:hover .how-num { color: rgb(var(--ha)); } }
@media (max-width: 767px) { .how-art-wrap { max-width: 240px; } }
@media (min-width: 768px) and (max-height: 860px) { .how-art-wrap { max-width: 13.125rem; } }

/* Drawing in: every outline traces itself, then the colour fills arrive */
.how-art .ha-l { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1); transition-delay: calc(var(--i) * 220ms + 300ms); }
.how-art .ha-skin, .how-art .ha-fa, .how-art .ha-fb, .how-art .ha-fa-soft, .how-art .ha-fb-soft, .how-art .ha-blob, .how-art .ha-blush, .how-art .ha-white, .how-art .ha-dot, .how-art .ha-star, .how-art .ha-fire, .how-art .ha-hot, .how-art .ha-fire-o, .how-art .ha-fire-i { transition: fill-opacity 0.8s ease, opacity 0.8s ease; transition-delay: calc(var(--i) * 220ms + 1100ms); }
.how-list:not(.is-in) .how-art * { fill-opacity: 0; }
.how-list:not(.is-in) .how-art .ha-band, .how-list:not(.is-in) .how-art .ha-hot, .how-list:not(.is-in) .how-art .ha-fire-o, .how-list:not(.is-in) .how-art .ha-fire-i { opacity: 0; }
.how-list.is-in .how-art .ha-l { stroke-dashoffset: 0; }
.how-art :is(.ha-note, .ha-note-3, .ha-head, .ha-face1, .ha-cup-l, .ha-cup-r, .ha-horns, .ha-face, .ha-hands, .ha-swirl, .ha-flame, .ha-shake, .ha-smoke, .ha-bulb) { transform-box: fill-box; transform-origin: center; }
/* ...and then they keep living */
.how-list.is-in .ha-note-1 { animation: haFloat 3.2s ease-in-out 2s infinite; }
.how-list.is-in .ha-note-2 { animation: haFloat 3.8s ease-in-out 2.6s infinite reverse; }
.how-list.is-in .ha-note-3 { animation: haFloat 4.4s ease-in-out 3.1s infinite; }
/* 01: head bang in bursts, horns pumping on the beat */
.how-list.is-in .ha-head { transform-origin: 50% 100%; animation: haRoutine 7.536s cubic-bezier(0.5, 0, 0.5, 1) 2s infinite; }
.how-list.is-in .ha-face1 { animation: haFaceTurn 7.536s cubic-bezier(0.5, 0, 0.5, 1) 2s infinite; }
.how-list.is-in .ha-cup-l { transform-origin: 50% 50%; animation: haCupL 7.536s cubic-bezier(0.5, 0, 0.5, 1) 2s infinite, haPulse 7.536s ease-out 2s infinite; }
.how-list.is-in .ha-cup-r { transform-origin: 50% 50%; animation: haCupR 7.536s cubic-bezier(0.5, 0, 0.5, 1) 2s infinite, haPulse 7.536s ease-out 2s infinite; }
/* the ponytail swings a beat behind the head */
.how-art .ha-pony { transform-box: view-box; transform-origin: 106px 41px; }
/* the headbang: the bouncy swing; the neck slide: only a gentle sway */
.how-list.is-in .ha-pony { animation: haPony 7.536s cubic-bezier(0.45, 0, 0.55, 1) 2.12s infinite; }
@keyframes haPony {
    0.00% { transform: rotate(-10deg); }
    6.37% { transform: rotate(16deg); }
    12.74% { transform: rotate(-10deg); }
    19.10% { transform: rotate(16deg); }
    25.48% { transform: rotate(-10deg); }
    31.85% { transform: rotate(16deg); }
    38.22% { transform: rotate(-10deg); }
    44.59% { transform: rotate(16deg); }
    49.05% { transform: rotate(3deg); }
    53.93% { transform: rotate(7deg); }
    60.30% { transform: rotate(-1deg); }
    66.67% { transform: rotate(7deg); }
    73.03% { transform: rotate(-1deg); }
    79.41% { transform: rotate(7deg); }
    85.78% { transform: rotate(-1deg); }
    92.15% { transform: rotate(7deg); }
    98.52% { transform: rotate(-6deg); }
    100.00% { transform: rotate(-10deg); }
}
@media (prefers-reduced-motion: reduce) { .how-list.is-in .ha-pony { animation: none; } }
/* the horns never stop pumping, on the beat of the headbang */
.how-list.is-in .ha-horns { transform-origin: 50% 100%; animation: haPumpLoop 0.96s cubic-bezier(0.5, 0, 0.5, 1) 2s infinite; }
@keyframes haPumpLoop { 0%, 50%, 100% { transform: translateY(-3px); } 25%, 75% { transform: translateY(6px) rotate(3deg); } }
/* a little set, no pauses: eight headbangs, then a funky bassline neck slide, again; the ear cups kick on every hit */
@keyframes haPulse {
    0%, 100% { scale: 1; }
    1.85% { scale: 1; }
    3.05% { scale: 1.14; }
    7.97% { scale: 1; }
    9.17% { scale: 1.14; }
    14.09% { scale: 1; }
    15.29% { scale: 1.14; }
    20.20% { scale: 1; }
    21.40% { scale: 1.14; }
    26.32% { scale: 1; }
    27.52% { scale: 1.14; }
    31.92% { scale: 1; }
    33.12% { scale: 1.14; }
    38.30% { scale: 1; }
    39.50% { scale: 1.14; }
    44.66% { scale: 1; }
    45.86% { scale: 1.14; }
    51.03% { scale: 1; }
    52.23% { scale: 1.14; }
    57.40% { scale: 1; }
    58.60% { scale: 1.14; }
    63.77% { scale: 1; }
    64.97% { scale: 1.14; }
    70.13% { scale: 1; }
    71.33% { scale: 1.14; }
    76.50% { scale: 1; }
    77.70% { scale: 1.14; }
    82.88% { scale: 1; }
    84.08% { scale: 1.14; }
    89.25% { scale: 1; }
    90.45% { scale: 1.14; }
    95.62% { scale: 1; }
    96.82% { scale: 1.14; }
}
@keyframes haRoutine {
    0.00% { transform: none; }
    3.05% { transform: rotate(9deg) translateY(5px); }
    6.12% { transform: rotate(-2deg); }
    9.17% { transform: rotate(9deg) translateY(5px); }
    12.23% { transform: rotate(-2deg); }
    15.29% { transform: rotate(9deg) translateY(5px); }
    18.35% { transform: rotate(-2deg); }
    21.40% { transform: rotate(9deg) translateY(5px); }
    24.45% { transform: rotate(-2deg); }
    27.52% { transform: rotate(9deg) translateY(5px); }
    30.57% { transform: rotate(-2deg); }
    33.12% { transform: rotate(9deg) translateY(5px); }
    36.30% { transform: rotate(-2deg); }
    39.50% { transform: rotate(9deg) translateY(5px); }
    42.68% { transform: rotate(-2deg); }
    45.86% { transform: rotate(9deg) translateY(5px); }
    49.05% { transform: rotate(-2deg); }
    52.23% { transform: translateX(-7px) translateY(1px) rotate(2deg); }
    58.60% { transform: translateX(7px) translateY(-1px) rotate(-2deg); }
    64.97% { transform: translateX(-7px) translateY(1px) rotate(2deg); }
    71.33% { transform: translateX(7px) translateY(-1px) rotate(-2deg); }
    77.70% { transform: translateX(-7px) translateY(1px) rotate(2deg); }
    84.08% { transform: translateX(7px) translateY(-1px) rotate(-2deg); }
    90.45% { transform: translateX(-7px) translateY(1px) rotate(2deg); }
    96.82% { transform: translateX(7px) translateY(-1px) rotate(-2deg); }
    100.00% { transform: none; }
}
@keyframes haFaceTurn {
    0.00% { transform: none; }
    30.57% { transform: none; }
    49.05% { transform: none; }
    52.23% { transform: translate(-2px, -1px); }
    58.60% { transform: translate(2px, -1px); }
    64.97% { transform: translate(-2px, -1px); }
    71.33% { transform: translate(2px, -1px); }
    77.70% { transform: translate(-2px, -1px); }
    84.08% { transform: translate(2px, -1px); }
    90.45% { transform: translate(-2px, -1px); }
    96.82% { transform: translate(2px, -1px); }
    100.00% { transform: none; }
}
@keyframes haCupL {
    0.00% { transform: none; }
    30.57% { transform: none; }
    100.00% { transform: none; }
}
@keyframes haCupR {
    0.00% { transform: none; }
    30.57% { transform: none; }
    100.00% { transform: none; }
}
/* 02: the bulb flickers on, the eyes dart around (script) */
.how-art .ha-glass { fill: rgb(var(--lit) / 0); transition: fill 0.3s ease; }
.how-art .ha-rays { opacity: 0; }
.how-list:not(.is-in) .how-art .ha-halo { opacity: 0; }
.how-list.is-in li:nth-child(2) .ha-glass { animation: haBulb 4.8s linear 2.2s infinite; }
.how-art .ha-halo { fill: rgb(var(--lit)); opacity: 0; filter: blur(7px); }
.how-list.is-in li:nth-child(2) .ha-halo { animation: haHalo 4.8s linear 2.2s infinite; }
/* the rays shoot out of the bulb as it catches, hold, then fly off as it dims */
.how-list.is-in li:nth-child(2) .ha-rays { opacity: 1; }
.how-list.is-in li:nth-child(2) .ha-rays path { animation: haRayDraw 4.8s cubic-bezier(0.3, 0, 0.2, 1) 2.2s infinite; }
@keyframes haHalo { 0%, 18% { opacity: 0; transform: scale(0.6); } 20% { opacity: 0.55; } 22% { opacity: 0.05; } 26% { opacity: 0.6; transform: scale(1.15); } 50% { opacity: 0.42; transform: scale(1); } 78% { opacity: 0.5; transform: scale(1.05); } 86%, 100% { opacity: 0; transform: scale(0.8); } }
@keyframes haRayDraw { 0%, 24% { stroke-dashoffset: 1; opacity: 0; } 25% { opacity: 1; } 31% { stroke-dashoffset: 0; } 78% { stroke-dashoffset: 0; opacity: 1; } 86%, 100% { stroke-dashoffset: -1; opacity: 0; } }
.how-art .ha-halo { transform-box: fill-box; transform-origin: center; }
.how-art .ha-pupils circle { transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.3, 1); }
.how-art .ha-eye { transform-box: fill-box; transform-origin: center; transition: transform 0.07s ease-in; }
.how-art.is-blink .ha-eye { transform: scaleY(0.08); }
.how-art .ha-brows { transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1); }
.how-art.is-aha .ha-brows { transform: translateY(-4px); }
.how-list.is-in li:nth-child(2) .ha-face { animation: haShriek 4.8s ease-in-out 2.2s infinite; }
.how-list.is-in li:nth-child(2) .ha-hands { animation: haShriek 4.8s ease-in-out 2.25s infinite; }
.how-list.is-in li:nth-child(2) .ha-swirl { animation: haSwirl 5s ease-in-out 2s infinite alternate; }
.how-list.is-in li:nth-child(2) .ha-star { transform-box: fill-box; transform-origin: center; animation: haTwinkle 1.8s ease-in-out 2s infinite; }
.how-list.is-in li:nth-child(2) .ha-star + .ha-star { animation-delay: 2.7s; }
/* 03: the whole hand burns */
.how-art .ha-fire-o { fill: #ff7a32; opacity: 0.85; }
.how-art .ha-fire-i { fill: #ffc76b; opacity: 0.9; }
.how-art .ha-fire-back path { transform-box: fill-box; transform-origin: 50% 100%; }
.how-art .ha-string { stroke: #f4ece0; stroke-width: 0.7; opacity: 0.7; }
.how-list.is-in .ha-fire-o { animation: haBurn 1.1s ease-in-out 2s infinite alternate; }
.how-list.is-in .ha-fire-i { animation: haBurn 0.8s ease-in-out 2.2s infinite alternate-reverse; }
.how-list.is-in .ha-smoke .ha-wisp { animation: haSmoke 2.6s ease-in infinite; animation-delay: 2.4s; }
.how-list.is-in .ha-smoke .ha-wisp-2 { animation-delay: 3.1s; }
.how-list.is-in .ha-smoke .ha-wisp-3 { animation-delay: 3.6s; }
/* the burning body smokes all the time: three wisps on different clocks, so they rise in ever-changing pairs and turns */
.how-list.is-in .ha-smoke .ha-wb1 { animation: haSmokeBody 2.9s ease-in 2.2s infinite; }
.how-list.is-in .ha-smoke .ha-wb2 { animation: haSmokeBody 3.7s ease-in 3.1s infinite; }
.how-list.is-in .ha-smoke .ha-wb3 { animation: haSmokeBody 4.3s ease-in 2.6s infinite; }
@keyframes haSmokeBody { 0% { transform: translateY(6px); opacity: 0; } 18% { opacity: 0.85; } 60%, 100% { transform: translateY(-18px); opacity: 0; } }
.how-list.is-in .ha-flame { transform-origin: 50% 100%; animation: haFlicker 0.9s ease-in-out 2.2s infinite alternate; }
.how-list.is-in .ha-flame-2 { animation-duration: 0.7s; }
.how-list.is-in .ha-flame-3 { animation-duration: 1.05s; }
.how-list.is-in .ha-fire-late { animation-delay: 2.5s; }
/* the guitar: picking hand strums, fretting hand runs up and down the neck with fingers tapping */
.how-list.is-in .ha-strum { animation: haStrum 0.42s ease-in-out 2s infinite alternate; }
.how-art .ha-teeth { stroke-width: 1.3; }
.how-art .ha-dust circle { fill: #d6cec2; opacity: 0; }
.how-list.is-in .ha-dust circle { animation: haDust 0.84s ease-out 2s infinite; }
.how-list.is-in .ha-dust circle:nth-child(2) { animation-delay: 2.2s; animation-duration: 0.9s; --dx: 7px; }
.how-list.is-in .ha-dust circle:nth-child(3) { animation-delay: 2.45s; animation-duration: 0.78s; --dx: -6px; }
.how-list.is-in .ha-dust circle:nth-child(4) { animation-delay: 2.6s; animation-duration: 1s; --dx: 3px; }
@keyframes haDust { 0% { opacity: 0; transform: none; } 15% { opacity: 0.9; } 100% { opacity: 0; transform: translate(var(--dx, -3px), 16px); } }
.how-list.is-in .ha-fret { animation: haSolo 3.4s cubic-bezier(0.6, 0, 0.3, 1) 2s infinite; }
.how-list.is-in .ha-tap { animation: haTap 0.36s ease-in-out 2s infinite alternate; }
.how-list.is-in .ha-tap-2 { animation-delay: 2.09s; } .how-list.is-in .ha-tap-3 { animation-delay: 2.18s; } .how-list.is-in .ha-tap-4 { animation-delay: 2.27s; }
@keyframes haStrum { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@keyframes haSolo { 0%, 100% { transform: translateX(0); } 22% { transform: translateX(-26px); } 38% { transform: translateX(-18px); } 55% { transform: translateX(-38px); } 78% { transform: translateX(-10px); } }
@keyframes haTap { from { transform: translateY(0); } to { transform: translateY(2.5px); } }
@keyframes haBang { 0%, 52%, 100% { transform: none; } 6%, 18%, 30%, 42% { transform: rotate(9deg) translateY(5px); } 12%, 24%, 36%, 48% { transform: rotate(-2deg); } }
@keyframes haPump { 0%, 52%, 100% { transform: none; } 6%, 18%, 30%, 42% { transform: translateY(6px) rotate(3deg); } 12%, 24%, 36%, 48% { transform: translateY(-3px); } }
@keyframes haBulb { 0%, 18% { fill: rgb(var(--lit) / 0); } 20% { fill: rgb(var(--lit) / 0.9); } 22% { fill: rgb(var(--lit) / 0.1); } 25%, 80% { fill: rgb(var(--lit)); } 86%, 100% { fill: rgb(var(--lit) / 0); } }
@keyframes haRays { 0%, 24% { opacity: 0; } 28%, 78% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes haBurn { from { transform: scale(0.97, 0.94) skewX(-2deg); } to { transform: scale(1.03, 1.06) skewX(2deg); } }
@keyframes haFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(6deg); } }
@keyframes haShriek { 0%, 22%, 40%, 100% { transform: none; } 25% { transform: translate(-1.5px, 0.5px) scaleY(1.03); } 29% { transform: translate(1.5px, -0.5px) scaleY(1.04); } 33% { transform: translate(-1px, 0) scaleY(1.02); } }
@keyframes haSwirl { from { transform: translateX(-5px); } to { transform: translateX(6px); } }
@keyframes haTwinkle { 0%, 100% { transform: scale(0.7) rotate(0); opacity: 0.6; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes haSmoke { 0% { transform: translateY(6px); opacity: 0; } 25% { opacity: 0.9; } 100% { transform: translateY(-16px); opacity: 0; } }
@keyframes haFlicker { from { transform: scale(0.9, 0.95) skewX(-3deg); } to { transform: scale(1.06, 1.12) skewX(4deg); } }
@keyframes haJitter { 0%, 80%, 100% { transform: none; } 82% { transform: translate(-1px, 0) rotate(-0.6deg); } 84% { transform: translate(1px, 0) rotate(0.6deg); } 86% { transform: translate(-1px, 0); } 88% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .how-step { opacity: 1; transform: none; } .how-step::after { transform: none; }
    .how-art .ha-l { stroke-dasharray: none; stroke-dashoffset: 0; } .how-list:not(.is-in) .how-art * { fill-opacity: 1; }
    .how-art * { animation: none !important; }
}

/* ---------- Floating gallery buttons: back · previous · next, in one frosted pill ---------- */
.jump-nav { position: fixed; right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 45; display: flex; align-items: center; height: 44px; padding: 0 4px; border-radius: 9999px;
    background: rgba(18, 18, 18, 0.55); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255, 255, 255, 0.13); box-shadow: 0 14px 40px -16px rgba(0, 0, 0, 0.8);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; }
.jump-btn { height: 36px; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.7rem; border-radius: 9999px; color: rgba(255, 255, 255, 0.85); font-size: 9px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease, opacity 0.3s ease; }
.jump-back { padding: 0 0.6rem; }
.jump-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.jump-btn:active { transform: scale(0.94); }
.jump-btn[disabled] { opacity: 0.28; pointer-events: none; }
.jump-label { display: inline-block; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; }
.jump-label.is-swap { animation: crumbIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.jump-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.14); }
@media (max-width: 400px) { .jump-label { max-width: 5.2rem; } .jump-btn { padding: 0 0.55rem; } }
/* Back is always there (top of the page included), so there's always a way out; Previous / Next tuck away while you read */
.jump-stepwrap { display: grid; grid-template-columns: 1fr; transition: grid-template-columns 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; }
.jump-stepin { display: flex; align-items: center; overflow: hidden; min-width: 0; }
.jump-stepin > * { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
body.nav-hidden .jump-nav:not(.is-engaged) .jump-stepwrap, .jump-nav.is-idle:not(.is-engaged) .jump-stepwrap { grid-template-columns: 0fr; opacity: 0; }
body.nav-hidden .jump-nav:not(.is-engaged) .jump-stepin > *, .jump-nav.is-idle:not(.is-engaged) .jump-stepin > * { transform: translateX(40px); }
/* at the bottom of a gallery the end links take over, so the floating pill steps aside */
.jump-nav { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; }
.jump-nav.is-at-end { transform: translateY(150%); opacity: 0; pointer-events: none; }
.jump-nav.is-off { display: none; }
.jump-nav.is-back-only .jump-steps { display: none; }
.jump-back { padding: 0 0.85rem 0 0.6rem; }

/* ---------- "Start a project" at the end of each section: a dark silhouette with light travelling round its outline ---------- */
@property --cta-a { syntax: '<angle>'; initial-value: 0deg; inherits: true; }
@keyframes ctaSpin { to { --cta-a: 360deg; } }
@keyframes ctaBreath { 0%, 100% { opacity: 0.3; } 37% { opacity: 0.48; } 41% { opacity: 0.34; } 44% { opacity: 0.5; } 70% { opacity: 0.38; } }
.cta-glow { --ring: conic-gradient(from var(--cta-a), rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.9) 7%, #ffc9a0 12%, rgba(255, 255, 255, 0.06) 22%, rgba(255, 255, 255, 0.06) 50%, #a9d8ff 57%, rgba(255, 255, 255, 0.85) 62%, rgba(255, 255, 255, 0.08) 72%);
    --fill: #070707;
    position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 0.7rem; padding: 0.95rem 1.7rem; border-radius: 9999px; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
    animation: ctaSpin 9s linear infinite;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.35s ease; }
/* crisp outline with the dark fill inside it */
.cta-glow::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; border: 1.5px solid transparent; background: linear-gradient(var(--fill), var(--fill)) padding-box, var(--ring) border-box; transition: background 0.35s ease; }
/* the same light, blurred, spilling outwards from behind */
.cta-glow::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; z-index: -2; pointer-events: none; background: var(--ring); filter: blur(8px); opacity: 0.34; animation: ctaBreath 4.3s ease-in-out infinite; transition: filter 0.4s ease, inset 0.4s ease; }
.cta-glow-label { text-shadow: 0 0 8px rgba(255, 255, 255, 0.25); }
.cta-glow:hover { transform: scale(1.06); animation-duration: 6.5s; color: #050505; --fill: #fff; }
.cta-glow:hover::after { inset: -5px; filter: blur(14px); opacity: 0.85; animation: none; }
.cta-glow:hover .cta-glow-label { text-shadow: none; }
.cta-glow:hover .btn-arrow { transform: translateX(4px); }
.cta-glow:active { transform: scale(0.98); transition-duration: 0.15s; }
@media (prefers-reduced-motion: reduce) { .cta-glow, .cta-glow::after { animation: none; } }

/* ---------- Ghost buttons ---------- */
.btn-ghost { transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-ghost:hover { transform: translateY(-2px); }

/* Unhinged key art at the top of its project */
.project-hero { aspect-ratio: 1232 / 706; object-fit: cover; }

/* Index screens are exactly one window tall (measured by script), so the next or previous colour never peeks in */
.ix-landing { height: var(--ixh, 100dvh) !important; }
/* Phones: the browser's toolbar floats over the page (Safari, Edge), so whatever comes after the current screen
   shows through it. Each screen reaches a little further down, under the toolbar, in its own colour; a transparent
   cushion of the same size keeps its content centred in the part you can see. */
:root { --bleed: 0px; }
@media (pointer: coarse) { :root { --bleed: 150px; } }
.ix { min-height: calc(var(--ixh, 100svh) + var(--bleed)); border-bottom: var(--bleed) solid transparent; }
.ix-landing { height: calc(var(--ixh, 100dvh) + var(--bleed)) !important; }
/* (screens clip with overflow: clip, which doesn't turn them into scroll areas of their own:
   inside one of those, the marker would be invisible to the page's snapping) */
@supports (overflow: clip) { .ix.ix { overflow: clip; } }
@supports not (overflow: clip) { .ix.ix { scroll-snap-align: start; scroll-snap-stop: always; } .ix > .ix-snap.ix-snap { scroll-snap-align: none; } }
/* ...so each screen snaps on an invisible marker exactly one window tall at its top (a taller screen would give
   the browser more than one place to come to rest) */
.ix.ix { scroll-snap-align: none; scroll-snap-stop: normal; }
.ix > .ix-snap.ix-snap { position: absolute; z-index: auto; margin: 0; top: 0; left: 0; width: 1px; height: var(--ixh, 100svh); scroll-snap-align: start; scroll-snap-stop: always; pointer-events: none; }   /* empty and 1px wide, so nothing shows (a hidden one would be ignored by snapping) */


/* Request form: the service list in the same dark glass style */
#quote-form select { color-scheme: dark; -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; background-size: 1rem; }
#quote-form select option { background: #141414; color: #f3f4f6; }
#quote-form select:invalid { color: #9ca3af; }

/* ---------- Title touches: GIZMOSIS letters flicker; DROP D runs through a distortion pedal (script) ---------- */
.tl { display: inline-block; will-change: transform; }
[data-flicker] .tl.fx-a { animation: flickA 0.38s steps(1) both; }
[data-flicker] .tl.fx-b { animation: flickB 0.34s steps(1) both; }
[data-flicker] .tl.fx-c { animation: flickC 0.42s steps(1) both; }
[data-flicker] .tl.fx-d { animation: flickD 0.3s steps(1) both; }
/* a: colour split and skew */
@keyframes flickA { 0% { transform: translate(0.03em, 0) skewX(-8deg); text-shadow: 0.04em 0 #ff2d55, -0.04em 0 #00c2ff; } 30% { transform: translate(-0.035em, 0.01em); text-shadow: -0.05em 0 #ff2d55, 0.05em 0 #00c2ff; } 60% { transform: translate(-0.015em, 0); text-shadow: 0.02em 0 #ff2d55, -0.02em 0 #00c2ff; } 100% { transform: none; text-shadow: none; } }
/* b: jolts sideways with a ghost trail */
@keyframes flickB { 0% { transform: translateX(-0.06em); text-shadow: 0.08em 0 rgba(0,0,0,0.35); } 25% { transform: translateX(0.05em) scaleY(1.04); text-shadow: -0.07em 0 rgba(0,0,0,0.3); } 50% { transform: translateX(-0.02em); text-shadow: none; } 100% { transform: none; } }
/* c: sliced, the top and bottom halves slip apart */
@keyframes flickC { 0% { clip-path: polygon(0 0, 100% 0, 100% 52%, 0 52%); transform: translateX(0.05em); text-shadow: -0.05em 0.02em #00c2ff; } 30% { clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0 100%); transform: translateX(-0.05em); text-shadow: 0.05em 0 #ff2d55; } 55% { clip-path: none; transform: translateX(0.015em); text-shadow: none; } 100% { transform: none; clip-path: none; } }
/* d (now and then): drops out for a frame, like a lost signal */
@keyframes flickD { 0% { opacity: 0.15; transform: scaleX(1.12); } 35% { opacity: 1; transform: translateX(0.03em); text-shadow: 0.03em 0 #ff2d55, -0.03em 0 #00c2ff; } 100% { opacity: 1; transform: none; text-shadow: none; } }
@media (prefers-reduced-motion: reduce) { [data-flicker] .tl { animation: none !important; } }

/* Guitar page: the red runs right up behind the top bar and sub-menu, so the black fade always lands on red */
body.lessons-page #app-root { background: linear-gradient(#a3141a, #a3141a) 0 0 / 100% calc(100vh + 400px) no-repeat, #0b0909; }   /* red under everything the black rises over */
/* Lessons: the red stays put (the wall screen before it is red too); only the content animates in, and the Drop D menu slides down from under the top bar */
.page-view.lessons, .page-view.giz { animation: none; }
.rise { animation: rise 1s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--d, 0s); }
@keyframes rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }
.lessons-subnav { animation: subnavIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
@keyframes subnavIn { from { translate: 0 -105%; } to { translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .lessons-subnav { animation: none; } }
/* FAQ question flashes when a link sends you to it */
.faq { position: relative; }
.faq.is-flash::before { content: ''; position: absolute; inset: 0 -0.75rem; border-radius: 0.75rem; pointer-events: none; animation: faqFlash 1.8s ease-out forwards; }   /* on a layer of its own, so it never cancels the fade-in */
@keyframes faqFlash { 0%, 30% { background: rgba(255, 77, 77, 0.16); box-shadow: 0 0 0 1px rgba(255, 77, 77, 0.5), 0 0 40px rgba(255, 77, 77, 0.25); } 100% { background: transparent; box-shadow: 0 0 0 1px rgba(255, 77, 77, 0); } }
.price-was { font-size: 0.95rem; font-weight: 600; color: #6b7280; text-decoration: line-through; text-decoration-thickness: 1.5px; margin-left: 0.45rem; letter-spacing: 0; }

/* Guitar page title: sized to its column (not the window), so it scales smoothly while the side panel slides
   instead of re-wrapping with a jump. Each line stays on one line. */
.hero-box { container-type: inline-size; }
.lh-title { font-size: clamp(2.1rem, 9.6cqi, 5.6rem); }
.lh-title .lh-line { white-space: nowrap; }
/* FAQ: a quiet hover */
.faq summary { transition: color 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.faq summary > span { transition: transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1); }
@media (hover: hover) {
    .faq:hover summary { color: #fff; transform: translateX(4px); }
    .faq:not([open]):hover summary > span { transform: rotate(90deg); }
}
/* End-of-gallery links: the arrow nudges and the link leans in a touch */
.end-link { transition: color 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1); }
.end-link svg { transition: transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1); }
.end-link:hover { transform: scale(1.06); }
.end-link:first-child:hover svg { transform: translateX(-4px); }
.end-link:last-child svg { width: 0.85rem; height: 0.85rem; margin-left: -0.15em; }
.end-link:last-child:hover svg { transform: translateY(-2px); }

/* ---------- Contact block ---------- */
.contact-title { line-height: 0.9; }
.contact-pill { display: inline-flex; align-items: center; gap: 0.7rem; height: 3.25rem; padding: 0 1.75rem; border-radius: 9999px; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.copy-pill { text-transform: none; letter-spacing: normal; padding: 0 1.4rem 0 1.6rem; }
.contact-link { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #9ca3af; transition: color 0.3s ease; }
.contact-link:hover { color: #fff; }
.how-art .ha-blade { fill: #5b5754; }
.how-art .ha-handle { fill: #8a8178; }
.how-art .ha-hole { fill: #1d1a19; }

/* Mailing list: topic chips */
.u-chip { position: relative; cursor: pointer; }
.u-chip input { position: absolute; opacity: 0; pointer-events: none; }
.u-chip span { display: inline-flex; align-items: center; height: 2.1rem; padding: 0 0.95rem; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.18); font-size: 12px; color: #9ca3af; transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease; }
.u-chip input:checked + span { color: #fff; border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); }
.u-chip input:focus-visible + span { outline: 1px solid #fff; outline-offset: 2px; }

/* ---------- Portfolio wall: snow, a black-and-white letterbox of the work, a title that stirs the storm ---------- */
.ix-portfolio { position: relative; }
.ix-portfolio > :not(.snow) { position: relative; z-index: 1; }
.snow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0 !important; opacity: 0; transition: opacity 1.6s ease; }
.snow.is-on { opacity: 1; }
.ix-portfolio > .snow.is-front { z-index: 3 !important; }
.pf-strip { position: relative; display: block; aspect-ratio: 5.11; overflow: hidden; background: #111; }
/* phones: the strip sits above the title, exactly as wide as the word */
@media (max-width: 1023px) {
    .pf-head { display: inline-flex !important; flex-direction: column-reverse; align-items: stretch !important; gap: 0.7rem !important; width: max-content; max-width: 100%; }
    .pf-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1) contrast(1.08); transition: opacity 1.6s ease; }
    .pf-strip img.is-on { opacity: 1; animation: pfZoom 11s linear both; }
}
@media (min-width: 1024px) {
    .pf-strip { flex: 1; max-width: 47.5rem; }
    .pf-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1) contrast(1.08);
        transition: opacity 1.8s ease, filter 1.2s ease; }
    .pf-strip img.is-on { opacity: 1; animation: pfZoom 11s linear both; }
    .pf-strip:hover img { filter: grayscale(0) contrast(1); }
}
/* not enough room beside the title (side panel open, narrow or zoomed window): the strip moves above it,
   exactly as wide as the word, like on phones, instead of shrinking to a sliver */
.ix-portfolio { container-type: inline-size; }
@container (max-width: 820px) {   /* (the section's inner width: title ~440 + gap + a strip under ~300px) */
    .pf-head { display: inline-flex !important; flex-direction: column-reverse; align-items: stretch !important; gap: 0.7rem !important; width: max-content; max-width: 100%; }
    .pf-strip { flex: none; max-width: none; }
}
/* the title: a strip of old film when the storm is up */
.pf-title { cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pf-title > a { display: block; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .pf-strip img { transition: opacity 1s ease; transform: none !important; } }

/* ---------- Web & UI Design: a light page, so the (mostly dark) sites stand out ---------- */
body.web-light #app-root { color: #0b0b0b; }
body.web-light #app-root :is(.text-gray-300, .text-gray-400) { color: #4b4b4b; }
body.web-light #app-root :is(.text-gray-500, .text-gray-600) { color: #8a8a8a; }
body.web-light #app-root :is(.border-gray-800, .border-gray-900) { border-color: rgba(0, 0, 0, 0.1); }
body.web-light #app-root .end-link { color: #555; }
body.web-light #app-root .end-link:hover { color: #000; }
body.web-light #app-root .hover\:text-white:hover { color: #000; }
body.web-light .web-meta dt { letter-spacing: 0.2em; text-transform: uppercase; color: #9a9a9a; font-size: 10px; padding-top: 1px; }
body.web-light .web-meta dd { color: #333; }
/* screens fade into each other */
.web-slide, .web-mslide { opacity: 0; pointer-events: none; transition: opacity 0.9s ease; }   /* hidden screens let clicks through to the one showing */
.web-slide.is-on, .web-mslide.is-on { opacity: 1; pointer-events: auto; }
.web-dot { width: 22px; height: 2px; background: rgba(0, 0, 0, 0.18); transition: background 0.4s ease, width 0.4s ease; }
.web-dot.is-on { background: #000; width: 34px; }
.web-dot::before { content: ''; display: block; height: 14px; margin-top: -6px; }
/* close buttons on the pop-ups: always visible */
.modal-x { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9999px; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); transition: background 0.25s ease, color 0.25s ease; }
.modal-x:hover { background: rgba(255, 255, 255, 0.18); color: #fff; }
.modal-x svg { width: 20px; height: 20px; }
/* All Work: a short heading for each project, in both views */
.aw-group { padding-top: 2.5rem; margin-bottom: -1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.aw-list > .aw-group:first-child, .aw-list > .aw-cat:first-child > .aw-group { border-top: 0; padding-top: 0.5rem; }
.aw-group-sec { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #6b7280; margin-bottom: 0.5rem; }
.aw-group h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 300; letter-spacing: 0.14em; text-transform: uppercase; }
.aw-group h2 a:hover { color: #d1d5db; }
/* the project's full write-up: text on the left, client / role / tools beside it on wide screens */
.aw-group-body { margin-top: 1.1rem; display: grid; gap: 1.25rem; }
@media (min-width: 1024px) { .aw-group-body { grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; align-items: start; } }
.aw-group-text { color: #9ca3af; font-weight: 300; font-size: 0.95rem; line-height: 1.7; }
.aw-group-text > p + p { margin-top: 0.75rem; }
.aw-group-link { color: #e5e7eb; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, 0.25); transition: text-decoration-color 0.3s ease; }
.aw-group-link:hover { text-decoration-color: #fff; }
.aw-group-meta { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.25rem; font-size: 12px; line-height: 1.6; }
.aw-group-meta dt { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #6b7280; padding-top: 2px; }
.aw-group-meta dd { color: #d1d5db; font-weight: 300; }
/* headings over, and notes under, single pictures (as on the project pages) */
.aw-head { font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #9ca3af; margin-bottom: 0.75rem; }
.aw-note { margin-top: 0.6rem; color: #9ca3af; font-weight: 300; font-size: 0.9rem; line-height: 1.65; max-width: 46rem; }
/* the grid is for scanning: just the project names there, the write-ups stay in the one-at-a-time view */
.aw[data-view="grid"] :is(.aw-group-meta, .aw-head, .aw-note) { display: none; }
.aw[data-view="grid"] .aw-group-body { display: block; margin-top: 0.6rem; }
.aw[data-view="grid"] .aw-group-text { font-size: 0.875rem; line-height: 1.65; }
/* Web & UI: the sites as on their own page in the one-at-a-time view, four tiles together in the grid */
.aw[data-view="wall"] .aw-grid-only, .aw[data-view="grid"] .aw-wall-only { display: none; }
.aw-web { display: flex; flex-direction: column; gap: 6rem; padding: 1.5rem 0 1rem; }
@media (min-width: 1024px) { .aw-web { gap: 8rem; } }
.aw-ui { padding-top: 1rem; }
.aw .web-meta dt { letter-spacing: 0.2em; text-transform: uppercase; color: #6b7280; font-size: 10px; padding-top: 1px; }
.aw .web-meta dd { color: #d1d5db; font-weight: 300; }
.aw .web-visit { background: #fff; color: #0b0b0b; }
.aw .web-visit.aw-full { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.aw .web-visit.aw-full:hover { color: #0b0b0b; box-shadow: inset 0 0 0 1px transparent; }
.aw .aw-site .border-black\/15 { border-color: rgba(255, 255, 255, 0.18); }
.aw .web-dot { background: rgba(255, 255, 255, 0.22); }
.aw .web-dot.is-on { background: #fff; }
/* All Work, by discipline: each opens with its intro; one at a time, its projects follow in full */
.aw-cat, .aw-cat-body, .aw-proj-wrap { display: flex; flex-direction: column; gap: 3rem; }
.aw-cat > .aw-group { margin-bottom: -1rem; }
.aw-proj-wrap + .aw-proj-wrap { border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 3.5rem; }
.aw-proj h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); font-weight: 300; letter-spacing: 0.16em; text-transform: uppercase; }
.aw-proj h3 a:hover { color: #d1d5db; }
.aw-proj .aw-group-sec { margin-bottom: 0.4rem; }
/* the grid: the intro, then a card per project */
.aw[data-view="grid"] .aw-list { display: flex; flex-direction: column; gap: 3.5rem; max-width: none; }
.aw[data-view="grid"] .aw-cat { gap: 1.75rem; }
.aw[data-view="grid"] .aw-cat > .aw-group { margin: 0; }
.aw[data-view="grid"] .aw-list > .aw-cat:not(:first-child) > .aw-group { padding-top: 2.5rem; }
.aw-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 768px) { .aw-cards { gap: 1.25rem; } }
@media (min-width: 1024px) { .aw-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.aw-card-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.group:hover .aw-card-thumb video { transform: scale(1.04); }
.aw-card-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* websites, the game UI and videos: wide cards, the picture filling them (sites show their top) */
.aw-card-thumb.is-web img { object-position: top center; }

/* Small text links get a touch bolder on hover (drawn with a soft text shadow, so nothing shifts) */
.hover-bold, .footer-link { transition: color 0.3s ease, text-shadow 0.3s ease; }
.end-link { transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.5, 0.64, 1); }
.hover-bold:hover, .end-link:hover, .footer-link:hover { text-shadow: 0 0 0.6px currentColor, 0 0 0.6px currentColor; }
/* "Visit live site": black at rest; on hover it lights up in that site's own two colours */
.web-visit { position: relative; isolation: isolate; transition: color 0.35s ease, box-shadow 0.45s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.web-visit::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(110deg, rgb(var(--g1)), rgb(var(--g2)), rgb(var(--g1))); background-size: 220% 100%; opacity: 0; transition: opacity 0.4s ease, background-position 0.9s ease; }
.web-visit:hover { color: #0b0b0b; transform: translateY(-2px); box-shadow: 0 12px 34px -12px rgb(var(--g1) / 0.75), 0 8px 26px -14px rgb(var(--g2) / 0.8); }
.web-visit:hover::before { opacity: 1; background-position: 100% 0; }

.aw-item figcaption .aw-live { color: #d1d5db; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.25); }
.aw-item figcaption .aw-live:hover { color: #fff; text-decoration-color: #fff; }

.pf-strip img.is-off { animation: pfZoom 11s linear both; animation-play-state: paused; }
@keyframes pfZoom { from { transform: scale(1.01); } to { transform: scale(1.1); } }   /* the strip creeps in, very slowly */
/* the divider in the floating buttons keeps clear of a pressed button's highlight */
.jump-sep { margin: 0 5px; }
/* phones: a little "Copied!" next to the tick */
.copy-msg { display: none; }
@media (hover: none) { .copy-msg { display: inline; margin-left: 0.5rem; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: #4ade80; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.35s ease, opacity 0.3s ease; }
    .copy-msg.is-on { max-width: 6rem; opacity: 1; } }

/* on the white Web & UI Design page the hovered button settles on a warm off-white instead of pure white */
body.web-light .cta-glow:hover { --fill: #efece6; }

/* ---------- Into Drop D / Gizmosis: the title flies you in (under the top bar and the side panel) ---------- */
.ix-title-link { color: inherit; -webkit-tap-highlight-color: transparent; }
.intro-fly { position: fixed; z-index: 45; margin: 0; white-space: nowrap; pointer-events: none; will-change: transform, opacity; }
.intro-fly .fl { display: inline-block; will-change: transform; }
.intro-fly .fl-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
/* the rush of air: the screen's edges darken for a moment around the point we dive into */
.intro-tunnel { position: fixed; inset: -80%; z-index: 74; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at var(--ox) var(--oy), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.32) 66%, rgba(0, 0, 0, 0.58) 100%);
    transform-origin: var(--ox) var(--oy); }
/* the wall's line and button step back as the word lifts off */
.ix-intro-out .ix-r { opacity: 0 !important; transform: translateY(18px) !important; filter: blur(6px);
    transition: opacity 0.28s ease, transform 0.5s cubic-bezier(0.5, 0, 0.75, 0), filter 0.4s ease !important; transition-delay: 0s !important; }
/* the next page waits behind the word, then comes in (a little sooner than usual, so it meets the word) */
html.intro-hold :is(.lh-line > span, .lh-in, .after-hero, .rise, .lessons-subnav) { animation-play-state: paused !important; }
html.intro-quick :is(.lh-line > span, .lh-in, .rise) { animation-delay: calc(var(--d, 0s) * 0.3) !important; }

/* ---------- The name on the landing: its worlds ---------- */
.hero-egg { cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; outline: none; }
.hero-egg:focus-visible { outline: 1px dashed rgba(255, 255, 255, 0.35); outline-offset: 10px; }
.egg-tear { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 90; pointer-events: none; image-rendering: pixelated; mix-blend-mode: normal; }
body.egg-snap #app-root, body.egg-snap .ix-landing *, body.egg-snap .ix-landing *::before, body.egg-snap .ix-landing *::after { transition: none !important; }   /* a channel change lands at once, About included */
html { background-color: #050505; }   /* what shows if the picture jumps or rolls */

/* colours per world (only while the landing is on screen); the values come from the script */
body.egg-bg[data-ix-now="home"] #app-root { background-color: var(--egg-bg) !important; background-image: none !important; }
body.egg-vhs[data-ix-now="home"] #app-root { background-color: #000 !important; background-image: none !important; }
body.egg-grid[data-ix-now="home"] .gravity-point { color: var(--egg-grid) !important; }
body.egg-grid[data-ix-now="home"] .gravity-point path { stroke-width: 1.5; }   /* a touch heavier on colour, so the grid reads as well as on black */
body:is(.egg-vhs, .egg-film)[data-ix-now="home"] #gravity-grid-container { opacity: 0 !important; }
body.egg-vhs { --egg-ink: 232 237 255; }
body:is(.egg-ink, .egg-vhs) .ix-landing :is(.text-white, .group:hover .group-hover\:text-white) { color: rgb(var(--egg-ink)) !important; }
body:is(.egg-ink, .egg-vhs) .ix-landing :is(.text-gray-500, .text-gray-400) { color: rgb(var(--egg-ink) / 0.62) !important; }
body:is(.egg-ink, .egg-vhs) .ix-landing .border-white\/50 { border-color: rgb(var(--egg-ink) / 0.55) !important; }
body:is(.egg-ink, .egg-vhs) .ix-landing :is(.bg-white\/20, .bg-white\/35) { background-color: rgb(var(--egg-ink) / 0.3) !important; }
body:is(.egg-ink, .egg-vhs) .ix-landing :is(.bg-white, .corner-dots span) { background-color: rgb(var(--egg-ink)) !important; }
body.egg-ink .ix-landing nav a { font-weight: 400; }
body.egg-ink .hero-egg:focus-visible { outline-color: rgb(var(--egg-ink) / 0.35); }
/* grain for the fizzy worlds */
.egg-grain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 34; pointer-events: none; mix-blend-mode: overlay; }

/* the film behind the name */
.egg-film { position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; overflow: hidden; }
.egg-film.is-on { opacity: 1; }
.egg-film video, .egg-film canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.egg-film video { opacity: 0.6; }
.egg-film.is-static canvas { opacity: 0.32; image-rendering: pixelated; filter: contrast(1.3); }
.egg-film::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.7) 100%); }

/* VHS: an old tape on a CRT. The picture itself is bent, softened and split by the egg-vhs filter;
   these layers are the screen: snow, scanlines, the phosphor mask, a hum bar rolling through,
   a vignette, the tracking noise and the on-screen display. */
body.egg-vhs .ix-landing { background: radial-gradient(ellipse at 50% 46%, #3152ff 0%, #1d38d6 48%, #1228a8 78%, #0a1670 100%); }
body.egg-vhs .ix-landing, body.egg-vhs .ix-landing * { font-family: 'VT323', ui-monospace, monospace !important; }
body.egg-vhs .ix-landing :is(p, a, span, h1) { text-shadow: -0.06em 0 0 rgba(255, 50, 70, 0.5), 0.07em 0 0 rgba(60, 150, 255, 0.5), 0 0 0.14em rgba(200, 212, 255, 0.6), 0 0 0.35em rgba(170, 190, 255, 0.25), 0 0 0.02em rgba(255, 255, 255, 0.9); }   /* the tape's colour fringes and bloom, drawn by the text itself */
body.egg-vhs #hero-title { font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; line-height: 0.82; }
body.egg-vhs #hero-title > span { font-size: 1.12em; }
body.egg-vhs .ix-landing nav ul { letter-spacing: 0.22em; font-size: 1.15em; }
body.egg-vhs .ix-landing .corner-dots { opacity: 0; }
.vhs-fx { position: absolute; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; }
.vhs-fx > * { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vhs-snow { opacity: 0.09; image-rendering: auto; }   /* plain transparency, no blend mode: a blend would re-run the VHS filter underneath on every frame */
.vhs-lines { background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 10, 0.26) 2px, rgba(0, 0, 10, 0.26) 3px); }
.vhs-mask { background: repeating-linear-gradient(90deg, rgba(255, 40, 40, 0.07) 0 1px, rgba(40, 255, 90, 0.05) 1px 2px, rgba(60, 90, 255, 0.07) 2px 3px); opacity: 0.6; }
.vhs-hum { height: 34%; inset: auto 0 auto 0; top: -40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(210, 225, 255, 0.07) 45%, rgba(255, 255, 255, 0.1) 52%, rgba(255, 255, 255, 0) 100%); animation: vhsHum 8.5s linear infinite; }
@keyframes vhsHum { from { transform: translateY(0); } to { transform: translateY(420%); } }
.vhs-vig { background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 20, 0.45) 88%, rgba(0, 0, 0, 0.8) 100%); }
.vhs-track { opacity: 0.8; }
.vhs-osd { inset: auto; width: auto; height: auto; color: #f2f5ff; font-size: clamp(22px, 2.6vw, 38px); letter-spacing: 0.06em; text-shadow: 0.06em 0.06em 0 rgba(0, 0, 0, 0.55), 0 0 0.15em rgba(220, 230, 255, 0.7); }
.vhs-play { top: 10%; right: calc(9% + 2.4rem); animation: osdBlink 1.4s steps(1) infinite; }
@keyframes osdBlink { 0%, 72% { visibility: visible; } 73%, 100% { visibility: hidden; } }   /* visibility, not opacity: no extra layer inside the filter */
.vhs-time { bottom: 11%; right: 9%; }
.vhs-time b { font-weight: 400; }
.vhs-msg { top: 10%; left: 50%; transform: translateX(-50%); }
@media (max-width: 767px) { .vhs-play { top: 11%; right: 9%; } .vhs-msg { top: 18%; } .vhs-time { bottom: 6.5%; right: 9%; } }
@media (prefers-reduced-motion: reduce) { .vhs-hum, .vhs-play { animation: none; } }

.vhs-fx.is-outside { inset: auto; z-index: 31; }
body.egg-webkit .ix-landing .scroll-line-anim { animation: none; }

/* landing corners: Scroll and Toronto firm up on hover; a small pin appears beside Toronto */
.scroll-label { transition: color 0.3s ease, text-shadow 0.3s ease; }
/* the reveal's delay (set inline) must not hold up the hover */
.toronto-tag { transition-property: transform, color, text-shadow !important; transition-duration: 1.2s, 0.25s, 0.25s !important; transition-delay: 1s, 0s, 0s !important; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1), ease, ease !important; }
#home-scroll-btn:hover .scroll-label, .toronto-tag:hover { text-shadow: 0 0 0.6px currentColor, 0 0 0.6px currentColor; }
.scroll-rail { transition: width 0.3s ease, background-color 0.3s ease; }
#home-scroll-btn:hover .scroll-rail { width: 2px; }
.toronto-tag { display: inline-flex; align-items: center; cursor: default; }
.toronto-tag:hover { color: #fff; }
.toronto-tag .pin { display: inline-flex; width: 0; height: 12px; margin-right: 0; opacity: 0; overflow: hidden; transform: translateY(3px);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), margin 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.toronto-tag .pin svg { width: 9px; height: 12px; flex-shrink: 0; }
.toronto-tag:hover .pin { width: 9px; margin-right: 7px; opacity: 1; transform: none; }
body.egg-ink .toronto-tag:hover { color: rgb(var(--egg-ink)) !important; }
.intro-rings { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 45; pointer-events: none; }
.jump-nextwrap { display: flex; align-items: center; } .jump-nextwrap[hidden] { display: none; }
/* mirror world: every piece of text flipped where it stands, the layout untouched */
body.egg-mirror .ix-landing :is(#hero-title .glitch-text, nav a, .toronto-tag, .scroll-label, .tracking-\[0\.3em\]) { scale: -1 1; }
body.egg-mirror .ix-landing .scroll-label { display: inline-block; }
/* the noisy world: the lens splits every edge into red and cyan */
body.egg-ca .ix-landing :is(h1, nav a, p, .scroll-label) { text-shadow: -1.6px 0 rgba(255, 40, 70, 0.6), 1.6px 0 rgba(0, 220, 255, 0.55); }
body.egg-ca .ix-landing :is(.border-white\/50, .scroll-rail) { box-shadow: -1.5px 0 rgba(255, 40, 70, 0.45), 1.5px 0 rgba(0, 220, 255, 0.4); }
.course .card-fx { opacity: 0; }   /* the glow only comes with a hover */

/* the screensaver: the layout is gone, only the name in an oval drifts around the old screen */
body.egg-dvd .ix-landing > :not(.vhs-fx):not(.egg-dvd):not(.egg-grain):not(.egg-win) { visibility: hidden; }
.egg-dvd { position: absolute; left: 0; top: 0; z-index: 36; pointer-events: auto; cursor: crosshair; will-change: transform; --dvd: #ffffff;
    padding: 0.16em 0.62em 0.2em; border-radius: 50%; background: var(--dvd); color: #000; text-align: center;
    font-family: 'Barlow', sans-serif !important; font-weight: 900; font-style: italic; font-size: clamp(40px, 5.6vw, 92px); line-height: 0.9; letter-spacing: -0.04em;
    transform-origin: center; box-shadow: 0 0 0.6em -0.1em var(--dvd), inset 0 -0.18em 0 rgba(0, 0, 0, 0.18), inset 0 0.12em 0 rgba(255, 255, 255, 0.45);
    transition: background-color 0.1s steps(1); -webkit-tap-highlight-color: transparent; }
.egg-dvd-name { display: block; position: relative; transform: skewX(-8deg) scaleY(1.08); text-shadow: 0.04em 0.05em 0 rgba(255, 255, 255, 0.35) !important; }
.egg-dvd-ring { position: absolute; inset: 0.16em; border-radius: 50%; border: 0.06em solid rgba(0, 0, 0, 0.55); pointer-events: none; }
body.egg-vhs .ix-landing .egg-dvd * { font-family: 'Barlow', sans-serif !important; }
.egg-dvd.is-corner { animation: dvdCorner 0.9s steps(2) both; }
@keyframes dvdCorner { 0%, 100% { filter: none; } 20%, 60% { filter: brightness(2.2) drop-shadow(0 0 30px currentColor); } 40%, 80% { filter: brightness(0.6); } }
/* a channel lost in the snow: the words double up and split into colour */
body.egg-ghost .ix-landing :is(h1, nav a, p, .scroll-label) { animation: ghostSplit 0.42s steps(1) infinite; }
@keyframes ghostSplit {
    0%   { text-shadow: 6px 2px 0 rgba(0, 0, 0, 0.3), -2px 0 rgba(255, 0, 60, 0.75), 2px 0 rgba(0, 210, 255, 0.7); }
    33%  { text-shadow: -5px -1px 0 rgba(0, 0, 0, 0.26), 2.5px 0 rgba(255, 0, 60, 0.7), -2px 1px rgba(0, 210, 255, 0.7); }
    66%  { text-shadow: 9px 0 0 rgba(0, 0, 0, 0.2), -3px 0 rgba(255, 0, 60, 0.8), 3px -1px rgba(0, 210, 255, 0.6); }
}
@media (prefers-reduced-motion: reduce) { body.egg-ghost .ix-landing * { animation: none !important; } }
/* the Portfolio wall after its storm breaks: black, with white words and white snow (the artwork stays as it is) */
.ix-portfolio.pf-dark { background: #050505; color: #fff; }
.ix-portfolio.pf-dark :is(.text-black, .pfw-link) { color: #fff !important; }
.ix-portfolio.pf-dark .text-black\/45 { color: rgba(255, 255, 255, 0.5) !important; }
.ix-portfolio.pf-dark .text-black\/45:hover { color: #fff !important; }
.ix-portfolio.pf-dark .pf-snow { filter: invert(1) brightness(1.75); }

/* 02: the backs of his hands (nails, knuckles), pressed onto his cheeks */
.how-art .ha-nail { fill: rgba(255, 255, 255, 0.16); }
.how-art .ha-knuckle { opacity: 0.55; }
.how-art .ha-crease { opacity: 0.6; }

/* the artwork strip stays in front of the storm (the snow still crosses the word) */
.ix-portfolio > .pf-head { z-index: auto; }
.ix-portfolio .pf-head > .pf-title { position: relative; z-index: 1; }
.ix-portfolio .pf-head > .pf-strip { z-index: 4; }
@media (hover: hover) { .course { cursor: pointer; } }

/* VHS: the name in black on the blue */
body.egg-vhs #hero-title :is(.text-white, span) { color: #05060f !important; text-shadow: -0.035em 0 0 rgba(255, 50, 70, 0.45), 0.04em 0 0 rgba(60, 150, 255, 0.45), 0 0 0.12em rgba(200, 212, 255, 0.6), 0 0 0.025em rgba(255, 255, 255, 0.95) !important; }
/* the whole course card is the button now, so hovering it lights the Book button too */
@media (hover: hover) {
    .course:hover .course-book { background-position: 100% 0; box-shadow: 0 10px 30px -10px rgb(var(--cb) / 0.7); transform: translateY(-2px); }
    .course:hover .course-book .btn-arrow { transform: translateX(4px); }
}
/* red: the small labels at the bottom (Scroll, Toronto) need more than the usual 62% black to read on red */
body[data-egg="red"] .ix-landing :is(.toronto-tag, .scroll-label) { color: rgb(var(--egg-ink) / 0.92) !important; font-weight: 400; }
body[data-egg="red"] .ix-landing .scroll-rail { background-color: rgb(var(--egg-ink) / 0.5) !important; }
/* VHS: the bent picture gets its own layer, so the heavy filter is rendered once and kept,
   instead of re-running whenever the snow and scanlines on top of it repaint */
body.egg-vhs .ix-landing { will-change: transform; }
.vhs-fx.is-outside { will-change: transform; }

/* VHS: the curved glass of an old set. Rounded corners with the black of the cabinet around them and a soft
   shadow inside the edge, standing in for the old bending filter at a fraction of the cost */
.vhs-fx > .vhs-screen { inset: 1.4%; width: auto; height: auto; border-radius: clamp(16px, 4vmin, 48px) / clamp(14px, 3.4vmin, 40px);
    box-shadow: 0 0 0 120px #000, inset 0 0 5vmin 1.2vmin rgba(0, 0, 18, 0.78), inset 0 0 0.8vmin 0.3vmin rgba(0, 0, 0, 0.9); }   /* the glass of an old set: rounded screen, black cabinet around it */
.vhs-osd { font-family: 'VT323', ui-monospace, monospace; }   /* the counter and PLAY sit outside the page now, so they bring the tape font along */

/* the tape menu: its words bend a little with the tape (the wobble filter only covers the words) */
body.egg-vhs:not(.egg-dvd) .ix-landing nav { filter: url(#egg-tape); }


/* Big screens: past 1500px the type and spacing grow only a little (up to ~1.2x), and the pages stay in a
   centred column, so a large monitor gets the laptop composition at a calmer size with more space around it,
   instead of the same layout blown up */
@media (min-width: 1500px) {
    html { font-size: clamp(16px, calc(11px + 0.3333vw), 19px); }
    .max-w-\[93\.75rem\] { max-width: 84rem; }
    .max-w-\[81\.25rem\] { max-width: 76rem; }
    /* the landing: its corners and the name sit inside the same centred frame instead of the far edges */
    .ix-landing { --fx: max(2.5rem, calc((100vw - 96rem) / 2)); }
    .ix-landing .ix-c-l { left: var(--fx); }
    .ix-landing .ix-c-r { right: var(--fx); }
    .ix-landing .about-corner { right: calc(var(--fx) - 0.5rem); }
    .ix-landing .ix-frame { padding-left: var(--fx); padding-right: calc(var(--fx) + 8rem); }
    /* the other home screens keep their content in the middle too */
    .ix.ix-portfolio, .ix[data-ix="contact"] { padding-left: max(10rem, calc((100vw - 92rem) / 2)); padding-right: max(10rem, calc((100vw - 92rem) / 2)); }
    .ix.ix-lessons, .ix.ix-gizmosis { padding-left: max(4rem, calc((100vw - 76rem) / 2)); padding-right: max(4rem, calc((100vw - 76rem) / 2)); }
}

/* The screensaver logo: flat, one colour, like the home-video logos of the time. No filter on it: a filter on something
   that moves every frame gets redrawn every frame, which is what made the screensaver crawl. The colour fringes and glow
   in its shadows give it the soft tape look instead */
.egg-dvd.egg-dvd { background: none; box-shadow: none; padding: 0; border-radius: 0; color: var(--dvd); font-size: clamp(42px, 6.2vw, 108px); line-height: 1;
    filter: none; transition: color 0.1s steps(1); }
.egg-dvd-mark { display: block; font-family: 'Barlow', sans-serif !important; font-weight: 900; font-style: italic; letter-spacing: -0.03em; line-height: 0.82;
    transform: scaleX(1.5) skewX(-8deg); transform-origin: center; text-align: center;
    text-shadow: -0.035em 0 0 rgba(255, 40, 70, 0.55), 0.04em 0 0 rgba(60, 150, 255, 0.55), 0 0 0.25em color-mix(in srgb, var(--dvd) 55%, transparent) !important; }
.egg-dvd-disc { position: relative; display: block; width: 2.3em; height: 0.44em; margin: 0.08em auto 0; border-radius: 50%; background: var(--dvd);
    box-shadow: 0 0 0.25em color-mix(in srgb, var(--dvd) 50%, transparent); }
.egg-dvd-disc i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Barlow', sans-serif !important; font-style: normal;
    font-weight: 800; font-size: 0.13em; letter-spacing: 0.32em; padding-left: 0.32em; color: #12227e; }
/* the static channel: words go heavy */
body.egg-bold .ix-landing :is(nav a, p, .scroll-label) { font-weight: 700 !important; }
body.egg-bold #hero-title :is(.text-white, span) { font-weight: 900 !important; }
body.egg-bold[data-egg="wnyel"] .ix-landing :is(p, a, span, h1) { text-shadow: 0 0 1px rgba(0, 0, 0, 0.55), 0.04em 0.05em 0 rgba(0, 0, 0, 0.35); }

/* All Work: the website tiles say where they lead */
.aw-media { position: relative; }
.aw-open { position: absolute; left: 50%; bottom: 1.75rem; translate: -50% 0; display: inline-flex; align-items: center; gap: 0.55em; padding: 0.55em 1em; border-radius: 9999px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; background: rgba(10, 10, 12, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease; }
.aw-open span { transition: transform 0.3s ease; }
.aw-media:hover .aw-open { background: rgba(255, 255, 255, 0.92); color: #0b0b0b; border-color: transparent; }
.aw-media:hover .aw-open span { transform: translateX(3px); }
.aw[data-view="grid"] .aw-open { font-size: 8px; padding: 0.45em 0.75em; letter-spacing: 0.16em; bottom: 0.85rem; }

/* Contact, on the home screen and its own page: a short film. Each headline line slides up out of its own mask
   ("Let's make", then a second later "something."), the line under it pulls into focus in two halves, the buttons
   slide in one after the other and the rest settles. Fill backwards only, so the hover effects keep working after */
/* the mask only cuts along the bottom of the line, with room under it for descenders and the morphing word's shadow, so
   'something' is never cropped; left, right and top are left open */
.mask-line { display: block; clip-path: inset(-1em -2em 0 -1em); padding-bottom: 0.34em; margin-bottom: -0.34em; }
.mask-line > span { display: block; transform-origin: 0 100%; animation: maskUp 1.6s cubic-bezier(0.19, 1, 0.22, 1) backwards; animation-delay: var(--d, 0s); }
@keyframes maskUp { from { transform: translateY(145%) skewY(5deg); filter: blur(6px); } 60% { filter: blur(0); } to { transform: none; filter: none; } }
.cine-fade { animation: cineFade 1.1s ease backwards; animation-delay: var(--d, 0s); }
@keyframes cineFade { from { opacity: 0; } }
.cine-blur { animation: cineBlur 1.3s cubic-bezier(0.19, 1, 0.22, 1) backwards; animation-delay: var(--d, 0s); }
@keyframes cineBlur { from { opacity: 0; filter: blur(14px); transform: scale(1.04); letter-spacing: 0.06em; } 70% { filter: blur(0); } to { opacity: 1; filter: none; transform: none; } }
.cine-slide { animation: cineSlide 1s cubic-bezier(0.19, 1, 0.22, 1) backwards; animation-delay: var(--d, 0s); }
@keyframes cineSlide { from { opacity: 0; transform: translateX(-46px); filter: blur(8px); } 55% { filter: blur(0); } to { opacity: 1; transform: none; filter: none; } }
.cine-focus { animation: cineFocus 1.1s cubic-bezier(0.19, 1, 0.22, 1) backwards; animation-delay: var(--d, 0s); }
@keyframes cineFocus { from { opacity: 0; filter: blur(12px); transform: scale(0.94); } 65% { filter: blur(0); } to { opacity: 1; filter: none; transform: none; } }
.cine-rise { animation: cineRise 1.3s cubic-bezier(0.19, 1, 0.22, 1) backwards; animation-delay: var(--d, 0s); }
@keyframes cineRise { from { opacity: 0; transform: translateY(54px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .mask-line > span, .cine-fade, .cine-blur, .cine-slide, .cine-focus, .cine-rise { animation: none; } }
/* held at the first frame until the page is ready, or on the home screen until you arrive on Contact */
html.intro-hold .contact-cine :is(.mask-line > span, .cine-fade, .cine-blur, .cine-slide, .cine-focus, .cine-rise),
#contact.ix:not(.ix-in) .contact-cine :is(.mask-line > span, .cine-fade, .cine-blur, .cine-slide, .cine-focus, .cine-rise) { animation-play-state: paused !important; }

.web-visit .btn-arrow { transition: transform 0.35s ease; }
.web-visit:hover .btn-arrow { transform: translateX(4px); }

/* ---- the tour's later channels ---- */
/* red, with words made of white static (the reverse of the white-static channel) */
html body.egg-noisetext.egg-noisetext.egg-noisetext .ix-landing.ix-landing :is(.glitch-text:not(.about-pill), .scroll-label) { color: transparent !important; -webkit-text-fill-color: transparent; background-image: var(--egg-noise); background-size: 160px 160px;
    -webkit-background-clip: text; background-clip: text; animation: eggNoiseText 0.24s steps(1) infinite; }
@keyframes eggNoiseText { 0% { background-position: 0 0; } 25% { background-position: -53px -91px; } 50% { background-position: -117px -29px; } 75% { background-position: -71px -137px; } }
/* lost signal: the picture is gone, the set keeps searching */
body.egg-signal .ix-landing > :not(.egg-signal):not(.egg-grain) { visibility: hidden; }
.egg-signal { position: absolute; inset: 0; z-index: 36; display: flex; align-items: center; justify-content: center; pointer-events: none;
    font-family: 'VT323', ui-monospace, monospace; color: #e9ecf5; }
.egg-signal-panel { display: flex; flex-direction: column; align-items: center; gap: 0.35em; padding: 0.9em 2em 0.8em; border: 2px solid currentColor; background: #050505;
    font-size: clamp(16px, 1.9vw, 28px); letter-spacing: 0.14em; text-shadow: -1.5px 0 rgba(255, 40, 70, 0.6), 1.5px 0 rgba(0, 220, 255, 0.55);
    box-shadow: -1.5px 0 rgba(255, 40, 70, 0.45), 1.5px 0 rgba(0, 220, 255, 0.4); animation: eggSigBlink 1.6s steps(1) infinite; }
.egg-signal-panel b { font-weight: 400; font-size: 2.1em; line-height: 1; letter-spacing: 0.2em; padding-left: 0.2em; }
.egg-signal-panel i { font-style: normal; animation: eggSigDot 1.2s steps(1) infinite; }
.egg-signal-panel i:nth-of-type(2) { animation-delay: 0.3s; }
.egg-signal-panel i:nth-of-type(3) { animation-delay: 0.6s; }
.egg-signal-ch { position: absolute; top: 8%; right: 7%; font-size: clamp(24px, 3vw, 46px); color: #7dff6a; letter-spacing: 0.08em; text-shadow: 0 0 8px rgba(125, 255, 106, 0.45); }
@keyframes eggSigDot { 0%, 24% { opacity: 0; } 25%, 100% { opacity: 1; } }
@keyframes eggSigBlink { 0%, 100% { opacity: 1; } 46% { opacity: 0.35; } 48% { opacity: 1; } 71% { opacity: 0.7; } 72% { opacity: 1; } }
/* the old window-drag bug: copies of the name pile up behind it, a trail that never gets cleaned up */
.egg-trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; image-rendering: pixelated; }
/* a pale, washed-out, flickering signal */
body.egg-pale .ix-landing { animation: eggPaleFlicker 1.3s steps(1) infinite; }
@keyframes eggPaleFlicker { 0%, 100% { opacity: 1; } 7% { opacity: 0.74; } 9% { opacity: 1; } 31% { opacity: 0.9; } 33% { opacity: 1; } 52% { opacity: 0.62; } 54% { opacity: 0.94; } 57% { opacity: 1; } 80% { opacity: 0.85; } 82% { opacity: 1; } }
body.egg-pale .ix-landing :is(.glitch-text, .scroll-label) { text-shadow: 0 0 2px rgb(var(--egg-ink) / 0.9), 0 0 7px rgb(var(--egg-ink) / 0.4), -2px 0 rgba(255, 60, 60, 0.2), 2px 0 rgba(60, 160, 255, 0.2) !important; }
body.egg-pale .ix-landing .egg-grain { image-rendering: pixelated; }
@media (prefers-reduced-motion: reduce) { body.egg-noisetext .ix-landing :is(.glitch-text, .scroll-label), body.egg-pale .ix-landing, .egg-signal-panel, .egg-signal-panel i { animation: none; } }

/* The studio entrance (arminrahimi.com/dropd): its name in the top bar, its own menu, and the door out */
.studio-mark { color: #fff; }
.studio-exit .btn-arrow, .studio-door .btn-arrow { transition: transform 0.35s ease; }
.studio-exit:hover .btn-arrow, .studio-door:hover .btn-arrow { transform: translateX(4px); }
/* "See the rest of his work": the red line under it floods up into a red block on hover, the words go dark and the arrow runs on */
.studio-door { padding: 0.55rem 0.15rem; margin: -0.55rem -0.15rem; background: linear-gradient(#ff4d4d, #ff4d4d) 0 100% / 100% 2px no-repeat;
    transition: background-size 0.45s cubic-bezier(0.7, 0, 0.2, 1), color 0.3s ease 0.08s, padding 0.45s cubic-bezier(0.7, 0, 0.2, 1), margin 0.45s cubic-bezier(0.7, 0, 0.2, 1); }
.studio-door:hover, .studio-door:focus-visible { background-size: 100% 100%; color: #0b0909; padding-left: 0.9rem; padding-right: 0.9rem; margin-left: -0.15rem; }
.studio-door:hover .btn-arrow { transform: translateX(6px); }
/* the preview of his work: three pictures fading into each other */
.concept-thumb img { opacity: 0; transition: opacity 1.2s ease, transform 0.7s ease; }
.concept-thumb img.is-on { opacity: 0.92; }
.group:hover .concept-thumb img.is-on { opacity: 1; transform: scale(1.04); }
.studio-show img { opacity: 0; transition: opacity 1.4s ease, transform 6s ease-out; transform: scale(1.04); }
.studio-show img.is-on { opacity: 1; transform: none; }
/* the studio's front door is a single screen: no extra room under it to scroll into */
/* (it keeps the same little overscroll room as the home screens: on iPhones that's what keeps the picture from jumping when you tap in) */
body.studio-entrance { background: #a3141a; }
/* phones: the offer badge on the single lesson's closed card goes once the card opens (its own badge is inside) */
.course.is-open .course-promo-head { display: none; }

/* Home: "About" is the one that explains everything, so it's a small solid pill: white on the black landing, and in the
   other channels the colour of that channel's words, with letters in its background colour. On hover it fills with the
   same warm sweep as the "Let's talk" button inside the About panel */
.about-pill { --pill-bg: #ffffff; --pill-ink: #0b0b0b; position: relative; isolation: isolate; display: inline-block; padding: 0.1em 0.5em 0.1em 0.9em; margin-right: 0.4em;
    border-radius: 9999px; background: var(--pill-bg); color: var(--pill-ink) !important; transition: color 0.35s ease, box-shadow 0.45s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
body.egg-ink .ix-landing .about-pill, body.egg-vhs .ix-landing .about-pill { --pill-bg: rgb(var(--egg-ink)); --pill-ink: var(--egg-bg, #050505); }
.about-pill::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0;
    background: linear-gradient(110deg, rgb(255 120 110), rgb(255 199 92), rgb(255 120 110)); background-size: 220% 100%; background-position: 0 0;
    transition: opacity 0.4s ease, background-position 0.9s ease; }
html body .ix-landing nav .about-pill.about-pill:is(:hover, :focus-visible) { color: #0b0b0b !important; box-shadow: 0 10px 28px -12px rgb(255 120 110 / 0.75), 0 8px 24px -14px rgb(255 199 92 / 0.8); }
.about-pill:is(:hover, :focus-visible)::before { opacity: 1; background-position: 100% 0; }
/* About: the link into the full list of services, underlined in the warm sweep */
.about-range { padding-bottom: 0.2rem; background: linear-gradient(90deg, rgb(255 120 110), rgb(255 199 92)) 0 100% / 100% 1px no-repeat; transition: background-size 0.4s ease; font-weight: 500; }
.about-range:hover { background-size: 100% 2px; }
.about-range .btn-arrow { transition: transform 0.35s ease; }
.about-range:hover .btn-arrow { transform: translateX(4px); }
/* phones and tablets: no Back button (the bar has the menu); Top and Next appear when you scroll up and step away when you scroll down */
@media (max-width: 1023px) { .jump-back, .jump-sep-back { display: none; } }
/* everywhere: the buttons wait out of the way while you read down the page, and come back the moment you scroll up */
body.nav-hidden .jump-nav:not(.is-engaged), .jump-nav.is-idle:not(.is-engaged) { transform: translateY(150%); opacity: 0; pointer-events: none; }
/* the About pill in the landing's bottom-right corner: small type like the other corner labels, with room for its glow */
.about-corner { padding: 0.5rem 0.75rem; }
.about-corner .about-pill { margin: 0; padding: 0.42em 0.9em 0.42em 1.2em; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 500; }
body.egg-mirror .ix-landing .about-pill { scale: -1 1; }
/* All Work on phones: "Open project" sits lower on the picture */
@media (max-width: 767px) { .aw-open { bottom: 0.9rem; } }
/* All Work: the one-column / grid switch floats at the top right, under the bar, and steps away with it when you scroll down */
.aw-toggle { position: fixed; margin: 0 !important; top: calc(4.05rem + env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); z-index: 44;
    background: rgba(12, 12, 14, 0.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-color: rgba(255, 255, 255, 0.14);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; }
body.nav-hidden .aw-toggle { transform: translateY(-180%); opacity: 0; pointer-events: none; }
/* on computers the bar has room on the right, so the switch sits right in it, centred, and leaves with it */
@media (min-width: 1024px) { .aw-toggle { top: calc(6px + env(safe-area-inset-top, 0px)); right: 1.5rem; z-index: 51; } }
/* All Work grid: the website and UI tiles show a clean screenshot, floating on a dark card, instead of a cramped crop of the mockups */
.aw-media .aw-grid-img { display: none; }
.aw[data-view="grid"] .aw-media:has(.aw-grid-img) { background: radial-gradient(120% 90% at 50% 0%, #1d1d21, #0c0c0e 70%); }
.aw[data-view="grid"] .aw-media:has(.aw-grid-img) .aw-wall-img { display: none; }
.aw[data-view="grid"] .aw-media .aw-grid-img { display: block; position: absolute; left: 9%; top: 13%; width: 82%; height: 56%; object-fit: cover; object-position: top center;
    border-radius: 3px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06); transition: transform 0.7s ease; }
.aw[data-view="grid"] .aw-media:hover .aw-grid-img { transform: translateY(-3px) scale(1.03); }
.aw[data-view="grid"] .aw-open { white-space: nowrap; }

.corner-id { cursor: pointer; }

/* an inline link in a sentence: a thin line that thickens and turns red, the arrow nudging forward (like "Ask me anything") */
.text-link { color: #0b0b0b; font-weight: 400; padding-bottom: 0.15rem; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size 0.35s ease, color 0.3s ease; }
.text-link:hover { color: #e11d2a; background-size: 100% 2px; }
.text-link:hover .btn-arrow { transform: translateX(4px); }

/* Drop D: things slide in further and slower, so you actually see them arrive */
.lessons .reveal.is-visible { animation: lessonsIn 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: var(--delay, 0ms); }
@keyframes lessonsIn { from { opacity: 0; transform: translateY(110px); } 45% { opacity: 1; } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lessons .reveal.is-visible { animation: none; opacity: 1; } }
/* the About pill grows with the page on big screens (it was fixed in pixels) */
@media (min-width: 1500px) { .ix-landing .about-corner .about-pill { font-size: 0.74rem; } .ix-landing .toronto-tag { font-size: 0.6rem; } .ix-landing .scroll-label { font-size: 0.56rem; } }