/* gautham.co landing:the name as a sticker, sunlight that follows you, tags that pop out */
.home{background:var(--paper);transition:background-color .45s var(--ease-out)}
/* while the globe is up the blue gives way to a light grey, so the work sits on stone, not paper */
.home.grid-on{background:var(--fill-2)}
.stage{position:relative;width:min(1520px,calc(100vw - 2*var(--side)));height:calc(100svh - 72px);min-height:560px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;padding:28px 18px 22px;font-size:var(--fs-small);line-height:1.4}
.corner p,.corner li{color:var(--ink-2)}
.corner .lab{color:var(--grey);font-size:var(--fs-caption);margin-bottom:6px}
.corner a{text-decoration:none;transition:color var(--dur-base) ease}
@media (hover:hover){.corner a:hover{color:var(--grey)}}
.tl{grid-area:1/1}.tl ul{list-style:none;display:grid;grid-template-columns:repeat(2,max-content);column-gap:22px;row-gap:2px}
.tr{grid-area:1/2;justify-self:end;display:grid;grid-template-columns:minmax(0,300px);gap:28px;text-align:left}
.bl{grid-area:3/1;align-self:end}
.br{grid-area:3/2;justify-self:end;align-self:end}
.mono{font-family:var(--sans);font-size:var(--fs-caption);letter-spacing:.02em}
.bl .links{display:flex;gap:16px;margin-top:10px}
.bl .links a{text-decoration:underline;text-underline-offset:3px}
.clock{display:inline-block;border:1px solid var(--grey-3);border-radius:var(--r-pill);padding:6px 14px;font-size:var(--fs-body);color:var(--ink)}
.clock .c{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}

.name{grid-area:2/1/3/3;align-self:center;justify-self:center;position:relative;width:min(1100px,92%);margin:0;user-select:none;-webkit-user-select:none}
.name .nm{display:block;width:100%;text-align:center;font-weight:600;font-size:min(19vw,290px);line-height:1;letter-spacing:-.055em;color:var(--ink)}

/* tags:plain grey words with a dot, rising in one after another */
.tag{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;font-size:var(--fs-small);font-weight:400;letter-spacing:0;line-height:1;color:var(--grey);white-space:nowrap;pointer-events:none;
  opacity:0;transform:translate(-50%,calc(-50% + 12px));filter:blur(3px);transition:opacity var(--dur-quick) ease,transform var(--dur-quick) ease,filter var(--dur-quick) ease}
.tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink)}
.tag:nth-of-type(1){left:14%;top:-10%}.tag:nth-of-type(2){left:50%;top:-14%}.tag:nth-of-type(3){left:86%;top:-8%}.tag:nth-of-type(4){left:30%;top:112%}.tag:nth-of-type(5){left:72%;top:116%}
.name.on .tag{opacity:1;transform:translate(-50%,-50%);filter:none;transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out),filter var(--dur-reveal) var(--ease-out)}
.name.on .tag:nth-of-type(2){transition-delay:40ms}.name.on .tag:nth-of-type(3){transition-delay:80ms}.name.on .tag:nth-of-type(4){transition-delay:120ms}.name.on .tag:nth-of-type(5){transition-delay:160ms}

.cur{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity var(--dur-base) ease,transform var(--dur-base) var(--ease-spring);pointer-events:none;z-index:2}
.cur svg{width:26px;height:26px;color:var(--ink)}
.name.on .cur{opacity:1;transform:scale(1)}

.stage>*{animation:rise var(--dur-reveal) var(--out) both}
.stage .name{animation-delay:.05s}.stage .tl{animation-delay:.2s}.stage .tr{animation-delay:.26s}.stage .bl{animation-delay:.32s}.stage .br{animation-delay:.38s}

