/* ================= IMMERSIVE LAYER: chat, case-study hero/next, lightbox, projects preview ================= */

/* ---------- Spark (AI mark) ---------- */
.ask-pill__spark {
    width: 10px; height: 10px; flex: none; border-radius: 50%;
    background: conic-gradient(from 0deg, var(--brand-purple), var(--brand-indigo), var(--brand-lilac), var(--brand-purple));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-purple) 22%, transparent);
    animation: spark 4s linear infinite;
}
@keyframes spark { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ask-pill__spark { animation: none; } }

/* ---------- Nav trigger + page progress ---------- */
.ask-trigger {
    display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px 0 4px;
    border: 0; border-radius: var(--r-pill); background: transparent;
    font-size: var(--fs-sm); font-weight: var(--fw-strong);
    transition: color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), opacity var(--dur-ui) var(--ease-out);
}
.ask-trigger:active { transform: scale(0.96); }
@media (hover: hover) { .ask-trigger:hover { color: var(--accent); } }
.ask-trigger__kbd { font: inherit; font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); padding: 0; border: 0; }
@media (max-width: 767px) { .ask-trigger__kbd, .ask-trigger__label { display: none; } .ask-trigger { width: 40px; padding: 0; justify-content: center; } }
.nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.nav__progress span { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.nav.is-scrolled .nav__progress { opacity: 0; pointer-events: none; }

/* ---------- Ask pills (contextual entry points) ---------- */
.ask-pill {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
    padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--line);
    font-size: var(--fs-sm); font-weight: var(--fw-strong); color: var(--ink);
    transition: border-color var(--dur-ui) var(--ease-out), background-color var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
}
.ask-pill:active { transform: scale(0.97); }
@media (hover: hover) { .ask-pill:hover { border-color: var(--accent); background: color-mix(in srgb, var(--brand-purple) 10%, transparent); } }

/* ---------- Home ask band ---------- */
.ask-band { display: grid; gap: 24px; justify-items: start; }
.ask-band .section-title { max-width: 14ch; }
.ask-band__lede { color: var(--ink-2); font-size: var(--fs-lg); max-width: 46ch; line-height: 1.45; }
.ask-inline {
    width: 100%; max-width: 920px; display: flex; align-items: center; gap: 14px; margin-top: 12px;
    padding: 10px 10px 10px 22px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--bg-elev);
    transition: border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.ask-inline:focus-within { border-color: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-purple) 14%, transparent); }
.ask-inline input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--fs-lg); font-weight: var(--fw-display); padding: 10px 0; outline: none; }
.ask-inline input::placeholder { color: var(--ink-3); opacity: 1; }

/* ---------- Chat overlay: workspace style, no panel, the content sits on the blurred page ---------- */
html.ask-open { overflow: hidden; }
.ask { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: clamp(0px, 3vw, 40px);
    --ask-mono: ui-monospace, "SF Mono", Menlo, monospace; --ask-line: color-mix(in srgb, var(--ink) 14%, transparent); }
.ask__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); }
.ask__panel {
    position: relative; width: min(100%, 860px); height: min(100%, 860px);
    display: grid; grid-template-rows: auto 1fr auto auto;
    padding: clamp(20px, 3vw, 36px); background: none; border: 0; border-radius: 0;
}
@media (max-width: 640px) { .ask { padding: 0; } .ask__panel { height: 100%; } }
.ask__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--ask-line); }
.ask__label { margin: 0; font-family: var(--ask-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--interactive); }
.ask__actions { display: flex; flex: none; align-items: center; gap: 24px; }
/* text controls, as the page chrome (Settings, Ask AI) */
.ask__btn { height: auto; padding: 0; border: 0; border-radius: 0; background: none; white-space: nowrap; font-family: var(--ask-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); transition: color 240ms var(--ease-out); }
@media (hover: hover) { .ask__btn:hover { color: var(--ink); } }

.ask__thread { overflow-y: auto; overscroll-behavior: contain; padding: clamp(20px, 3vw, 32px) 0; scrollbar-width: thin; }
.ask__intro { display: grid; gap: 28px; margin-bottom: 24px; }
.ask__hello { font-size: var(--fs-xl); font-weight: var(--fw-display); line-height: 1.15; letter-spacing: var(--track-display); max-width: 26ch; }
.ask__hello strong { font-weight: var(--fw-display); color: color-mix(in srgb, var(--ink) 32%, transparent); }
/* suggestions read like the workspace tabs: a small magenta number, Gotham 300, a hairline under each */
.ask__suggest { display: grid; counter-reset: ask-q; border-top: 1px solid var(--ask-line); }
.ask__suggest li { counter-increment: ask-q; }
.ask__suggest button {
    width: 100%; display: flex; align-items: baseline; gap: 10px; text-align: left; padding: 14px 0;
    border: 0; border-bottom: 1px solid var(--ask-line); border-radius: 0; background: none;
    font-size: var(--fs-md); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1.3;
    color: color-mix(in srgb, var(--ink) 55%, transparent); transition: color 300ms var(--ease-out);
}
.ask__suggest button::before { content: "0" counter(ask-q); flex: none; font-family: var(--ask-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--interactive); transform: translateY(-0.15em); }
@media (hover: hover) { .ask__suggest button:hover { color: var(--ink); } }

.ask__msgs { display: grid; gap: 20px; }
.ask__msg { max-width: 88%; line-height: 1.6; }
.ask__msg--me { justify-self: end; padding: 12px 18px; border-radius: 0; background: var(--ink); color: var(--bg); }
.ask__msg--ai { justify-self: start; position: relative; padding-left: 22px; color: var(--ink); }
.ask__msg--ai::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--interactive); }
.ask__msg--ai.is-error { color: var(--ink-2); }
.ask__msg--ai.is-error::before { background: #d4554f; }
.ask__answer > * + * { margin-top: 0.8em; }
.ask__answer ul, .ask__answer ol { padding-left: 1.2em; display: grid; gap: 4px; }
.ask__answer ul { list-style: disc; } .ask__answer ol { list-style: decimal; }
.ask__answer a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.ask__answer code { font-size: 0.9em; padding: 1px 5px; background: var(--line); }
.ask__h { font-weight: var(--fw-strong); }
.ask__copy { margin-top: 10px; padding: 4px 0; font-family: var(--ask-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.ask__copy:hover { color: var(--ink); }
.ask__msg.is-thinking { display: flex; align-items: center; gap: 12px; font-family: var(--ask-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.ask__dots { display: inline-flex; gap: 4px; }
.ask__dots i { width: 5px; height: 5px; background: currentColor; animation: dot 1.2s var(--ease-in-out) infinite; }
.ask__dots i:nth-child(2) { animation-delay: 0.15s; } .ask__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.ask__status { display: inline-block; }

/* the field is a workspace glass box */
.ask__form { display: flex; align-items: end; gap: 10px; padding: 8px 8px 8px 18px; border: 1px solid var(--ask-line); border-radius: 0;
    background: color-mix(in srgb, var(--bg) 38%, transparent); backdrop-filter: blur(52px) saturate(1.5); -webkit-backdrop-filter: blur(52px) saturate(1.5);
    transition: border-color 300ms var(--ease-out); }
.ask__form:focus-within { border-color: var(--accent); }
.ask__input { flex: 1; resize: none; border: 0; background: none; color: var(--ink); font: inherit; font-size: var(--fs-md); line-height: 1.5; padding: 10px 0; outline: none; max-height: 180px; }
.ask__input::placeholder { color: var(--ink-3); }
.ask__send { position: relative; overflow: hidden; isolation: isolate; width: 44px; height: 44px; border-radius: 0; background: var(--ink); color: var(--bg); display: grid; place-items: center; flex: none; transition: transform var(--dur-ui) var(--ease-out), color 300ms var(--ease-out); }
.ask__send::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent); transform: translateY(101%); transition: transform 450ms var(--ease-out); }
.ask__send svg { width: 18px; fill: currentColor; transform: rotate(-90deg); }
.ask__send:active { transform: scale(0.92); }
.ask__send:disabled { opacity: 0.4; }
@media (hover: hover) { .ask__send:hover:not(:disabled) { color: var(--on-accent); } .ask__send:hover:not(:disabled)::before { transform: translateY(0); } }
.ask__note { margin-top: 12px; font-family: var(--ask-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; color: var(--ink-3); text-align: center; }
.ask__note a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Case study: immersive hero ---------- */
.cs-hero2 { position: relative; min-height: 100dvh; display: grid; align-items: end; overflow: clip; color: #fff; }
.cs-hero2__media { position: absolute; inset: 0; overflow: hidden; background: #111; will-change: clip-path; }
.cs-hero2__media img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; will-change: transform; }
.cs-hero2__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0.25) 0%, transparent 30%, transparent 45%, rgb(0 0 0 / 0.72) 100%); }
.cs-hero2__copy { position: relative; z-index: 1; display: grid; gap: 20px; padding-top: calc(var(--nav-h) + 40px); padding-bottom: clamp(32px, 7vh, 80px); }
.cs-hero2 .crumbs, .cs-hero2 .crumbs a { color: rgb(255 255 255 / 0.8); }
.cs-hero2__title { font-size: clamp(2.25rem, 1.2rem + 4.2vw, 5.5rem); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1.02; max-width: 18ch; text-wrap: balance; }
.cs-hero2__info { font-size: var(--fs-sm); color: rgb(255 255 255 / 0.78); white-space: pre-wrap; }
.page-cs main > .cs-hero2 + section { margin-top: 0; }
.cs-toc .ask-pill { margin-top: 32px; }

/* Extra legacy content bits */
.cs-body iframe { width: 100%; aspect-ratio: 16 / 10; height: auto; border: 0; border-radius: var(--r-media); background: var(--bg-elev); }
.cs-body .cstoolImg img { max-height: 40px; width: auto; }
.cs-body .cstool__info { display: grid; gap: 6px; }
.cs-body .listingText li { list-style: disc; margin-left: 1.2em; color: var(--ink-2); }
.cs-body figure img { cursor: zoom-in; }
.cs-body .pt40 { padding-top: 40px; }

/* ---------- Case study: next project expands ---------- */
.cs-next2 { margin-top: var(--section); }
.cs-next2__link { position: relative; display: grid; min-height: 90dvh; align-items: end; color: #fff; overflow: clip; }
.cs-next2__media { position: absolute; inset: 0; overflow: hidden; background: #111; will-change: clip-path; }
.cs-next2__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.cs-next2__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / 0.7)); }
.cs-next2__copy { position: relative; z-index: 1; display: grid; gap: 14px; padding-bottom: clamp(32px, 7vh, 72px); }
.cs-next2__label { font-size: var(--fs-sm); color: rgb(255 255 255 / 0.75); }
.cs-next2__title { font-size: var(--fs-2xl); font-weight: var(--fw-display); letter-spacing: var(--track-display); line-height: 1.05; max-width: 22ch; }
.cs-next2__title strong { font-weight: var(--fw-strong); }

/* ---------- Lightbox (case-study images) ---------- */
.zoom { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: clamp(16px, 4vw, 56px); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: zoom-out; }
.zoom img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--r-media); box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.5); }
.zoom__cap { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- Projects: scroll-driven preview (list mode, desktop) ---------- */
.proj-stage { display: none; }
@media (min-width: 1100px) and (hover: hover) {
    .projects-wrap.is-list { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 32vw, 520px); gap: clamp(32px, 4vw, 64px); align-items: start; }
    .projects-wrap.is-list .proj-stage { display: block; position: sticky; top: calc(var(--nav-h) + 32px); aspect-ratio: 4 / 5; border-radius: var(--r-media); overflow: hidden; background: var(--bg-elev); }
    .proj-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 600ms var(--ease-out), transform 1200ms var(--ease-out); }
    .proj-stage img.is-on { opacity: 1; transform: scale(1); }
    .proj-stage__cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-strong); text-shadow: 0 1px 12px rgb(0 0 0 / 0.5); }
    .projects-wrap.is-list .projects .proj__link { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); }
    .projects-wrap.is-list .projects .proj__tags { display: none; }
    .projects-wrap.is-list .proj.is-active .proj__link { color: var(--ink); padding-left: 16px; }
    .projects-wrap.is-list .projects .proj__link { color: var(--ink-3); }
    .projects-wrap.is-list ~ .proj-preview, .projects-wrap.is-list .proj-preview { display: none; }
}
@media (min-width: 1000px) {
    .cs-toc { flex-wrap: wrap; }
    .cs-toc ol { flex: 1; min-width: 0; }
    .cs-toc .ask-pill { flex-basis: 100%; justify-content: center; }
}
.page-cs .cs-layout { padding-top: clamp(40px, 5vw, 80px); }
.ask-band--compact { justify-items: center; text-align: center; }
.ask-band--compact .ask-inline { margin-inline: auto; }

