/* The homepage (Anand, 4 Oct 2026: the STANFEST homepage brief). Viewport-led, no scroll: the nav, the H1, three
   festival objects and a metadata rail. The look follows his reference image as art direction, rebuilt as web UI.
   Motion only from the story (the intro), the visitor's input or a state change; at rest nothing moves.
   Behaviour lives in home.js; this file is layout, look and the simple hover/focus states. */
:root{
  --motion-instant:80ms; --motion-fast:140ms; --motion-ui:220ms; --motion-enter:450ms; --motion-hero:700ms;
  --ease-ui:cubic-bezier(.2,.8,.2,1);
  --hm-cream:#F4EEDC; --hm-ink:#0B0420; --hm-card:rgba(12,6,32,.78); --hm-line:rgba(206,192,255,.24); --hm-line-hi:rgba(226,216,255,.42);
  --hm-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --hm-display:'Luckiest Guy','Arial Black',Impact,sans-serif;
}

/* ---------------------------------------------------------------- the backdrop: our own venue at night, tinted down */
#backdrop .hm-venue{position:absolute;inset:-12px;opacity:0;filter:blur(1.2px) saturate(1.1)}   /* soft: atmosphere, not a screenshot to read (static filter, rasterised once) */
#backdrop .hm-venue::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(18,6,52,.8) 0%,rgba(22,8,62,.58) 30%,rgba(26,10,74,.42) 62%,rgba(16,6,44,.8) 100%),
  radial-gradient(ellipse 58% 50% at 50% 42%,rgba(20,7,58,.6) 0%,rgba(20,7,58,.25) 60%,rgba(20,7,58,0) 80%),
  linear-gradient(90deg,rgba(91,37,214,.28),rgba(91,37,214,0) 22%,rgba(91,37,214,0) 78%,rgba(91,37,214,.28));mix-blend-mode:normal}
html.hm-ready #backdrop .hm-venue{opacity:1}
#backdrop:has(.hm-venue)::before,#backdrop:has(.hm-venue)::after{display:none}   /* the old CSS floor grid and scanlines give way to the venue */
/* a backdrop only (5 Oct, Anand: "cluttered, the text is barely visible ... subtly visible, a linear mask from the bottom"):
   the still venue fades out toward the cards and the rail */
#backdrop .hm-venue{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.35) 66%,transparent 90%);mask-image:linear-gradient(180deg,#000 0%,#000 38%,rgba(0,0,0,.35) 66%,transparent 90%)}
/* last year's STANFEST film, the whole thing, muted and looping under the tint (13 Oct, Anand: "video in the background rather than
   showing static images"; it replaced the six walk stills, home-bd-01..06). Encoded from the 1080p aftermovie without audio:
   home-film-sm.mp4 at 854 px for every screen (the 1280 px encode was dropped to save 24 MB); the poster is its first frame, so the hand-off doesn't jump.
   home-film.js plays it only while the homepage is on screen, and keeps the poster for reduced motion or Save-Data.
   No blur filter here: a filter over a playing video re-rasterises every frame; the tint and mask already keep it quiet. */
#backdrop .hm-venue{background:#10062E;filter:none}
#backdrop .hm-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;pointer-events:none}
#backdrop .hm-venue::after{z-index:1}
/* after a visit to the walk the homepage keeps the stills over the live canvas (the world renders under them, unseen) */
body.world-on:has(#overlay.home.on) #backdrop{display:block;z-index:1}

/* ---------------------------------------------------------------- the frame */
#overlay.home{background:radial-gradient(ellipse 85% 70% at 50% 46%,rgba(16,5,46,.15) 0%,rgba(10,3,30,.55) 100%);padding:calc(76px + env(safe-area-inset-top,0px)) 0 0;overflow:hidden}
#overlay.home.on{display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);align-content:stretch;justify-items:stretch}
#overlay.home .hm{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,4.2vh,46px);min-height:0;padding:0 clamp(16px,4vw,64px)}

/* ---------------------------------------------------------------- the H1: one display face, composed letter by letter */
#overlay.home .hm-title{position:relative;margin:0;font-family:var(--hm-display);font-weight:400;color:var(--hm-cream);text-align:center;line-height:.94;
  font-size:var(--hs,clamp(40px,8.4vw,150px));letter-spacing:.004em;text-transform:none;user-select:none;-webkit-user-select:none}