@media (max-width:760px){
  .stage{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto auto;height:auto;min-height:calc(100svh - 110px);row-gap:24px}
  .tl,.tr,.bl,.br{grid-area:auto;justify-self:start}
  .tr{grid-template-columns:1fr}
  .name{grid-area:auto;width:100%;cursor:auto}
  .cur{display:none}
}
@media (prefers-reduced-motion:reduce){.stage>*{animation:none}.tag,.cur{transition:none}.clock .c{animation:none}}
/* outlined name:a hairline that scales with the type */
.name .nm{color:var(--ink);filter:url(#outline);letter-spacing:-.035em}

/* numbers line up without a mono font */
.mono,.clock{font-variant-numeric:tabular-nums}
svg.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tl ul{grid-template-columns:max-content}
/* About sits top left at a reading width; Worked with and Contact share the right */
.tl>div{max-width:300px}
.tr ul{list-style:none;display:grid;row-gap:2px}
/* the time reads like the coordinates:same size, tracking and colour, no pill */
.clock{border:0;border-radius:0;padding:0;font-size:var(--fs-caption);letter-spacing:.02em;color:inherit}

/* mushroom trail:the same motion as the Antseed cover trail */
.mtrail{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.mtrail img{position:absolute;height:clamp(110px,14vw,170px);width:auto;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.92);opacity:0;
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);will-change:transform,opacity}
.mtrail img.on{opacity:1;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(1)}
.mtrail canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity var(--dur-quick) ease}
.grid-on .mtrail canvas{opacity:0}
.mtrail img.off{opacity:0;transform:translate(-50%,-50%) rotate(var(--r,0deg)) scale(.96);transition:opacity var(--dur-base) var(--ease-in),transform var(--dur-base) var(--ease-in)}

/* sound toggle:sits beside the time, reads like it */
.br{display:flex;align-items:baseline;gap:18px}
.snd{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:5px;color:var(--grey);font-size:var(--fs-caption);letter-spacing:.02em;transition:color var(--dur-base) ease}
.snd[aria-pressed="true"]{color:var(--ink-2)}
.snd svg{width:13px;height:13px;flex:none}.snd span{margin-left:2px}
/* the chat hint beside the toggle reads like the clock: same size and ink */
.br .pc-chat-hint{font-size:var(--fs-caption);letter-spacing:.02em;color:var(--ink)}
@media (hover:hover){.snd:hover{color:var(--ink)}}
/* sound nudge: shown beside the toggle when the browser held sound back (sound.js) */
.br{position:relative}
.snd-nudge{all:unset;box-sizing:border-box;position:absolute;white-space:nowrap;cursor:pointer;
  padding:6px 10px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font-size:var(--fs-caption);letter-spacing:.01em;line-height:1.2;
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-in),transform var(--dur-slow) var(--ease-in)}
.snd-nudge.on{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
.snd-nudge::after{content:"";position:absolute;top:100%;left:calc(var(--tail,30px) - 5px);border:5px solid transparent;border-top-color:var(--ink)}
.snd-nudge.side{transform:translate(-4px,-50%)}.snd-nudge.side.on{transform:translate(0,-50%)}
.snd-nudge.side::after{top:50%;left:100%;margin-top:-5px;border-top-color:transparent;border-left-color:var(--ink)}
@media (hover:hover){.snd-nudge:hover{background:var(--ink-hover)}.snd-nudge:hover::after{border-top-color:var(--ink-hover)}.snd-nudge.side:hover::after{border-top-color:transparent;border-left-color:var(--ink-hover)}}
.snd-nudge:focus-visible{outline:2px solid rgba(17,17,17,.35);outline-offset:3px}
.snd:focus-visible{outline:2px solid rgba(17,17,17,.35);outline-offset:3px;border-radius:var(--r-pic)}

/* the sky:a blue that pools at the bottom of the page and fades to white behind the words.
   On load it rises out of a soft blur, then the corners come in, then the trail sweeps across. */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(to bottom,var(--paper) 22%,var(--sky-5) 100%);overflow:hidden;
  transform-origin:50% 100%;animation:sky-in 1.6s var(--out) backwards;transition:opacity .9s var(--out)}
/* the blues live on two layers of their own that drift very slowly, always, so the sky never sits quite still.
   Only transform moves (cheap for the browser), the two loops run at different lengths so the pattern never repeats exactly */
.sky::before,.sky::after{content:"";position:absolute;inset:-8%;will-change:transform}   /* 8% bleed so the drift never shows an edge; the gradients are scaled to match */
.sky::before{background:radial-gradient(77.6% 53.4% at 50% 103.4%,var(--sky-1) 0%,var(--sky-2) 38%,transparent 72%);
  transform-origin:50% 100%;animation:sky-drift-a 23s ease-in-out infinite alternate}
.sky::after{background:radial-gradient(47.4% 41.4% at 10.3% 96.6%,var(--sky-3) 0%,transparent 70%),radial-gradient(47.4% 41.4% at 91.4% 93.1%,var(--sky-4) 0%,transparent 70%);
  animation:sky-drift-b 31s ease-in-out infinite alternate}
