/* planz.ae hero: Thursday-night lock screen -> the four messages that matter -> the plan.
   One pinned stage. hero.js computes every frame from scroll, so the film plays backwards too.
   The app UI is rebuilt from the RN source (lib/tokens.ts, VenueDetailsCard, MomentumBar). */
.hx,.fx{
  --night:#170A40;--night-2:#2A1670;--glow:#3B22A0;
  --app:#4B1FD6;--app-soft:rgba(75,31,214,.1);--app-ink:#091732;--app-2:rgba(9,23,50,.6);--app-3:rgba(9,23,50,.4);
  --app-line:rgba(9,23,50,.08);--app-line-2:rgba(9,23,50,.12);--app-surface:#F8F7FF;--app-mint:#D2FFBC;--app-warm:#C6731E;--app-danger:#E5443B;
}
.hx{position:relative;background:var(--night)}
.hx-stage{position:relative;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;color:var(--on-ink);perspective:1400px}
.hx-ic{width:1em;height:1em;fill:currentColor;flex:none;display:block}

/* night sky, lit from the top right, with film grain */
.hx-sky{position:absolute;inset:0;z-index:0;background:
  radial-gradient(70% 45% at 78% 6%,rgba(92,62,230,.55),transparent 70%),
  radial-gradient(60% 40% at 0% 100%,rgba(59,34,160,.5),transparent 70%),
  linear-gradient(180deg,#1C0E52 0%,var(--night) 55%,#120833 100%)}
.hx-sky::after{content:"";position:absolute;inset:0;opacity:.09;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* sunrise: a butter edge leads, paper follows */
.hx-dawn{position:absolute;inset:0;z-index:1;pointer-events:none}
.hx-dawn i{position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle at var(--dx,50%) 125%,#000 calc(var(--r,0%) - 7%),transparent var(--r,0%));mask-image:radial-gradient(circle at var(--dx,50%) 125%,#000 calc(var(--r,0%) - 7%),transparent var(--r,0%))}
.hx-dawn i:first-child{background:var(--lime)}
.hx-dawn i:last-child{background:var(--paper)}
.hx-wake{position:absolute;inset:0;z-index:20;background:#0B0520;pointer-events:none}

/* the clock, with the mascot peeking over it like an iOS depth wallpaper */
.hx-clock{position:absolute;z-index:2;left:0;right:0;top:calc(80px + env(safe-area-inset-top,0px));text-align:center;pointer-events:none}
.hx-date{font:600 17px/1 var(--font-sans);letter-spacing:-.01em;color:rgba(255,251,234,.8)}
.hx-time{font:600 clamp(100px,29vw,150px)/.86 var(--font-sans);letter-spacing:-.065em;font-variant-numeric:tabular-nums;margin-top:8px;color:#FFF6D8;text-shadow:0 2px 30px rgba(140,110,255,.35)}
.hx-colon{animation:hxColon 2s steps(1) infinite}
@keyframes hxColon{50%{opacity:.35}}
.hx-puff{position:absolute;z-index:3;left:50%;top:calc(100px + env(safe-area-inset-top,0px));width:min(100vw,520px);aspect-ratio:1;margin-left:calc(min(100vw,520px) / -2);pointer-events:none;filter:drop-shadow(0 40px 50px rgba(6,2,24,.55));will-change:transform}
.hx-puff svg{display:block;width:100%;height:100%;overflow:visible}
.hx-puff .eye{transform-box:fill-box;transform-origin:50% 50%}

/* copy */
.hx-copy{position:absolute;z-index:9;left:16px;right:16px;top:calc(84px + env(safe-area-inset-top,0px));display:grid;pointer-events:none}
.hx-copy>*{grid-area:1/1}
.hx-h{font:600 clamp(34px,9.4vw,40px)/.98 var(--font-sans);letter-spacing:-.045em;color:var(--ink);text-wrap:balance;margin:0}
.hx-h .ln{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hx-h .ln>span{display:inline-block;will-change:transform}
.hx-h mark{background:var(--lime);color:var(--ink);padding:0 .1em;border-radius:.14em}
.hx-s1{position:absolute;z-index:4;left:16px;right:16px;top:calc(100px + env(safe-area-inset-top,0px) + min(100vw,520px) * .84);text-align:center;pointer-events:none}
.hx-s1 .hx-h,.hx-h--lite{color:#FFF6D8}
.hx-s1 .hx-h{font-size:clamp(26px,7.6vw,32px)}
.hx-s1 p{margin-top:8px;font:500 15px/1.4 var(--font-sans);color:rgba(255,251,234,.72)}
.hx-s4 .hx-h{font-size:clamp(40px,11.4vw,48px);line-height:.94}
.hx-sub{margin-top:14px;max-width:34ch;font:400 17px/1.45 var(--font-sans);color:var(--ink-2)}
.hx-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;pointer-events:auto}

/* the notification pile */
.hx-pile{position:absolute;z-index:7;left:12px;right:12px;top:0;bottom:0;transform-origin:50% 100%;pointer-events:none}
.nt{position:absolute;left:0;top:0;width:100%;height:64px;display:flex;align-items:center;padding:0 14px 0 12px;border-radius:24px;visibility:hidden;color:#fff;background:rgba(44,28,108,calc(.38 * (1 - var(--lit,0))));-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06),0 12px 30px -14px rgba(0,0,0,.45);will-change:transform}
.nt.is-lit{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.nt::before{content:"";position:absolute;inset:12px 16px 0;z-index:-2;border-radius:inherit;box-shadow:0 22px 36px -16px rgba(92,64,0,.3);opacity:calc(var(--lit,0) * (1 - var(--dock,0)))}
.nt-lit{position:absolute;inset:0;z-index:1;display:flex;align-items:center;padding:0 14px 0 12px;border-radius:inherit;background:var(--lime);color:var(--ink);clip-path:inset(0 calc(100% - var(--lit,0) * 100%) 0 0 round var(--r,24px));opacity:calc(1 - var(--dock,0));overflow:hidden}
.nt-lit .nt-app{box-shadow:0 0 0 2px var(--lime)}
.nt-lit::after{content:"";position:absolute;z-index:2;inset:-20% -60%;pointer-events:none;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%);transform:translateX(calc(var(--lit,0) * 70% - 35%));opacity:var(--sheen,0)}
.nt-body{position:relative;display:flex;align-items:center;gap:12px;min-width:0;flex:1;overflow:hidden;opacity:var(--fade,1)}
.nt-av{position:relative;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#A9AEBC,#858B9A);color:#fff;font:600 17px/1 var(--font-sans);letter-spacing:0}
.nt-app{position:absolute;right:-4px;bottom:-4px;width:19px;height:19px;border-radius:6px;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 2px rgba(30,18,80,.5);color:#3D4456;font-size:12px}
.nt-tx{min-width:calc(var(--bw,351px) - 78px);flex:1}
.nt-top{display:flex;align-items:baseline;gap:8px}
.nt-top b{font:600 15px/19px var(--font-sans);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-top time{margin-left:auto;flex:none;font:400 13px/1 var(--font-sans);opacity:.62}
.nt p{margin:0;font:400 15px/19px var(--font-sans);letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.92}
.hx-count{position:absolute;left:50%;top:0;height:30px;padding:0 14px;display:flex;align-items:center;gap:5px;border-radius:999px;visibility:hidden;white-space:nowrap;font:500 13px/1 var(--font-sans);color:#fff;background:rgba(44,28,108,.38);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hx-count b{font-weight:600;font-variant-numeric:tabular-nums}

/* the one from Planz */
.hx-planz{position:absolute;z-index:8;left:12px;right:12px;top:0;height:76px;display:flex;align-items:center;gap:12px;padding:0 16px 0 12px;border-radius:24px;background:var(--lime);color:var(--ink);box-shadow:0 30px 60px -20px rgba(23,10,64,.55),inset 0 1px 0 rgba(255,255,255,.6);visibility:hidden;transform-origin:50% 0%}
.hx-planz .nt-av{width:44px;height:44px;border-radius:11px;background:var(--blue)}
.hx-planz .nt-av svg{width:34px;height:34px}
.hx-planz .nt-top time{color:var(--ink-3);opacity:1}
.hx-planz strong{display:block;font:700 16px/20px var(--font-sans);letter-spacing:-.02em}
.hx-planz p{white-space:normal;opacity:1;font-size:14px;line-height:18px}

/* the app, 393pt wide like the real screen, scaled with zoom */
.hx-screen{position:absolute;z-index:6;left:50%;top:var(--screen-top,176px);width:calc(393px * var(--s,1));margin-left:calc(393px * var(--s,1) / -2);border-radius:calc(40px * var(--s,1));background:#fff;overflow:hidden;visibility:hidden;box-shadow:0 60px 110px -40px rgba(23,10,64,.5),0 24px 40px -24px rgba(23,10,64,.3),0 0 0 1px rgba(23,10,64,.06);transform-origin:50% 0%;will-change:transform}
.hxa{width:393px;zoom:var(--s,1);padding:12px 0 18px;color:var(--app-ink);font-family:var(--font-sans);letter-spacing:-.5px;-webkit-font-smoothing:antialiased}
.hxa .hx-ic{width:20px;height:20px}
.app-stack{display:grid}
.app-stack>*{grid-area:1/1}
.app-head{display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.app-btn{width:36px;height:36px;border-radius:18px;background:var(--app-surface);display:grid;place-items:center;color:var(--app-ink)}
.app-kind{font:500 17px/22px var(--font-sans);text-align:center}
.app-title{margin:12px 16px 0;font:500 28px/32px var(--font-sans);letter-spacing:-.6px}
.app-title .t-p{font-size:32px;line-height:32px}
.app-rows{margin-top:10px}
.row{position:relative;display:flex;align-items:center;gap:14px;height:64px;margin:0 16px;padding:0 14px 0 12px;border-bottom:1px solid var(--app-line);overflow:hidden}
.row::before{content:"";position:absolute;inset:6px 0;z-index:0;border-radius:14px;background:var(--lime);opacity:var(--f,0)}
.row>*{position:relative}
.row .hx-ic{width:22px;height:22px;color:rgba(9,23,50,.72)}
.row div{flex:1;min-width:0}
.row small{display:block;font:400 13px/16px var(--font-sans);color:var(--app-2)}
.row b{display:grid;font:400 16px/21px var(--font-sans);margin-top:2px}
.row b>span{grid-area:1/1}
.row em{font:500 15px/1 var(--font-sans);font-style:normal;color:var(--app)}
.row--what{border-bottom:0}
.app-eyebrow{margin:18px 16px 8px;font:500 12px/16px var(--font-sans);letter-spacing:.8px;text-transform:uppercase;color:var(--app-2);overflow:hidden}
.venue{margin:12px 16px 0;padding:14px;border:1px solid var(--app-line);border-radius:24px;display:grid;gap:12px;background:#fff;transform-origin:50% 50%}
.venue-h{display:flex;align-items:center;gap:10px}
.venue-pin{width:40px;height:40px;border-radius:20px;background:var(--app-surface);display:grid;place-items:center;color:var(--app)}
.venue-h b{display:block;font:600 15px/20px var(--font-sans)}
.venue-h span{display:block;font:400 13px/17px var(--font-sans);color:var(--app-2)}
.venue-a{display:flex;flex-wrap:wrap;gap:4px}
.venue-a span{flex:1 1 30%;display:grid;justify-items:center;gap:4px;padding:10px 0;border-radius:20px;background:var(--app-surface);font:500 13px/16px var(--font-sans);color:var(--app-ink)}
.venue-a .hx-ic{width:19px;height:19px;color:var(--app)}
.mom{margin:18px 16px 0;padding:0 14px;overflow:hidden}
.mom-n{display:flex;align-items:flex-end;gap:24px}
.mom-n>div{display:grid;gap:4px}
.mom-n>div+div{padding-left:24px;border-left:1px solid var(--app-line)}
.mom-num{height:36px;overflow:hidden;font:500 34px/36px var(--font-sans);color:var(--app);font-variant-numeric:tabular-nums;position:relative}
.mom-num i{display:block;font-style:normal}
.mom-num--warm{color:var(--app-warm)}
.mom-n small{font:400 13px/16px var(--font-sans);color:var(--app-2)}
.mom-bar{position:relative;height:5px;margin-top:14px;border-radius:3px;background:rgba(75,31,214,.12);overflow:hidden}
.mom-bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;background:var(--app)}
.mom-f{display:flex;justify-content:space-between;margin-top:10px;font:400 13px/16px var(--font-sans);color:var(--app-3)}
.mom-f em{display:grid;font-style:normal;font-weight:500;color:var(--app);text-align:right}
.mom-f em>span{grid-area:1/1}
.people{margin:0 16px;overflow:hidden}
.people .app-eyebrow{margin:18px 0 10px}
.people-row{display:flex;gap:18px;padding:0 2px 4px}
.people-row span{display:grid;justify-items:center;gap:6px;font:400 13px/16px var(--font-sans)}
.people-row i{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--app-mint);font:500 18px/1 var(--font-sans);font-style:normal;color:var(--app-ink)}
.app-foot{margin-top:18px;padding:14px 16px 0;border-top:1px solid var(--app-line)}
.app-foot>div{display:flex;gap:10px}
.pill{flex:1;height:52px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font:500 17px/1 var(--font-sans);letter-spacing:-.4px;border:1px solid var(--app-line-2);color:var(--app-ink);background:#fff}
.pill .hx-ic{width:20px;height:20px}
.pill--go{border:0;background:var(--app);color:#fff}
.pill--exit{flex:.8;border:0;background:rgba(229,68,59,.08);color:var(--app-danger)}
.pill--chat{flex:1.3}
.lift{transform-origin:50% 50%;position:relative;z-index:2;border-radius:24px}
.lift::after{content:"";position:absolute;inset:0;border-radius:24px;box-shadow:0 26px 44px -18px rgba(23,10,64,.4),0 0 0 1px rgba(23,10,64,.05);opacity:var(--hi,0);pointer-events:none}
.people.lift{background:#fff}
.hx-screen::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(255,255,255,.7);opacity:var(--dim,0);pointer-events:none}

.hx-tags{position:absolute;z-index:9;left:16px;right:16px;bottom:calc(22px + env(safe-area-inset-bottom,0px));display:grid;justify-items:center;pointer-events:none}
.hx-tags>div{grid-area:1/1;display:flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;border-radius:18px;background:var(--ink);color:var(--on-ink);font:600 15px/1.2 var(--font-sans);letter-spacing:-.01em;box-shadow:0 20px 40px -16px rgba(23,10,64,.6);opacity:0}
.hx-tags i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--lime);color:var(--ink);font-size:16px}
.hx-hint{display:none;animation:hxIn .6s 2.6s both;position:absolute;z-index:9;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);justify-items:center;gap:8px;font:500 12px/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,251,234,.6);pointer-events:none}
.hx-hint i{width:1px;height:28px;background:linear-gradient(rgba(255,251,234,.7),transparent);animation:hxHint 1.8s cubic-bezier(.6,0,.2,1) infinite;transform-origin:50% 0}
@keyframes hxIn{from{opacity:0}}
@keyframes hxHint{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.hx-ctrl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:34px;padding:0 16px;border:0;border-radius:999px;background:rgba(23,10,64,.08);color:var(--ink);font:600 13px/1 var(--font-sans);letter-spacing:.01em;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.hx-ctrl:hover{background:rgba(23,10,64,.14)}
.pz-nav--night .hx-ctrl{background:rgba(255,251,234,.12);color:#FFFBEA}
.hx-away .hx-ctrl{display:none}
@media (max-width:899px){.hx-ctrl{left:124px;transform:translateY(-50%)}}
.hx-stage::after{content:"";position:absolute;z-index:10;left:0;right:0;bottom:0;height:90px;background:linear-gradient(rgba(255,251,234,0),var(--paper));opacity:var(--day,0);pointer-events:none}

/* while the film plays the page holds still */
html.hx-lock,html.hx-lock body{overflow:hidden;overscroll-behavior:none}

/* the nav goes dark while it's night */
.pz-nav{transition:background .4s,border-color .4s}
.pz-nav.pz-nav--night{background:color-mix(in srgb,#170A40 62%,transparent);border-bottom-color:rgba(255,255,255,.07)}
.pz-nav--night .pz-logo g g{fill:#FFF6D8}
.pz-nav--night .pz-logo svg>g>path{stroke:#FFF6D8}
.pz-nav--night .pz-nav__links a:not(.pz-btn){color:rgba(255,251,234,.78)}

@media (min-width:900px){
  .hx-col{--col:400px;--colx:max(40px,calc((100% - 1200px) / 2 + 40px))}
  .hx-clock,.hx-puff,.hx-pile{left:auto;right:var(--colx);width:var(--col);margin-left:0}
  .hx-puff{right:calc(var(--colx) - 50px);width:500px;top:120px}
  .hx-planz{left:max(24px,calc((100% - 1200px) / 2 + 24px));right:auto;width:420px}
  .hx-clock{top:96px}
  .hx-time{font-size:132px}
  .hx-screen{left:auto;right:calc(var(--colx) + (var(--col) - 393px * var(--s,1)) / 2);margin-left:0}
  .hx-s1{margin:0}
  .hx-copy,.hx-s1{left:max(24px,calc((100% - 1200px) / 2 + 24px));right:auto;width:min(46vw,580px);top:50%;text-align:left}
  .hx-s1{margin-top:0}
  .hx-h,.hx-s1 .hx-h{font-size:clamp(52px,5.6vw,82px);line-height:.95}
  .hx-s4 .hx-h{font-size:clamp(56px,6.2vw,92px)}
  .hx-s1 p{font-size:18px;margin-top:18px;max-width:34ch}
  .hx-sub{font-size:19px}
  .hx-tags{left:auto;right:var(--colx);width:var(--col)}
  .hx-hint{display:grid;left:max(24px,calc((100% - 1200px) / 2 + 24px));transform:none;justify-items:start}
}
@media (max-width:899px){.hx-s15{display:none}.hx-ctas .pz-btn:not(.pz-btn--quiet){width:100%}.hx-ctas .pz-btn--quiet{background:none;box-shadow:none;height:auto;padding:8px 0;text-decoration:underline;text-underline-offset:4px}}
@media (prefers-reduced-motion:reduce){.hx-colon,.hx-hint i{animation:none}}