#overlay.home .hm-line{display:block;white-space:nowrap}
#overlay.home .hm-line.l2{font-size:.93em;margin-top:.02em}
#overlay.home .hm-title .c{display:inline-block;transform:translateY(var(--y,0)) rotate(var(--r,0deg)) scale(var(--sx,1),var(--s,1));transform-origin:50% 78%}
#overlay.home .hm-title .c.sp{width:.24em}
#overlay.home .hm-title .cm,#overlay.home .hm-title .ci{display:inline-block}
#overlay.home .hm-title .ci{text-shadow:0 .045em 0 var(--hm-ink),.02em .06em 0 rgba(11,4,32,.55)}

/* ---------------------------------------------------------------- the three objects */
#overlay.home .hm-cards{display:grid;grid-template-columns:minmax(0,25fr) minmax(0,40fr) minmax(0,25fr);column-gap:32px;width:min(1320px,100%);   /* Anand, 4 Oct: location : pass : venue = 25 : 40 : 25, a 32 px gap between them */

  height:clamp(196px,26.5vh,268px);grid-template-rows:minmax(0,1fr);   /* lower cards (Anand, 4 Oct: "reduce the height"); was clamp(236px,33vh,330px) */
  align-items:stretch;perspective:1100px}   /* the row never grows past its height: the contents fit it (the QR shrinks) */
#overlay.home .hm-card{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:16px 18px 15px;min-width:0;min-height:0;
  background:var(--hm-card);border:1px solid var(--hm-line);border-radius:14px;color:var(--hm-cream);font:500 13px/1.25 var(--hm-mono);letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
  transition:border-color var(--motion-fast) var(--ease-ui),background-color var(--motion-fast) var(--ease-ui);transform-origin:50% 60%;backface-visibility:hidden}
#overlay.home .hm-card:hover,#overlay.home .hm-card.is-focus{border-color:var(--hm-line-hi)}
#overlay.home .hm-card:focus-visible{outline:2px solid var(--lime);outline-offset:4px;border-color:var(--hm-line-hi)}
#overlay.home .hm-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;color:rgba(244,238,220,.86);white-space:nowrap}

#overlay.home .hm-media{position:relative;display:block;min-height:0;border-radius:8px;overflow:hidden;background:rgba(20,8,52,.7);box-shadow:inset 0 0 0 1px rgba(206,192,255,.14)}
#overlay.home .hm-media canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 01 / location (Anand, 4 Oct, a dark-maps reference): the real streets round the campus edge to edge, grey blocks between
   black streets, the campus as a blue location dot with its accuracy circle, the name and coordinates in white over it */
/* 5 Oct, Anand: the side cards take the platform's purple; the ticket stays the one bright thing, attention by colour, not motion */
#overlay.home .loc{display:block;padding:0;overflow:hidden;background:#140a34;border-color:rgba(206,192,255,.16)}
#overlay.home .loc:hover,#overlay.home .loc.is-focus{border-color:rgba(206,192,255,.32)}
#overlay.home .loc .hm-map{position:absolute;inset:0;border-radius:inherit;background:#170b3c;box-shadow:none}
#overlay.home .loc .hm-map::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(12,5,34,.55) 0%,rgba(12,5,34,0) 26%,rgba(12,5,34,0) 52%,rgba(12,5,34,.8) 100%)}
#overlay.home .loc .hm-map canvas.hi{opacity:0;transition:opacity var(--motion-ui) var(--ease-ui)}
#overlay.home .loc:hover .hm-map canvas.hi,#overlay.home .loc.is-focus .hm-map canvas.hi{opacity:1}
#overlay.home .loc .hm-hd{position:absolute;left:16px;right:16px;top:14px;z-index:2}
#overlay.home .hm-here{position:absolute;left:64%;top:38%;width:0;height:0;z-index:1}
#overlay.home .hm-here .halo{position:absolute;left:-54px;top:-54px;width:108px;height:108px;border-radius:50%;background:radial-gradient(circle,rgba(150,104,255,.42) 0%,rgba(150,104,255,.26) 62%,rgba(150,104,255,.14) 100%);box-shadow:0 0 0 1px rgba(196,170,255,.32),0 0 24px rgba(150,104,255,.25)}
#overlay.home .hm-here .halo::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px dashed rgba(206,186,255,.38)}   /* the fine outer ring of the reference */
#overlay.home .hm-here .dot{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:#9B6BFF;box-shadow:0 0 0 2.5px #fff,0 2px 6px rgba(0,0,0,.5)}
#overlay.home .hm-place{position:absolute;left:18px;right:18px;bottom:16px;z-index:2;display:grid;gap:6px;color:#fff;text-transform:none;letter-spacing:0;
  font:500 17px/1.15 var(--head,'Figtree',system-ui);text-shadow:0 1px 8px rgba(0,0,0,.55);transition:opacity var(--motion-fast) var(--ease-ui)}