@keyframes sky-drift-a{0%{transform:translate3d(-3%,0,0) scaleY(1)}100%{transform:translate3d(3%,-1.5%,0) scaleY(1.07)}}
@keyframes sky-drift-b{0%{transform:translate3d(3%,1%,0)}100%{transform:translate3d(-3%,-2%,0)}}
/* while the work is up the sky clears to white, slowly, so the work sits on paper */
.grid-on .sky{opacity:0;transition:opacity .7s ease}
@keyframes sky-in{from{opacity:0;transform:translateY(14%) scaleY(.8);filter:blur(40px)}}
.stage .name{animation-delay:.35s}.stage .tl{animation-delay:.5s}.stage .tr{animation-delay:.56s}.stage .bl{animation-delay:.62s}.stage .br{animation-delay:.68s}
@media (prefers-reduced-motion:reduce){.sky,.sky::before,.sky::after{animation:none}}

/* worked with: a company's work in two rows drifting across the open middle of the page while you point at its name */
.wgrid{grid-area:2/1/3/3;position:relative;z-index:3;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:10px;margin:28px calc(-1 * var(--side,18px));
  overflow:hidden;pointer-events:none;visibility:hidden;opacity:0;filter:blur(8px);transition:opacity var(--dur-quick) ease-in,filter var(--dur-quick) ease-in,visibility 0s linear var(--dur-quick);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wgrid.on{pointer-events:auto;visibility:visible;opacity:1;filter:none;transition:opacity var(--dur-reveal) var(--out),filter var(--dur-reveal) var(--out)}
.wg-row{overflow:hidden;flex:none;contain:layout paint}
/* glass edges: the canvas does its own bending at the sides, so no fade mask */
.wgrid.gl{-webkit-mask-image:none;mask-image:none}
/* the rows run edge to edge of the window, so the glass bends right at the browser's sides */
.wgrid{width:100vw;margin-left:calc((100% - 100vw) / 2);margin-right:0;justify-self:start}
.home{overflow-x:clip}
.wg-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
/* drift on the compositor: its own layer, whole-track transform only, so nothing inside triggers layout */
.wg-track{display:flex;gap:10px;height:100%;width:max-content;animation:wg-drift var(--dur) linear infinite;will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
.wg-row.rev .wg-track{animation-direction:reverse}
.wgrid:hover .wg-track{animation-play-state:paused}
@keyframes wg-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-50% - 5px),0,0)}}
.wgrid figure{position:relative;flex:none;contain:paint;height:100%;margin:0;border-radius:var(--r-sm);overflow:hidden;background:var(--fill)}
.wgrid img,.wgrid video{display:block;width:100%;height:100%;object-fit:cover}
.wgrid .cuts img{position:absolute;inset:0;opacity:0}
.wgrid .cuts img.on{opacity:1}
/* while the work is up the specimens fade back */
.grid-on .mtrail img{opacity:0!important;transition:opacity var(--dur-quick) ease}
@media (prefers-reduced-motion:reduce){.wg-track{animation:none}.wgrid{transition:none}}

/* motifs from the 2023 site, in black, sitting above the time in the bottom right */
.br{flex-wrap:wrap;justify-content:flex-end;row-gap:14px}
.motifs{flex-basis:100%;display:flex;justify-content:flex-end;gap:14px;color:var(--ink)}
.motifs .mo{width:44px;height:44px;display:block}

/* worked with, scatter mode: the best work thrown across the open middle as tilted cards (see home.js) */
/* one line of copy: the names in ink, the rest quieter */
.worked .wl b{font-weight:inherit;color:var(--ink)}
.worked .wl .more{color:var(--grey)}
.worked .wl{cursor:pointer}
/* on hover a wavy underline drifts along under the line, like it's waving you over to the work */
.worked .wv{padding-bottom:5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4' viewBox='0 0 12 4'%3E%3Cpath d='M0 2Q3 0 6 2T12 2' fill='none' stroke='%23111' stroke-opacity='.35' stroke-width='1.2'/%3E%3C/svg%3E") 0 100%/12px 4px repeat-x;
  background-size:12px 0;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size var(--dur-base) ease}
