/* tushardev.com homepage only (body.home). Loaded after site.css.
   Everything animated here is progressive: without JS the page is static
   and complete; .js on <html> turns the motion on. */

.home { --hx-pad: 32px; --wide: 1180px; }
.home .bg-grid-inner { animation: none; opacity: 0.55; }
.home main, .home .foot { position: relative; z-index: 2; }

/* Grain: one SVG noise tile, rasterised once, never animated */
.grain {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: 0.045; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-contrast: more) { .grain { display: none; } }

/* Harp rings, drawn only while a note is fading */
.rings { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
/* Burst particles: drawn only while a word or title is in flight */
/* The sky: galaxy and far stars behind every section (drawn by the hero script). */
.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; }
.burst { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home .statement .w, .home .section-head .label { cursor: pointer; }
}

/* Scroll progress: CSS where the browser has scroll timelines, the script otherwise */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30;
  background: linear-gradient(90deg, var(--accent), var(--accent-blue));
  transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progress { animation: grow linear both; animation-timeline: scroll(root); }
}
@keyframes grow { to { transform: scaleX(1); } }
@media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }
.cursor-glow {
  position: fixed; left: 0; top: 0; width: 640px; height: 640px; z-index: 1; pointer-events: none;
  border-radius: 50%; background: radial-gradient(circle, rgba(124,247,196,0.11), transparent 62%);
  transform: translate3d(-9999px, 0, 0); transition: transform 600ms var(--ease-out);
}

/* ---------- Hero: a pinned stage over a scroll runway ---------- */
/* No overflow on .hx: a clipping ancestor would stop the stage from sticking. */
.home .hx { position: relative; min-height: 100vh; min-height: 100svh; }
.home .hx-stage {
  position: sticky; top: 0; display: flex; flex-direction: column; overflow: clip;
  min-height: 100vh; min-height: 100svh; padding: 24px var(--hx-pad) 32px;   /* min-height: it can grow at large text sizes */
}
/* The status bar, hint and cue fade with scroll through --away; once gone they stop taking clicks and focus. */
.home .hx-hint, .home .hx-cue { opacity: var(--away, 1); }
.home .hx-top { opacity: var(--away, 1); }
.home .hx-stage[data-away] .hx-top, .home .hx-stage[data-away] .hx-cue { visibility: hidden; }
/* The runway exists only with JS and motion allowed; otherwise the hero is one screen. */
@media (prefers-reduced-motion: no-preference) {
  .js .home .hx { --runway: 240vh; height: calc(100vh + var(--runway)); }
  @supports (height: 100svh) { .js .home .hx { --runway: 240svh; height: calc(100svh + var(--runway)); } }
}
.home .hx-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.home .hx-field.grabbing { cursor: grabbing; }
.home .hx-top, .home .hx-body, .home .hx-copy { pointer-events: none; }
.home .hx-top > *, .home .hx-copy > * { pointer-events: auto; }
.home .hx-hint {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 112px; white-space: nowrap; margin: 0; pointer-events: none;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint);
  transition: opacity 600ms var(--ease-out);
}
.home .hx-hint.used { opacity: 0; }
.home .hx-hint .touch { display: none; }
@media (hover: none) { .home .hx-hint .fine { display: none; } .home .hx-hint .touch { display: inline; } }
.home .hx-top { position: relative; width: 100%; max-width: var(--wide); margin: 0 auto; font-size: 12px; }
.home .hx-body { position: relative; flex: 1; display: flex; align-items: flex-end; width: 100%; max-width: var(--wide); margin: 0 auto; padding: 40px 0 88px; }
.home .hx-copy { display: flex; flex-direction: column; gap: 24px; max-width: 640px; will-change: transform, opacity; }
.home .hx-id { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.home .hx-avatar {
  position: relative; width: 64px; height: 64px; flex-shrink: 0; overflow: hidden;
  border: 1px solid rgba(124,247,196,0.45); box-shadow: 0 0 0 4px rgba(124,247,196,0.06), 0 18px 40px -18px rgba(124,247,196,0.7);
}
.home .hx-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home .tag { font-size: 12px; background: rgba(6,8,10,0.55); }

.home .hx-name {
  margin: 0; display: flex; flex-direction: column;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(56px, 10vw, 148px); line-height: 0.84; letter-spacing: -0.045em;
  background: linear-gradient(100deg, #FFFFFF 0%, #EAF7F1 35%, #7CF7C4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 32px rgba(124,247,196,0.18));
}
.home .hx-name .ln { display: block; white-space: nowrap; }
.home .hx-name .ln + .ln { padding-left: 0.5em; }
.home .hx-name .scr { -webkit-text-fill-color: var(--accent); font-family: var(--font-mono); font-weight: 400; }

.home .tagline { max-width: 44ch; margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink-mute); text-wrap: pretty; text-shadow: 0 1px 12px var(--bg); }
.home .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.home a.cta {
  position: relative; display: inline-block; overflow: hidden; white-space: normal; text-align: center;
  font-size: 16px; padding: 16px 24px; box-shadow: 0 0 0 1px rgba(124,247,196,0.4), 0 18px 50px -16px rgba(124,247,196,0.75);
  transition: background 300ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 400ms var(--ease-out);
}
.home a.cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.65) 50%, transparent 70%);
  transform: translateX(-120%); animation: shine 4.5s var(--ease-out) 1.6s infinite;
}
.home .hero-actions .alt { font-size: 14px; color: var(--ink-mute); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(124,247,196,0.35); }
.home .hero-actions .alt:hover { color: var(--accent); }