#overlay.home .hm-place b{font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase}

/* 02 / access: the pass as a holographic ticket (Anand, 4 Oct, a holo-ticket reference): an iridescent body, scalloped edges,
   notches at the perforation, a stub that reads "Get ready to experience REAL LIFE", a thin inner frame, ADMIT ONE down the right.
   The sheen follows the pointer while it moves (--hx, --hy) and eases back when it leaves; at rest it is still. */
@property --hx{syntax:'<number>';inherits:true;initial-value:0}
@property --hy{syntax:'<number>';inherits:true;initial-value:0}
#overlay.home .acc{--stub:23%;container-type:inline-size;display:grid;grid-template-columns:var(--stub) minmax(0,1fr) 13%;grid-template-rows:minmax(0,1fr);gap:0;padding:0;margin:-8px 0;background:none;border:0;border-radius:6px;overflow:hidden;color:#fff;
  text-transform:none;letter-spacing:0;transition:--hx .5s var(--ease-ui),--hy .5s var(--ease-ui);
  -webkit-mask:radial-gradient(circle 5px at 0 50%,#0000 95%,#000) 0 0/100% 13px repeat-y,radial-gradient(circle 5px at 100% 50%,#0000 95%,#000) 0 0/100% 13px repeat-y,
    radial-gradient(circle 13px at var(--stub) 0,#0000 96%,#000) 0 0/100% 100% no-repeat,radial-gradient(circle 13px at var(--stub) 100%,#0000 96%,#000) 0 0/100% 100% no-repeat;
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 5px at 0 50%,#0000 95%,#000) 0 0/100% 13px repeat-y,radial-gradient(circle 5px at 100% 50%,#0000 95%,#000) 0 0/100% 13px repeat-y,
    radial-gradient(circle 13px at var(--stub) 0,#0000 96%,#000) 0 0/100% 100% no-repeat,radial-gradient(circle 13px at var(--stub) 100%,#0000 96%,#000) 0 0/100% 100% no-repeat;
  mask-composite:intersect}
#overlay.home .acc:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--lime)}   /* the mask would clip an outside outline */
#overlay.home .tk-holo{position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(55% 75% at calc(28% + var(--hx) * 22%) calc(18% + var(--hy) * 16%),rgba(255,150,235,.55),rgba(255,150,235,0) 62%),
  radial-gradient(45% 70% at calc(88% - var(--hx) * 18%) calc(82% - var(--hy) * 14%),rgba(90,240,255,.6),rgba(90,240,255,0) 62%),
  linear-gradient(calc(100deg + var(--hx) * 8deg),#2D5CEB 0%,#47D3F3 13%,#3A62E8 29%,#4A3ED6 45%,#7F5DF2 57%,#3D48DA 69%,#40C9F1 85%,#5F51E7 100%)}
#overlay.home .tk-holo::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(255,255,255,0) 1px 9px),
  linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.16) calc(48% + var(--hx) * 18%),rgba(255,255,255,0) 66%);mix-blend-mode:screen}