.worked:hover .wv,.worked:focus-visible .wv{background-size:12px 4px;animation:wv-drift .6s linear infinite}
@keyframes wv-drift{to{background-position-x:12px}}
@media (prefers-reduced-motion:reduce){.worked:hover .wv,.worked:focus-visible .wv{animation:none}}
.scatter{grid-area:2/1/3/3;position:relative;z-index:3;align-self:stretch;width:100vw;margin:22px 0 22px calc((100% - 100vw) / 2);pointer-events:none;visibility:hidden}
.scatter.on{visibility:visible}
.sc-card{position:absolute;margin:0;border-radius:var(--r-sm);overflow:hidden;background:var(--fill);pointer-events:auto;cursor:default;
  box-shadow:0 1px 2px rgba(14,12,26,.06),0 18px 40px -18px rgba(14,12,26,.28);transform:rotate(var(--r));
  transition:translate .6s var(--out),scale .35s var(--out),rotate .35s var(--out),box-shadow .35s var(--out)}
.sc-card img,.sc-card video{display:block;width:100%;height:100%;object-fit:cover}
@media (hover:hover){.sc-card:hover{scale:1.06;rotate:calc(-1 * var(--r));z-index:40!important;box-shadow:0 2px 4px rgba(14,12,26,.08),0 28px 60px -20px rgba(14,12,26,.38)}}
/* the sky clears as the cards come in: same curve, a touch longer, so white is there by the time they land */
.grid-on .sky{transition:opacity .4s var(--ease-out)}
/* a hairline around cards whose work starts on white, so they read against the page */
.sc-card.edge{outline:1px solid rgba(17,17,17,.12);outline-offset:-1px}

/* worked with, globe mode: the best work as a turning globe of cards (see home.js) */
/* the globe fills the window (and is cut at its edges); the text sits above it */
.globe{position:fixed;inset:0;z-index:3;overflow:clip;pointer-events:none;visibility:hidden}
.home .stage>.corner{position:relative;z-index:4}
.globe.on{visibility:visible}
.gl-card{position:absolute;left:0;top:0;margin:0;border-radius:var(--r-xs);overflow:hidden;background:var(--fill);pointer-events:auto;cursor:grab;
  transform-origin:50% 50%;will-change:translate,transform,opacity;box-shadow:0 1px 2px rgba(14,12,26,.06),0 12px 28px -14px rgba(14,12,26,.3);
  transition:scale .5s var(--out),box-shadow .5s var(--out)}
.gl-card img,.gl-card video{display:block;width:100%;height:100%;object-fit:cover}
.gl-card .gl-still{position:absolute;inset:0}.gl-card.live .gl-still{visibility:hidden}
/* hover: a quiet lift, no pop */
@media (hover:hover){.gl-card:hover{scale:1.05;box-shadow:0 1px 2px rgba(14,12,26,.07),0 16px 34px -16px rgba(14,12,26,.34)}}
.gl-card.edge{outline:1px solid rgba(17,17,17,.12);outline-offset:-1px}
.gl-hit{position:absolute;border-radius:50%;pointer-events:auto;cursor:grab;z-index:0}
.globe{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;-webkit-tap-highlight-color:transparent}
.globe.grabbing,.globe.grabbing .gl-card,.globe.grabbing .gl-hit{cursor:grabbing}
/* pressed: the card dips at once under the finger or the click; grabbing settles it quickly, letting go eases it back */
.globe.grabbing .gl-card{transition-duration:.15s}
.globe.grabbing .gl-card:hover{scale:1}
.globe .gl-card.press,.globe.grabbing .gl-card.press:hover{scale:.96;transition-duration:.1s}
.worked:focus{outline:none}.worked:focus-visible{outline:1.5px solid var(--ink);outline-offset:6px;border-radius:var(--r-xs)}
.gl-scan{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:150}

/* phones and tablets: no hover, so "Worked with" says it can be tapped, and how to put it away */
@media not ((hover:hover) and (pointer:fine)){
  .worked .lab::after{content:" · Tap to see a few";color:var(--ink-2)}
  .worked[aria-expanded="true"] .lab::after{content:" · Tap to close"}
  .worked{cursor:pointer;-webkit-tap-highlight-color:transparent}
}
/* on a phone the contact and the time sit where the globe opens, so they step back while it is up */
@media (max-width:760px),(max-height:520px){
  .home .stage>.bl,.home .stage>.br{transition:opacity var(--dur-base) ease}
  .home.grid-on .stage>.bl,.home.grid-on .stage>.br{opacity:0;pointer-events:none}
}
/* a phone on its side: the four corners fit in the window, no scroll */
@media (min-width:761px) and (max-height:520px){.stage{min-height:0;height:calc(100svh - 64px);padding-top:16px;padding-bottom:14px}.motifs{display:none}}
/* the key guide under the globe: quiet, centred, only while it is open */
.gl-keys{position:fixed;left:50%;bottom:22px;z-index:5;display:flex;gap:16px;align-items:center;translate:-50% 6px;opacity:0;pointer-events:none;
  padding:6px 8px 6px 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.82);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);box-shadow:0 1px 2px rgba(17,17,17,.06),0 8px 24px -12px rgba(17,17,17,.25);
  font-size:var(--fs-caption);color:#555;white-space:nowrap;transition:opacity .3s var(--out),translate .3s var(--out)}