.home .hx-cue {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-dim);
}
.home .hx-cue:hover { color: var(--accent); }
.home .hx-cue i { position: relative; width: 1px; height: 44px; overflow: hidden; background: rgba(124,247,196,0.2); }
.home .hx-cue i::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 16px; background: var(--accent); animation: drip 1.8s var(--ease-out) infinite; }

@keyframes shine { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(120%); } }
@keyframes drip { from { transform: translateY(-16px); } to { transform: translateY(44px); } }

/* Slash menu, like a terminal prompt */
.pnl-about { display: flex; flex-direction: column; gap: 20px; max-width: 720px; }
.pnl-about .hx-id { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pnl-about .tag { font-size: 12px; }
.pnl-body .pnl-name {
  margin: 0; padding-right: 0; font-size: clamp(56px, 9vw, 120px); line-height: 0.86; letter-spacing: -0.045em; text-transform: uppercase;
  background: linear-gradient(100deg, #FFFFFF 0%, #EAF7F1 35%, #7CF7C4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pnl-about .pnl-lede { margin: 0; }
.home .pnl-more { margin: 18px 0 0; font-size: 12.5px; letter-spacing: 0.04em; }
.home .hx-nav { font-size: 12px; letter-spacing: 0.06em; text-transform: none; color: var(--ink-fainter); line-height: 1.8; }
.home .hx-nav a { color: var(--ink-mute); transition: color 300ms var(--ease-out); }
.home .hx-nav a:hover { color: var(--accent); }
.home .hx-nav .avail { color: var(--accent); border-bottom: 1px dotted rgba(124,247,196,0.6); }
/* One quiet line that says who this is and what the work is, without breaking the minimal first screen */
.home .hx-line { margin: 2px 0 0; font-size: 12px; letter-spacing: 0.06em; text-transform: none; color: var(--ink-mute); }
/* Readable on the plain background and over every section's tinted flood (6:1 or better). */
.home .hx-field.on-slab { cursor: pointer; }
.home .hx-field:focus-visible { outline: 1px dashed rgba(124,247,196,0.6); outline-offset: -12px; }

/* The harp toggle stays in the bottom corner, so it can be turned off anywhere on the page */
.home .sound-dock {
  position: fixed; right: var(--hx-pad); bottom: 20px; z-index: 35;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); pointer-events: none;
}
.home .sound-dock .sound { pointer-events: auto; }
.home .sound-row { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--s-1); }
/* Instrument picker: a radio group, shown only while sound is on */
.home .instr { display: flex; pointer-events: auto; background: rgba(10,16,15,0.85); border: 1px solid rgba(255,255,255,0.12); }
.home .instr[hidden] { display: none; }
.home .instr button {
  min-height: 44px; padding: 8px 12px; cursor: pointer; border: 0; background: transparent;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute);
  transition: color var(--t-2) var(--ease-out), background-color var(--t-2) var(--ease-out);
}
.home .instr button:hover { color: var(--accent); }
.home .instr button[aria-checked="true"] { color: var(--bg); background: var(--accent); }
.home .instr button:active { translate: 0 1px; }
.home .sound {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute); background: rgba(10,16,15,0.85); border: 1px solid rgba(255,255,255,0.12);
  transition: color var(--t-2) var(--ease-out), border-color var(--t-2) var(--ease-out);
}
.home .sound[hidden] { display: none; }
.home .sound:hover { color: var(--accent); border-color: rgba(124,247,196,0.5); }
.home .sound:active { translate: 0 1px; }
.home .sound[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.home .sound .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.home .sound .bars i { width: 2px; height: 4px; background: currentColor; transform-origin: 50% 100%; }
.home .sound[aria-pressed="true"] .bars i { animation: bar 900ms var(--ease-out) infinite alternate; }
.home .sound .bars i:nth-child(2) { animation-delay: 150ms; }
.home .sound .bars i:nth-child(3) { animation-delay: 300ms; }
@keyframes bar { to { transform: scaleY(3); } }
.home .sound-hint { margin: 0; max-width: 34ch; text-align: right; font-size: 12px; line-height: 1.5; color: var(--ink-mute); text-shadow: 0 1px 8px var(--bg); }
.home .sound-hint:empty { display: none; }
/* Over the galaxy the faintest ink drops under 4.5:1; the prompt and card arrows use the next step up. */
.home .terminal .cmd, .home .link-card .arrow { color: var(--ink-dim); }
/* The tune's progress: one tick per bar. */
.home .tune { display: flex; gap: 4px; align-items: center; padding: 0 6px; pointer-events: none; }
.home .tune[hidden] { display: none; }
.home .tune i { width: 6px; height: 6px; border: 1px solid rgba(124,247,196,0.55); transition: background-color 240ms var(--ease-out, ease-out); }
.home .tune i.on { background: #7CF7C4; }
.home .sound-hint { padding: 6px 10px; background: rgba(6,8,10,0.85); }
.sound-on .home .hx-hint { opacity: 0; }

/* Touch: every control at least 44 px tall */
@media (pointer: coarse) {
  .home .hx-nav a { display: inline-block; padding: 12px 2px; }
  .home .sound { min-height: 44px; }
  .home .instr button { min-height: 44px; }
  .pnl-ctl button { width: 44px; height: 44px; }
}

/* Section colours: one per section, defined once. The slab, the flood, the
   panel, the shipping card and the ticker link of a section all use it, so
   colour tells a visitor where they are. The JS keeps the same values in SEC_RGB. */
.home {
  --sec-about: #7CF7C4; --sec-pack: #5FE08A; --sec-start: #8FBBFF;
  --sec-log: #B79CFF; --sec-hi: #FFC27A; --sec-agents: #A9B4BC;
  --sec: var(--accent);
}
html[data-sec="about"] .home { --sec: var(--sec-about); }
html[data-sec="pack"] .home { --sec: var(--sec-pack); }
html[data-sec="start"] .home { --sec: var(--sec-start); }
html[data-sec="log"] .home { --sec: var(--sec-log); }
html[data-sec="hi"] .home { --sec: var(--sec-hi); }
html[data-sec="agents"] .home { --sec: var(--sec-agents); }
.home .sec-about { color: var(--sec-about); }
.home .sec-pack { color: var(--sec-pack); }
.home .sec-start { color: var(--sec-start); }
.home .sec-log { color: var(--sec-log); }
.home .sec-hi { color: var(--sec-hi); }

/* Colour flood: it grows out of the section's own slab (the JS sets --fx and
   --fy there), as a tint so the points and depth stay visible through it, and
   the rack dives a little towards that slab: opening a section is entering it. */
.home .hx { --ease-io: cubic-bezier(0.83, 0, 0.17, 1); --flood: #0b4d38; }
.home .hx[data-sec="about"] { --flood: #0d3a2d; }
.home .hx[data-sec="pack"] { --flood: #0b5a40; }
.home .hx[data-sec="start"] { --flood: #12305e; }
.home .hx[data-sec="log"] { --flood: #2c1a5c; }
.home .hx[data-sec="hi"] { --flood: #5a2d0c; }
.home .hx[data-sec="agents"] { --flood: #262a2e; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .home .hx[data-sec] { --flood: color-mix(in srgb, var(--sec) 30%, var(--bg)); }
}
.home .hx-flood {
  position: absolute; inset: 0; background: var(--flood); pointer-events: none; opacity: 0.6;
  clip-path: circle(0px at var(--fx, 60%) var(--fy, 45%)); transition: clip-path 600ms var(--ease-io), background-color 600ms var(--ease-out);
}
.home .hx.flooded .hx-flood { clip-path: circle(160vmax at var(--fx, 60%) var(--fy, 45%)); }
.home .hx-field { transform-origin: var(--fx, 50%) var(--fy, 45%); transition: transform 700ms var(--ease-io); }
.home .hx.lifted .hx-field { transform: translateY(-18vh) scale(1.08); }
.home .hx-body { transition: opacity 500ms var(--ease-out); }
.home .hx.flooded .hx-hint, .home .hx.flooded .hx-cue { opacity: 0; pointer-events: none; }
html.pnl-lock, html.pnl-lock body { overflow: hidden; }

.hx-tip {
  position: fixed; left: 0; top: 0; z-index: 35; pointer-events: none; opacity: 0;
  padding: 4px 8px; background: var(--accent); color: var(--bg); font-family: var(--font-mono); font-size: 12px;
  transition: opacity 200ms var(--ease-out);
}
.hx-tip.on { opacity: 1; }
.hx-load {
  position: fixed; left: 0; bottom: 0; z-index: 41; margin: 0; min-width: 320px; max-width: 100%;
  padding: 10px 16px; background: var(--sec, var(--accent)); color: var(--bg); font-family: var(--font-mono); font-size: 12px;
  transform: translateY(100%); transition: transform 400ms var(--ease-out);
}
.hx-load.on { transform: none; }

/* Section panel */
.pnl { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; pointer-events: none; }
.pnl-sheet {
  position: relative; pointer-events: auto; max-height: 64vh; overflow: auto; overscroll-behavior: contain;
  padding: 32px 32px 36px; background: rgba(8,11,12,0.97); border-top: 1px solid rgba(124,247,196,0.28);
  box-shadow: 0 -40px 80px -20px rgba(0,0,0,0.7);
  transform: translateY(102%); transition: transform 480ms var(--ease-out);
}
.pnl.open .pnl-sheet { transform: none; }
.pnl-ctl { position: absolute; top: 16px; right: 16px; display: flex; gap: 8px; }
.pnl-ctl button {
  width: 40px; height: 40px; cursor: pointer; font-family: var(--font-mono); font-size: 16px;
  background: transparent; color: var(--ink-bright); border: 1px solid rgba(255,255,255,0.18);
  transition: background 300ms var(--ease-out), color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.pnl-ctl button:hover { background: var(--sec, var(--accent)); color: var(--bg); border-color: var(--sec, var(--accent)); }
.pnl-body { max-width: 1180px; margin: 0 auto; transition: opacity 200ms var(--ease-out); }
.pnl-body.swap { opacity: 0; }
.pnl-kicker { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.16em; color: var(--sec, var(--accent)); }
.pnl-body h2 { margin: 0 0 8px; padding-right: 152px; font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink-bright); }
.pnl-lede { margin: 0 0 24px; max-width: 62ch; font-size: 16px; line-height: 1.6; color: var(--ink-mute); text-wrap: pretty; }
.pnl-mail { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 4vw, 40px); color: var(--ink-bright); }
.pnl-mail:hover { color: var(--accent); }
.pnl-strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-color: var(--accent) transparent; }
.pnl-card {
  flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  min-height: 180px; padding: 20px; border: 1px solid rgba(255,255,255,0.1); background: rgba(14,20,19,0.9);
  transition: border-color 300ms var(--ease-out), transform 400ms var(--ease-out), background 300ms var(--ease-out);
}
.pnl-card.big { flex-basis: 440px; background: linear-gradient(160deg, rgba(124,247,196,0.16), rgba(14,20,19,0.9) 60%); border-color: rgba(124,247,196,0.4); }
.pnl-card:hover { border-color: var(--sec, var(--accent)); }
/* Panel tints in the section colour where color-mix() exists; plain mint above otherwise. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .pnl-sheet { border-top-color: color-mix(in srgb, var(--sec) 45%, transparent); }
  .pnl-card.big { background: linear-gradient(160deg, color-mix(in srgb, var(--sec) 16%, transparent), rgba(14,20,19,0.9) 60%); border-color: color-mix(in srgb, var(--sec) 40%, transparent); }
}
.pnl-card:active { translate: 0 1px; }
.pnl-card .k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sec, var(--accent)); }
.pnl-card .t { font-family: var(--font-display); font-size: 24px; color: var(--ink-bright); }
.pnl-card .d { font-size: 14px; line-height: 1.6; color: var(--ink-dim); }
.pnl-links .link-card { flex: 0 0 260px; scroll-snap-align: start; }

/* ---------- Details below the fold ---------- */
.home .details { width: 100%; max-width: 940px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 28px; }
.home .details + .details { padding-bottom: 32px; }

.home .statement-wrap { padding: 18vh 0 14vh; }
.home .statement {
  margin: 0; max-width: 20ch; font-family: var(--font-display); font-weight: 500;
  font-size: clamp(32px, 5.6vw, 64px); line-height: 1.08; letter-spacing: -0.025em; color: var(--ink-bright);
}
.home .statement .hl { color: var(--accent); }
/* Each word lights as it crosses the screen, scrubbed by scroll; the script's
   word toggle (.io) is the fallback. Without either, the words are simply lit. */
@supports (animation-timeline: view()) {
  .home .statement .w { animation: lit linear both; animation-timeline: view(); animation-range: entry 40% cover calc(40% + var(--i) * 3%); }
  .home .statement .w.hl { animation-name: lit-hl; }
}
@keyframes lit { from { color: rgba(234,247,241,0.42); } to { color: var(--ink-bright); } }
@keyframes lit-hl { from { color: rgba(124,247,196,0.45); } to { color: var(--accent); text-shadow: 0 0 24px rgba(124,247,196,0.45); } }
.io .home .statement .w { color: rgba(234,247,241,0.42); transition: color 500ms var(--ease-out); }
.io .home .statement .w.on { color: var(--ink-bright); }
.io .home .statement .w.hl.on { color: var(--accent); text-shadow: 0 0 24px rgba(124,247,196,0.45); }

/* Ticker: one quiet row of real links, each in its section's colour. */
.home .ticker { position: relative; z-index: 2; overflow: hidden; margin: 2vh 0 9vh; padding: 10px 0; border-block: 1px solid var(--hairline); background: rgba(6,8,10,0.6); }
.home .ticker .track { display: flex; width: max-content; animation: tick 64s linear infinite; }
.home .ticker:hover .track { animation-play-state: paused; }
/* Keyboard focus: stop and return to the start, so the focusable first copy is in view. */
.home .ticker:focus-within .track { animation: none; transform: none; }
.home .ticker .set { display: flex; margin: 0; padding: 0; list-style: none; }
.home .ticker li { display: flex; align-items: center; white-space: nowrap; font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.home .ticker li::after { content: "✦" / ""; padding: 0 1.4em; color: var(--ink-fainter); }
.home .ticker a { opacity: 0.78; transition: opacity var(--t-2) var(--ease-out); }
.home .ticker a:hover, .home .ticker a:focus-visible { opacity: 1; }
@keyframes tick { to { transform: translateX(-25%); } }

.home .terminal { font-size: 14px; line-height: 1.7; }

/* Shipping cards: one spotlight lights every border at once, mouse only */
.home .work-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; perspective: none; }
.home .work-card {
  position: relative; isolation: isolate; min-height: 260px; padding: 24px; gap: 12px; justify-content: flex-end;
  background: linear-gradient(var(--surface), var(--surface)), var(--bg); transform-style: flat;   /* solid base: the galaxy never shows through the text */
  transition: border-color var(--t-2) var(--ease-out), transform var(--t-1) var(--ease-out);
}
.home .work-card::before, .home .work-card::after { content: ""; position: absolute; inset: -1px; pointer-events: none; opacity: 0; transition: opacity 400ms var(--ease-out); }
.home .work-card::before {
  padding: 1px; background: radial-gradient(260px circle at var(--x, -200px) var(--y, -200px), var(--accent), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.home .work-card::after { z-index: -1; background: radial-gradient(360px circle at var(--x, -200px) var(--y, -200px), rgba(124,247,196,0.1), transparent 50%); }
.home .work-grid:hover .work-card::before, .home .work-grid:hover .work-card::after { opacity: 1; }
@media (hover: none) { .home .work-card::before, .home .work-card::after { display: none; } }
.home .work-card:hover { transform: none; border-color: rgba(124,247,196,0.45); box-shadow: none; }
.home .work-card .num {
  position: absolute; top: 16px; right: 20px; font-family: var(--font-display); font-weight: 700; font-size: 72px; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(124,247,196,0.28); transition: -webkit-text-stroke-color 300ms var(--ease-out);
}
.home .work-card:hover .num { -webkit-text-stroke-color: rgba(124,247,196,0.8); }
.home .work-card .kicker { font-size: 12px; }
.home .work-card .title { font-size: 24px; letter-spacing: -0.01em; }
.home .work-card .desc { font-size: 14px; line-height: 1.6; text-wrap: pretty; }
.home .work-card .go { position: absolute; left: 24px; top: 20px; color: var(--accent); font-size: 18px; transition: transform 400ms var(--ease-out); }
.home .work-card:hover .go { transform: translate(3px, -3px); }
.home .work-card:active { transform: scale(0.985); }

.home .newsletter { padding: 32px; margin-top: 0; }
.home .newsletter .copy .title { font-size: 28px; }
.home .newsletter .copy .sub { font-size: 14px; }
.home .newsletter input[type="email"] { font-size: 16px; }
.home .newsletter input[type="email"]:focus { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(124,247,196,0.35); }
/* The form and its script are unchanged; the button shows a working state
   from the [disabled] attribute the script already sets. */
.home .newsletter button { position: relative; overflow: hidden; font-size: 12px; transition: filter 300ms var(--ease-out), translate var(--t-1) var(--ease-out); }
.home .newsletter button:active { translate: 0 1px; }
.home .newsletter button[disabled] { cursor: progress; filter: saturate(0.7); }
.home .newsletter button[disabled]::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 40%; height: 2px; background: rgba(6,8,10,0.5);
  animation: scan 1s var(--ease-out) infinite;
}
@keyframes scan { from { translate: -100% 0; } to { translate: 260% 0; } }
.home .newsletter .sent-msg { font-size: 14px; }

/* Contacts */
.home .contact { display: flex; flex-direction: column; gap: 24px; padding-top: 8vh; }
.home .contact-lede { margin: 0; font-size: 14px; color: var(--ink-mute); }
.home .mega-mail {
  align-self: flex-start; max-width: 100%; overflow-wrap: anywhere;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 7vw, 76px); line-height: 1; letter-spacing: -0.035em;
  color: var(--ink-bright);
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0% 3px no-repeat;
  padding-bottom: 8px; transition: background-size 500ms var(--ease-out), color 300ms var(--ease-out);
}
.home .mega-mail:hover { color: var(--accent); background-size: 100% 3px; }
.home .contact .link-grid { gap: 12px; perspective: none; }
.home .contact .link-card, .pnl-links .link-card {
  position: relative; overflow: hidden; isolation: isolate; transform-style: flat;
  transition: border-color 300ms var(--ease-out), color 300ms var(--ease-out);
}
.home .contact .link-card::before, .pnl-links .link-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 500ms var(--ease-out);
}
.home .contact .link-card:hover, .pnl-links .link-card:hover { transform: none; box-shadow: none; border-color: var(--accent); }
.home .contact .link-card:hover::before, .pnl-links .link-card:hover::before { transform: scaleX(1); }
.home .contact .link-card:hover .title, .home .contact .link-card:hover .sub,
.home .contact .link-card:hover .icon, .home .contact .link-card:hover .arrow,
.pnl-links .link-card:hover .title, .pnl-links .link-card:hover .sub,
.pnl-links .link-card:hover .icon, .pnl-links .link-card:hover .arrow { color: var(--bg); border-color: rgba(6,8,10,0.4); }
.home .contact .link-card:active { translate: 0 1px; }
.home .contact .link-card .title { font-size: 16px; }
.home .contact .link-card .sub { font-size: 12px; }
.home .contact .link-card .arrow { transition: transform 400ms var(--ease-out), color 300ms var(--ease-out); }
.home .contact .link-card:hover .arrow { transform: translate(3px, -3px); }

.home .foot { max-width: 940px; margin: 0 auto; padding: 48px 24px 40px; font-size: 12px; }

/* Reveals: scrubbed by scroll where supported; the script's observer (.io) otherwise */
@supports (animation-timeline: view()) {
  .home [data-reveal]:not([data-reveal="kids"]), .home [data-reveal="kids"] > * {
    animation: rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 55%;
  }
}
@keyframes rise { from { opacity: 0; translate: 0 32px; } }
.io .home [data-reveal]:not([data-reveal="kids"]), .io .home [data-reveal="kids"] > * {
  opacity: 0; translate: 0 32px;
  transition: opacity 500ms var(--ease-out) var(--d, 0ms), translate 500ms var(--ease-out) var(--d, 0ms), border-color var(--t-2) var(--ease-out);
}
.io .home [data-reveal].in:not([data-reveal="kids"]), .io .home [data-reveal="kids"].in > *,
.io .home [data-reveal]:not([data-reveal="kids"]):focus-within, .io .home [data-reveal="kids"] > :focus-within { opacity: 1; translate: 0 0; }

@media (max-width: 760px) {
  .home { --hx-pad: 16px; }
  .home .hx-stage { padding-top: 20px; padding-bottom: 24px; }
  .home .hx-body { padding: 24px 0 56px; }
  .home .hx-hint { bottom: 64px; font-size: 11px; letter-spacing: 0.16em; }
  .home .hx-nav { font-size: 11px; }
  .home .hx-avatar { width: 48px; height: 48px; }
  .pnl-sheet { max-height: 72vh; padding: 24px 16px 28px; }
  .pnl-body h2 { padding-right: 0; margin-top: 40px; }
  .pnl-card, .pnl-card.big { flex-basis: 78vw; }
  .home .hx-copy { gap: 20px; }
  .home .hx-name { font-size: clamp(52px, 17vw, 88px); }
  .home .tagline { font-size: 15px; }
  .home a.cta { width: 100%; }
  .home .statement-wrap { padding: 12vh 0 8vh; }
  .home .work-grid { grid-template-columns: 1fr; }
  .home .work-card { min-height: 200px; }
  .home .newsletter { padding: 24px; }
  .home .newsletter .copy .title { font-size: 24px; }
}
@media (max-height: 700px), (max-width: 760px) { .home .hx-cue { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .home a.cta::after, .home .hx-cue i::after, .home .ticker .track, .home .sound .bars i, .home .newsletter button[disabled]::after { animation: none; }
  .home .ticker { overflow-x: auto; }
  .home .statement .w, .home [data-reveal]:not([data-reveal="kids"]), .home [data-reveal="kids"] > * { animation: none; }
  .cursor-glow { display: none; }
  .home .work-card:hover, .home .work-card:active { transform: none; }
  .home .hx-flood, .home .hx-field, .pnl-sheet, .hx-load, .home .hx-peek { transition: none; }
}

/* The top line: name, sections and status in one quiet row with no box, so
   it blends into the scene. The 00 index, the section LEDs and the dashed
   leader come from the rack; hovering a section lights its LED and turns the
   leader its colour. */
.home .hx-top.tn { display: flex; flex-direction: column; gap: 10px; --lc: 124,247,196; }
.home .tn-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; }
.home .tn-id { display: flex; align-items: baseline; gap: 12px; }
.home .tn-idx { margin: 0; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.home .bl-title { position: relative; }
.home .bl-name { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink-bright); white-space: nowrap; }
.home .hx-nav.tn-ports { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; }
.home .hx-nav.tn-ports a { display: inline-flex; align-items: center; gap: 7px; }
.home .hx-nav.tn-ports a[data-open]::before {
  content: ""; width: 6px; height: 6px; flex-shrink: 0; background: rgba(var(--c), 0.45);
  transition: background 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.home .hx-nav.tn-ports a[data-open]:hover, .home .hx-nav.tn-ports a[data-open]:focus-visible { color: rgb(var(--c)); }
.home .hx-nav.tn-ports a[data-open]:hover::before, .home .hx-nav.tn-ports a[data-open]:focus-visible::before { background: rgb(var(--c)); box-shadow: 0 0 10px rgba(var(--c), 0.9); }
.home .tn-status { display: flex; align-items: center; gap: 7px; margin-left: auto; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.home .hx-top.tn .hx-line { margin: 0; }
/* The leader under the row: dashed, fading out to the right. */
.home .tn-rule {
  display: block; height: 1px; width: 100%; max-width: 760px;
  background: repeating-linear-gradient(90deg, rgba(var(--lc), 0.55) 0 4px, transparent 4px 8px);
  -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent);
  transition: background 300ms var(--ease-out);
}
.home .hx-top.tn:has([data-open="pack"]:hover, [data-open="pack"]:focus-visible) { --lc: 95,224,138; }
.home .hx-top.tn:has([data-open="start"]:hover, [data-open="start"]:focus-visible) { --lc: 143,187,255; }
.home .hx-top.tn:has([data-open="log"]:hover, [data-open="log"]:focus-visible) { --lc: 183,156,255; }
.home .hx-top.tn:has([data-open="hi"]:hover, [data-open="hi"]:focus-visible) { --lc: 255,194,122; }

/* The name flickers once on load (two flashes in 450 ms, two offset ghosts in
   the ring colours), the LEDs come up one by one and the leader draws in.
   Nothing moves after that. The ghosts are pseudo-elements, so the name is in
   the page once. */
.home .bl-title::before, .home .bl-title::after {
  content: "Tushar Verma"; position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: 0.01em; text-transform: uppercase;
}
.home .bl-title::before { color: rgb(124,247,196); }
.home .bl-title::after { color: rgb(183,156,255); }
@media (prefers-reduced-motion: no-preference) {
  .js .home .bl-name { animation: bl-flick 450ms steps(1, end) 700ms both; }
  .js .home .bl-title::before { animation: bl-g1 450ms steps(1, end) 700ms both; }
  .js .home .bl-title::after { animation: bl-g2 450ms steps(1, end) 700ms both; }
  .js .home .hx-nav.tn-ports a[data-open]::before { animation: bl-led 1ms steps(1, end) calc(300ms + var(--n) * 110ms) backwards; }
  .js .home .tn-rule { animation: bl-draw 700ms var(--ease-out) 900ms backwards; }
}
@keyframes bl-flick { 0% { opacity: 1; } 15% { opacity: 0.35; } 28% { opacity: 1; } 60% { opacity: 0.6; } 70%, 100% { opacity: 1; } }
@keyframes bl-g1 {
  0% { opacity: 0; } 15% { opacity: 0.9; transform: translateX(-5px); clip-path: inset(12% 0 55% 0); }
  28% { opacity: 0.8; transform: translateX(4px); clip-path: inset(62% 0 6% 0); }
  42% { opacity: 0; } 60% { opacity: 0.8; transform: translateX(-3px); clip-path: inset(38% 0 36% 0); } 70%, 100% { opacity: 0; }
}
@keyframes bl-g2 {
  0% { opacity: 0; } 15% { opacity: 0.85; transform: translateX(5px); clip-path: inset(50% 0 18% 0); }
  28% { opacity: 0.7; transform: translateX(-3px); clip-path: inset(8% 0 70% 0); }
  42% { opacity: 0; } 60% { opacity: 0.7; transform: translateX(3px); clip-path: inset(20% 0 58% 0); } 70%, 100% { opacity: 0; }
}
@keyframes bl-led { from { background: rgba(var(--c), 0); } }
@keyframes bl-draw { from { clip-path: inset(0 100% 0 0); } }
/* Phones: the name and status on one line, the sections wrap under it. */
@media (max-width: 759px) {
  .home .tn-row { gap: 4px 16px; }
  .home .tn-id { flex: 1 1 auto; }
  .home .tn-status { order: 1; margin-left: 0; }
  .home .hx-nav.tn-ports { order: 2; flex-basis: 100%; gap: 0 14px; }
}
@media (max-height: 540px) { .home .hx-hint { bottom: 60px; } }
/* The focused layer's card (touchable cube): its label, one line and Open. */
.home .hx-peek {
  position: absolute; left: 0; top: 0; z-index: 5; width: min(300px, calc(100vw - 32px)); padding: 12px 14px;
  border: 1px solid rgba(var(--c, 124,247,196), 0.4); background: rgba(6,8,10,0.86);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms var(--ease-out), visibility 0s linear 300ms;
}
.home .hx-peek.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 300ms var(--ease-out); }
.home .hx-peek.measure { visibility: hidden; transition: none; }
@media (min-width: 760px) and (max-height: 540px) { .home .hx-peek { width: 240px; padding: 10px 12px; } .home .hx-peek-d { font-size: 12px; margin-bottom: 8px; } }
/* Hidden visually, read by screen readers. */
.home .hx-said { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.home .hx-peek-k { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.2em; color: rgb(var(--c, 124,247,196)); }
.home .hx-peek-d { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: var(--ink); }
.home .hx-stage.lay-fwd .hx-hint, .home .hx-stage.lay-fwd .hx-cue { opacity: 0; pointer-events: none; }
.home .hx-stage.lay-fwd .hx-cue { visibility: hidden; }   /* out of the tab order too */
.home .hx-peek-row { display: flex; gap: 6px; }
.home .hx-peek-row .hx-peek-go { flex: 1; }
.home .hx-peek-step {
  font: inherit; font-size: 18px; line-height: 1; min-width: 44px; min-height: 44px; padding: 0;
  border: 1px solid rgba(var(--c, 124,247,196), 0.4); background: transparent; color: rgb(var(--c, 124,247,196)); cursor: pointer;
}
.home .hx-peek-step:hover { background: rgba(var(--c, 124,247,196), 0.12); }
.home .hx-peek-step:focus-visible, .home .hx-peek-go:focus-visible { outline: 2px solid rgb(var(--c, 124,247,196)); outline-offset: 2px; }
.home .hx-peek-go {
  font: inherit; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; min-height: 44px; padding: 0 16px;
  border: 0; background: rgb(var(--c, 124,247,196)); color: #06080a; cursor: pointer;
}
/* The endless flight past the end of the page: the page fades back (opacity only, so focus stays put).
   :where() keeps the #hero exception from outweighing the sections' own rules. */
.home main > :where(:not(#hero)), .home .footer { transition: opacity 600ms var(--ease-out); }
.voy-on .home main > :where(:not(#hero)), .voy-on .home .footer, .voy-on .home .bg-grid, .voy-on .home .bg-glow { opacity: 0; transition: opacity 900ms var(--ease-out); }
.voy-on .home main > :where(:not(#hero)), .voy-on .home .footer { pointer-events: none; }
html.voy-edge { overscroll-behavior-y: none; }
.home .voy-back {
  position: fixed; left: var(--hx-pad, 16px); bottom: 20px; z-index: 35; min-height: 44px; padding: 0 16px;
  font: inherit; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  border: 1px solid rgba(124,247,196,0.4); background: rgba(6,8,10,0.7); color: var(--accent);
  opacity: 0; visibility: hidden; transition: opacity 400ms var(--ease-out), visibility 0s linear 400ms, background-color 240ms var(--ease-out);
}
.home .voy-back.show { opacity: 1; visibility: visible; transition: opacity 600ms var(--ease-out), visibility 0s, background-color 240ms var(--ease-out); }
.home .voy-back:hover { background: rgba(124,247,196,0.12); }
.home .voy-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }