/* Moments: the camera, the cards and the wall. Shared by the app, the wall and every salon page. */

/* ---------- Cards ---------- */
.moment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:clamp(14px,2vw,24px);margin:18px 0 32px}
.moment{--moment-salon:var(--salon);display:flex;flex-direction:column;background:var(--paper-raised);border:1px solid var(--line);border-radius:20px;overflow:hidden;position:relative;transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.moment::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--moment-salon);z-index:2}
.moment:hover{transform:translateY(-3px);box-shadow:0 22px 50px -28px color-mix(in srgb,var(--ink) 55%,transparent)}
.moment-media{position:relative;aspect-ratio:4/5;background:color-mix(in srgb,var(--moment-salon) 18%,var(--paper-deep));overflow:hidden}
.moment-media img,.moment-media video{width:100%;height:100%;object-fit:cover;display:block}
.moment-kind{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:rgba(20,10,18,.5);color:#fff8f2;backdrop-filter:blur(6px)}
.moment-body{padding:16px 18px 18px;display:grid;gap:8px}
.moment-body .pill{justify-self:start}
.moment-who{margin:0;font-size:13px;color:var(--ink);font-weight:600}
.moment-who a{text-decoration:none;color:inherit;font-family:var(--display);font-style:italic;font-weight:400;font-size:18px;letter-spacing:-.01em}
.moment-who a:hover{color:var(--moment-salon)}
.moment-who .with{font-weight:400;color:var(--ink-soft)}
.moment-caption{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft);overflow-wrap:anywhere}
.moment-caption .tag{color:color-mix(in srgb,var(--moment-salon) 80%,var(--ink));font-weight:600}
.moment-meta{margin:0;font-size:12px;color:var(--ink-faint)}
.moment-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.moment-actions button{min-height:40px;padding:8px 16px;font:600 13px/1 var(--text);border-radius:999px;cursor:pointer;background:var(--ink);color:var(--paper-raised);border:1px solid var(--ink);display:inline-flex;align-items:center;gap:6px;transition:background .45s var(--ease-out),color .45s var(--ease-out),border-color .45s var(--ease-out)}
.moment-actions button:disabled{opacity:.5;cursor:not-allowed}
.moment-actions button:focus-visible{outline:3px solid var(--moment-salon);outline-offset:3px}
.moment-actions .like{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.moment-actions .like[aria-pressed=true]{background:color-mix(in srgb,var(--moment-salon) 14%,var(--paper-raised));border-color:var(--moment-salon);color:color-mix(in srgb,var(--moment-salon) 75%,var(--ink))}
.moment-actions .like span:first-child{font-size:16px;line-height:1}
.moment-actions .ghost-action{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.moment-actions .ghost-action:hover{background:var(--ink);color:var(--paper-raised);border-color:var(--ink)}
.moment-actions .quiet{border-color:transparent;font-weight:500;color:var(--ink-faint)}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:6px;border-radius:999px;background:var(--salon);color:var(--salon-ink);font-size:11px;font-weight:700}
.moments-intro h2{font-size:clamp(26px,3.4vw,40px);max-width:22ch}
.moments-intro .actions .btn{min-height:46px}

/* ---------- Camera ---------- */
body.studio-open{overflow:hidden}
.studio{position:fixed;inset:0;z-index:50;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(120% 70% at 50% 0%,#3a1c2e,#140a12 70%);color:#fff8f2;font-family:var(--text);animation:studio-in .5s var(--ease-out)}
@keyframes studio-in{from{opacity:0;transform:scale(1.02)}}
.studio button{font:inherit}
.studio-top{display:flex;align-items:center;gap:12px;padding:max(14px,env(safe-area-inset-top)) 16px 10px}
.studio-title{flex:1;font-family:var(--display);font-style:italic;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.studio-spacer{flex:1}
.studio-icon{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:rgba(255,248,242,.1);border:1px solid rgba(255,248,242,.18);color:#fff8f2;font-size:18px}
.studio-icon:hover{background:rgba(255,248,242,.2);border-color:rgba(255,248,242,.3);color:#fff8f2}
.studio-chip{min-height:36px;padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.04em;background:transparent;border:1px solid rgba(255,248,242,.3);color:rgba(255,248,242,.75)}
.studio-chip[aria-pressed=true]{background:#fff8f2;color:#241621;border-color:#fff8f2}
.studio-chip:hover{background:rgba(255,248,242,.16);color:#fff8f2;border-color:rgba(255,248,242,.5)}
.studio-stage{position:relative;display:grid;place-items:center;min-height:0;padding:4px 16px}
.studio-stage canvas{height:100%;max-height:100%;max-width:100%;aspect-ratio:4/5;width:auto;border-radius:22px;box-shadow:0 30px 80px -30px #000;background:#1d1219}
.studio-hint{position:absolute;left:50%;top:22px;transform:translateX(-50%);margin:0;max-width:min(86%,420px);text-align:center;font-size:13px;color:#fff8f2;background:rgba(20,10,18,.55);backdrop-filter:blur(8px);padding:8px 14px;border-radius:999px}
.studio-hint:empty{display:none}
.studio-progress{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);width:min(60%,280px);height:4px;border-radius:4px;background:rgba(255,248,242,.25);overflow:hidden}
.studio-progress span{display:block;height:100%;background:#ff4d6d;transform-origin:left;transform:scaleX(0)}
.studio-bottom{display:grid;gap:12px;padding:8px 0 max(18px,env(safe-area-inset-bottom))}
.studio-looks{display:flex;gap:10px;overflow-x:auto;padding:4px 16px;scrollbar-width:none;scroll-snap-type:x mandatory}
.studio-looks::-webkit-scrollbar{display:none}
.studio-looks button{flex:none;scroll-snap-align:center;display:grid;justify-items:center;gap:6px;min-height:0;padding:0;background:none;border:0;color:rgba(255,248,242,.7);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.studio-looks button:hover{background:none;color:#fff8f2}
.studio-looks .swatch{width:54px;height:54px;border-radius:50%;border:2px solid transparent;background:linear-gradient(140deg,#f2c9b3 0%,#c97a8c 45%,#5b2a43 100%);transition:transform .4s var(--ease-out),border-color .4s var(--ease-out)}
.studio-looks [aria-checked=true]{color:#fff8f2}
.studio-looks [aria-checked=true] .swatch{border-color:#fff8f2;transform:scale(1.08)}
.swatch-glow{filter:brightness(1.08) contrast(.96) saturate(1.14)}
.swatch-rose{filter:sepia(.14) hue-rotate(-14deg) saturate(1.16) brightness(1.04)}
.swatch-seda{filter:contrast(.86) brightness(1.07) saturate(.94)}
.swatch-dorado{filter:sepia(.3) saturate(1.28) brightness(1.03) contrast(1.03)}
.swatch-editorial{filter:contrast(1.2) saturate(.78) brightness(.98)}
.swatch-noir{filter:grayscale(1) contrast(1.24) brightness(1.03)}
.studio-modes{display:flex;justify-content:center;gap:6px}
.studio-modes button{min-height:34px;padding:6px 14px;background:none;border:0;border-radius:999px;color:rgba(255,248,242,.6);font-size:13px;font-weight:600}
.studio-modes button:hover{background:rgba(255,248,242,.1);color:#fff8f2}
.studio-modes [aria-selected=true]{color:#241621;background:#fff8f2}
.studio-controls{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 22px}
.studio-gallery{justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,248,242,.3);font-size:13px;font-weight:600;cursor:pointer;margin:0;color:#fff8f2}
.studio-gallery input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.studio-gallery:focus-within{outline:3px solid #fff8f2;outline-offset:3px}
.studio-shutter{width:80px;height:80px;min-height:80px;padding:0;border-radius:50%;background:transparent;border:4px solid #fff8f2;display:grid;place-items:center}
.studio-shutter span{width:62px;height:62px;border-radius:50%;background:#fff8f2;transition:all .35s var(--ease-out)}
.studio-shutter:hover{background:transparent;border-color:#fff8f2}
.studio-shutter:active span{transform:scale(.9)}
.studio-shutter.is-video span{background:#ff4d6d}
.studio-shutter.is-recording span{width:30px;height:30px;border-radius:8px}
.studio :focus-visible{outline:3px solid #fff8f2;outline-offset:3px}

/* Review */
.studio-review{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:24px;align-items:start;justify-content:center;padding:8px 16px 24px;overflow:auto;min-height:0}
.studio-result{display:grid;place-items:center}
.studio-result img,.studio-result video{max-height:calc(100vh - 140px);max-width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:22px;box-shadow:0 30px 80px -30px #000;background:#1d1219}
.studio-form{background:#fff8f2;color:var(--ink);border-radius:22px;padding:22px;display:grid;gap:4px}
.studio-form textarea{min-height:96px}
.studio-actions{display:grid;gap:10px;margin-top:6px}
.studio-actions .btn{min-height:48px}
.studio-fine{font-size:12px;line-height:1.6;color:var(--ink-soft);margin:12px 0 0}
.studio-done{text-align:center;display:grid;gap:12px;justify-items:center}
.studio-done h2{font-size:28px}
.studio-done-mark{font-size:30px;color:var(--salon)}
.studio-done .studio-actions{width:100%}
@media(max-width:820px){.studio-review{grid-template-columns:1fr}.studio-result img,.studio-result video{max-height:58vh}}
@media(prefers-reduced-motion:reduce){.studio{animation:none}.moment:hover{transform:none}}

/* ---------- Reel: spotlight, salon tiles, rows and viewer ----------
   The one dark room in a paper-coloured brand: moments are pictures, and pictures read best on a
   screening-room black. The salon's colour glows through it. */
.reel{--reel-bg:#170c14;--reel-ink:#fff8f2;--reel-soft:rgba(255,248,242,.7);position:relative;isolation:isolate;margin:22px 0 34px;padding:clamp(18px,3vw,34px) 0 clamp(22px,3vw,40px);background:radial-gradient(90% 60% at 85% 0%,color-mix(in srgb,var(--salon) 34%,transparent),transparent 70%),radial-gradient(60% 50% at 0% 100%,color-mix(in srgb,var(--salon) 18%,transparent),transparent 70%),var(--reel-bg);color:var(--reel-ink);border-radius:var(--radius-lg);overflow:hidden}
.reel.bleed{border-radius:0;margin:0}
.reel h2,.reel h3{color:var(--reel-ink)}
.reel-empty{padding:10px clamp(16px,3vw,40px);color:var(--reel-soft)}

.spotlight{--moment-salon:var(--salon);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:clamp(18px,4vw,56px);margin:0 clamp(16px,3vw,40px) clamp(22px,3vw,36px);min-height:clamp(320px,42vw,520px);border-radius:24px;overflow:hidden;isolation:isolate}
.spotlight-backdrop{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);object-fit:cover;filter:blur(38px) saturate(1.3) brightness(.55);z-index:-2;transform:scale(1.05)}
.spotlight::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(23,12,20,.15),rgba(23,12,20,.86) 62%)}
.spotlight-media{align-self:stretch;position:relative}
.spotlight-media img,.spotlight-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mask-image:linear-gradient(90deg,#000 70%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 70%,transparent)}
.spotlight-copy{padding:clamp(20px,3vw,40px) clamp(20px,3vw,40px) clamp(20px,3vw,40px) 0;display:grid;gap:14px;max-width:46ch;animation:reel-rise .9s var(--ease-out) both}
.spotlight-kicker{margin:0;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:color-mix(in srgb,var(--moment-salon) 45%,#fff8f2)}
.spotlight-copy h2{font-size:clamp(34px,4.6vw,64px);font-weight:300;line-height:.98;letter-spacing:-.03em}
.spotlight-who{margin:0;font-size:14px;color:var(--reel-soft)}
.spotlight-caption{margin:0;font-size:16px;line-height:1.6;color:rgba(255,248,242,.86)}
.spotlight-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.reel-cta{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 26px;border-radius:999px;border:0;background:#fff8f2;color:#241621;font:600 15px/1 var(--text);cursor:pointer;transition:transform .4s var(--ease-out),background .4s var(--ease-out)}
.reel-cta:hover{background:color-mix(in srgb,var(--moment-salon) 22%,#fff8f2);color:#241621;transform:scale(1.03)}
.reel-cta:focus-visible{outline:3px solid #fff8f2;outline-offset:3px}
@keyframes reel-rise{from{opacity:0;transform:translateY(18px)}}

.salon-tiles{display:flex;gap:14px;overflow-x:auto;padding:4px clamp(16px,3vw,40px) 20px;scrollbar-width:none;scroll-snap-type:x proximity}
.salon-tiles::-webkit-scrollbar{display:none}
.salon-tile{--moment-salon:var(--salon);flex:none;scroll-snap-align:start;position:relative;display:grid;place-items:center;width:clamp(150px,18vw,220px);aspect-ratio:16/9;border-radius:16px;overflow:hidden;text-decoration:none;color:#fff8f2;isolation:isolate;background:linear-gradient(140deg,color-mix(in srgb,var(--moment-salon) 70%,#170c14),#241621);border:1px solid rgba(255,248,242,.16);box-shadow:0 18px 40px -22px #000;transition:transform .5s var(--ease-out),border-color .5s var(--ease-out),box-shadow .5s var(--ease-out)}
.salon-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:0;transform:scale(1.1);transition:opacity .6s var(--ease-out),transform 1.2s var(--ease-out)}
.salon-tile::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 30%,rgba(23,12,20,.7))}
.salon-tile-name{font-family:var(--display);font-style:italic;font-size:clamp(19px,2vw,26px);letter-spacing:-.02em;text-align:center;padding:0 12px;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.salon-tile:hover,.salon-tile:focus-visible,.salon-tile[aria-current=page]{transform:scale(1.05);border-color:rgba(255,248,242,.85);box-shadow:0 26px 50px -20px #000,0 0 0 1px rgba(255,248,242,.3)}
.salon-tile:hover img,.salon-tile:focus-visible img,.salon-tile[aria-current=page] img{opacity:1;transform:scale(1)}
.salon-tile:focus-visible{outline:none}

.rail{margin-top:clamp(14px,2vw,26px)}
.rail-head{display:flex;align-items:baseline;gap:12px;padding:0 clamp(16px,3vw,40px);margin-bottom:6px}
.rail-head h3{font-family:var(--text);font-weight:600;font-size:clamp(16px,1.5vw,19px);letter-spacing:.01em}
.rail-note{font-size:12px;color:var(--reel-soft)}
.rail-nav{margin-left:auto;display:flex;gap:6px}
.rail-arrow{width:36px;height:36px;min-height:36px;padding:0;border-radius:50%;border:1px solid rgba(255,248,242,.28);background:rgba(255,248,242,.06);color:#fff8f2;font-size:20px;line-height:1;cursor:pointer;transition:background .3s var(--ease-out)}
.rail-arrow:hover:not(:disabled){background:rgba(255,248,242,.2);border-color:rgba(255,248,242,.28);color:#fff8f2}
.rail-arrow:disabled{opacity:.3;cursor:default}
.rail-arrow:focus-visible{outline:2px solid #fff8f2;outline-offset:2px}
.rail-track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,19vw,230px);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;padding:12px clamp(16px,3vw,40px) 18px;scroll-padding-inline:clamp(16px,3vw,40px);scroll-snap-type:x mandatory;scrollbar-width:none}
.rail-track::-webkit-scrollbar{display:none}
.tile{--moment-salon:var(--salon);position:relative;scroll-snap-align:start;aspect-ratio:4/5;min-height:0;padding:0;border:0;border-radius:14px;overflow:hidden;cursor:pointer;background:linear-gradient(150deg,color-mix(in srgb,var(--moment-salon) 50%,#241621),#170c14);color:#fff8f2;text-align:left;box-shadow:0 14px 34px -20px #000;transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.tile:hover{background:linear-gradient(150deg,color-mix(in srgb,var(--moment-salon) 50%,#241621),#170c14);color:#fff8f2;border:0}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.tile-blank{position:absolute;inset:0;display:grid;place-items:center;font-size:40px;color:rgba(255,248,242,.5)}
.tile-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(23,12,20,.88));opacity:.75;transition:opacity .45s var(--ease-out)}
.tile-badge{position:absolute;top:10px;left:10px;padding:5px 10px;border-radius:999px;background:rgba(23,12,20,.6);backdrop-filter:blur(6px);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.tile-wait{top:auto;bottom:62px;background:color-mix(in srgb,var(--moment-salon) 70%,#170c14)}
.tile-info{position:absolute;left:12px;right:12px;bottom:12px;display:grid;gap:3px;transform:translateY(4px);transition:transform .45s var(--ease-out)}
.tile-title{font-family:var(--display);font-style:italic;font-size:18px;line-height:1.1;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile-meta{font-size:11px;color:rgba(255,248,242,.75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .45s var(--ease-out)}
.tile:hover,.tile:focus-visible{transform:scale(1.06);z-index:2;box-shadow:0 26px 50px -18px #000}
.tile:hover img,.tile:focus-visible img{transform:scale(1.04)}
.tile:hover .tile-shade,.tile:focus-visible .tile-shade{opacity:1}
.tile:hover .tile-info,.tile:focus-visible .tile-info{transform:none}
.tile:hover::after,.tile:focus-visible::after{box-shadow:inset 0 0 0 2px rgba(255,248,242,.9)}
.tile:focus-visible{outline:none}

.viewer{position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:rgba(14,7,12,.94);color:#fff8f2;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto 1fr;align-items:center}
.viewer:not([open]){display:none}
.viewer::backdrop{background:rgba(14,7,12,.7);backdrop-filter:blur(10px)}
.viewer-bar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 18px 6px}
.viewer-count{font-size:13px;letter-spacing:.08em;color:rgba(255,248,242,.7)}
.viewer-close,.viewer-step{width:46px;height:46px;min-height:46px;padding:0;border-radius:50%;border:1px solid rgba(255,248,242,.25);background:rgba(255,248,242,.08);color:#fff8f2;font-size:22px;cursor:pointer}
.viewer-close:hover,.viewer-step:hover:not(:disabled){background:rgba(255,248,242,.2);color:#fff8f2;border-color:rgba(255,248,242,.4)}
.viewer-step{margin:0 14px;font-size:28px}
.viewer-step:disabled{opacity:.2;cursor:default}
.viewer-close:focus-visible,.viewer-step:focus-visible{outline:2px solid #fff8f2;outline-offset:2px}
.viewer-stage{min-height:0;height:100%;display:grid;place-items:center;padding:0 0 max(16px,env(safe-area-inset-bottom));touch-action:pan-y}
.viewer-stage .moment{width:min(100%,980px);max-height:calc(100dvh - 90px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);border-radius:22px;background:var(--paper-raised);color:var(--ink);animation:reel-rise .45s var(--ease-out) both}
.viewer-stage .moment-media{aspect-ratio:4/5;max-height:calc(100dvh - 90px)}
.viewer-stage .moment-body{align-content:start;padding:26px;overflow:auto}
.viewer-stage .moment-who a{font-size:26px}
.viewer-stage .moment:hover{transform:none}
@media (max-width:820px){
 .spotlight{grid-template-columns:1fr;min-height:0}
 .spotlight-media{aspect-ratio:4/5;max-height:62vh}
 .spotlight-media img,.spotlight-media video{mask-image:linear-gradient(180deg,#000 70%,transparent);-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent)}
 .spotlight::after{background:linear-gradient(180deg,rgba(23,12,20,.1),rgba(23,12,20,.88) 70%)}
 .spotlight-copy{padding:0 20px 24px;margin-top:-80px;position:relative}
 .viewer{grid-template-columns:1fr}
 .viewer-step{display:none}
 .viewer-stage{padding:0 10px max(10px,env(safe-area-inset-bottom));overflow:auto;align-items:start}
 .viewer-stage .moment{grid-template-columns:1fr;max-height:none}
 .viewer-stage .moment-media{max-height:68dvh}
}
@media (prefers-reduced-motion:reduce){.spotlight-copy,.viewer-stage .moment{animation:none}.tile,.tile img,.salon-tile,.salon-tile img{transition:none}}
body:has(dialog.viewer[open]){overflow:hidden}