.grid-on .gl-keys{opacity:1;translate:-50% 0;transition-delay:.25s}
.gl-keys .k{display:inline-flex;gap:4px;align-items:center}
.gl-keys kbd{font:inherit;font-size:var(--fs-caption);line-height:1;min-width:18px;padding:3px 5px;border-radius:var(--r-xs);background:#fff;border:1px solid var(--line);color:var(--ink);text-align:center;box-shadow:0 1px 0 rgba(17,17,17,.06)}
@media (max-width:700px){.gl-keys .k{display:none}}
/* phones and tablets: no keys, so the guide just says drag and tap, for a few seconds after opening (home.js), and sits
   above the Close button when the globe has the whole screen. In crisp, out quicker */
@media not ((hover:hover) and (pointer:fine)){
  .gl-keys{padding:8px 14px;gap:8px;transition:opacity .18s var(--out),translate .18s var(--out)}
  .gl-keys .sep{color:#aaa}
  .grid-on .gl-keys:not(.hint){opacity:0;translate:-50% 6px;transition-delay:0s;transition-duration:.12s}
  .gl-full .gl-keys{bottom:calc(20px + 44px + 12px + env(safe-area-inset-bottom))}
}
/* phones and small tablets: the footer is one band, contact on the left, motifs over sound and time on the right, bottoms lined up */
@media (max-width:760px){
  .stage{grid-template-columns:minmax(0,1fr) auto;column-gap:16px}
  .stage>*{grid-column:1/-1}
  .stage>.bl{grid-column:1;grid-row:-2}
  .stage>.br{grid-column:2;grid-row:-2;justify-self:end;align-self:end;display:grid;grid-template-columns:auto auto;align-items:baseline;justify-items:end;column-gap:14px;row-gap:12px}
  .br .motifs{grid-column:1/-1;gap:10px}.br .motifs .mo{width:36px;height:36px}
  .br .snd,.br .clock{white-space:nowrap}
}
/* the narrowest phones: no room side by side, so the motifs, sound and time go on a row of their own under the contact */
@media (max-width:370px){
  .stage>.bl{grid-column:1/-1;grid-row:-3}
  .stage>.br{grid-column:1/-1;grid-row:-2;justify-self:stretch;grid-template-columns:1fr auto;justify-items:start}
  .br .motifs{justify-content:flex-start}.br .clock{justify-self:end}
}
/* phones, opened from Work: the globe has the whole screen under the bar, the page holds still, and a close button sits at the bottom */
.gl-close{display:none}
.home.gl-full .stage>.corner{opacity:0;pointer-events:none;transition:opacity var(--dur-base) ease}
html:has(.gl-full){overflow:hidden}
.home.gl-full .gl-close{all:unset;position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));z-index:5;translate:-50% 0;display:flex;align-items:center;gap:8px;
  min-height:44px;box-sizing:border-box;padding:0 20px 0 16px;border-radius:var(--r-pill);background:rgba(255,255,255,.88);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);
  box-shadow:0 1px 2px rgba(17,17,17,.06),0 8px 24px -12px rgba(17,17,17,.25);font-size:var(--fs-small);color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;
  animation:gl-close-in .3s var(--out) .2s both}
.gl-close svg{width:14px;height:14px}
.gl-close:focus-visible{outline:2px solid rgba(17,17,17,.35);outline-offset:2px}
@keyframes gl-close-in{from{opacity:0;translate:-50% 6px}}
@media (prefers-reduced-motion:reduce){.home.gl-full .gl-close{animation:none}}
/* coming back after the full-screen globe: the page's own entry (rise, as on load), under a new name so it replays */
@keyframes rise-back{from{opacity:0;transform:translateY(8px);filter:blur(4px)}}
/* phones: leaving the full-screen globe, the page text comes back the way it came in on load, as the cards finish leaving */
.home.gl-back-full .stage>.corner{animation:rise-back var(--dur-reveal) var(--out) .3s both}
.home.gl-back-full .stage>.tr{animation-delay:.36s}.home.gl-back-full .stage>.bl{animation-delay:.42s}.home.gl-back-full .stage>.br{animation-delay:.48s}