#overlay.home .tk-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
#overlay.home .tk-frame .ln{fill:none;stroke:rgba(255,255,255,.88);stroke-width:1.2}
#overlay.home .tk-frame .perf{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.2;stroke-dasharray:4 4}
#overlay.home .tk-frame .wave{fill:none;stroke:rgba(255,255,255,.32);stroke-width:.9}
#overlay.home .tk-frame .spark{fill:#fff}
#overlay.home .tk-stub{position:relative;display:grid;place-items:center;min-width:0}
#overlay.home .tk-v{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;white-space:nowrap}
#overlay.home .tk-v i,#overlay.home .tk-v b{display:block}
#overlay.home .tk-v i{font:italic 500 clamp(10px,2.6cqw,12px)/1.2 var(--head,'Figtree',system-ui);color:rgba(255,255,255,.9);margin-left:4px}
#overlay.home .tk-v b{font:italic 900 clamp(17px,6.4cqw,30px)/1 var(--head,'Figtree',system-ui);letter-spacing:.02em;text-transform:uppercase;color:#F4F04A;text-shadow:0 1px 3px rgba(30,20,120,.35)}
#overlay.home .tk-main{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;align-items:center;justify-items:center;min-width:0;padding:22px 16px 22px 16px}
#overlay.home .tk-top{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font:600 clamp(9px,2.3cqw,10.5px)/1 var(--head,'Figtree',system-ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.92);white-space:nowrap}
#overlay.home .tk-globe{width:20px;height:20px;flex:none}
#overlay.home .tk-globe circle,#overlay.home .tk-globe path{fill:none;stroke:#fff;stroke-width:1.3}
#overlay.home .tk-title{display:grid;justify-items:center;text-align:center;color:#fff;text-transform:uppercase;text-shadow:0 2px 10px rgba(30,20,120,.25)}
#overlay.home .tk-title b{font:italic 900 clamp(20px,9.2cqw,48px)/.95 var(--head,'Figtree',system-ui);letter-spacing:-.01em;transform-origin:50% 60%;transition:transform var(--motion-fast) var(--ease-ui)}
#overlay.home .tk-title span{font:500 clamp(15px,6.6cqw,34px)/1.05 var(--head,'Figtree',system-ui);letter-spacing:.01em;opacity:.96}
#overlay.home .acc:hover .tk-title b,#overlay.home .acc.is-focus .tk-title b{transform:scale(1.03)}
/* tickets are sold on District (19 Oct): the ticket keeps its shape and sheen but takes District's purple (#6B52A3), with the
   District logo as the title and a white "Book now on District" button that a yellow shimmer (the REAL LIFE yellow) runs across */
