/* ALMUTAMAKINA / cinematic showroom v3.
   This layer is isolated from catalog/product CSS and keeps existing image URLs. */

/* A quiet architectural showroom: open white space, light in the back,
   and ready-made landing platforms before any product arrives. */
.hero{background:linear-gradient(180deg,#fff 0%,#fff 54%,#f9fbfd 86%,#f5f8fa 100%)}
.showroom{width:min(1420px,96%);height:59%;bottom:8%;overflow:visible}
.showroom-light{inset:-2% 2% 3%;border-radius:45%;background:radial-gradient(ellipse at 50% 98%,#adc3d338,transparent 64%)}
.showroom-floor{bottom:-3%;left:-3%;right:-3%;height:15%;background:radial-gradient(ellipse at 50% 60%,#98afc239,#bdcbd52c 35%,transparent 75%);filter:blur(16px)}
.landing-pads{position:absolute;inset:0;z-index:1;pointer-events:none}
.landing-pads i{position:absolute;display:block;height:21px;border-radius:50%;background:linear-gradient(180deg,#fff 5%,#e9eef2 46%,#d4dfe7 100%);border:1px solid #dee7ef;box-shadow:0 13px 19px #40638122,0 2px 2px #fff inset;transform:perspective(230px) rotateX(47deg)}
.landing-pads i:after{content:"";position:absolute;inset:10% 5%;border-radius:50%;box-shadow:0 1px 3px #fff inset;background:linear-gradient(90deg,transparent,#f9fdffcc,transparent)}
.pad-vacuum{left:0%;width:18%;bottom:2%}
.pad-oven{left:21%;width:18%;bottom:2%}
.pad-washer{left:40%;width:16%;bottom:2%}
.pad-fridge{left:59%;width:18%;bottom:2%}
.pad-dishwasher{left:79%;width:14%;bottom:2%}
.pad-microwave{left:46%;width:14%;bottom:-1%}
.hero-device{z-index:4;filter:drop-shadow(0 8px 8px #2a50631d);transition:filter .3s ease;--delay:0s}
.hero-device .device-base{display:none}
.hero-device>img,.hero-device .mini-photo-washer>img,.hero-device .mini-dishwasher>img,.hero-device .mini-microwave>img,.hero-device .mini-vacuum>img{
  mix-blend-mode:multiply;filter:brightness(1.075) contrast(1.055);object-fit:contain
}
.hero-device:after{content:"";position:absolute;left:17%;right:17%;bottom:0;height:10px;border-radius:50%;background:#1c334b20;filter:blur(9px);opacity:0;pointer-events:none}
body.intro-ready .hero-device:after{animation:landing-shadow 1.45s var(--delay) both}
body.intro-ready .hero-device{animation:product-arrival 1.45s var(--delay) cubic-bezier(.18,.84,.28,1) both}
@keyframes product-arrival{
  0%{opacity:0;transform:translate3d(0,-85vh,0) scale(.92) rotate(-2deg)}
  68%{opacity:1;transform:translate3d(0,6px,0) scale(1.01)}
  78%{transform:translate3d(0,-13px,0) scale(.995)}
  90%{transform:translate3d(0,3px,0) scale(1.002)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes landing-shadow{0%,55%{opacity:0;transform:scale(.22)}74%{opacity:.8;transform:scale(1.27)}100%{opacity:.4;transform:scale(1)}}
.hero-device:hover{filter:drop-shadow(0 15px 17px #3562812a)}
.h-vacuum{--delay:.12s;left:0%;width:20%;bottom:1%;z-index:8}
.h-oven{--delay:.28s;left:20%;width:20%;bottom:1%;z-index:5}
.h-washer{--delay:.46s;left:39%;width:18%;bottom:1%;z-index:6}
.h-fridge{--delay:.66s;right:22%;width:23%;bottom:1%;z-index:3}
.h-dishwasher{--delay:.84s;right:2%;width:18%;bottom:1%;z-index:4}
.h-microwave{--delay:1.03s;right:39%;width:16%;bottom:0;z-index:9}
.h-oven .hero-oven-warm{top:61%;background:radial-gradient(ellipse,#ffe0aa7d,transparent);opacity:.1}
.h-fridge .fridge-flash{opacity:.12}

/* Dryer-less washing machine: the original front panel remains stable.
   Only the drum/clothing aperture accelerates while in view. */
.story.is-active .laundry-spin,.h-washer .laundry-spin{animation:laundry-quick 1.24s linear infinite}
@keyframes laundry-quick{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.washer-window{clip-path:circle(47% at 50% 50%)}

/* Microwave: the dish, turntable illumination and steam are clipped to the
   exact inner window. Nothing can draw in front of the exterior silver panel. */
.microwave-composite{isolation:isolate}
.microwave-composite>.micro-interior{
  display:block;position:absolute;left:10.6%;top:24%;width:57.6%;height:50.5%;
  overflow:hidden;border-radius:8px;z-index:3;clip-path:inset(0 round 8px);
  perspective:850px;pointer-events:none
}
.micro-interior .micro-warm{position:absolute;inset:0;width:auto;height:auto;
  background:radial-gradient(ellipse at 51% 82%,#ffc67e80,#ffdfb62e 43%,transparent 82%);
  filter:blur(2px);mix-blend-mode:screen;opacity:clamp(.18,calc(var(--p)*.52),.65);z-index:1}
.micro-interior .micro-food{
  position:absolute;left:15%;top:31%;width:69%;height:auto;opacity:1;mix-blend-mode:normal;
  filter:drop-shadow(0 5px 4px #24191755);z-index:2;transform-origin:50% 70%;
  animation:microwave-turntable 5s ease-in-out infinite!important;
}
@keyframes microwave-turntable{
  0%,100%{transform:translate3d(-3%,1%,0) rotateY(-13deg) scale(.94)}
  25%{transform:translate3d(1%,0,0) rotateY(7deg) scale(1)}
  50%{transform:translate3d(4%,-1%,0) rotateY(15deg) scale(1.035)}
  75%{transform:translate3d(0,0,0) rotateY(-6deg) scale(.99)}
}
.micro-interior .micro-steam{
  position:absolute;left:29%;top:0;width:44%;height:62%;z-index:4;
  opacity:clamp(.1,calc((var(--p) - .18)*.65),.52);
  filter:blur(1px);pointer-events:none
}
.micro-interior .micro-steam i{border-left-width:4px;filter:blur(6px);opacity:.55}
.mini-microwave .micro-steam{opacity:.4}
.mini-microwave .micro-warm{animation:microwave-heat 4.5s 3s ease-in-out infinite alternate}

/* Dishwasher front fascia is part of the folding door, beginning ABOVE the
   digital display. All three visible racks sit behind the front door. */
.dishwasher-composite{isolation:isolate}
.dishwasher-composite>.dish-cavity{
  position:absolute;left:13.7%;top:15.7%;width:59.5%;height:61%;z-index:1;
  background:linear-gradient(90deg,#77858d,#e5edf0 9%,#576a76 18%,#253842 52%,#536a77 88%,#dce5e9);
  border:5px solid #8797a0;border-radius:2px;
  box-shadow:inset 0 0 26px #15242b,inset 0 0 3px #fff;
  overflow:visible
}
.dishwasher-composite>.dish-door{
  position:absolute;left:13.7%;top:15.7%;width:59.5%;height:61%;
  background-image:url('/assets/cinematic/crimson-dishwasher.webp');
  background-size:168% 164%;background-position:34% 40%;
  border:1px solid #aeb8be;border-radius:2px;
  transform-origin:50% 100%;z-index:5;backface-visibility:hidden;
  box-shadow:0 9px 14px #24394a2e
}
.dishwasher-visual{--dish-open:clamp(0,calc((var(--p) - .13)*2.8),1)}
.dishwasher-visual>.dish-door{transform:perspective(1200px) rotateX(calc(var(--dish-open)*-82deg))}
.dish-rack{position:absolute;left:7%;width:86%;height:24%;
  border:2px solid #c6d4da;border-bottom:6px double #ccd7dd;border-radius:3px;
  box-shadow:0 4px 0 #374d59,0 8px 8px #172b3a75,inset 0 -11px 15px #d5e3e833;
  background:repeating-linear-gradient(90deg,transparent 0 12px,#a9bcc582 13px 14px,transparent 15px 20px),
             repeating-linear-gradient(0deg,transparent 0 8px,#c6d4da65 9px 10px,transparent 11px 19px);
  transform-origin:50% 100%;z-index:2
}
.dish-rack:after{content:"";position:absolute;left:7%;right:7%;bottom:15%;
  height:56%;background:
  radial-gradient(ellipse at 12% 48%,#f5fbfc 0 5%,#93a5b0 6% 8%,transparent 9%),
  radial-gradient(ellipse at 34% 48%,#f8fbfc 0 9%,#b5c6ce 10% 13%,transparent 14%),
  radial-gradient(ellipse at 62% 48%,#f8fbfc 0 9%,#b5c6ce 10% 13%,transparent 14%),
  radial-gradient(ellipse at 86% 48%,#f8fbfc 0 5%,#93a5b0 6% 8%,transparent 9%);
  filter:drop-shadow(0 2px 2px #192c3480)
}
.dish-rack-top{top:9%}.dish-rack-middle{top:39%}.dish-rack-bottom{top:69%}
.dishwasher-visual .dish-rack-top{transform:translateY(calc(clamp(0,(var(--p) - .36)*2,1)*7px)) scale(calc(1 + clamp(0,(var(--p) - .36)*2,1)*.03))}
.dishwasher-visual .dish-rack-middle{transform:translateY(calc(clamp(0,(var(--p) - .43)*2,1)*12px)) scale(calc(1 + clamp(0,(var(--p) - .43)*2,1)*.06));z-index:3}
.dishwasher-visual .dish-rack-bottom{transform:translateY(calc(clamp(0,(var(--p) - .52)*2,1)*18px)) scale(calc(1 + clamp(0,(var(--p) - .52)*2,1)*.08));z-index:4}
.dishwasher-visual .plate-motion{
  left:20%;top:18%;width:61%;z-index:9;pointer-events:none;
  opacity:clamp(0,calc((var(--p) - .55)*4),1);
  transform:translateY(calc((1 - var(--p))*100px)) scale(calc(.38 + var(--p)*.99));
  filter:drop-shadow(0 13px 11px #0b2b4155)
}
.plate-sparkle{right:11%;top:16%;width:24px;height:24px;background:#fff;filter:drop-shadow(0 0 8px #92edff)}
.second-sparkle{right:71%;top:53%;width:12px;height:12px;animation-delay:.8s}
.mini-dishwasher .dish-cavity{overflow:hidden}
.mini-dishwasher .dish-door{animation:dish-mini-open 8s 2.8s ease-in-out infinite}
@keyframes dish-mini-open{0%,18%,88%,100%{transform:perspective(600px) rotateX(0deg)}38%,68%{transform:perspective(600px) rotateX(-79deg)}}
.mini-dishwasher .dish-glimmer{top:45%;left:44%;animation:mini-glimmer 8s 2.8s infinite}

/* Oven: a lit metal chamber and supporting rack remain behind the pulled-out
   roasting tray; warm steam is translucent and stays attached to the roast. */
.oven-visual>.oven-cavity{
  z-index:2;left:19%;top:56%;width:62%;height:22.8%;border:5px ridge #9c8d80;
  border-top-color:#494a46;border-left-color:#606d73;border-right-color:#74848b;
  background:
    repeating-linear-gradient(0deg,transparent 0 26%,#c9ccd088 27% 28%,transparent 30% 34%),
    radial-gradient(ellipse at 51% 55%,#ffdcb4 0,#b77b47 28%,#453327 57%,#131d23 100%);
  box-shadow:inset 0 0 15px #161d27,inset 0 2px 12px #ffdb9555,0 0 7px #3a4d5a7d
}
.oven-inner-shelf{position:absolute;left:21%;width:58%;height:3%;top:71%;z-index:3;
  background:linear-gradient(180deg,#c1cbd0,#364952 30%,#d5d5cd 45%,#323f48 79%);
  border-radius:2px;box-shadow:0 2px 6px #111;opacity:clamp(0,calc((var(--p)-.3)*3.5),1)}
.oven-visual>.oven-door-panel{z-index:5}
.oven-visual>.roast-motion{z-index:6;left:22%;top:53%;width:56%;
  transform:translateY(calc((1 - var(--p))*50px)) scale(calc(.45 + var(--p)*.55));
  filter:drop-shadow(0 6px 7px #68381975)}
.oven-visual>.steam-field{z-index:7;top:39%;opacity:clamp(0,calc((var(--p) - .45)*1.25),.58)}
.oven-visual>.steam-field i{border-left-color:#f7f2e9c2;border-left-width:6px;filter:blur(7px)}
.oven-visual>.oven-warm-light{z-index:4;left:24%;top:56%;width:53%;height:17%;filter:blur(11px);
  opacity:clamp(0,calc((var(--p)-.15)*.9),.78);
  background:radial-gradient(ellipse,#ffd19a9f 0,#ffa74b6b 42%,transparent 85%)}

/* Actual physical opening instead of a bare before/after dissolve:
   two cropped metal leaves hinge away before resolving to the supplied
   photo of this exact open fridge. */
.fridge-visual{--f-open:clamp(0,calc((var(--p) - .08)*2.3),1)}
.fridge-visual .fridge-open{opacity:clamp(0,calc((var(--p) - .11)*3.25),1);transform:translateY(3.5%)}
.fridge-visual .fridge-closed{opacity:clamp(0,calc((.41 - var(--p))*5),1)}
.fridge-door-leaf{position:absolute;top:22%;height:67%;width:29.5%;z-index:5;overflow:hidden;
  opacity:clamp(0,calc((.7 - var(--p))*6),1);backface-visibility:hidden}
.fridge-door-leaf img{position:absolute;top:-32.8%;height:149.3%!important;width:271%!important;max-width:none!important;
  object-fit:fill!important;mix-blend-mode:normal!important}
.fridge-leaf-left{left:20.8%;transform-origin:0 50%;
  transform:perspective(650px) rotateY(calc(var(--f-open)*-76deg))}
.fridge-leaf-left img{left:-30.2%}
.fridge-leaf-right{right:20.8%;transform-origin:100% 50%;
  transform:perspective(650px) rotateY(calc(var(--f-open)*76deg))}
.fridge-leaf-right img{left:-129.8%}
.fridge-visual .fridge-shine{opacity:calc(var(--p)*.32)}

/* The nozzle sits low and left in the source artwork; every dust fleck
   converges to that same head rather than hovering around the motor body. */
.vacuum-visual .suction-particles,.mini-vacuum .suction-particles{
  position:absolute;left:-24%;bottom:5%;width:60%;height:17%;z-index:5;overflow:visible
}
.suction-particles i{background:#758995;box-shadow:0 1px 2px #57626a88;filter:blur(.25px)}
.suction-particles i:nth-child(1){left:4%;bottom:5%;--dx:180px;--dy:-9px}
.suction-particles i:nth-child(2){left:26%;bottom:12%;--dx:142px;--dy:-4px}
.suction-particles i:nth-child(3){left:0%;bottom:35%;--dx:190px;--dy:24px}
.suction-particles i:nth-child(4){left:51%;bottom:8%;--dx:94px;--dy:-6px}
.suction-particles i:nth-child(5){left:13%;bottom:54%;--dx:166px;--dy:47px}
.suction-particles i:nth-child(6){left:36%;bottom:67%;--dx:123px;--dy:63px}
.suction-particles i:nth-child(7){left:65%;bottom:38%;--dx:66px;--dy:30px}
.suction-particles i:nth-child(8){left:9%;bottom:4%;--dx:188px;--dy:-7px;animation-delay:1.2s}
.suction-particles i:nth-child(9){left:39%;bottom:6%;--dx:132px;--dy:-5px;animation-delay:1.5s}
.suction-particles i:nth-child(10){left:28%;bottom:38%;--dx:145px;--dy:29px;animation-delay:1.8s}
.story.is-active .suction-particles i,.h-vacuum .suction-particles i{animation-duration:1.55s}
.vacuum-visual>.vacuum-floor{bottom:5%;left:-24%;right:42%;height:3%;filter:blur(5px);
  background:linear-gradient(90deg,#87949a18,#57697842 55%,transparent)}

/* Final optical balance and photo-coordinate corrections. */
.scene-copy{opacity:calc(.69 + var(--p)*.31)}
.h-fridge>img,.h-oven>img,.h-washer .mini-photo-washer>img,
.h-dishwasher .mini-dishwasher>img,.h-microwave .mini-microwave>img,
.h-vacuum .mini-vacuum>img{mix-blend-mode:normal;filter:none}
.mini-dishwasher>.dish-cavity{
  left:15%;top:18.4%;width:70%;height:73%;border-width:2px;overflow:hidden
}
.mini-dishwasher>.dish-door{
  left:15%;top:18.4%;width:70%;height:73%;
  background-image:url('/assets/cinematic/dishwasher-cutout-v3.webp');
  background-size:142.86% 137%;background-position:50% 70%;
}
.mini-dishwasher .dish-rack{border-width:1px;border-bottom-width:3px}
.mini-dishwasher .dish-rack:after{opacity:.65}
.dishwasher-visual .plate-motion{
  top:26%;left:26%;width:48%;
  opacity:clamp(0,calc((var(--p) - .65)*5),1);
  transform:translateY(calc((1 - var(--p))*86px)) scale(calc(.49 + var(--p)*.83));
  filter:drop-shadow(0 10px 10px #0b293847)
}
.plate-sparkle{right:3%;top:13%;background:#b0e4ff;filter:drop-shadow(0 0 6px #78c9ef)}
.second-sparkle{right:74%;top:68%}
.dishwasher-visual .dish-rack-top{background-color:#5a728250}
.dishwasher-visual .dish-rack-middle{background-color:#8ca3ab50}
.dishwasher-visual .dish-rack-bottom{background-color:#a3b5c150}
.dishwasher-visual>.dish-cavity,.dishwasher-visual>.dish-door{
  opacity:clamp(0,calc((var(--p) - .025)*19),1);
}
.dishwasher-visual>.dish-door{
  border:0;
  box-shadow:0 calc(var(--p)*8px) calc(var(--p)*13px) #24394a30;
}
.vacuum-visual>.suction-particles{opacity:clamp(0,calc((var(--p)-.17)*1.9),1)}
.hero-device .device-tag{z-index:15}

@media (max-width:780px){
  .showroom{width:116%;height:53%;bottom:12%}
  .h-vacuum{left:-3%;width:27%}.h-oven{left:19%;width:26%}.h-washer{left:40%;width:24%}
  .h-fridge{right:18%;width:32%}.h-dishwasher{right:-2%;width:23%}.h-microwave{right:35%;width:23%;bottom:0}
  .pad-vacuum{left:0%;width:23%}.pad-oven{left:21%;width:22%}.pad-washer{left:43%;width:18%}
  .pad-fridge{left:60%;width:23%}.pad-dishwasher{left:82%;width:16%}.pad-microwave{left:45%;width:18%}
  .dishwasher-composite>.dish-cavity{border-width:3px}
  .fridge-door-leaf{top:22%}
}
@media (max-width:400px){
  .showroom{width:128%;height:48%;bottom:15%}
  .h-microwave{right:35%;bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .fridge-door-leaf{opacity:0!important}.fridge-visual .fridge-closed{opacity:0!important}
  .fridge-visual .fridge-open{opacity:1!important}
  .dishwasher-visual>.dish-door{transform:perspective(1000px) rotateX(-78deg)!important}
  .dishwasher-visual .plate-motion{opacity:1!important;transform:scale(1.1)!important}
  .landing-pads i{animation:none!important}
}