/* OFF THE DECKS — layered 3D gallery. Layout and overlay only; the photograph files are untouched. */
:root{--amber:#f0b36a;--amber-soft:#e0a055}
#moments .portrait-top h3{display:flex;align-items:center;gap:22px;flex:1;min-width:0}
#moments .portrait-top h3:after{content:"";flex:1;max-width:420px;height:1px;background:linear-gradient(90deg,#d9aa7a99,transparent)}
#moments .portraits{--ease:cubic-bezier(.16,1,.3,1);perspective:1200px;perspective-origin:50% 38%}
#moments .portrait{--q:1;--mx:0;--my:0;position:relative;transform-style:preserve-3d;will-change:transform,opacity}
/* photograph + amber rim light */
#moments .portrait .photo-link{position:relative;display:block;border-radius:14px;overflow:hidden;container-type:inline-size;border:1.5px solid #f0b36ae0;box-shadow:0 0 0 1px #ffd9a02e inset,0 0 18px 1px #f0a04e66,0 0 60px -6px #e0903a4d,0 38px 70px -16px #000e,0 14px 26px -8px #000b;transition:transform .6s var(--ease),box-shadow .6s ease}
#moments .portrait .photo-link img{display:block;width:100%;height:auto}
/* legibility gradient behind the in-card labels (overlay only) */
#moments .portrait .photo-link:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(to top,#000000a8,#0000 34%),linear-gradient(to bottom,#0000007a,#0000 16%)}
/* cursor sheen */
#moments .portrait .photo-link:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transition:opacity .5s ease;background:radial-gradient(circle at calc(50% + var(--mx)*40%) calc(45% + var(--my)*40%),#ffd9a024,transparent 55%)}
/* in-card labels */
.card-ui{position:absolute;inset:0;z-index:3;pointer-events:none;font-size:clamp(9px,3cqw,12px);letter-spacing:.14em;color:#f3e4cf;text-transform:uppercase}
.card-ui span{position:absolute}
.cu-num{top:5.2cqw;left:6cqw;display:flex;align-items:center;gap:10px}.cu-num:after{content:"";width:12cqw;height:1px;background:#f0b36a99}
.cu-tag{top:5.2cqw;right:6cqw;font-size:.9em;color:#e7d6bd}
.cu-sig{left:6cqw;bottom:7.5cqw;font:italic 400 clamp(22px,9.6cqw,46px)/1 "Snell Roundhand","Segoe Script","Brush Script MT","Lucida Handwriting",cursive;letter-spacing:0;text-transform:none;color:#fff3df;text-shadow:0 2px 12px #000a;padding-bottom:6px;border-bottom:1px solid #f0b36a80;transform:rotate(-4deg);transform-origin:left bottom}
.cu-cap{right:6cqw;bottom:6.6cqw;font-size:clamp(9px,2.45cqw,11px);font-weight:700;letter-spacing:.16em;color:#f6e7d0}
/* narrow cards (small phones): stack the caption above the signature so they never collide */
@container (max-width:340px){.cu-cap{right:auto;left:6cqw;bottom:calc(7.5cqw + 48px)}}
/* captions stay for screen readers; the visible caption is the in-card one */
#moments .portrait figcaption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:900px){
/* ghost cards stacked behind each photograph */
#moments .portrait:before,#moments .portrait:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:14px;pointer-events:none;border:1px solid #f0b36a59;background:#0b1013 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .9 0 0 0 0 .62 0 0 0 0 .32 0 0 0 .42 -.12'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");box-shadow:0 0 16px -2px #f0a04e59,0 22px 40px -14px #000d;transition:transform .7s var(--ease)}
#moments .portrait:before{transform:translate3d(var(--g1x,-4%),var(--g1y,3%),-40px) rotate(var(--g1r,-5deg))}
#moments .portrait:after{transform:translate3d(var(--g2x,5%),var(--g2y,-2%),-90px) rotate(var(--g2r,4deg));opacity:.8}
}

/* ---------- desktop: floating stage with depth, tilt and scroll emergence ---------- */
@media(min-width:900px){
 #moments .swipe-note{display:none}
 #moments .portrait-top .rail-controls button:disabled{opacity:.35}
 #moments .portraits{overflow:visible;display:grid;grid-template-columns:1fr 1.18fr 1fr;align-items:center;gap:clamp(28px,4.4vw,70px);padding:64px 0 84px;position:relative;isolation:isolate}
 /* warm light behind the stage: vertical beam through the centre, floor glow, grunge dust in the corners */
 #moments .portraits:before{content:"";position:absolute;inset:-4% -6%;z-index:-2;pointer-events:none;background:linear-gradient(90deg,#0000 40%,#f0a04e17 50%,#0000 60%),radial-gradient(ellipse 52% 62% at 50% 50%,#e0a05526,transparent 72%),radial-gradient(ellipse 90% 30% at 50% 102%,#000b,transparent)}
 #moments .portraits:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-3%;height:36%;z-index:-1;pointer-events:none;opacity:.9;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='300'><filter id='d'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 .95 0 0 0 0 .55 0 0 0 0 .18 0 0 0 9 -5.0'/></filter><rect width='700' height='300' filter='url(%23d)'/></svg>") center/700px 300px;-webkit-mask-image:radial-gradient(ellipse 16% 95% at 16% 100%,#000,#0000),radial-gradient(ellipse 16% 95% at 84% 100%,#000,#0000);mask-image:radial-gradient(ellipse 16% 95% at 16% 100%,#000,#0000),radial-gradient(ellipse 16% 95% at 84% 100%,#000,#0000)}
 #moments .portrait{flex:none;opacity:calc(.1 + .9*var(--q));--iy:110px;--iz:-300px;--ix:0px;--irx:12deg;--iry:0deg;--rz:0px;--ry:0deg;--rzr:0deg;--ly:0px;--tilt:5deg;
  transform:translate3d(calc((1 - var(--q))*var(--ix)),calc(var(--ly) + (1 - var(--q))*var(--iy)),calc(var(--rz) + (1 - var(--q))*var(--iz))) rotateX(calc((1 - var(--q))*var(--irx) + var(--my)*-3deg)) rotateY(calc(var(--ry) + (1 - var(--q))*var(--iry) + var(--mx)*var(--tilt))) rotateZ(var(--rzr))}
 #moments .portrait[data-role=l]{order:1;--ix:90px;--iy:150px;--iz:-420px;--iry:20deg;--ry:12deg;--rz:-20px;--rzr:-2.4deg;--ly:26px;--tilt:7deg;--g1x:-7%;--g1y:4%;--g1r:-6deg;--g2x:-3%;--g2y:9%;--g2r:3deg}
 #moments .portrait[data-role=c]{order:2;--iy:80px;--iz:-200px;--rz:70px;--tilt:4deg;--g1x:2%;--g1y:-5%;--g1r:3deg;--g2x:-3%;--g2y:-3%;--g2r:-3deg}
 #moments .portrait[data-role=r]{order:3;--ix:-90px;--iy:190px;--iz:-520px;--iry:-20deg;--ry:-12deg;--rz:-30px;--rzr:2deg;--ly:40px;--tilt:7deg;--g1x:7%;--g1y:3%;--g1r:5deg;--g2x:3%;--g2y:-6%;--g2r:-3deg}
 #moments .portrait[data-role=c] .photo-link{box-shadow:0 0 0 1px #ffd9a040 inset,0 0 26px 2px #f0a04e8c,0 0 90px -4px #e0903a66,0 50px 90px -20px #000f,0 18px 32px -10px #000b}
 /* film-frame perforations on the centre card's back layer */
 #moments .portrait[data-role=c]:before{background-image:repeating-linear-gradient(to bottom,#0000 0 14px,#f0b36a40 14px 22px),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 .9 0 0 0 0 .62 0 0 0 0 .32 0 0 0 .42 -.12'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");background-size:6px 100%,160px 160px;background-repeat:no-repeat,repeat;background-position:calc(100% - 10px) 0,0 0}
 #moments .portrait:hover .photo-link{transform:translateZ(30px) scale(1.035)}
 #moments .portrait:hover .photo-link:after{opacity:1}
}

/* ---------- immersive viewer (gallery photographs only) ---------- */
dialog.immersive{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;background:#05080aF2;display:none;flex-direction:column;overflow:hidden}
dialog.immersive[open]{display:flex;animation:gallery-in .5s cubic-bezier(.16,1,.3,1)}
dialog.immersive::backdrop{background:#000}
dialog.immersive .dialog-top{background:transparent;border:0;padding:max(12px,env(safe-area-inset-top)) 18px 0;color:var(--muted);position:relative}
dialog.immersive .dialog-content{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px 16px;touch-action:pan-y;position:relative}
dialog.immersive .dialog-content img{max-height:calc(100dvh - 150px);max-width:min(100%,calc((100dvh - 150px)*.75));border-radius:10px;box-shadow:0 0 0 1px #f0b36a73,0 0 28px #f0a04e4d,0 40px 100px -20px #000;will-change:transform,opacity}
.gallery-nav{position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#0a0f13cc;color:var(--paper);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.gallery-nav[data-dir="-1"]{left:max(12px,2vw)}.gallery-nav[data-dir="1"]{right:max(12px,2vw)}
.gallery-count{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:12px;letter-spacing:.14em;color:var(--muted);pointer-events:none}
@keyframes gallery-in{from{opacity:0}to{opacity:1}}
@media(max-width:899px){.gallery-nav{display:none}dialog.immersive .dialog-content img{max-width:100%}}
html.still #moments .portrait,html.still #moments .portrait .photo-link,html.still #moments .portrait:before,html.still #moments .portrait:after{transition:none}

/* ---------- "More than the music": push-in treatment for the booth photograph ---------- */
#moments .live-shot{--lp:1;--lx:0;--ly:0;transform:perspective(1500px) translate3d(0,calc((1 - var(--lp))*44px),calc((1 - var(--lp))*-150px)) rotateX(calc((1 - var(--lp))*7deg + var(--ly)*-1.8deg)) rotateY(calc(var(--lx)*2.2deg));transform-origin:50% 100%;opacity:calc(.25 + .75*var(--lp));will-change:transform,opacity}
#moments .live-shot .photo-link{position:relative;border:1.5px solid #f0b36ab8;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px #ffd9a02e inset,0 0 20px 1px #f0a04e59,0 0 80px -8px #e0903a4d,0 44px 80px -22px #000f,0 16px 30px -10px #000b}
#moments .live-shot .photo-link img{display:block;width:100%;height:auto;transform:scale(calc(1.12 - .12*var(--lp))) translate(calc(var(--lx)*-9px),calc(var(--ly)*-7px));transform-origin:50% 40%;will-change:transform}
/* warm light sweep that travels across the frame as it scrolls in, then rests off-canvas */
#moments .live-shot .photo-link:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,#0000 38%,#ffd9a03d 50%,#0000 62%);transform:translateX(calc(-110% + var(--lp)*220%))}
/* spotlight that follows the cursor */
#moments .live-shot .photo-link:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .5s ease;background:radial-gradient(circle at calc(50% + var(--lx)*46%) calc(50% + var(--ly)*46%),#ffd9a02e,transparent 46%)}
#moments .live-shot:hover .photo-link:after{opacity:1}
/* reticle: they are pointing at you, so something points back */
.live-ring{position:absolute;z-index:3;left:0;top:0;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;border:1.5px solid #f0b36acc;box-shadow:0 0 14px #f0a04e66,inset 0 0 12px #f0a04e33;pointer-events:none;opacity:0;transition:opacity .35s ease,scale .35s var(--ease,ease)}
.live-ring:after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#ffd9a0}
#moments .live-shot:hover .live-ring{opacity:1}
#moments .live-shot:active .live-ring{scale:.8}
@media(hover:none){.live-ring{display:none}}
@media(max-width:899px){#moments .live-shot .photo-link{border-radius:0;border-left:0;border-right:0}}
html.still #moments .live-shot,html.still #moments .live-shot .photo-link img{transform:none}
html.still #moments .live-shot{opacity:1}
html.still #moments .live-shot .photo-link:before{transform:translateX(110%)}

/* =====================================================================
   MOBILE (<900px): finger-controlled snap carousel, light on the GPU.
   Only transform + opacity ever change, and only via CSS transitions /
   one-shot animations; JS toggles a single class when the snapped card changes.
   ===================================================================== */
@media(max-width:899px){
 #moments .portraits{--cw:min(calc(100vw - 84px),430px);--gap:12px;display:flex;gap:var(--gap);overflow-x:auto;overflow-y:hidden;margin:0 calc(-1*var(--pad));padding:26px calc((100vw - var(--cw))/2) 32px;scroll-snap-type:x mandatory;scroll-behavior:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;perspective:none}
 #moments .portraits::-webkit-scrollbar{display:none}
 #moments .portrait{flex:0 0 var(--cw);min-width:0;scroll-snap-align:center;scroll-snap-stop:always;opacity:.7;transform:scale(.93);transform-origin:50% 55%;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .28s ease;will-change:transform,opacity}
 #moments .portrait.is-active{opacity:1;transform:scale(1)}
 #moments .portrait:before{content:none}
 /* active glow = one pseudo-element whose opacity fades in (cheap), not an animated shadow */
 #moments .portrait:after{content:"";position:absolute;inset:0;z-index:-1;border-radius:14px;background:none;border:0;pointer-events:none;box-shadow:0 0 26px 3px #f0a04e8c;opacity:0;transform:none;transition:opacity .3s ease}
 #moments .portrait.is-active:after{opacity:1}
 #moments .portrait .photo-link{box-shadow:0 18px 32px -14px #000d;transition:none}
 #moments .portrait .photo-link:after{opacity:1;background:linear-gradient(105deg,#0000 40%,#ffd9a042 50%,#0000 60%);transform:translateX(130%);transition:none}
 /* first-view entrance: the first photograph rises into place and catches the light once */
 #moments .portraits.entered .portrait:first-child{animation:gallery-pop .95s cubic-bezier(.16,1,.3,1) both}
 #moments .portraits.entered .portrait:first-child .photo-link:after{animation:gallery-glint 1.3s .35s cubic-bezier(.3,.6,.2,1) both}
 #moments .portraits.entered .portrait:not(:first-child){animation:gallery-fade .8s .25s ease-out both}
 #moments .portraits:not(.entered) .portrait{opacity:0}
 .portrait-top .rail-controls button{transition:transform .14s ease,box-shadow .14s ease}
}
@keyframes gallery-pop{from{opacity:0;transform:translate3d(0,38px,0) scale(.88)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes gallery-glint{from{transform:translateX(-130%)}to{transform:translateX(130%)}}
@keyframes gallery-fade{from{opacity:0}to{opacity:.7}}

/* Booth photograph: stronger, natural pop-out on phones (scale + lift + inner counter-zoom) */
@media(max-width:899px){
 #moments .live-shot{transform:translate3d(0,calc((1 - var(--lp))*56px),0) scale(calc(.86 + .14*var(--lp)));transform-origin:50% 70%;opacity:calc(.3 + .7*var(--lp));will-change:transform,opacity}
 #moments .live-shot .photo-link{border-radius:16px;border:1.5px solid #f0b36ab0;box-shadow:0 26px 40px -18px #000e,0 0 22px #f0a04e4d}
 #moments .live-shot .photo-link img{transform:translate3d(0,calc((1 - var(--lp))*-16px),0) scale(calc(1.16 - .16*var(--lp)));will-change:transform}
}

/* Tap feedback + more noticeable interactive elements (touch devices) */
@media(hover:none){
 a,button,summary,.button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
 .button,.text-link,.platforms a,.hero-links a,.socials a,.session-row,.rail-controls button,summary,.dock a,.next-event,.event-actions a,.event-actions button{transition:transform .14s ease,background-color .14s ease,box-shadow .14s ease}
 .button:active,.text-link:active,.platforms a:active,.hero-links a:active,.socials a:active,.session-row:active,.rail-controls button:active:not(:disabled),summary:active,.dock a:active,.next-event:active,.event-actions a:active,.event-actions button:active{transform:scale(.96);background-color:#f0b36a24;box-shadow:0 0 0 1px #f0b36aa6,0 0 18px #f0a04e47}
}
@media(max-width:899px){
 .platforms a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid #f0b36a73;border-radius:999px;background:#f0b36a14;font-weight:650}
 .text-link{font-weight:650;text-decoration:underline;text-decoration-color:#f0b36a80;text-underline-offset:4px}
}

/* Sticky Listen / Events / WhatsApp bar: slimmer floating pill that tucks away while scrolling down */
@media(max-width:750px){
 .dock{left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));padding:5px;gap:5px;border:1px solid var(--line);border-radius:18px;background:#0b1216f5;box-shadow:0 12px 30px -10px #000d;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
 .dock a{min-height:44px;border-radius:13px}
 .dock.dock-hidden{transform:translateY(calc(100% + 28px));opacity:0;pointer-events:none}
 #book{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){
 #moments .portrait,#moments .portraits.entered .portrait,#moments .portraits.entered .portrait .photo-link:after{animation:none!important;transition:none!important}
 #moments .portraits:not(.entered) .portrait{opacity:1}.dock{transition:none}
}
html.still #moments .portraits.entered .portrait,html.still #moments .portraits.entered .portrait .photo-link:after{animation:none}
html.still #moments .portraits:not(.entered) .portrait{opacity:.7}
html.still #moments .portrait.is-active{opacity:1}

/* Short landscape screens (phones turned sideways): give the photograph the room, keep controls small */
@media(max-height:520px){
 dialog.immersive .dialog-top{padding:6px 14px 0}
 dialog.immersive .dialog-top button{min-height:36px}
 dialog.immersive .dialog-content{padding:4px 16px}
 dialog.immersive .dialog-content img{max-height:calc(100dvh - 54px);max-width:min(100%,calc((100dvh - 54px)*.75))}
 .gallery-count{bottom:6px}
}

/* Decorative atmosphere animations pause while the carousel is being swiped (keeps the main thread free) */
html.is-swiping .atmosphere *,html.is-swiping .atmosphere:before,html.is-swiping .atmosphere:after{animation-play-state:paused!important}