#overlay.home .acc .tk-holo{background:
  radial-gradient(60% 80% at calc(24% + var(--hx) * 22%) calc(16% + var(--hy) * 16%),rgba(170,140,255,.55),rgba(170,140,255,0) 64%),
  radial-gradient(50% 70% at calc(90% - var(--hx) * 18%) calc(86% - var(--hy) * 14%),rgba(255,120,190,.35),rgba(255,120,190,0) 62%),
  linear-gradient(calc(110deg + var(--hx) * 8deg),#2A1A57 0%,#5A3F9C 38%,#6B52A3 55%,#3E2A7A 100%)}
#overlay.home .acc .tk-v b{color:#FFE45C;text-shadow:0 1px 3px rgba(30,15,80,.4)}
#overlay.home .acc .tk-title{text-shadow:none;gap:clamp(4px,1.4cqw,8px)}
#overlay.home .acc .tk-main{padding-top:18px}   /* the top row ("Tickets live on") sits higher (19 Oct) */
#overlay.home .acc .tk-logo{display:block;width:clamp(110px,36cqw,220px);height:auto;filter:drop-shadow(0 3px 10px rgba(20,8,60,.35));transform-origin:50% 60%;transition:transform var(--motion-fast) var(--ease-ui)}
#overlay.home .acc .tk-logo{animation:tk-buzz 2.2s ease-in-out infinite}   /* the logo buzzes: a quick little shake, then a rest */
#overlay.home .acc:hover .tk-logo,#overlay.home .acc.is-focus .tk-logo{transform:scale(1.04);animation-duration:1.1s}   /* and buzzes faster while you're on the card */
@keyframes tk-buzz{0%,55%,100%{translate:0 0;rotate:0deg;scale:1}58%{translate:-4px 0;rotate:-5deg;scale:1.04}61%{translate:4px -2px;rotate:5deg;scale:1.06}64%{translate:-4px 0;rotate:-4.5deg;scale:1.05}67%{translate:3.5px -1px;rotate:4deg;scale:1.04}70%{translate:-3px 0;rotate:-3deg;scale:1.03}73%{translate:2.5px -1px;rotate:2.4deg;scale:1.02}76%{translate:-1.5px 0;rotate:-1.4deg;scale:1.01}79%{translate:.5px 0;rotate:.6deg;scale:1}82%{translate:0 0;rotate:0deg;scale:1}}
@media (prefers-reduced-motion:reduce){#overlay.home .acc .tk-logo{animation:none}}
#overlay.home .acc .hm-cta.tk-cta{background:#fff;color:#3E2A7A;white-space:nowrap;box-shadow:0 6px 18px rgba(20,8,60,.35)}
#overlay.home .acc .hm-cta.tk-cta i{color:#6B52A3}
#overlay.home .acc .hm-cta.tk-cta::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 28%,rgba(255,228,92,.35) 42%,rgba(255,228,92,.95) 50%,rgba(255,228,92,.35) 58%,transparent 72%);mix-blend-mode:multiply;
  transform:translateX(-120%);animation:tk-shimmer 2.6s cubic-bezier(.4,0,.2,1) infinite}   /* the shimmer: one pass, then a rest */
@keyframes tk-shimmer{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){#overlay.home .acc .hm-cta.tk-cta::after{animation:none;display:none}}
@media (max-width:760px){#overlay.home .acc .tk-on{display:none}}   /* the pill is too narrow on a phone: "Book now", the title above already says district */
#overlay.home .acc .hm-cta.tk-cta i{color:#7C4DFF}
#overlay.home .tk-admit{position:relative;display:grid;place-items:center;min-width:0}
#overlay.home .tk-admit span{writing-mode:vertical-rl;transform:rotate(180deg);font:500 clamp(13px,5.2cqw,26px)/1 var(--head,'Figtree',system-ui);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.92);white-space:nowrap}
#overlay.home .hm-cta.tk-cta{width:100%;justify-self:stretch;padding:10px 16px;border:0;border-radius:999px;background:rgba(11,4,32,.82);color:#fff;font:800 11.5px/1 var(--head,'Figtree',system-ui);letter-spacing:.14em;text-transform:uppercase;gap:10px}
#overlay.home .hm-cta.tk-cta i{color:var(--lime)}
#overlay.home .acc:hover .hm-cta i,#overlay.home .acc.is-focus .hm-cta i{transform:translateX(4px)}
#overlay.home .hm-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
#overlay.home .hm-cta i{font-style:normal;font-family:var(--pen,system-ui);font-size:16px;line-height:1;display:inline-block;transition:transform var(--motion-fast) var(--ease-ui)}
#overlay.home .hm-sweep{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(200,245,58,.6) 50%,transparent 100%);transform:translateX(-110%);pointer-events:none;text-decoration:none}

/* 03 / venue, "Explore Fest": the same component as the location card (Anand, 4 Oct): five of the crowd's own characters dancing
   together as holograms on a dark floor (a 24-frame sprite rendered from the walk's crowd: scripts/
   render-holo-dancer.mjs), screen-blended so only the light shows. The one thing on the homepage that moves by itself, at his ask. */
#overlay.home .ven{display:block;padding:0;overflow:hidden;background:#140a34;border-color:rgba(206,192,255,.16)}
#overlay.home .ven:hover,#overlay.home .ven.is-focus{border-color:rgba(206,192,255,.32)}
#overlay.home .ven .hm-crowd{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 70% 60% at 50% 58%,#2a1566 0%,#160a3a 62%,#11082c 100%);box-shadow:none}
#overlay.home .ven .hm-crowd::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,rgba(12,5,34,.55) 0%,rgba(12,5,34,0) 26%,rgba(12,5,34,0) 52%,rgba(12,5,34,.8) 100%)}
#overlay.home .ven .hm-hd{position:absolute;left:16px;right:16px;top:14px;z-index:3}
#overlay.home .ven .hm-place{z-index:3}

#overlay.home .hm-dancers{position:absolute;left:0;top:7%;width:100%;height:auto;aspect-ratio:540/300;-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 88%);mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 88%);overflow:hidden;mix-blend-mode:screen;pointer-events:none;z-index:1;opacity:.9;transition:opacity var(--motion-ui) var(--ease-ui)}   /* five of the crowd dancing together, no map (Anand, 4 Oct) */
#overlay.home .ven:hover .hm-dancers,#overlay.home .ven.is-focus .hm-dancers{opacity:1}
/* the card's story (5 Oct, Anand): a hologram waves at the visitor while the venue downloads in the background (home.js venueStory);
   the moment it has, the wave finishes its loop, the hologram collapses to a line and goes (html.hm-handoff), and the show reel plays:
   a recording of the walk's own reel (scripts/media/record-venue-reel.mjs), filling the card under the same scrim (html.hm-reel-on) */
#overlay.home .hm-dancers i{position:absolute;left:0;top:0;width:100%;height:100%;will-change:transform}
#overlay.home .hm-dancers i::before{content:"";position:absolute;left:0;top:0;width:2700%;height:100%;background:url(/assets/images/home-holo-wave.webp) 0 0/100% 100% no-repeat;animation:hm-dance 2.25s steps(27) infinite;will-change:transform}
/* the reel stays a hologram (Anand, 5 Oct: "keep the showreel holographic"): the footage re-lit in the platform's purple and
   screen-blended like the dancers, faded out at the bottom the same way, with faint scan lines and a rare flicker */
#overlay.home .hm-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;z-index:1;pointer-events:none;opacity:0;transition:opacity .45s var(--ease-ui);
  mix-blend-mode:screen;filter:grayscale(1) sepia(1) hue-rotate(218deg) saturate(2.6) contrast(1.3) brightness(1.08);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 94%);mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 94%)}
