/* SIXSEVEN V3.2 / four original photographs, four genuinely different reactions */
.c672-section{position:relative;isolation:isolate;background:#11100e;padding:clamp(82px,8vw,120px) 0 clamp(76px,7vw,108px);overflow:clip}
.c672-section::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;background:repeating-linear-gradient(90deg,transparent 0 133px,#ffffff24 134px 135px,transparent 136px 270px)}
.c672-heading{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:42px}
.c672-heading h2{margin:0;white-space:nowrap}.c672-heading .eyebrow{font:10px var(--mono);letter-spacing:.07em;color:#d8afa0;margin-bottom:12px}
.c672-heading-side{max-width:335px}.c672-heading-side p{font:700 clamp(20px,1.7vw,25px)/1.1 var(--condensed);margin:0 0 14px;color:#e7d9cb}.c672-heading-side span{font:10px/1.5 var(--mono);color:#e99174;letter-spacing:.035em}
.c672-gallery-wrap{position:relative;z-index:2}.c672-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.c672-card{position:relative;height:clamp(340px,36vw,540px);min-width:0;overflow:hidden;isolation:isolate;padding:0;margin:0;border:1px solid #ffffff24;background:#191511;color:#fff;cursor:pointer;text-align:left;border-radius:0;appearance:none;transform:translateZ(0);transition:transform .27s ease,border-color .2s,box-shadow .2s;touch-action:pan-x}
.c672-card:focus-visible{outline:3px solid #ffd16e;outline-offset:4px}.c672-card:hover,.c672-card:focus-visible{border-color:#e74b2b;transform:translateY(-5px)}.c672-card.is-on{border-color:#f15a37;box-shadow:6px 7px 0 #f05435;z-index:3}
.c672-photo{position:absolute;inset:0;overflow:hidden}.c672-photo img{display:block;max-width:none;width:100%;height:100%;object-fit:cover;filter:saturate(.83) contrast(1.1);transform:scale(1.02);transition:filter .3s,transform .5s cubic-bezier(.18,.88,.3,1)}
.c672-card:hover .c672-photo img,.c672-card:focus-visible .c672-photo img{transform:scale(1.08);filter:saturate(1.12) contrast(1.12)}
.c672-card:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0006,transparent 29%,#0001 55%,#000b 100%)}
.c672-index{position:absolute;z-index:9;top:13px;left:13px;right:13px;display:flex;align-items:center;justify-content:space-between;gap:4px;font:9px/1.3 var(--mono);text-shadow:0 2px 5px #000}.c672-index i{color:#f85b38;font:23px/1 var(--display);font-style:normal}
.c672-title{position:absolute;z-index:6;left:13px;right:13px;top:49%;transform:translateY(-50%) rotate(-5deg);font:clamp(31px,3.2vw,55px)/.96 var(--display);color:#f9f0e5;text-shadow:4px 5px 0 #0008;letter-spacing:-.02em;transition:opacity .23s,transform .32s cubic-bezier(.18,.8,.2,1)}
.c672-card.is-on .c672-title{opacity:.13;transform:translateY(-50%) rotate(8deg) scale(.88)}
.c672-cta{position:absolute;z-index:9;bottom:12px;left:13px;right:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:10px/1.2 var(--mono);letter-spacing:.02em;text-shadow:0 1px 4px #000}.c672-cta b{color:#ffad8c;font:22px/1 var(--condensed)}
/* Photo 01: flashlight sweep. The photograph only becomes bright in the scanner circle. */
.c672-card[data-c672-card="0"] .c672-darken{position:absolute;inset:0;z-index:2;background:#080b0fa1;opacity:0;pointer-events:none;transition:opacity .2s}
.c672-scan-image{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;--sx:50%;--sy:55%;-webkit-mask-image:radial-gradient(circle 82px at var(--sx) var(--sy),#000 0 57%,transparent 100%);mask-image:radial-gradient(circle 82px at var(--sx) var(--sy),#000 0 57%,transparent 100%)}.c672-scan-image img{width:100%;height:100%;object-fit:cover;filter:saturate(2) brightness(1.6)}
.c672-scan-ring{position:absolute;z-index:4;width:164px;height:164px;border:2px solid #fff5d3;box-shadow:0 0 0 6px #ff6b3629,0 0 40px #ff8e5380;border-radius:50%;top:var(--sy,55%);left:var(--sx,50%);transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.c672-scan-sticker{position:absolute;z-index:7;right:15px;bottom:70px;background:#f2efe4;color:#18110f;transform:rotate(-9deg) scale(.5);opacity:0;text-align:center;padding:11px 18px;font:27px/.94 var(--display);box-shadow:7px 7px 0 #e94c2d}.c672-scan-sticker b{color:#e94c2d}
.c672-card.is-on[data-c672-card="0"] .c672-darken,.c672-card.is-on[data-c672-card="0"] .c672-scan-image,.c672-card.is-on[data-c672-card="0"] .c672-scan-ring{opacity:1}
.c672-card.is-on[data-c672-card="0"] .c672-scan-ring,.c672-card.is-on[data-c672-card="0"] .c672-scan-image{animation:c672-sweep 2.15s ease-in-out both}
.c672-card.is-on[data-c672-card="0"] .c672-scan-sticker{animation:c672-sticker .55s .85s cubic-bezier(.14,1.5,.24,1) both}
@keyframes c672-sweep{0%{--sx:25%;--sy:24%}35%{--sx:76%;--sy:36%}75%{--sx:46%;--sy:77%}100%{--sx:64%;--sy:60%}}
@property --sx{syntax:'<percentage>';inherits:true;initial-value:50%}@property --sy{syntax:'<percentage>';inherits:true;initial-value:55%}
@keyframes c672-sticker{0%{transform:rotate(-20deg) scale(.2);opacity:0}100%{transform:rotate(-9deg) scale(1);opacity:1}}
/* Photo 02: cat freezes the interface with a popup, not another 67 stamp. */
.c672-cat-chaos{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0}.c672-cat-bubble{position:absolute;top:19%;left:13%;background:#f4eee5;color:#14100e;transform:rotate(-14deg) scale(.35);padding:17px 20px 11px;font:clamp(47px,4.3vw,78px)/.89 var(--display);text-align:center;box-shadow:9px 10px 0 #e94f2d}.c672-cat-error{position:absolute;bottom:22%;left:8%;right:8%;background:#17120ff2;padding:13px 10px;border:2px solid #f24b2c;font:clamp(21px,2.1vw,36px)/1 var(--display);letter-spacing:-.03em;text-align:center}.c672-cat-lines{position:absolute;right:6%;top:11%;font:42px var(--display);color:#ff6041;transform:rotate(20deg)}
.c672-card.is-on[data-c672-card="1"] .c672-cat-chaos{opacity:1}.c672-card.is-on[data-c672-card="1"] .c672-photo img{animation:c672-cat-zoom .48s steps(4,end) 4}.c672-card.is-on[data-c672-card="1"] .c672-cat-bubble{animation:c672-bubble .8s cubic-bezier(.11,1.5,.2,1) forwards}.c672-card.is-on[data-c672-card="1"] .c672-cat-error{animation:c672-error .15s steps(2,end) 11}
@keyframes c672-cat-zoom{0%{transform:scale(1.06) rotate(-3deg)}50%{transform:scale(1.28) rotate(4deg)}100%{transform:scale(1.1) rotate(-2deg)}}@keyframes c672-bubble{to{transform:rotate(-9deg) scale(1)}}@keyframes c672-error{0%{transform:translateX(-5px)}50%{transform:translateX(6px)}100%{transform:translateX(0)}}
/* Photo 03: basketball really travels in an arc towards the rim. */
.c672-ball{position:absolute;z-index:7;left:9%;top:78%;width:42px;height:42px;border:3px solid #271311;border-radius:50%;background:radial-gradient(circle at 30% 26%,#ffad64,#ed592b 52%,#a72410 95%);box-shadow:6px 7px 0 #0005;opacity:0;pointer-events:none}
.c672-ball:before,.c672-ball:after{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none}.c672-ball:before{border-left:2px solid #24120f;border-right:2px solid #24120f;transform:rotate(25deg)}.c672-ball:after{top:45%;height:0;border-bottom:2px solid #24120f}
.c672-card.is-on[data-c672-card="2"] .c672-ball{opacity:1;animation:c672-shot 1.05s cubic-bezier(.28,.1,.22,1) forwards}
@keyframes c672-shot{0%{transform:translate(0,0) scale(1) rotate(-60deg)}30%{transform:translate(calc(var(--travel-x)*.32),calc(var(--travel-y) - 70px)) scale(1.02) rotate(100deg)}67%{transform:translate(calc(var(--travel-x)*.78),calc(var(--travel-y) - 64px)) scale(.76) rotate(230deg)}90%{transform:translate(var(--travel-x),var(--travel-y)) scale(.67) rotate(340deg)}100%{transform:translate(calc(var(--travel-x) + 6px),calc(var(--travel-y) + 44px)) scale(.52) rotate(390deg);opacity:0}}
.c672-score{position:absolute;z-index:7;left:11%;top:30%;display:flex;flex-direction:column;gap:5px;transform:rotate(-7deg) scale(.5);opacity:0;pointer-events:none}.c672-score b{font:clamp(58px,5vw,94px)/1 var(--display);color:#ffefdf;text-shadow:8px 8px 0 #e44e2d}.c672-score small{display:block;background:#101011;color:#ffeddf;padding:9px;font:10px var(--mono)}.c672-card.is-score .c672-score{animation:c672-score .55s cubic-bezier(.12,1.4,.16,1) both}@keyframes c672-score{to{opacity:1;transform:rotate(-7deg) scale(1)}}
/* Photo 04: an expanding shout disturbs the entire wall; no music sample. */
.c672-soundwaves{position:absolute;inset:0;z-index:7;opacity:0;pointer-events:none;overflow:hidden}.c672-soundwaves>i{position:absolute;left:50%;top:52%;width:90px;height:90px;border:5px solid #fff3dd;border-radius:50%;transform:translate(-50%,-50%) scale(.1);box-shadow:0 0 20px #f05435}.c672-soundwaves>span{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%) rotate(-9deg) scale(.2);font:clamp(40px,3.8vw,75px)/.94 var(--display);white-space:nowrap;color:#f8f1e8;text-shadow:7px 9px 0 #e74b2b}
.c672-card.is-on[data-c672-card="3"] .c672-soundwaves{opacity:1}.c672-card.is-on[data-c672-card="3"] .c672-soundwaves>i{animation:c672-ring 1.25s ease-out both}.c672-card.is-on[data-c672-card="3"] .c672-soundwaves>i:nth-child(2){animation-delay:.18s}.c672-card.is-on[data-c672-card="3"] .c672-soundwaves>i:nth-child(3){animation-delay:.38s}.c672-card.is-on[data-c672-card="3"] .c672-soundwaves>span{animation:c672-yell .55s cubic-bezier(.17,1.65,.26,1) forwards}
.c672-card.is-on[data-c672-card="3"] .c672-photo img{animation:c672-roar .12s steps(2,end) 12}.c672-section.is-roaring .c672-card:not([data-c672-card="3"]){animation:c672-neighbor .18s steps(2,end) 8}
@keyframes c672-ring{0%{opacity:1;transform:translate(-50%,-50%) scale(.1)}100%{opacity:0;transform:translate(-50%,-50%) scale(5.2)}}@keyframes c672-yell{to{transform:translate(-50%,-50%) rotate(-9deg) scale(1)}}@keyframes c672-roar{0%{transform:translateX(-6px) scale(1.14)}50%{transform:translateX(6px) scale(1.16)}100%{transform:translateX(-6px) scale(1.14)}}@keyframes c672-neighbor{0%{transform:translateY(-3px) rotate(-.4deg)}50%{transform:translateY(4px) rotate(.45deg)}100%{transform:translateY(-2px)}}
.c672-footer{position:relative;z-index:2;margin-top:22px;display:flex;align-items:center;justify-content:space-between;gap:15px;color:#bcaea5}.c672-footer-left{display:flex;align-items:center;gap:16px;font:10px/1.5 var(--mono);letter-spacing:.02em}.c672-count{color:#f25b38;white-space:nowrap}.c672-next{display:none;background:#241713;color:#fff;border:1px solid #e64c30;padding:10px 13px;font:700 12px var(--mono)}.c672-next b{font-size:19px;color:#f85c39}.c672-disclaimer{font:9px var(--mono);color:#7f746d;white-space:nowrap}
@media(max-width:1150px){.c672-card{height:420px}.c672-title{font-size:clamp(30px,3.2vw,44px)}.c672-heading h2{font-size:clamp(70px,10vw,120px)}}
@media(max-width:800px){.c672-heading h2{font-size:clamp(60px,11vw,100px)}.c672-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.c672-card{height:430px}.c672-title{font-size:clamp(36px,5.2vw,55px)}}
@media(max-width:650px){.c672-section{padding:84px 0 77px}.c672-heading{display:block;margin-bottom:25px}.c672-heading h2{font-size:clamp(62px,14.2vw,88px)}.c672-heading-side{margin-top:11px;max-width:350px}.c672-heading-side p{font-size:19px;margin-bottom:7px}.c672-heading-side span{font-size:9px}.c672-gallery-wrap{width:100%;margin:0;overflow:hidden}.c672-gallery{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:17px;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;padding:3px 17px 13px;scrollbar-width:none}.c672-gallery::-webkit-scrollbar{display:none}.c672-card{flex:0 0 min(80vw,345px);height:clamp(390px,112vw,500px);scroll-snap-align:center}.c672-title{font-size:clamp(39px,10vw,56px)}.c672-card:hover{transform:none}.c672-footer{align-items:flex-start;flex-wrap:wrap;margin-top:8px}.c672-footer-left{width:100%;flex-wrap:wrap;font-size:9px;gap:6px 14px}.c672-next{display:inline-flex;align-items:center;gap:15px}.c672-disclaimer{font-size:8px}.c672-cat-bubble{font-size:68px}.c672-score b{font-size:65px}.c672-soundwaves>span{font-size:45px}}
@media(max-width:380px){.c672-card{flex-basis:84vw;height:clamp(365px,117vw,445px)}.c672-title{font-size:11.1vw}.c672-index,.c672-cta{font-size:9px}}
@media(prefers-reduced-motion:reduce){.c672-card,.c672-photo img,.c672-title{animation:none!important;transition:none!important}.c672-scan-ring,.c672-scan-image,.c672-cat-bubble,.c672-score,.c672-soundwaves>span{animation:none!important}.c672-card.is-on .c672-scan-sticker{opacity:1;transform:rotate(-9deg) scale(1)}.c672-card.is-on .c672-ball{animation:none!important;opacity:1;left:62%;top:57%}.c672-card.is-score .c672-score{opacity:1;transform:rotate(-7deg) scale(1)}.c672-card.is-on .c672-cat-bubble{transform:rotate(-9deg) scale(1)}.c672-card.is-on .c672-cat-chaos,.c672-card.is-on .c672-soundwaves{opacity:1}.c672-card.is-on .c672-soundwaves>span{transform:translate(-50%,-50%) rotate(-9deg) scale(1)}}

/* V3.3: compact and accessible opt-out for user-initiated card SFX */
.c672-audio-control{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;color:#f4e7da;background:#211915;border:1px solid #be5840;cursor:pointer;font:700 10px/1.2 var(--mono);white-space:nowrap;letter-spacing:.03em;min-height:40px;transition:background .2s,border-color .2s}
.c672-audio-control:hover{background:#3a211a;border-color:#ff6e45}
.c672-audio-control:focus-visible{outline:3px solid #fbc16c;outline-offset:3px}
.c672-audio-control[aria-pressed="false"]{color:#a89b90;border-color:#69544b}
.c672-audio-led{display:inline-block;width:7px;height:7px;border-radius:50%;background:#f05a39;box-shadow:0 0 8px #f05a3970}
.c672-audio-control[aria-pressed="false"] .c672-audio-led{background:#8c857c;box-shadow:none}
@media(max-width:650px){.c672-audio-control{order:1;min-height:44px;padding:11px 13px}.c672-disclaimer{order:2;flex:1;white-space:normal}.c672-next{order:0}}

/* V3.4 Shared audio controls */
.hero-sound-control{border:1px solid #a75240;background:rgba(20,14,12,.75);color:#f2d7cd;font:11px/1.1 var(--mono);letter-spacing:.08em;padding:10px 16px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;transition:border-color .2s,background .2s;margin-top:2px;position:relative;z-index:12}
.hero-sound-control:hover,.hero-sound-control:focus-visible{background:#30201c;border-color:#fb6744}.hero-sound-control span:first-child{font-size:18px;color:#fb6744;line-height:0}.hero-sound-control.is-muted,.c672-audio-control.is-muted{opacity:.7}.hero-sound-control.is-muted span:first-child{color:#aaa}
.c672-audio-control{min-width:138px}
@media(max-width:650px){.hero-sound-control{font-size:10px;padding:9px 12px;margin-top:1px}.hero .hero-actions{gap:10px}}