/* JSOFY R16.6 | Passive continuous marquee and correctly occluded phone.
   Gallery does not intercept mouse/touch/wheel. Its compositor animation is
   only active when on screen. Product links remain in the navigation/story. */
.page-home .r161-gallery-window{
 position:relative; overflow:hidden;
 isolation:isolate; mask-image:linear-gradient(90deg,transparent 0%,#000 3%,#000 97%,transparent 100%);
}
.page-home .r161-gallery-rail{
 display:flex;align-items:stretch;gap:var(--r166-gap,20px);width:max-content;max-width:none;
 margin:0;padding:8px 0 22px;overflow:visible;overscroll-behavior:auto;
 scroll-behavior:auto!important;scroll-snap-type:none!important;touch-action:auto;
 pointer-events:none;cursor:default;user-select:none;mask-image:none;
 transform:translate3d(0,0,0);
 animation:none;
}
.page-home .r161-gallery-section{--r166-gap:20px}
.page-home .r161-gallery-item{scroll-snap-align:none;flex:0 0 clamp(275px,28vw,390px);width:clamp(275px,28vw,390px);pointer-events:none}
.page-home .r161-gallery-visual{height:clamp(340px,34vw,525px)}
.page-home .r161-gallery-item:hover img{transform:none}
.page-home .r161-gallery-rail.r166-measured{
 animation:r166-continuous-marquee var(--r166-duration,110s) linear infinite;
 animation-play-state:paused;
}
.page-home .r161-gallery-rail.r166-measured.r166-running{animation-play-state:running}
@keyframes r166-continuous-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * var(--r166-cycle,2000px)),0,0)}}
 .page-home .r161-gallery-hint{opacity:.78;display:flex;align-items:center;flex-wrap:wrap;gap:12px}

/* The handset is genuinely BEHIND the chapter panels, not composited over them.
   Panel foreground has a right-side aperture for the device plus full-width
   top/bottom occlusion bands, so each panel edge passes IN FRONT of the phone. */
.page-home .r164-stack{isolation:isolate}
/* Five card-shaped backdrops share their physical card positions while staying
   behind the phone. This keeps the right-hand aperture the SAME color as each
   storyline chapter, instead of leaving an unintentional black hole. */
.page-home .r166-panel-backdrops{position:absolute;inset:0;z-index:0;pointer-events:none}
.page-home .r166-panel-backdrop{position:absolute;left:0;right:0;top:0;height:0;border-radius:35px;overflow:hidden;border:1px solid #ffffff14}
.page-home .r166-panel-backdrop--pos{background:radial-gradient(ellipse at 83% 70%,#627b9e77,transparent 56%),linear-gradient(120deg,#242b35,#313b45)}
.page-home .r166-panel-backdrop--catalog{background:radial-gradient(ellipse at 85% 59%,#b0a0a466,transparent 55%),linear-gradient(115deg,#25262b,#464049)}
.page-home .r166-panel-backdrop--web{background:radial-gradient(ellipse at 90% 35%,#828bdc68,transparent 60%),linear-gradient(115deg,#252735,#3d3a57)}
.page-home .r166-panel-backdrop--connect{background:radial-gradient(ellipse at 77% 70%,#468b9b88,transparent 58%),linear-gradient(110deg,#202b32,#2d464d)}
.page-home .r166-panel-backdrop--home{background:radial-gradient(ellipse at 84% 50%,#65a98965,transparent 56%),linear-gradient(115deg,#252d2d,#30433b)}

.page-home .r164-phone-overlay{z-index:1}
.page-home .r164-step{z-index:2;isolation:isolate}
.page-home .r164-step::before{
 /* The panel's original gradients remain intact, only the physical right-side
    window is cleared. This is a layer hole, not an opacity change to the phone. */
 clip-path:polygon(0 0,100% 0,100% 4%,53% 4%,53% 96%,100% 96%,100% 100%,0 100%);
}
.page-home .r164-step-content{z-index:3}
/* A broad, gentle glow BEHIND the handset gives depth without foreground haze. */
.page-home .r164-phone-overlay::before{
 content:"";position:absolute;top:0;bottom:0;right:1.5%;width:52%;pointer-events:none;
 background:linear-gradient(90deg,transparent,rgba(107,125,161,.08) 40%,transparent 100%);
}
@media(max-width:850px){
 .page-home .r161-gallery-section{--r166-gap:14px}
 .page-home .r161-gallery-item{flex-basis:min(70vw,300px);width:min(70vw,300px)}
 .page-home .r161-gallery-visual{height:clamp(315px,83vw,435px)}
 /* Phone hidden on small screens; give each chapter its full panel background. */
 .page-home .r164-step::before{clip-path:none}
 .page-home .r166-panel-backdrops{display:none}
}
@media(prefers-reduced-motion:reduce){
 .page-home .r161-gallery-window{mask-image:none}
 .page-home .r161-gallery-rail,.page-home .r161-gallery-rail.r166-measured.r166-running{
   animation:none!important;transform:none!important;overflow-x:auto;max-width:100%;width:100%;pointer-events:auto;touch-action:pan-x;
 }
}
.r163-save-data .r161-gallery-rail,.r163-save-data .r161-gallery-rail.r166-measured.r166-running{animation:none!important;transform:none!important;overflow-x:auto;max-width:100%;width:100%;pointer-events:auto;touch-action:pan-x}

/* R16.8: a single dark reveal line, never doubled card borders.
   Exactly one black gap separates two continuous color panels. */
.page-home .r164-step{margin-bottom:0;border:0}
.page-home .r164-step + .r164-step{margin-top:14px}
.page-home .r166-panel-backdrop{border:0}
@media(max-width:850px){
 .page-home .r164-step + .r164-step{margin-top:18px}
}