html.hm-reel-on #overlay.home .hm-reel{opacity:.92;animation:hm-holo-flicker 6s steps(1) infinite}
html.hm-reel-on #overlay.home .ven .hm-crowd::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;mix-blend-mode:screen;
  background:repeating-linear-gradient(180deg,rgba(190,160,255,.09) 0 1px,transparent 1px 3px)}
@keyframes hm-holo-flicker{0%,46%,49%,80%,100%{opacity:.92}47%{opacity:.62}48%{opacity:.88}81%{opacity:.8}}
html.hm-handoff #overlay.home .hm-dancers{animation:hm-holo-out .32s linear both;transform-origin:50% 62%}
html.hm-reel-on #overlay.home .hm-dancers{visibility:hidden}
html.hm-reel-on #overlay.home .hm-dancers i::before{animation:none}
@keyframes hm-holo-out{0%{opacity:.9}18%{opacity:.3}30%{opacity:1;transform:none;filter:brightness(1.6)}60%{opacity:.8;transform:scaleY(.08);filter:brightness(2.2)}100%{opacity:0;transform:scaleY(.01) scaleX(1.3)}}   /* a flicker, then it folds to a bright line and is gone */
@keyframes hm-dance{to{transform:translateX(-100%)}}
#overlay:not(.on) .hm-dancers i,body.site-open .hm-dancers i,#overlay:not(.on) .hm-dancers i::before,body.site-open .hm-dancers i::before{animation-play-state:paused}   /* out of sight: the dance rests */
@media (prefers-reduced-motion:reduce){#overlay.home .hm-dancers i,#overlay.home .hm-dancers i::before,html.hm-reel-on #overlay.home .hm-reel{animation:none}}
#overlay.home .hm-lock{position:absolute;inset:10% 12%;width:76%;height:80%;opacity:0;overflow:visible;z-index:2}
#overlay.home .hm-lock path{fill:none;stroke:#B89BFF;stroke-width:2.5;vector-effect:non-scaling-stroke}

/* ---------------------------------------------------------------- the event line under the H1 (Anand, 5 Oct: moved up from the rail);
   it decodes on load the way computation text does in AI and ML demos (home.js scramble), then holds still */
#overlay.home .hm-coords{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;row-gap:8px;margin:0;font:500 clamp(13px,1.2vw,17px)/1 var(--hm-mono);   /* bigger (Anand, 5 Oct); was 10.5-13 px */
  letter-spacing:.14em;text-transform:uppercase;color:rgba(244,238,220,.74);white-space:nowrap;cursor:default}
