/* VICONO Content Studio: image planes around one persistent, independently decoded reel. */
:root{--canvas:#12131c;--ink:#f7f2eb;--muted:#c9c5cd;--studio-enter:0}
.site-header{background:#12131cf0;border-bottom-color:#e8d9d11c}
.hero-scene{padding-top:clamp(130px,16vh,180px)}
.hero-copy h1{font-size:clamp(58px,6.3vw,91px);width:57%;line-height:1.01;letter-spacing:-.04em}
.hero-copy h1 em{display:inline-block;padding-bottom:.1em}
.hero-period{max-width:440px;font-size:17px;line-height:1.65;margin-top:26px}
.hero-evidence{max-width:370px;margin-top:18px;font-size:12px}
.hero-invitation{margin-top:27px}
.hero-invitation .text-link{display:inline-flex;gap:38px;padding:15px 20px;color:#1c1116;background:#ff694e;border:0;border-radius:7px;box-shadow:0 10px 24px #0003}
.hero-invitation .text-link:hover{background:#ff9e7e}
.studio-hero-credit{font-size:9px!important;line-height:1.6!important;max-width:360px;margin-top:17px;color:#bfb9c6}
.room-orbit{display:none}
.room-light{background:radial-gradient(ellipse at 65% 50%,#334c6d55,transparent 65%),radial-gradient(ellipse at 20% 85%,#7e333b44,transparent 55%);opacity:1}
.studio-aperture{position:absolute;left:57%;top:11%;width:64%;height:84%;border-radius:48% 10% 20% 44%;background:radial-gradient(ellipse at 78% 12%,#ffd8ac 0,#fc8261 25%,#e64236 50%,#622631 78%,#202133 100%);box-shadow:inset 1px 2px 2px #fff4df9c, -40px 45px 90px #421a2e45;transform:perspective(1100px) translate3d(calc(var(--studio-enter)*80px),calc(var(--studio-enter)*-45px),0) rotateY(-24deg) rotateZ(-11deg);opacity:calc(1 - var(--studio-enter)*.89)}
.studio-floor{position:absolute;left:34%;top:79%;width:77%;height:34%;border:1px solid #e5c8bd50;border-radius:50%;background:linear-gradient(170deg,#e3d1c527,#afbcd917 38%,#1e213a33 65%);transform:perspective(700px) rotateX(66deg) rotateZ(-8deg) translateY(calc(var(--studio-enter)*100px));box-shadow:0 30px 50px #0004;opacity:calc(1 - var(--studio-enter)*.8)}
.studio-hero-planes{position:absolute;inset:0;pointer-events:none;opacity:clamp(0,calc(1 - var(--studio-enter)*1.25),1)}
.studio-background-type{position:absolute;left:50%;top:17%;font-size:clamp(65px,8vw,130px);line-height:.85;letter-spacing:-.05em;font-weight:700;color:#fce5ce22;white-space:nowrap;transform:translate3d(calc(var(--studio-enter)*-90px),calc(var(--studio-enter)*-35px),0) rotate(-10deg)}
.studio-sample{position:absolute;width:clamp(125px,14vw,205px);padding:6px;background:linear-gradient(140deg,#d6d5e0b3,#533e5166);border-radius:16px;box-shadow:18px 28px 45px #080a176b;overflow:hidden}
.studio-sample img{width:100%;height:clamp(160px,22vw,310px);object-fit:cover;border-radius:11px;object-position:center}
.studio-sample figcaption{padding:12px 8px 9px;background:#151520db;border-radius:0 0 10px 10px}
.studio-sample strong,.studio-sample span{display:block}.studio-sample strong{font-size:12px}.studio-sample span{font-size:8px;color:#cfc5cd;margin-top:4px}
.sample-torti{left:52%;top:20%;transform:perspective(800px) translate3d(calc(var(--studio-enter)*145px),calc(var(--studio-enter)*-80px),0) rotateY(22deg) rotateZ(-13deg) scale(.9)}
.sample-spikes{left:88%;top:33%;transform:perspective(800px) translate3d(calc(var(--studio-enter)*-150px),calc(var(--studio-enter)*80px),0) rotateY(-20deg) rotateZ(13deg) scale(.88)}
.studio-glass-note{position:absolute;left:51%;top:70%;display:flex;align-items:center;gap:15px;padding:19px 22px;border-radius:13px;color:#fff2e5;background:linear-gradient(130deg,#cf816447,#1c203dba);box-shadow:9px 24px 34px #0c102d54;transform:perspective(800px) translate3d(calc(var(--studio-enter)*110px),calc(var(--studio-enter)*30px),0) rotateY(20deg) rotateZ(-8deg)}
.studio-glass-note span{font-size:11px;line-height:1.5;font-weight:500}.studio-glass-note svg{color:#ffbd93;width:25px;height:25px}
.device-wrap{z-index:2}
.social-pop{display:none}
.case-scene{min-height:97svh;grid-template-columns:28% 1fr 25%;gap:3%;}
.studio-chapter-word{position:absolute;left:-1%;top:10%;font-size:clamp(80px,13vw,190px);font-weight:700;letter-spacing:-.05em;line-height:.9;color:#d7b9bf0c;white-space:nowrap;z-index:-1;pointer-events:none}
.case-copy h2{font-size:clamp(38px,4.3vw,64px)}
.case-copy>p{font-size:15px;line-height:1.75}
.case-proof{background:linear-gradient(140deg,#3f405947,#202333d9);border:0;transform:perspective(1200px) rotateY(-9deg) rotateZ(2deg);padding:20px;box-shadow:15px 30px 45px #06081466}
.studio-proof-thumbnail{width:100%;height:130px;object-fit:cover;object-position:50% 35%;border-radius:9px;margin-bottom:20px;opacity:.85}
.view-count{position:relative}.view-count>svg{position:absolute;right:0;top:4px}.view-count strong{color:#ffb393;font-size:clamp(36px,4vw,56px)}
.metric-row{margin-top:16px;padding-block:12px}.data-note,.missing-comment{margin-top:12px}.missing-comment{padding-top:10px}
.case-scene[data-case-scene=torti] .case-proof{background:linear-gradient(140deg,#215653a1,#182e3bd9);transform:perspective(1200px) rotateY(-9deg) rotateZ(-2deg)}
.case-scene[data-case-scene=torti] .view-count strong{color:#b0e1da}
.case-scene[data-case-scene=spikes] .case-proof{background:linear-gradient(140deg,#69583a77,#282338e6)}
.case-scene[data-case-scene=spikes] .view-count strong{color:#f9d79a}
.event-cases{position:relative;padding-block:110px 115px}
.event-cases:before{content:'';position:absolute;inset:-80px max(-20px,-4vw) 20%;background:radial-gradient(ellipse at 15% 30%,#4b4b7a44,transparent 58%);pointer-events:none;z-index:-1}
.event-case{gap:8%;grid-template-columns:1.15fr 1fr;align-items:center}
.event-case+.event-case{margin-top:100px}
.event-art,.event-case:first-child .event-art{width:100%;margin:0;transform:perspective(1400px) rotateY(5deg) rotateZ(-2deg);box-shadow:22px 38px 54px #03030a70;border-radius:18px}
.event-art>img:first-child,.event-case:first-child .event-art>img:first-child{width:100%;height:470px;object-fit:cover;border-radius:18px}
.event-art>img.studio-event-profile,.event-case:first-child .event-art>img.studio-event-profile{position:absolute;right:-18px;top:-32px;width:145px;height:315px;object-fit:cover;object-position:top;border-radius:13px;box-shadow:15px 25px 35px #0008;transform:rotate(10deg)}
.studio-crowd{position:absolute;left:-14px;bottom:80px;width:210px;padding:7px;background:#ece5dd;border-radius:7px;box-shadow:10px 18px 25px #0005;transform:rotate(-9deg);color:#342932}
.studio-crowd img{width:100%;height:110px;object-fit:cover;border-radius:3px}.studio-crowd figcaption{font-size:8px;padding:7px 3px 3px}
.profile-glass,.event-case:first-child .profile-glass{left:25px;right:25px;bottom:-25px;padding:20px;background:#202238ed;backdrop-filter:none;border:1px solid #c3c5d33d;box-shadow:12px 20px 34px #0003}
.event-case.reverse{grid-template-columns:1fr 1.15fr}.event-case.reverse .event-art{transform:perspective(1400px) rotateY(-5deg) rotateZ(2deg)}
.event-case.reverse .event-art>img:first-child{height:540px;object-position:58% center}
.event-case.reverse .studio-event-profile{right:auto;left:-25px;top:auto;bottom:75px;transform:rotate(-9deg)}
.event-copy h2{font-size:clamp(46px,5vw,72px)}
.event-copy blockquote{background:#d7d4ee0c;border-color:#c5c0e636;padding:22px 23px;transform:rotate(-1deg);box-shadow:10px 22px 30px #05091425}
.event-copy blockquote p{font-size:16px;line-height:1.55}
.event-data{margin-top:24px}.event-data>div{padding-block:16px}
.ambient-reaction svg{color:#ff9c7e}
@media(min-width:761px) and (max-width:1100px){
 .hero-copy h1{width:55%;font-size:6.4vw}.hero-period{max-width:315px;font-size:15px}.hero-evidence{max-width:305px}.studio-sample{width:145px}.studio-sample img{height:225px}.sample-torti{left:52%;top:22%}.sample-spikes{left:87%;top:42%}.studio-glass-note{left:47%;padding:13px 16px;top:72%}
 .studio-hero-credit{max-width:300px}.case-proof{padding:17px}.studio-proof-thumbnail{height:100px}.case-copy h2{font-size:40px}.event-art>img.studio-event-profile{width:115px;height:250px}.studio-crowd{width:175px}
}
@media(max-width:760px){
 .hero-scene{padding-top:100px}.hero-copy h1{width:100%;font-size:clamp(39px,10.8vw,64px);line-height:1.05;max-width:550px}.hero-period{font-size:13px;line-height:1.65;max-width:305px;margin-top:20px}.hero-evidence{display:none}.hero-invitation{margin-top:17px}.hero-invitation p{display:none}.hero-invitation .text-link{margin:0;font-size:11px;padding:12px 15px;min-height:44px;gap:25px}.studio-hero-credit{font-size:8px!important;max-width:240px;margin-top:11px;line-height:1.45!important}
 .studio-aperture{left:11%;top:46%;width:105%;height:53%;border-radius:44% 12% 12% 48%;transform:perspective(700px) translateY(calc(var(--studio-enter)*50px)) rotateY(-20deg) rotateZ(-18deg);opacity:calc(.92 - var(--studio-enter)*.8)}
 .studio-floor{left:-13%;top:89%;width:126%;height:17%;opacity:calc(.7 - var(--studio-enter)*.6)}
 .studio-background-type{left:7%;top:51%;font-size:56px;color:#ffdcc02d;transform:rotate(-14deg)}
 .studio-sample{width:110px;padding:4px;border-radius:10px}.studio-sample img{height:157px;border-radius:7px}.studio-sample figcaption{padding:7px 5px 5px}.studio-sample strong{font-size:8px}.studio-sample span{font-size:6px;margin-top:3px}
 .sample-torti{left:0;top:58%;transform:perspective(600px) translate3d(calc(var(--studio-enter)*90px),calc(var(--studio-enter)*-50px),0) rotateY(18deg) rotate(-13deg)}
 .sample-spikes{left:auto;right:-6px;top:63%;transform:perspective(600px) translate3d(calc(var(--studio-enter)*-80px),calc(var(--studio-enter)*40px),0) rotateY(-18deg) rotate(15deg)}
 .studio-glass-note{display:none}
 .case-scene{min-height:100svh}.studio-chapter-word{font-size:85px;top:25%;left:0;max-width:100%;overflow:hidden}.studio-proof-thumbnail{display:none}
 .case-proof,.case-scene[data-case-scene=torti] .case-proof,.case-scene[data-case-scene=spikes] .case-proof{background:transparent;box-shadow:none;padding:0;transform:none}.view-count>svg{position:static}.view-count strong{font-size:20px}.metric-row{margin:0;padding:0}.case-copy h2{font-size:24px}.case-copy>p{font-size:12px;margin-top:8px;line-height:1.6}
 .event-cases{padding-block:90px 70px}.event-case{display:flex;gap:53px}.event-case+.event-case{margin-top:100px}.event-art,.event-case:first-child .event-art{width:calc(100% - 12px);margin-inline:6px}.event-art>img:first-child,.event-case:first-child .event-art>img:first-child{height:310px}
 .event-art>img.studio-event-profile,.event-case:first-child .event-art>img.studio-event-profile{width:100px;height:217px;top:-32px;right:0;border-radius:9px}
 .studio-crowd{width:145px;left:-5px;bottom:45px}.studio-crowd img{height:74px}.studio-crowd figcaption{font-size:6px}
 .profile-glass,.event-case:first-child .profile-glass{left:8px;right:8px;bottom:-25px;padding:15px 13px;gap:12px}.profile-glass span{font-size:11px}.profile-glass small{font-size:8px}
 .event-case.reverse .event-art>img:first-child{height:360px}.event-case.reverse .event-art>img.studio-event-profile{left:0;right:auto;bottom:52px;top:auto;width:90px;height:196px}
 .event-copy h2{font-size:44px}.event-copy blockquote p{font-size:14px}.event-copy blockquote{margin-top:22px}
 .mobile-context{padding-right:4px}.mobile-context h2{max-width:100%}
}
@media(max-width:760px) and (max-height:740px){
 .hero-scene{padding-top:91px}.hero-copy h1{font-size:39px}.hero-period{font-size:12px;margin-top:15px}.hero-invitation{margin-top:13px}.studio-hero-credit{font-size:7px!important;margin-top:8px}.studio-sample{width:90px}.studio-sample img{height:130px}.sample-torti{top:66%}.sample-spikes{top:69%}.studio-aperture{top:56%;height:48%}.studio-background-type{top:66%;font-size:48px}
}
html[data-motion=reduced] .studio-aperture,html[data-layout=compact] .studio-aperture{opacity:.6;transform:rotate(-9deg)}
html[data-motion=reduced] .studio-floor,html[data-layout=compact] .studio-floor{opacity:.5;transform:perspective(700px) rotateX(66deg)}
html[data-motion=reduced] .studio-hero-planes,html[data-layout=compact] .studio-hero-planes{opacity:1}
html[data-motion=reduced] .studio-sample,html[data-layout=compact] .studio-sample{transform:rotate(-10deg)}
html[data-motion=reduced] .sample-torti,html[data-layout=compact] .sample-torti{left:20%;top:27%}
html[data-motion=reduced] .sample-spikes,html[data-layout=compact] .sample-spikes{left:auto;right:17%;top:44%;transform:rotate(10deg)}
html[data-motion=reduced] .studio-glass-note,html[data-layout=compact] .studio-glass-note{display:none}
html[data-motion=reduced] .hero-copy h1,html[data-layout=compact] .hero-copy h1{width:100%;max-width:1100px}
@media(max-width:760px){html[data-motion=reduced] .sample-torti,html[data-layout=compact] .sample-torti{left:-5%;top:25%}html[data-motion=reduced] .sample-spikes,html[data-layout=compact] .sample-spikes{right:-6%;top:44%}html[data-motion=reduced] .studio-aperture,html[data-layout=compact] .studio-aperture{top:10%;height:85%}html[data-motion=reduced] .studio-background-type,html[data-layout=compact] .studio-background-type{top:20%}html[data-motion=reduced] .studio-chapter-word,html[data-layout=compact] .studio-chapter-word{display:none}}
html:not(.enhanced) .studio-chapter-word{display:none}
@media(prefers-reduced-motion:reduce){.studio-aperture,.studio-sample,.studio-floor,.studio-background-type{transition:none!important;animation:none!important}}

/* Review r2: readable attribution and a closer mobile handoff. */
@media(max-width:760px){
 .studio-hero-credit{display:table;font-size:10px!important;max-width:255px;line-height:1.45!important;padding:6px 9px;background:#15141ee8;color:#e5dfe6;border-radius:5px;margin-top:10px}
}
/* Progressive spatial motion. Video and text keep their existing stable layers. */
@supports(animation-timeline:view()){
 @media(prefers-reduced-motion:no-preference){
  html[data-motion=full][data-layout=scroll] .event-case{view-timeline-name:--event-depth;view-timeline-axis:block}
  html[data-motion=full][data-layout=scroll] .event-art{animation:studio-scene-depth linear both;animation-timeline:--event-depth;animation-range:entry 0% exit 100%}
  html[data-motion=full][data-layout=scroll] .studio-event-profile{animation:studio-front-depth linear both;animation-timeline:--event-depth;animation-range:entry 0% exit 100%}
  html[data-motion=full][data-layout=scroll] .studio-crowd{animation:studio-crowd-depth linear both;animation-timeline:--event-depth;animation-range:entry 0% exit 100%}
  @keyframes studio-scene-depth{from{translate:0 80px}to{translate:0 -65px}}
  @keyframes studio-front-depth{from{translate:0 -65px}to{translate:0 55px}}
  @keyframes studio-crowd-depth{from{translate:0 45px}to{translate:0 -35px}}
 }
 @media(max-width:760px) and (prefers-reduced-motion:no-preference){
  @keyframes studio-scene-depth{from{translate:0 24px}to{translate:0 -20px}}
  @keyframes studio-front-depth{from{translate:0 -20px}to{translate:0 20px}}
  @keyframes studio-crowd-depth{from{translate:0 15px}to{translate:0 -15px}}
 }
}
/* The room follows the selected contribution; no filter touches the video. */
.room-light:before,.room-light:after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.room-light:before{background:radial-gradient(ellipse at 65% 42%,#24787870,transparent 64%)}
.room-light:after{background:radial-gradient(ellipse at 70% 45%,#91703f66,transparent 64%)}
html[data-case=torti] .room-light:before,html[data-case=spikes] .room-light:after{opacity:1}
@supports(animation-timeline:view()){
 @media(min-width:761px) and (prefers-reduced-motion:no-preference){
  html[data-motion=full][data-layout=scroll] .case-scene{view-timeline-name:--case-depth;view-timeline-axis:block}
  html[data-motion=full][data-layout=scroll] .case-proof{animation:studio-proof-depth linear both;animation-timeline:--case-depth;animation-range:entry 0% exit 100%}
  @keyframes studio-proof-depth{from{translate:0 65px}to{translate:0 -65px}}
 }
}
@media(prefers-reduced-motion:no-preference){
 html[data-motion=full][data-ambient=running] .local-like[aria-pressed=true] svg{animation:studio-save .32s ease-out both}
 @keyframes studio-save{0%{scale:1}45%{scale:1.3}100%{scale:1}}
}
/* Decorative case lettering must never cross the actual reel content. */
.studio-chapter-word{display:none}
/* Thumb-friendly controls below the reel, including short mobile viewports. */
.feed-controls button{width:44px;min-width:44px;height:44px}
@media(max-width:760px){.feed-controls{gap:8px}}
/* Only actual hero text receives clicks; the clear space belongs to the phone. */
.hero-copy{pointer-events:none}
.hero-copy h1,.hero-copy p,.hero-invitation .text-link{pointer-events:auto}
.hero-invitation{width:fit-content;max-width:100%}
/* The feed moves by transform, never by a nested focus-induced scroll. */
.reel-window{overflow:clip}