/* Bellfy's night: the look of the cover page (the violet sky, glass, the glowing button, things that
   arrive as you scroll) for every other public page: the sign-up, the directory, each salon's page,
   payments and receipts, the wall and the legal pages. Everything is under body.nt and uses nt-
   names, so a page opts in and nothing else changes. Needs brand.css first; night.js adds the motion. */
.nt{--night:#140b1d;--night-2:#1d0f33;--violet:#5b2bd0;--violet-soft:#7444dc;--rose:#ffd6ec;--blush:#ed8ace;
 --moon:#fff8f2;--moon-soft:rgba(255,248,242,.82);--moon-faint:rgba(255,248,242,.66);--moon-line:rgba(255,248,242,.16);
 --glass:rgba(255,248,242,.07);--glass-strong:rgba(255,248,242,.12);
 --sky:radial-gradient(55% 65% at 80% 42%,rgba(143,51,85,.62),transparent 70%),radial-gradient(70% 60% at 105% 105%,rgba(91,43,208,.62),transparent 70%),radial-gradient(55% 55% at -5% -5%,rgba(116,68,220,.32),transparent 70%),linear-gradient(160deg,var(--night-2) 0%,var(--night) 58%,#1b0c24 100%);
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
 overflow-x:clip}
.nt *{box-sizing:border-box}

/* ---------- The floating glass bar ---------- */
.nt-nav{position:sticky;z-index:50;top:calc(10px + env(safe-area-inset-top));width:min(1240px,calc(100% - 24px));margin:10px auto 0;display:flex;align-items:center;gap:18px;padding:10px 12px 10px 22px;border-radius:999px;border:1px solid var(--moon-line);background:rgba(20,11,29,.72);color:var(--moon);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 20px 50px -24px rgba(8,3,14,.8);transition:transform .6s var(--ease-out),background .4s}
.nt-nav.is-tucked{transform:translateY(calc(-100% - 24px))}
.nt-brand{font-family:var(--display);font-style:italic;font-size:29px;line-height:1;letter-spacing:-.035em;color:var(--moon);text-decoration:none}
.nt-brand span{font-size:16px;font-style:normal;color:var(--blush);vertical-align:top;margin-left:2px}
.nt-nav nav{display:flex;gap:2px;margin-left:auto;font-size:13px;font-weight:600}
.nt-nav nav a{padding:10px 14px;border-radius:999px;color:var(--moon-soft);text-decoration:none;transition:color .3s,background .3s}
.nt-nav nav a:hover,.nt-nav nav a[aria-current=page]{color:var(--moon);background:rgba(255,248,242,.09)}
.nt-nav .nt-btn{min-height:44px;padding:0 20px;font-size:13px}
@media(max-width:720px){.nt-nav{gap:10px;padding:8px 8px 8px 18px}.nt-nav nav{display:none}.nt-nav .nt-btn{margin-left:auto}.nt-brand{font-size:26px}}

/* ---------- Buttons ---------- */
.nt-btn{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 28px;border-radius:999px;border:1px solid transparent;font:600 15px/1 var(--text);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .5s var(--ease-out),border-color .5s var(--ease-out),color .5s var(--ease-out),transform .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.nt-btn:active{transform:scale(.97)}
.nt-btn .arrow{display:inline-block;transition:transform .5s var(--ease-out)}
.nt-btn:hover .arrow{transform:translate(3px,-3px)}
.nt-btn.glow,.nt .glow-submit{border-color:rgba(255,255,255,.2);background:linear-gradient(135deg,#a8406c 0%,#8a3a9e 50%,var(--violet-soft) 100%);color:#fff;box-shadow:0 16px 40px -14px rgba(143,51,85,.85),inset 0 1px 0 rgba(255,255,255,.3)}
.nt-btn.glow::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease-out)}
.nt-btn.glow:hover{box-shadow:0 22px 50px -14px rgba(143,51,85,.95),inset 0 1px 0 rgba(255,255,255,.4)}
.nt-btn.glow:hover::before{transform:translateX(120%)}
.nt-btn.glass{border-color:rgba(255,248,242,.3);background:var(--glass);color:var(--moon)}
.nt-btn.glass:hover{background:var(--glass-strong);border-color:rgba(255,248,242,.55)}
.nt-btn.moon{background:var(--moon);color:var(--ink)}
.nt-btn.moon:hover{background:var(--rose)}
.nt-btn.ink{background:var(--ink);color:var(--moon)}
.nt-btn.ink:hover{background:var(--accent)}
.nt-btn:disabled,.nt-btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none}
.nt :focus-visible{outline:2px solid var(--blush);outline-offset:4px}

/* ---------- The sky: a rounded night band with light, orbs, stars and grain ---------- */
.nt-sky{position:relative;isolation:isolate;overflow:hidden;margin:12px 12px 0;border-radius:36px;color:var(--moon);background:var(--sky)}
.nt-sky.flush{margin:0;border-radius:0}
.nt-sky-fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.nt-sky-fx::before{content:'';position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;background:conic-gradient(from 0deg,transparent 0 18%,rgba(255,214,236,.09) 26%,transparent 34% 58%,rgba(167,130,255,.1) 68%,transparent 78% 100%);animation:nt-turn 48s linear infinite}
.nt-sky-fx::after{content:'';position:absolute;inset:0;background-image:var(--grain);opacity:.07;mix-blend-mode:overlay}
.nt-orb{position:absolute;border-radius:50%;animation:nt-float 14s var(--ease-in-out) infinite alternate}
.nt-orb.plum{width:46vw;height:46vw;right:-8vw;top:-16vw;background:radial-gradient(closest-side,rgba(166,63,106,.5),transparent)}
.nt-orb.violet{width:40vw;height:40vw;left:18vw;bottom:-24vw;background:radial-gradient(closest-side,rgba(116,68,220,.42),transparent);animation-duration:18s;animation-delay:-6s}
.nt-orb.rose{width:22vw;height:22vw;left:-6vw;top:12%;background:radial-gradient(closest-side,rgba(237,138,206,.22),transparent);animation-duration:11s;animation-delay:-3s}
.nt-stars i{position:absolute;font-style:normal;color:var(--rose);line-height:1;opacity:.2;text-shadow:0 0 14px rgba(255,214,236,.9);animation:nt-twinkle 5s ease-in-out infinite}
.nt-stars i:nth-child(1){left:7%;top:22%;font-size:14px}.nt-stars i:nth-child(2){left:44%;top:12%;font-size:9px;animation-delay:-1.4s}.nt-stars i:nth-child(3){left:62%;top:80%;font-size:16px;animation-delay:-2.6s}.nt-stars i:nth-child(4){left:92%;top:18%;font-size:11px;animation-delay:-.8s}.nt-stars i:nth-child(5){left:28%;top:86%;font-size:10px;animation-delay:-3.4s}
.nt-sky-inner{position:relative;width:100%;max-width:1240px;margin:0 auto;padding:clamp(56px,8vw,104px) clamp(22px,4vw,48px) clamp(48px,6vw,80px)}

/* ---------- Type on the night ---------- */
.nt-eyebrow{display:flex;align-items:center;gap:10px;margin:0;font:600 11px/1.5 var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--moon-faint)}
.nt-eyebrow .spark{color:var(--blush);font-size:14px;letter-spacing:0;animation:nt-turn 8s linear infinite;display:inline-block}
.nt-title{font-family:var(--display);font-weight:400;font-size:clamp(42px,6.2vw,92px);line-height:.96;letter-spacing:-.045em;margin:20px 0 0;text-wrap:balance}
.nt-title em{font-style:italic;color:var(--rose);background:linear-gradient(100deg,var(--rose) 10%,var(--blush) 55%,#c7a8ff 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.06em}
.nt-lead{margin:22px 0 0;max-width:52ch;font-size:clamp(15px,1.2vw,18px);line-height:1.7;color:var(--moon-soft)}
.nt-rise{animation:nt-rise 1s var(--ease-out) both}
.nt-rise.d1{animation-delay:.12s}.nt-rise.d2{animation-delay:.24s}.nt-rise.d3{animation-delay:.36s}

/* ---------- Glass on the night, and raised paper on the day ---------- */
.nt-glass{border:1px solid var(--moon-line);border-radius:28px;background:linear-gradient(160deg,rgba(255,248,242,.1),rgba(255,248,242,.04));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 30px 80px -40px rgba(8,3,14,.9),inset 0 1px 0 rgba(255,255,255,.12)}
.nt-paper{border:1px solid var(--line);border-radius:28px;background:var(--paper-raised);box-shadow:0 40px 90px -50px rgba(36,22,33,.45),0 2px 0 rgba(255,255,255,.6) inset}
.nt-lift{transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.nt-lift:hover{transform:translateY(-6px);box-shadow:0 46px 90px -44px rgba(36,22,33,.55)}

/* ---------- Footer ---------- */
.nt-foot{max-width:1240px;margin:0 auto;padding:44px clamp(22px,4vw,48px) calc(44px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;font-size:12px;color:var(--ink-faint)}
.nt-foot .nt-brand{color:var(--ink);font-size:28px}.nt-foot .nt-brand span{color:var(--accent)}
.nt-foot a:not(.nt-brand){color:var(--ink-soft);text-decoration:none;transition:color .3s}.nt-foot a:not(.nt-brand):hover{color:var(--accent)}
.nt-foot .nt-foot-line{margin-right:auto}
.nt-foot .rights{flex-basis:100%;line-height:1.6}

/* ---------- Things that arrive as you scroll (night.js sets has-motion and is-in) ---------- */
.has-motion [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease-out) var(--d,0s),transform 1.1s var(--ease-out) var(--d,0s)}
.has-motion [data-reveal].is-in{opacity:1;transform:none}
[data-tilt]{transform-style:preserve-3d;transition:transform .6s var(--ease-out)}

@keyframes nt-turn{to{transform:rotate(360deg)}}
@keyframes nt-float{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3vw,2vw,0) scale(1.08)}}
@keyframes nt-twinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.95;transform:scale(1.1)}}
@keyframes nt-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.nt *,.nt *::before,.nt *::after{animation:none!important;transition:none!important}.has-motion [data-reveal]{opacity:1;transform:none}}