/* THE LOUNGE WAKES UP (10/7, his picks: "Wake up the lounge", "Live photo wall", "Lounge jukebox").
   Three things on the homepage, all drawn by assets/js/lounge.js, all additive: with the script off the
   lounge is still a picture, the contact sheet section stays empty and hidden, nothing else moves.
   ⛔ Square frames, no arched tops (feedback-no-thumb-arches). ⛔ Run stamp.py after editing this file. */

/* ---------- the lounge: who you can tap, and what they say ---------- */
html.cath .hero .lg-layer{position:absolute;inset:0;z-index:3;pointer-events:none;}
html.cath .hero .lg-oc{position:absolute;pointer-events:auto;background:none;border:0;padding:0;margin:0;cursor:pointer;
  border-radius:44% 44% 30% 30%;-webkit-tap-highlight-color:transparent;}
html.cath .hero .lg-oc::after{content:'';position:absolute;inset:6% 8%;border-radius:inherit;opacity:0;transition:opacity .25s;
  background:radial-gradient(ellipse at 50% 40%,rgba(255,121,198,.30),rgba(255,121,198,.08) 55%,transparent 72%);}
html.cath .hero .lg-oc:hover::after,html.cath .hero .lg-oc:focus-visible::after,html.cath .hero .lg-oc.on::after{opacity:1;}
html.cath .hero .lg-oc:focus-visible{outline:2px solid var(--pink-glow);outline-offset:2px;}
/* the hint: a small spark over each head until this phone has tapped somebody */
html.cath .hero .lg-oc i{position:absolute;left:50%;top:-4px;width:9px;height:9px;margin-left:-4.5px;pointer-events:none;
  background:var(--pink-glow);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  filter:drop-shadow(0 0 5px rgba(255,121,198,.9));animation:lg-spark 2.6s ease-in-out infinite;}
html.cath .hero .lg-oc:nth-child(2) i{animation-delay:-.5s;}
html.cath .hero .lg-oc:nth-child(3) i{animation-delay:-1.1s;}
html.cath .hero .lg-oc:nth-child(4) i{animation-delay:-1.6s;}
html.cath .hero .lg-oc:nth-child(5) i{animation-delay:-2.1s;}
html.cath .hero.lg-met .lg-oc i{display:none;}
@keyframes lg-spark{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(45deg)}}

/* phones in their hands and the candle stands: they glow on their own */
html.cath .hero .lg-glow{position:absolute;width:var(--s,18px);height:var(--s,18px);margin:calc(var(--s,18px) / -2) 0 0 calc(var(--s,18px) / -2);
  border-radius:50%;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle,var(--c,rgba(255,121,198,.85)),transparent 68%);
  animation:lg-pulse 3.2s ease-in-out infinite;}
html.cath .hero .lg-glow.cn{--c:rgba(255,190,120,.75);animation:lg-candle 1.9s steps(9,jump-none) infinite;}
html.cath .hero .lg-glow:nth-of-type(2n){animation-delay:-1.3s;}
@keyframes lg-pulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}
@keyframes lg-candle{0%{opacity:.75}12%{opacity:.95}25%{opacity:.6}37%{opacity:.9}50%{opacity:.7}62%{opacity:1}75%{opacity:.65}87%{opacity:.85}100%{opacity:.75}}
/* after dark (7pm to 6am on the visitor's own clock): the window burns brighter and the room breathes */
html.cath .hero.lg-dark .hero-rose{animation-duration:3.8s;}
html.cath .hero.lg-dark::before{animation:lg-room 7s ease-in-out infinite;}
html.cath .hero.lg-dark .lg-glow.cn{--c:rgba(255,190,120,.95);}
@keyframes lg-room{0%,100%{opacity:1}47%{opacity:1}50%{opacity:.82}53%{opacity:1}71%{opacity:.9}74%{opacity:1}}

/* the bubble: one line in their own voice, and a door to something live */
html.cath .hero .lg-say{position:absolute;z-index:6;width:min(300px,calc(100% - 20px));pointer-events:auto;text-align:left;
  background:rgba(10,10,13,.94);border:1px solid rgba(255,121,198,.55);box-shadow:0 0 0 1px rgba(10,10,13,.9),0 12px 30px rgba(0,0,0,.6),0 0 24px rgba(255,121,198,.18);
  padding:12px 14px 13px;opacity:0;transform:translateY(6px) scale(.97);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1);}