/* WebGL hover lens canvas (positioned over the hovered image by gl/hover.js) */
.gl-hover { position: fixed; left: 0; top: 0; z-index: 55; pointer-events: none; opacity: 0; transition: opacity 250ms var(--ease-out); will-change: transform; }
html:has(.gl-hover) [data-gl-hover] img { transform: none !important; }

/* AI mark: a four-point spark that twinkles, square-cut like the rest of the UI */
.ask-pill__spark { width: 11px; height: 11px; border-radius: 0; box-shadow: none; background: var(--accent);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: spark-twinkle 2.4s var(--ease-in-out, ease-in-out) infinite; }
@keyframes spark-twinkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(0.7) rotate(45deg); } }

/* chat: square everywhere */
.ask, .ask *, .ask *::before, .ask *::after { border-radius: 0 !important; }

/* AI mark: a shining star. Slim concave four-point star with a soft glow that pulses, plus a
   faint diagonal glint that flashes on each peak */
.ask-pill__spark { position: relative; width: 13px; height: 13px; background: none; clip-path: none; animation: star-glow 2.6s ease-in-out infinite;
    filter: drop-shadow(0 0 2px var(--accent)) drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 70%, transparent)); }
.ask-pill__spark::before, .ask-pill__spark::after { content: ""; position: absolute; inset: 0; }
.ask-pill__spark::before { background: radial-gradient(circle, #fff 0 18%, var(--accent) 45%);
    clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%); }
.ask-pill__spark::after { inset: 22%; background: #fff; opacity: 0; transform: rotate(45deg) scale(0.4);
    clip-path: polygon(50% 0, 54% 46%, 100% 50%, 54% 54%, 50% 100%, 46% 54%, 0 50%, 46% 46%); animation: star-glint 2.6s ease-in-out infinite; }
@keyframes star-glow { 0%, 100% { transform: scale(0.85) rotate(0deg); opacity: 0.85; } 50% { transform: scale(1.12) rotate(12deg); opacity: 1; } }
@keyframes star-glint { 0%, 35%, 65%, 100% { opacity: 0; transform: rotate(45deg) scale(0.4); } 50% { opacity: 0.9; transform: rotate(45deg) scale(1.3); } }
@media (prefers-reduced-motion: reduce) { .ask-pill__spark, .ask-pill__spark::after { animation: none; } }
/* light theme: the star turns dark, ink core with only a faint halo */
:root:not([data-theme="dark"]) .ask-pill__spark { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--ink) 35%, transparent)); }
:root:not([data-theme="dark"]) .ask-pill__spark::before { background: radial-gradient(circle, var(--ink) 0 30%, color-mix(in srgb, var(--ink) 80%, var(--accent)) 60%); }
:root:not([data-theme="dark"]) .ask-pill__spark::after { background: var(--ink); }

