/* KOVA v1.5: continuous procedure film, cinematic gallery, editorial marks. */
.procedurePlayer{width:min(100%,1450px);margin:34px auto 0;border-radius:30px;overflow:hidden;background:#181815;box-shadow:0 28px 70px #241c142b;color:#fff}
.procedureStage{position:relative;min-height:610px;overflow:hidden;background:linear-gradient(115deg,#181815 0 43%,#eee5d8 43% 100%)}
.procedureStage:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,#fff4);pointer-events:none}
.procedureCopy{position:absolute;z-index:4;left:6%;top:12%;width:34%}
.procedureCopy>span{display:block;margin:48px 0 10px;color:#bd7044;font-size:12px;letter-spacing:.18em}
.procedureCopy h3{font-size:clamp(52px,6vw,82px);font-weight:400;line-height:.92;margin:0 0 19px;letter-spacing:-.04em}
.procedureCopy>p:last-child{max-width:360px;color:#c8c4bd;font-size:16px;line-height:1.65}
.procedureProduct{position:absolute;z-index:1;right:4%;top:0;width:52%;height:calc(100% - 75px);object-fit:contain;transform:scale(1.015);animation:procedureCamera 8s ease-in-out infinite alternate}
.isPaused .procedureProduct,.isPaused .procedureStage *{animation-play-state:paused!important}
.groundsEffect,.waterEffect,.pressEffect,.brewEffect{display:none;position:absolute;z-index:3}
.phase-1 .groundsEffect,.phase-2 .waterEffect,.phase-3 .pressEffect,.phase-4 .brewEffect{display:block}
.groundsEffect{right:28%;top:15%;width:90px;height:230px}
.groundsEffect i{position:absolute;left:calc(12px * var(--n));top:5px;width:8px;height:8px;border-radius:50%;background:#6e3d20;animation:groundsFall 1.3s infinite ease-in;box-shadow:0 0 0 1px #2b170e22}
.groundsEffect i:nth-child(1){--n:0;animation-delay:0s}.groundsEffect i:nth-child(2){--n:1;animation-delay:.22s}.groundsEffect i:nth-child(3){--n:2;animation-delay:.44s}.groundsEffect i:nth-child(4){--n:3;animation-delay:.66s}.groundsEffect i:nth-child(5){--n:4;animation-delay:.88s}
.groundsEffect b{position:absolute;bottom:10px;left:-7px;width:78px;height:24px;border-radius:7px 7px 28px 28px;background:#171714;box-shadow:inset 0 5px #5c331e,0 12px 22px #0003}
.waterEffect{right:27%;top:10%;width:52px;height:245px}
.waterEffect:before{content:"";position:absolute;left:23px;top:0;width:6px;height:195px;border-radius:99px;background:linear-gradient(#eaf8ff22,#8dd9ffcc 25%,#dff7ff);animation:waterStream 1.4s ease-in-out infinite}
.waterEffect i{position:absolute;left:19px;top:175px;width:14px;height:18px;border-radius:50% 50% 55% 55%;background:#bfeaff;animation:waterDrop 1.1s infinite}
.waterEffect i:nth-child(2){animation-delay:.25s}.waterEffect i:nth-child(3){animation-delay:.5s}.waterEffect i:nth-child(4){animation-delay:.75s}
.pressEffect{right:27.3%;top:43%;width:115px;height:80px}
.pressEffect i{position:absolute;left:0;top:0;width:72px;height:72px;border:3px solid #49ff38;border-radius:50%;animation:pressPulse 1.4s ease-out infinite}
.pressEffect b{position:absolute;right:0;bottom:0;width:66px;height:22px;border-radius:99px;background:linear-gradient(90deg,#d6ad91,#f0c7aa);transform:rotate(-18deg);box-shadow:0 8px 20px #0002;animation:pressMove 1.4s ease-in-out infinite}
.brewEffect{right:28.5%;top:59%;width:76px;height:170px}
.brewEffect i{position:absolute;left:34px;top:0;width:7px;height:112px;border-radius:99px;background:linear-gradient(#4b2110,#ad5d2b);animation:coffeeFlow 1.5s ease-in-out infinite}
.brewEffect b{position:absolute;left:7px;bottom:3px;width:63px;height:24px;border-radius:50% 50% 15px 15px;background:#6f3519;box-shadow:inset 0 4px #d3985f;animation:cremaRise 2.2s ease-out infinite}
.procedureControls{position:absolute;z-index:6;left:2%;right:2%;bottom:18px;display:grid;grid-template-columns:48px minmax(0,1fr) auto 48px;align-items:center;gap:18px;padding:10px 14px;border:1px solid #fff2;border-radius:16px;background:#111d;backdrop-filter:blur(14px)}
.procedureControls button{border:0;background:none;color:#fff}.playControl,.fullscreenControl{display:grid;place-items:center;width:40px;height:40px;border-radius:50%!important;transition:background .2s}.playControl:hover,.fullscreenControl:hover{background:#fff1}
.pauseIcon{display:block;width:14px;height:16px;border-inline:4px solid #fff}.playIcon{display:block;width:0;height:0;border-top:8px solid transparent;border-bottom:8px solid transparent;border-left:13px solid #fff;margin-left:3px}
.procedureTimeline{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.procedureTimeline button{text-align:left;padding:4px}.procedureTimeline button>span{display:block;margin-bottom:7px;color:#aaa39a;font-size:10px;letter-spacing:.12em;text-transform:uppercase}.procedureTimeline button.active>span{color:#fff}.procedureTimeline button>i{display:block;height:3px;border-radius:99px;background:#ffffff35;overflow:hidden}.procedureTimeline button>i b{display:block;width:100%;height:100%;background:#bd7044;transform-origin:left;animation:procedureProgress 3.6s linear}.isPaused .procedureTimeline button>i b{animation-play-state:paused}
.procedureTime{font-size:11px;color:#c3beb6;font-variant-numeric:tabular-nums;white-space:nowrap}.fullscreenControl>span{position:relative;width:17px;height:17px;border:2px solid #fff;border-radius:2px}.fullscreenControl>span:after{content:"";position:absolute;inset:3px;background:#111}
.procedurePlayer:fullscreen{width:100vw;height:100vh;margin:0;border-radius:0}.procedurePlayer:fullscreen .procedureStage{height:100vh}.procedurePlayer:fullscreen .procedureProduct{height:calc(100vh - 80px)}
@keyframes procedureCamera{from{transform:scale(1.01) translateY(3px)}to{transform:scale(1.045) translateY(-4px)}}
@keyframes groundsFall{0%{opacity:0;transform:translateY(0) rotate(0)}15%{opacity:1}100%{opacity:.15;transform:translateY(190px) rotate(260deg)}}
@keyframes waterStream{0%,100%{opacity:.35;transform:scaleY(.85)}50%{opacity:1;transform:scaleY(1)}}
@keyframes waterDrop{0%{opacity:0;transform:translateY(-20px) scale(.7)}30%{opacity:1}100%{opacity:0;transform:translateY(58px) scale(1)}}
@keyframes pressPulse{0%{opacity:.9;transform:scale(.55)}70%,100%{opacity:0;transform:scale(1.45)}}
@keyframes pressMove{0%,100%{transform:translate(15px,8px) rotate(-18deg)}50%{transform:translate(-8px,-5px) rotate(-18deg)}}
@keyframes coffeeFlow{0%,100%{opacity:.45;transform:scaleY(.78)}45%{opacity:1;transform:scaleY(1)}}
@keyframes cremaRise{0%{opacity:.2;transform:scaleY(.2);transform-origin:bottom}100%{opacity:1;transform:scaleY(1);transform-origin:bottom}}
@keyframes procedureProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.roulette-frame{border-radius:28px;background:#171714}
.roulette-slides{background:#171714}
.roulette-slides figure{display:block!important;opacity:0;pointer-events:none;transform:translateX(5%) scale(1.035);transition:opacity .72s ease,transform .95s cubic-bezier(.2,.75,.2,1)}
.roulette-frame.backward .roulette-slides figure{transform:translateX(-5%) scale(1.035)}
.roulette-slides figure.active{opacity:1;pointer-events:auto;transform:translateX(0) scale(1)}
.roulette-slides img{padding:0;object-fit:cover}
.roulette-slides figcaption{padding-top:75px;background:linear-gradient(transparent,#111c)}
.roulette-dots button{transition:width .3s ease,background .3s ease,transform .3s ease}

.pressLogo{display:flex!important;align-items:center!important;justify-content:center!important;gap:13px!important;letter-spacing:.08em!important}
.pressLogo i{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;color:#171714;font-style:normal;position:relative}
.pressLogo b{font-size:12px;line-height:1.12;text-align:left}.dailyBrew i{border:1px solid #171714;border-radius:50%;font-size:13px}.roamLogo i{border:1px solid #171714;border-radius:8px;font-size:20px}.roamLogo b{font-size:18px;letter-spacing:.22em}.formLogo i{background:#171714;color:#fff;font-size:24px}.formLogo b{font-size:18px}.cityLogo i{display:flex;align-items:end;gap:3px;border-bottom:2px solid #171714;padding:0 7px 4px}.cityLogo i em{display:block;width:5px;background:#171714}.cityLogo i em:nth-child(1){height:15px}.cityLogo i em:nth-child(2){height:27px}.cityLogo i em:nth-child(3){height:20px}.morningLogo i{border:2px solid #171714;border-bottom:0;border-radius:42px 42px 0 0;height:22px;margin-top:10px}.morningLogo i:after{content:"";position:absolute;left:6px;right:6px;bottom:-7px;border-bottom:1px solid #171714}

@media(max-width:900px){.procedureStage{min-height:720px;background:linear-gradient(180deg,#181815 0 39%,#eee5d8 39%)}.procedureCopy{left:7%;top:7%;width:86%}.procedureCopy>span{margin:24px 0 8px}.procedureCopy h3{font-size:58px}.procedureCopy>p:last-child{max-width:520px}.procedureProduct{right:17%;top:31%;width:66%;height:58%}.groundsEffect{right:35%;top:43%}.waterEffect{right:38%;top:40%}.pressEffect{right:37%;top:59%}.brewEffect{right:39%;top:68%}.pressLogo{min-height:84px!important}}
@media(max-width:580px){.procedurePlayer{border-radius:18px}.procedureStage{min-height:690px}.procedureCopy{left:6%;top:6%;width:88%}.procedureCopy h3{font-size:48px}.procedureCopy>p:last-child{font-size:14px}.procedureProduct{right:8%;top:32%;width:84%;height:58%}.procedureControls{grid-template-columns:40px minmax(0,1fr) 40px;gap:8px;left:3%;right:3%;bottom:10px;padding:8px}.procedureTime{display:none}.procedureTimeline button>span{display:none}.groundsEffect{right:33%;top:43%;transform:scale(.8)}.waterEffect{right:36%;top:39%;transform:scale(.8)}.pressEffect{right:31%;top:59%;transform:scale(.8)}.brewEffect{right:35%;top:67%;transform:scale(.8)}.roulette-frame{border-radius:18px}.pressLogo{justify-content:flex-start!important;padding-inline:25%!important}}
@media(prefers-reduced-motion:reduce){.procedureStage *,.roulette-slides figure{animation:none!important;transition:none!important}}
.procedurePlayer.isExpanded{position:fixed;z-index:1200;inset:0;width:100vw;height:100vh;margin:0;border-radius:0}.procedurePlayer.isExpanded .procedureStage{height:100vh}.procedurePlayer.isExpanded .procedureProduct{height:calc(100vh - 80px)}.kovaPlayerExpanded{overflow:hidden}