#overlay.home .hm-coords>span[data-scramble]{padding:0 clamp(10px,1.6vw,26px)}
#overlay.home .hm-coords>span[data-scramble]+span[data-scramble]{border-left:1px solid rgba(206,192,255,.26)}
#overlay.home .hm-coords.is-decoding{color:rgba(200,245,58,.85)}
#overlay.home .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------------------------------------------------------- the nav on the homepage: quiet; Partner with us is the one yellow button */
body:not(.site-open) #snav .cta{transform:none!important;border:0!important;border-radius:10px!important;box-shadow:none!important;background:var(--sun)!important;color:#14111C!important;
  font:700 15px/1 var(--head,'Figtree',system-ui)!important;padding:12px 16px!important;display:inline-flex;align-items:center;gap:10px;transition:transform var(--motion-fast) var(--ease-ui)!important}
body:not(.site-open) #snav .cta::after{content:"→";display:inline-block;font-size:17px;line-height:1;transition:transform var(--motion-fast) var(--ease-ui)}
body:not(.site-open) #snav .cta:hover::after,body:not(.site-open) #snav .cta:focus-visible::after{transform:translateX(3px)}
body:not(.site-open) #snav .cta:hover{transform:scaleX(.99)!important}
body:not(.site-open) #snav .cta:active{transform:scale(.97)!important;transition-duration:var(--motion-instant)!important}
body:not(.site-open) #snav .cta:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

/* ---------------------------------------------------------------- before the intro: nothing shows (home.js adds hm-ready); if the script never runs, everything appears after 2.5 s */
html:not(.hm-ready) #overlay.home .hm-coords,html:not(.hm-ready) #overlay.home .hm-title,html:not(.hm-ready) #overlay.home .hm-card,html:not(.hm-ready) #overlay.home .hm-rail>*:not(.hm-pulse){opacity:0;animation:hm-fallback 0s 2.5s forwards}
html.hm-intro body:not(.site-open) #snav{opacity:0}
@keyframes hm-fallback{to{opacity:1}}

/* the cards stand 24 px above the rail's line (Anand, 4 Oct); the H1 centres itself in the space above them. Desktop and tablet only */
@media (min-width:761px){
  #overlay.home .hm{justify-content:flex-start;padding-bottom:48px}   /* no rail below since 5 Oct: the cards keep a clean margin to the bottom edge */
  #overlay.home .hm-title{margin:auto 0 0}
  #overlay.home .hm-coords{margin:clamp(14px,2.4vh,28px) 0 auto}   /* the H1 and its event line centre together above the cards */
  #overlay.home .acc{margin:-16px 0 0}   /* the ticket's extra height goes up, so all three share the bottom edge */
  #overlay.home .hm-cards{width:calc(100vw - 96px);max-width:none}   /* the cards share the nav's frame: 48 px in from each edge, like #snav's padding (draft.css), at every width (Anand, 5 Oct) */
}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1100px){
  #overlay.home .hm-cards{height:clamp(190px,25vh,250px)}
}
/* ---------------------------------------------------------------- phones: the tagline first; the cards become a row you swipe */
@media (max-width:760px){
  #overlay.home{padding-top:calc(88px + env(safe-area-inset-top,0px));overflow-y:auto}
  #overlay.home .hm{justify-content:center;gap:26px;padding:0 0 2vh}
  #overlay.home .hm-title{padding:0 16px}
  #overlay.home .hm-coords{padding:0 12px;font-size:11.5px;letter-spacing:.1em}
  #overlay.home .hm-coords{column-gap:16px}
  #overlay.home .hm-coords>span[data-scramble]{padding:0}
  #overlay.home .hm-coords>span[data-scramble]+span[data-scramble]{border-left:0}   /* it wraps on phones: no divider left hanging at a line start */
  #overlay.home .hm-cards{display:flex;gap:12px;height:auto;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 16px 14px;scrollbar-width:none;perspective:none}
  #overlay.home .hm-cards::-webkit-scrollbar{display:none}
  #overlay.home .hm-card{flex:0 0 78vw;height:262px;scroll-snap-align:center}
  #overlay.home .acc{order:-1;margin:0}
}
@media (prefers-reduced-motion:reduce){
  #overlay.home *,body:not(.site-open) #snav .cta,body:not(.site-open) #snav .cta::after{transition-duration:1ms!important}
}