html.cath .hero .lg-say.open{opacity:1;transform:none;}
html.cath .hero .lg-say[hidden]{display:none;}
html.cath .hero .lg-say::after{content:'';position:absolute;left:var(--tail,50%);width:14px;height:14px;margin-left:-7px;background:inherit;
  border:1px solid rgba(255,121,198,.55);border-top:0;border-left:0;transform:rotate(45deg);bottom:-8px;}
html.cath .hero .lg-say.below::after{bottom:auto;top:-8px;transform:rotate(225deg);}
html.cath .hero .lg-say b{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--pink-glow);font-weight:700;}
html.cath .hero .lg-say q{display:block;quotes:none;margin-top:7px;font-family:var(--f-display);font-style:italic;font-weight:800;font-size:19px;line-height:1.15;
  text-transform:uppercase;color:var(--ink);letter-spacing:.01em;}
html.cath .hero .lg-say q::before,html.cath .hero .lg-say q::after{content:none;}
html.cath .hero .lg-say a,html.cath .hero .lg-say button.go{display:inline-block;margin-top:10px;padding:7px 11px;border:1px solid var(--pink-glow);background:rgba(255,121,198,.12);
  font:700 10.5px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;cursor:pointer;}
html.cath .hero .lg-say a:hover,html.cath .hero .lg-say button.go:hover{background:var(--pink-glow);color:#1a0a14;}
html.cath .hero .lg-say .x{position:absolute;top:4px;right:6px;border:0;background:none;color:var(--muted);font-size:18px;line-height:1;padding:4px;cursor:pointer;}

/* the record player, bottom corner of the lounge */
/* phones: the empty top right of the nave (the floor is all legs and boots); wide screens: beside the right-hand cards */
html.cath .hero .lg-deck{position:absolute;z-index:5;right:12px;top:12px;pointer-events:auto;cursor:pointer;
  display:grid;justify-items:center;gap:6px;background:none;border:0;padding:0;color:var(--ink);}
html.cath .hero .lg-deck .lg-vinyl{width:clamp(52px,6vw,74px);}
html.cath .hero .lg-deck span{font:700 9px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:#d9cfe0;text-shadow:0 0 8px #0a0a0d;}
html.cath .hero .lg-deck:hover span,html.cath .hero .lg-deck.on span{color:var(--pink-glow);}
@media (min-width:821px){ html.cath .hero .lg-deck{top:auto;right:calc(clamp(14px,2.6vw,52px) + 12vw);bottom:9%;} }

/* a record, drawn in CSS: grooves, a pink label with the mark, a glint that stays put while it spins */
.lg-vinyl{position:relative;aspect-ratio:1;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,#0c0b10 0 2px,#1b1922 2px 3px),#0c0b10;
  box-shadow:0 0 0 2px #26232d,0 6px 16px rgba(0,0,0,.6),0 0 18px rgba(255,121,198,.25);}
.lg-vinyl::before{content:'';position:absolute;inset:31%;border-radius:50%;background:radial-gradient(circle,#1a0a14 0 9%,transparent 10%),url('../cathedral/mark.webp') center/72% no-repeat,var(--pink-glow);}
.lg-vinyl::after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,transparent 0 8%,rgba(255,255,255,.14) 12%,transparent 18% 58%,rgba(255,255,255,.09) 62%,transparent 68%);}
.lg-vinyl.spin::before{animation:lg-spin 1.8s linear infinite;}
@keyframes lg-spin{to{transform:rotate(360deg)}}

/* ---------- the contact sheet ---------- */
#frames[hidden]{display:none !important;}
#frames .fr-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;}
#frames .fr-deal{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:8px 12px;cursor:pointer;
  font:700 10.5px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;}
#frames .fr-deal:hover{border-color:var(--pink-glow);color:var(--pink-glow);}
#frames .fr-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:12px;position:relative;padding:8px;
  background:#121016;border:1px solid rgba(244,238,242,.18);}
@media (max-width:820px){ #frames .fr-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:6px;} }
#frames .fr-t{position:relative;aspect-ratio:1;overflow:hidden;border:0;padding:0;margin:0;background:#0a0a0d;cursor:pointer;display:block;}
#frames .fr-t img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .6s,transform .45s cubic-bezier(.2,.8,.2,1);}
#frames .fr-t img.out{opacity:0;}
#frames .fr-t:hover img{transform:scale(1.06);}
#frames .fr-t:focus-visible{outline:2px solid var(--pink-glow);outline-offset:1px;z-index:1;}
#frames .fr-t.have::after{content:'';position:absolute;right:4px;top:4px;width:7px;height:7px;border-radius:50%;background:var(--pink-glow);box-shadow:0 0 6px var(--pink-glow);}
#frames .fr-t.deal img{animation:fr-deal .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--dl,0s);}
@keyframes fr-deal{from{opacity:0;transform:translateY(10px) rotate(-3deg) scale(.92)}to{opacity:1;transform:none}}
#frames .fr-foot{margin-top:9px;font:600 10px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
#frames .fr-foot b{color:var(--pink);font-weight:700;}

/* the frame, big */
.fr-box{position:fixed;inset:0;z-index:9050;display:grid;place-items:center;padding:18px;background:rgba(6,5,8,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s;}
.fr-box.open{opacity:1;}
.fr-box[hidden]{display:none;}
.fr-card{position:relative;width:min(560px,100%);max-height:calc(100vh - 36px);display:grid;grid-template-rows:minmax(0,1fr) auto;background:#0d0c11;
  border:1px solid rgba(255,121,198,.45);box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 30px rgba(255,121,198,.15);}
.fr-pic{position:relative;min-height:0;background:#0a0a0d;display:grid;place-items:center;overflow:hidden;}
.fr-pic img{max-width:100%;max-height:calc(100vh - 220px);width:auto;height:auto;display:block;}
.fr-cap{padding:12px 14px 14px;}
.fr-cap b{display:block;font-family:var(--f-display);font-style:italic;font-weight:900;text-transform:uppercase;font-size:22px;line-height:1;color:var(--ink);}
.fr-cap small{display:block;margin-top:6px;font:600 10px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.fr-cap em{display:inline-block;margin-top:8px;font:700 10px/1 var(--f-mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#1a0a14;background:var(--pink-glow);padding:4px 7px;}
.fr-cap em.old{background:none;color:var(--pink);border:1px solid rgba(255,121,198,.4);}
.fr-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.fr-acts a,.fr-acts button{flex:1 1 auto;text-align:center;padding:10px 12px;border:1px solid var(--pink-glow);background:rgba(255,121,198,.12);color:var(--ink);cursor:pointer;
  font:700 10.5px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;}
.fr-acts a{background:var(--pink-glow);color:#1a0a14;}
.fr-acts button:hover{background:rgba(255,121,198,.28);}
.fr-x{position:absolute;top:-14px;right:-10px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,121,198,.6);background:#0d0c11;color:var(--ink);font-size:20px;line-height:1;cursor:pointer;}

/* ---------- the jukebox: one bar that follows you across the tabs ---------- */
.lg-bar{position:fixed;z-index:140;right:16px;bottom:16px;width:min(380px,calc(100vw - 24px));display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;
  padding:8px 8px 8px 10px;background:rgba(13,12,17,.96);border:1px solid rgba(255,121,198,.45);box-shadow:0 14px 40px rgba(0,0,0,.6),0 0 20px rgba(255,121,198,.16);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transform:translateY(12px);opacity:0;transition:opacity .2s,transform .25s;}
.lg-bar.open{opacity:1;transform:none;}
.lg-bar[hidden]{display:none;}
.lg-bar .lg-vinyl{width:40px;}
.lg-bar .lg-now{min-width:0;}
.lg-bar .lg-now b{display:block;font:700 9px/1 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--pink-glow);}
.lg-bar .lg-embed{margin-top:5px;height:80px;}
.lg-bar .lg-embed iframe{display:block;width:100%;height:80px;border:0;border-radius:12px;}
.lg-bar .lg-btns{display:grid;gap:6px;}
.lg-bar .lg-btns button{width:32px;height:32px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;font-size:14px;line-height:1;padding:0;}
.lg-bar .lg-btns button:hover{border-color:var(--pink-glow);color:var(--pink-glow);}
@media (max-width:820px){
  .lg-bar{left:8px;right:8px;width:auto;bottom:calc(66px + env(safe-area-inset-bottom,0px));padding:6px 6px 6px 8px;gap:8px;}
  .lg-bar .lg-vinyl{width:34px;}
}

@media (prefers-reduced-motion:reduce){
  html.cath .hero .lg-oc i,html.cath .hero .lg-glow,html.cath .hero.lg-dark::before,.lg-vinyl.spin::before,#frames .fr-t.deal img{animation:none !important;}
  #frames .fr-t img{transition:none;}
}