/* The Bellfy wall on the night: the sky up top holds the opening, the salons' work and the reel of
   moments; underneath, on paper, every moment in order. The cards themselves are moments.css. */

/* ---------- The bar ---------- */
/* The way back to her club or to the salon's panel, when the wall was opened from the app. In the
   installed app there is no browser bar, so this is the only way back. */
.wall-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 16px 0 12px;border-radius:999px;background:var(--moon);color:var(--ink);font:600 13px/1 var(--text);text-decoration:none;white-space:nowrap;transition:background .3s}
.wall-back:hover{background:var(--rose)}
.wall-back[hidden]{display:none}
.wall-nav nav{margin-left:auto}
.wall-account{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--moon-faint);min-width:0}
.wall-account span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:24ch}
.wall-account button{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,248,242,.3);background:var(--glass);color:var(--moon);font:600 13px/1 var(--text);cursor:pointer;transition:background .3s,border-color .3s}
.wall-account button:hover{background:var(--glass-strong);border-color:rgba(255,248,242,.55)}

/* ---------- The opening ---------- */
/* The sky starts under the floating bar, as on the cover page, so the bar is glass on the night. */
.wall-opening{margin-top:-76px}
.wall-opening .wall-hero{padding-top:calc(76px + clamp(44px,7vw,96px))}
.wall-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);align-items:center;gap:clamp(32px,5vw,72px)}
.wall-copy .nt-title{font-size:clamp(46px,6.4vw,96px)}
.wall-copy .nt-title em{display:block}
.wall-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.wall-collage{margin:0;perspective:1200px}
.wall-collage-frame{position:relative;border-radius:28px;overflow:hidden;border:1px solid var(--moon-line);box-shadow:0 50px 90px -40px rgba(5,2,10,.95),0 0 0 6px rgba(255,248,242,.04);transform:rotate(1.6deg)}
.wall-collage-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.14),transparent 35%,transparent 70%,rgba(20,11,29,.35));pointer-events:none}
.wall-collage-frame.is-tilting{transition:transform .2s}
.wall-collage-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.wall-collage figcaption{margin:18px 4px 0;font-size:13px;line-height:1.65;color:var(--moon-faint)}
.wall-collage figcaption span{margin-right:6px;font-family:var(--display);font-style:italic;font-size:18px;color:var(--moon)}
.wall-collage figcaption a{color:var(--rose);font-weight:600;white-space:nowrap;text-decoration:none;border-bottom:1px solid rgba(255,214,236,.4)}
.wall-collage figcaption a:hover{border-bottom-color:var(--rose)}

/* The reel lives inside the sky, after the opening: no band of its own. */
.wall-opening .reel{margin:0;padding:0 0 clamp(36px,5vw,64px);background:none;border-radius:0}
.wall-opening .reel>*{max-width:1240px;margin-left:auto;margin-right:auto}
.wall-opening .reel .spotlight{margin:0 clamp(16px,4vw,48px) clamp(24px,3vw,36px);border:1px solid var(--moon-line);border-radius:28px;box-shadow:0 40px 80px -40px rgba(5,2,10,.9)}
.wall-opening .reel .salon-tiles,.wall-opening .reel .rail-head,.wall-opening .reel .rail-track{padding-left:clamp(16px,4vw,48px);padding-right:clamp(16px,4vw,48px)}
.wall-opening .reel .rail-track{scroll-padding-inline:clamp(16px,4vw,48px)}