/* A full-width venue preview follows the original three-card homepage. */
#overlay.home{overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain}
#overlay.home.on{display:block}
#overlay.home .hm{height:calc(100svh - 76px - env(safe-area-inset-top,0px));min-height:580px;box-sizing:border-box}
#overlay.home .hm-explore{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;height:100vh;height:100dvh;min-height:0;padding:clamp(24px,8vh,100px) 24px;box-sizing:border-box;overflow:hidden;background:#140a34;border-top:1px solid var(--hm-line)}
#overlay.home .hm-explore-reel{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:grayscale(1) sepia(1) hue-rotate(218deg) saturate(2.2);opacity:.8}
#overlay.home .hm-explore::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(11,4,32,.45),rgba(11,4,32,.2) 45%,rgba(11,4,32,.72)),radial-gradient(ellipse at center,rgba(11,4,32,.52),transparent 72%)}

#overlay.home .hm-entry{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
#overlay.home .hm-entry-label{font:500 11px/1.4 var(--hm-mono);letter-spacing:.22em;text-transform:uppercase;color:rgba(244,238,220,.8)}
#overlay.home .hm-entry h2{margin:0;color:var(--hm-cream);font:400 clamp(56px,8vw,128px)/1 var(--hm-display);text-transform:uppercase;text-shadow:0 4px 24px rgba(11,4,32,.4)}
#overlay.home .hm-entry-button{display:flex;align-items:center;justify-content:center;gap:32px;min-height:56px;padding:18px 32px;border:1px solid rgba(200,245,58,.6);border-radius:999px;background:var(--lime);color:var(--hm-ink);font:800 14px/1 var(--head,'Figtree',system-ui);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 28px rgba(200,245,58,.12);transition:transform var(--motion-fast) var(--ease-ui),box-shadow var(--motion-fast) var(--ease-ui)}
#overlay.home .hm-entry-button:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(200,245,58,.22)}
#overlay.home .hm-entry-button:active{transform:translateY(0) scale(.98)}
#overlay.home .hm-entry-button:focus-visible{outline:2px solid var(--hm-cream);outline-offset:5px}
#overlay.home .hm-entry-button>span:last-child{font-size:23px;line-height:.8}
#overlay.home .hm-mobile-entry,#overlay.home .hm-mobile-help{display:none}
@media (hover:none) and (pointer:coarse){
  #overlay.home .hm-desktop-entry{display:none}
  #overlay.home .hm-mobile-entry{display:block}
  #overlay.home .hm-explore .hm-entry-label,#overlay.home .hm-explore .hm-explore-index,#overlay.home .hm-explore .hm-mobile-help{display:none}
}
@media (max-width:760px){
  #overlay.home .hm-explore .hm-entry-label,#overlay.home .hm-explore .hm-explore-index,#overlay.home .hm-explore .hm-mobile-help{display:none}
  #overlay.home .hm{height:auto;min-height:calc(100svh - 88px - env(safe-area-inset-top,0px));justify-content:center;padding-top:28px;padding-bottom:40px}
  #overlay.home .hm-explore{padding-inline:20px}

  #overlay.home .hm-entry{gap:20px}
}