/* One product, one simultaneous hover disclosure. */
.quality-story{max-width:1800px;margin:0 auto;padding:35px var(--pad) 0}
.quality-heading{display:flex;align-items:end;justify-content:space-between;gap:35px}
.quality-heading h2{font-size:clamp(38px,4.4vw,64px);line-height:1.1}
.quality-heading>p{font-size:17px;line-height:1.7;color:var(--muted);padding-bottom:3px}
.cup-experience{position:relative;display:block;width:100%;height:540px;margin:8px 0 0;padding:0;text-align:left;background:transparent;border-radius:24px;isolation:isolate;user-select:none;--open:0}
.cup-experience.is-open{--open:1}
.cup-scene{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;pointer-events:none;opacity:0}
.cup-scene>.cup-art{width:590px;height:100%;max-width:100%;overflow:visible;filter:drop-shadow(3px 12px 11px #435e6f12)}
.cup-fallback{position:absolute;inset:50px 0 70px;display:flex;justify-content:center}
.cup-fallback img{height:100%;width:auto;object-fit:contain}
.cup-experience.motion-ready .cup-fallback{opacity:0}.cup-experience.motion-ready .cup-scene{opacity:1}
.cup-art .cup-inner,.cup-art .cup-outer,.cup-art .cup-lid,.cup-art .cup-shadow{transition:transform .8s cubic-bezier(.2,.7,.15,1)}
.cup-art .cup-outer{transform:translate(calc(-112px * var(--open)),calc(20px * var(--open))) rotate(calc(-11deg * var(--open)));transform-origin:320px 390px}
.cup-art .cup-inner{transform:translate(calc(74px * var(--open)),calc(-5px * var(--open)))}
.cup-art .cup-lid{transform:translate(calc(-18px * var(--open)),calc(-88px * var(--open))) rotate(calc(-8deg * var(--open)));transform-origin:320px 180px}
.cup-art .cup-shadow{transform:scaleX(calc(1 + .45 * var(--open)));transform-origin:320px 554px}
.cup-art .cup-cut,.cup-art .cup-rim{opacity:var(--open);transition:opacity .55s}
.cup-art .cup-whole,.cup-art .cup-assembled{opacity:calc(1 - var(--open));transition:opacity .3s}
.cup-art .cup-barrier{opacity:var(--open);transition:opacity .8s}
.cup-callout{position:absolute;display:flex;flex-direction:column;gap:5px;width:220px;opacity:0;transform:translateY(9px);transition:opacity .4s,transform .65s;pointer-events:none}
.cup-callout strong{font-size:25px;font-weight:400;letter-spacing:-.7px;line-height:1.15}
.cup-callout>span{font-size:15px;line-height:1.55;color:var(--muted)}
.is-open .cup-callout{opacity:1;transform:none}
.callout-print{left:3%;top:51%}.callout-air{right:0;top:24%}.callout-barrier{right:0;top:61%}
.callout-print::after{content:'';height:1px;width:70px;background:var(--blue);margin-top:9px}
.callout-air::before,.callout-barrier::before{content:'';position:absolute;top:16px;right:calc(100% + 14px);width:40px;height:1px;background:var(--blue)}
.cup-hint{position:absolute;bottom:3px;left:0;right:0;display:grid;place-items:center;font-size:15px;color:var(--steel);pointer-events:none}
.cup-hint>span{grid-area:1/1;transition:opacity .25s}.hint-open{opacity:0}.is-open .hint-rest{opacity:0}.is-open .hint-open{opacity:1}.touch-hint{display:none}
.quality-footer{display:flex;align-items:center;gap:22px;padding:23px 0 12px;color:var(--muted);font-size:14px}
.quality-footer button{background:none;font-size:14px;padding:8px 0;min-height:44px;text-decoration:underline;text-underline-offset:5px}.quality-footer .text-link{margin-left:auto;font-size:15px;color:var(--ink)}
.asset-fallback .cup-callouts{display:none}.asset-fallback .cup-hint{display:none}
/* Product-specific reactions use real catalog images and isolated photo layers. */
.card-art{position:absolute;inset:0;display:block;opacity:0;pointer-events:none;--open:0}
.card-art svg{height:100%;width:100%;overflow:visible}
.product-visual.motion-ready>img{opacity:0}
.product-visual.motion-ready .card-art{opacity:1}
.product-visual:focus-visible .card-art{--open:1}
.single-lid{transform:translate(calc(-15px * var(--open)),calc(-75px * var(--open))) rotate(calc(-8deg * var(--open)));transform-origin:320px 180px;transition:transform .7s cubic-bezier(.2,.7,.15,1)}
.single-steam{opacity:var(--open);transform:translateY(calc(-16px * var(--open)));transition:opacity .5s,transform .8s}.single-mouth{opacity:var(--open)}
.sleeve-band{transform:translate(calc(18px * var(--open)),calc(-65px * var(--open))) rotate(calc(-6deg * var(--open)));transform-origin:320px 300px;transition:transform .7s cubic-bezier(.2,.7,.15,1)}
.sleeve-assembled{opacity:calc(1 - var(--open));transition:opacity .25s}
.product-visual{isolation:isolate;user-select:none;overflow:hidden;border-radius:18px}
.product-open{z-index:5;font-size:14px;background:#f7f8f7e8;bottom:8px;backdrop-filter:blur(5px)}
.product-fan{position:absolute;inset:20px 10px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:-1}
.product-fan img{position:absolute;width:76%;height:88%;object-fit:contain;opacity:0;transform:scale(.82);transition:transform .8s cubic-bezier(.2,.7,.15,1),opacity .35s;filter:brightness(.96)}
.emboss-lens{position:absolute;right:4%;top:9%;width:47%;aspect-ratio:1;border-radius:50%;overflow:hidden;opacity:0;transform:scale(.5);border:5px solid var(--paper);box-shadow:0 8px 30px #35566d24;pointer-events:none;transition:opacity .25s,transform .5s cubic-bezier(.2,.7,.15,1)}
.emboss-lens>img{width:100%;height:100%;object-fit:cover;object-position:var(--lens-x,50%) var(--lens-y,50%);transform:scale(2.2)}
.emboss-lens>span{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-size:14px;background:#f7f8f7d9;padding:5px;color:var(--steel)}
.holder-orbit{position:absolute;inset:5% 3%;opacity:0;transition:opacity .4s;pointer-events:none}.holder-orbit svg{height:100%;width:100%;fill:none;stroke:#9cb5c8;stroke-width:1.2;stroke-dasharray:5 7;transform:rotate(-20deg)}
@media(hover:hover) and (pointer:fine){
 .product-visual:hover .card-art{--open:1}
 .product-visual.motion-ready:hover>img{transform:none}
 .product-card[data-item=embossed] .product-visual:hover>img{transform:translateX(-13%) rotate(-6deg) scale(.96)}
 .product-card[data-item=embossed] .product-visual:hover .emboss-lens{opacity:1;transform:scale(1)}
 .product-card[data-item=designer] .product-visual:hover>img{transform:translateY(12px) scale(.85)}
 .product-visual:hover .fan-0{opacity:.88;transform:translateX(-29%) translateY(-3%) rotate(-17deg) scale(.75)}
 .product-visual:hover .fan-1{opacity:.88;transform:translateX(29%) translateY(-3%) rotate(17deg) scale(.75)}
 .product-card[data-item=lunch] .product-visual:hover>img{transform:translateY(24px) scale(.91)}
 .product-card[data-item=lunch] .product-visual:hover .fan-0{transform:translate(-13%,-25%) scale(.7);opacity:.85}
 .product-card[data-item=lunch] .product-visual:hover .fan-1{transform:translate(12%,-40%) scale(.5);opacity:.6}
 .product-card[data-item=sugar] .product-visual:hover>img{transform:translateY(20px) scale(.84)}
 .product-card[data-item=sugar] .product-visual:hover .fan-0{transform:translate(-30%,-9%) rotate(-20deg) scale(.7)}
 .product-card[data-item=sugar] .product-visual:hover .fan-1{transform:translate(30%,-9%) rotate(20deg) scale(.7)}
 .product-card[data-item=holder] .product-visual:hover>img{transform:perspective(600px) rotateY(-18deg) rotateZ(-10deg) translateY(-15px)}
 .product-visual:hover .holder-orbit{opacity:1}
}
.product-visual:focus-visible .emboss-lens,.product-visual:focus-visible .holder-orbit{opacity:1;transform:none}
.product-visual:focus-visible .fan-0{opacity:.8;transform:translateX(-25%) rotate(-15deg) scale(.75)}.product-visual:focus-visible .fan-1{opacity:.8;transform:translateX(25%) rotate(15deg) scale(.75)}
@media(min-width:1500px){.cup-experience{height:610px}.cup-scene>.cup-art{width:690px}.callout-print{left:10%}.callout-air,.callout-barrier{right:7%}.cup-callout strong{font-size:29px}.cup-callout>span{font-size:17px}}
@media(max-width:1100px){.quality-heading>p{font-size:16px}.cup-callout{width:185px}.cup-callout strong{font-size:22px}.cup-callout>span{font-size:14px}.callout-print{left:0}.cup-scene>.cup-art{width:550px}.callout-air::before,.callout-barrier::before{width:20px;right:calc(100% + 7px)}}
@media(max-width:800px){.quality-heading{align-items:start}.quality-heading h2{font-size:40px}.quality-heading>p{max-width:220px;font-size:15px}.quality-heading>p br{display:none}.cup-experience{height:480px}.cup-scene>.cup-art{width:440px}.cup-callout{width:150px}.cup-callout strong{font-size:19px}.cup-callout>span{font-size:14px}.callout-print{top:66%}.callout-air{top:20%}.callout-barrier{top:65%}.callout-air::before,.callout-barrier::before{display:none}.quality-footer{gap:13px;flex-wrap:wrap}.quality-footer>span{display:none}.quality-footer .text-link{font-size:14px}.emboss-lens>span{font-size:12px}}
@media(max-width:600px){
 .quality-story{padding-top:15px}.quality-heading{display:block}.quality-heading h2{font-size:42px;letter-spacing:-1.9px}.quality-heading>p{max-width:100%;font-size:16px;margin-top:16px}.quality-heading>p br{display:none}
 .cup-experience{height:510px;margin-top:0;border-radius:12px}.cup-scene{top:0;bottom:auto;height:370px}.cup-scene>.cup-art{width:360px;max-width:110%;height:370px}.cup-fallback{inset:40px 0 170px}
 .cup-callouts{position:absolute;left:0;right:0;bottom:45px;display:grid;grid-template-columns:1fr 1fr;gap:16px 15px;opacity:0;transition:opacity .25s}.is-open .cup-callouts{opacity:1}
 .cup-callout{position:static;width:auto;gap:4px;transform:none}.cup-callout strong{font-size:20px;letter-spacing:-.5px}.cup-callout>span{font-size:14px;line-height:1.4}.callout-print::after{display:none}.callout-barrier{grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:15px}.callout-barrier>span{max-width:160px}.cup-hint{bottom:8px;font-size:14px}.quality-footer{padding-top:12px;gap:8px;justify-content:space-between}.quality-footer button,.quality-footer .text-link{font-size:13px}.quality-footer .text-link{margin-left:0}
 .cup-experience:not(.is-open) .cup-scene{transform:translateY(55px)}.cup-scene{transition:transform .65s cubic-bezier(.2,.7,.15,1)}
 .card-art{inset:-3px -5px}.product-fan{display:none}.product-visual:focus-visible .card-art{--open:0}.product-visual:focus-visible .emboss-lens,.product-visual:focus-visible .holder-orbit{display:none}
}
@media(max-width:600px),(hover:none),(pointer:coarse){.desktop-hint{display:none}.touch-hint{display:inline}}
@media(prefers-reduced-motion:reduce){.cup-art *, .cup-callout,.cup-hint>span,.cup-scene,.card-art *, .product-fan *,.emboss-lens{transition:none!important}.product-visual .holder-orbit{display:none}}

/* The hero is one lit 3D object. Photo-layer animation stays in the catalog. */
.quality-story{scroll-margin-top:110px}
.cup-experience{height:570px}
.cup-scene{opacity:0;transition:opacity .35s}
.cup-scene canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.cup-experience.scene-ready .cup-scene{opacity:1}
.cup-experience.scene-ready .cup-fallback{opacity:0;visibility:hidden}
.cup-callout{transition:opacity .45s .15s,transform .65s .1s}
.cup-experience:not(.is-open) .cup-callout{transition-delay:0s}
.callout-print{top:54%}.callout-air{top:18%}.callout-barrier{top:61%}
.scene-fallback .cup-scene{display:none}.scene-fallback .cup-fallback{opacity:1;visibility:visible}
.scene-fallback.is-open .cup-fallback{opacity:.25}.scene-fallback .hint-open{font-size:0}.scene-fallback .hint-open::after{content:'Внешняя стенка · воздух · внутренняя стенка с покрытием';font-size:14px}
@media(min-width:1500px){.cup-experience{height:640px}}
@media(max-width:800px){.cup-experience{height:520px}.callout-print{top:65%}.callout-barrier{top:66%}}
@media(max-width:600px){
 .quality-story{scroll-margin-top:90px}.cup-experience{height:550px}.cup-scene{height:365px;inset:0 0 auto;transform:none!important;transition:opacity .35s}.cup-fallback{bottom:190px}
 .cup-callouts{bottom:43px;gap:16px}.cup-callout strong{font-size:19px}.cup-callout>span{font-size:14px}.callout-barrier>span{max-width:155px}.cup-hint{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.cup-scene,.cup-callout,.cup-fallback{transition:none!important}}
.cup-leaders{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;color:#9badb5}
.cup-leaders path{fill:none;stroke:currentColor;stroke-width:1}.cup-leaders circle{fill:currentColor}
.scene-ready .callout-air{left:0;right:auto;top:18%}
.scene-ready .callout-air::before,.scene-ready .callout-barrier::before{display:none}
@media(min-width:1500px){.scene-ready .callout-air{left:10%}}
@media(max-width:800px){.cup-leaders{display:none}}
@media(max-width:600px){.scene-ready .callout-air{position:static}}