/* ---------- Every moment, on paper ---------- */
.wall-body{max-width:1336px;margin:0 auto;padding:clamp(40px,6vw,88px) 0 0;scroll-margin-top:90px}
.wall-all{padding:0 clamp(20px,4vw,48px) 6px;font-size:clamp(34px,4.6vw,60px);font-weight:400;letter-spacing:-.035em}
.wall-all em{font-weight:400;color:var(--accent)}
.wall-grid{padding:0 clamp(16px,4vw,48px);margin-top:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.wall-grid>.moment{border-radius:24px;box-shadow:0 30px 60px -48px rgba(60,20,50,.5);animation:wall-rise .9s var(--ease-out) both}
.wall-grid>.moment:hover{box-shadow:0 40px 70px -40px rgba(60,20,50,.55)}
.wall-grid>.moment:nth-child(2){animation-delay:.06s}.wall-grid>.moment:nth-child(3){animation-delay:.12s}.wall-grid>.moment:nth-child(4){animation-delay:.18s}
.wall-grid .moment-media{cursor:zoom-in}
@keyframes wall-rise{from{opacity:0;transform:translateY(24px)}}

.wall-empty{position:relative;overflow:hidden;width:min(760px,calc(100% - 32px));margin:0 auto;padding:clamp(36px,6vw,64px) clamp(24px,5vw,56px);text-align:center}
.wall-empty::before{content:'';position:absolute;left:50%;top:-140px;width:420px;height:280px;margin-left:-210px;border-radius:50%;background:radial-gradient(closest-side,rgba(237,138,206,.28),transparent);pointer-events:none}
.wall-empty-mark{position:relative;display:grid;place-items:center;width:58px;height:58px;margin:0 auto 22px;border-radius:50%;background:linear-gradient(135deg,#a8406c,#7444dc);color:var(--moon);font-size:22px;box-shadow:0 16px 34px -14px rgba(143,51,85,.8)}
.wall-empty h2{position:relative;font-size:clamp(34px,5vw,56px);font-weight:400;letter-spacing:-.035em;line-height:1}
.wall-empty h2 em{font-weight:400;color:var(--accent)}
.wall-empty p{position:relative;max-width:42ch;margin:16px auto 0;font-size:16px;line-height:1.65}
.wall-empty-actions{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;margin-top:30px}
.wall-empty-link{font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.wall-empty-link:hover{border-bottom-color:var(--accent)}
.wall-more{display:flex;justify-content:center;padding:28px clamp(16px,4vw,48px) 20px}
.wall-more:has([data-more][hidden]){padding:0}

/* ---------- A moment opened, and the forms, on the night ---------- */
.wall-dialog{border:0;padding:0;background:transparent;max-width:min(960px,calc(100vw - 32px));width:100%;color:var(--ink)}
.wall-dialog::backdrop{background:rgba(20,11,29,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wall-focus{position:relative}
.wall-focus .moment{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border-radius:24px}
.wall-focus .moment-media{aspect-ratio:4/5;cursor:default}
.wall-focus .moment-body{align-content:start;padding:28px}
.wall-focus .moment-who a{font-size:28px}
.wall-focus .moment-caption{font-size:16px}
.wall-close{position:absolute;top:12px;right:12px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgba(20,10,18,.6);color:#fff8f2;font-size:16px;cursor:pointer}
.wall-close:focus-visible{outline:3px solid #fff8f2;outline-offset:2px}
.wall-form{position:relative;overflow:hidden;isolation:isolate;max-width:480px;margin:auto;display:grid;gap:14px;padding:clamp(26px,5vw,40px);border-radius:30px;border:1px solid var(--moon-line);color:var(--moon);background:var(--sky);box-shadow:0 50px 100px -40px rgba(5,2,10,.95),inset 0 1px 0 rgba(255,255,255,.12)}
.wall-form h2{font-size:clamp(30px,5vw,42px);font-weight:400;letter-spacing:-.035em;line-height:1.02}
.wall-form h2 em{font-weight:400;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}
.wall-form p{color:var(--moon-soft)}
.wall-form label{display:grid;gap:8px;font-size:13px;font-weight:600;color:var(--moon-soft)}
.wall-form input,.wall-form select{min-height:52px;border:1px solid rgba(255,248,242,.24);border-radius:16px;padding:0 16px;font:16px var(--text);background:rgba(255,248,242,.08);color:var(--moon)}
.wall-form input::placeholder{color:rgba(255,248,242,.45)}
.wall-form select option{color:var(--ink)}
.wall-form input:focus,.wall-form select:focus{outline:none;border-color:var(--blush);box-shadow:0 0 0 4px rgba(237,138,206,.2)}
.wall-form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.wall-status{font-size:13px;color:var(--rose)}
.wall-status:empty{display:none}

#notice{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;max-width:calc(100vw - 32px);width:max-content;padding:14px 22px;border-radius:999px;border:1px solid var(--moon-line);background:rgba(20,11,29,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--moon);font-size:14px;box-shadow:0 18px 44px -14px rgba(8,3,14,.8)}
#notice:empty{display:none}

@media (max-width:900px){
 .wall-hero{grid-template-columns:1fr}
 .wall-collage-frame{transform:none}
}
@media (max-width:760px){
 .wall-focus .moment{grid-template-columns:1fr}
 .wall-focus .moment-body{padding:20px}
 .wall-account{margin-left:auto}
 .wall-account span{display:none}
 .wall-back:not([hidden])~.nt-brand{display:none}
 .wall-actions .nt-btn{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){.wall-grid>.moment{animation:none}.wall-collage-frame{transform:none}}