/* Case hero: title first, then the banner as a rectangle inside the page margins (as on the original site). */
.cs-hero2 { min-height: 0; display: block; overflow: visible; color: var(--ink); }
.cs-hero2__media { position: relative; inset: auto; background: none; overflow: visible; }
.cs-hero2__media picture { display: block; overflow: hidden; aspect-ratio: 4 / 1; background: #111; }
.cs-hero2__media::after { display: none; }
.cs-hero2__copy { padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 112px)); padding-bottom: clamp(32px, 4vw, 56px); }
.cs-hero2 .crumbs, .cs-hero2 .crumbs a { color: var(--ink-2); }
.cs-hero2__info { color: var(--ink-2); }
@media (max-width: 767px) {
    .cs-hero2__media picture { aspect-ratio: 16 / 10; }   /* phone: shorter banner */
}

/* Case page: content scrolls inside a frame; blurred fade under the nav and above the location / Ask AI bar. */
.page-cs::before, .page-cs::after { content: ""; position: fixed; left: 0; right: 0; z-index: 2; pointer-events: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.page-cs::before { top: 0; height: calc(var(--nav-h) + 48px); background: linear-gradient(to bottom, var(--bg) 40%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.page-cs::after { bottom: 0; height: 110px; background: linear-gradient(to top, var(--bg) 35%, transparent); mask-image: linear-gradient(to top, #000 50%, transparent); -webkit-mask-image: linear-gradient(to top, #000 50%, transparent); }

/* Next case: title first, then the image as a rectangle inside the page margins (same as the hero). */
.cs-next2__link { display: flex; flex-direction: column; align-items: stretch; min-height: 0; color: var(--ink); overflow: visible; width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.cs-next2__copy { order: -1; padding-inline: 0; padding-bottom: clamp(24px, 3vw, 40px); }
.cs-next2__label { color: var(--ink-2); }
.cs-next2__media { position: relative; inset: auto; display: block; aspect-ratio: 21 / 9; }
.cs-next2__media::after { display: none; }
@media (max-width: 767px) { .cs-next2__media { aspect-ratio: 4 / 3; } }
.cs-next2__link { max-width: min(var(--max), 980px); margin-inline: auto; }
.cs-next2__media { aspect-ratio: 16 / 7; }
.cs-next2__title { font-size: var(--fs-xl, 1.75rem); font-weight: var(--fw-display); }
.cs-next2__title strong { font-weight: inherit; }

/* Related case studies: three cards in a row, fade in on scroll. */
.cs-related { margin-top: var(--section); display: grid; gap: clamp(24px, 3vw, 40px); }
.cs-related__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); }
.cs-related__item a { display: grid; gap: 8px; color: var(--ink); text-decoration: none; }
.cs-related__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #111; margin-bottom: 8px; }
.cs-related__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(.2,.7,.2,1); }
.cs-related__item a:hover .cs-related__media img { transform: scale(1.04); }
@media (max-width: 899px) { .cs-related__grid { grid-template-columns: 1fr; } }
/* Single next case: one card, not stretched across the row. */
.cs-related__grid { grid-template-columns: minmax(0, 760px); }
/* Next case shown like the current case's hero. */
.cs-related__link { display: block; color: var(--ink); text-decoration: none; }
.cs-related .cs-hero2__copy { padding-top: 0; }
.cs-related .cs-hero2__title { display: block; }
.cs-related .crumbs { color: var(--ink-2); }
.cs-related .cs-hero2__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(.2,.7,.2,1); }
.cs-related__link:hover .cs-hero2__media img { transform: scale(1.03); }
.cs-related .cs-hero2__media, .cs-related .cs-hero2__copy { display: block; } .cs-related .cs-hero2__copy { display: grid; }

/* Case-study footer: same perspective tilt as the home / work / about footer (.outro.story). */
.page-cs .outro, .page-cv .outro { perspective: 900px; perspective-origin: 50% 50%; }
.page-cs .outro .outro__inner, .page-cv .outro .outro__inner { transform: rotateX(6deg) rotateY(18deg); transform-origin: 0 50%; }
/* phone: no suggested questions in the chat, just the greeting and the input */
@media (max-width: 767px) { .ask__suggest { display: none; } }