/* ========== Cinematic Hero — customizable slider ========== */
.cine-hero-wrap{padding:0;overflow:hidden}
.cine-hero{
  position:relative;overflow:hidden;
  border-radius:var(--hero-radius,28px);
  min-height:var(--hero-min-h,min(72vh,640px));
  background:#06101f;
  box-shadow:0 18px 48px rgba(6,16,31,.22);
  isolation:isolate;width:100%;max-width:100%;
  perspective:1200px;
  --cine-anim-ms:900ms;
}
.cine-hero.speed-slow{--cine-anim-ms:1200ms}
.cine-hero.speed-fast{--cine-anim-ms:650ms}
@media(max-width:780px){
  .cine-hero{min-height:var(--hero-min-hm,480px)}
}
.cine-slides{position:relative;min-height:inherit;width:100%}

/* Base slide state */
.cine-slide{
  position:absolute;inset:0;
  opacity:0;visibility:hidden;
  pointer-events:none;width:100%;overflow:hidden;
  z-index:1;
}
.cine-slide.is-active{
  position:relative;opacity:1;visibility:visible;pointer-events:auto;z-index:2;
}
.cine-slide.is-leaving{position:absolute;z-index:3;pointer-events:none}
.cine-slide.is-entering{z-index:4}

/* Shared: keep entering/leaving slides visible while animating */
.cine-hero[class*="anim-"] .cine-slide.is-entering,
.cine-hero[class*="anim-"] .cine-slide.is-leaving{
  opacity:1;visibility:visible;pointer-events:none;
}

/* ---- Anim: FADE ---- */
.cine-hero.anim-fade .cine-slide{
  transition:opacity var(--cine-anim-ms) cubic-bezier(.4,0,.2,1),visibility var(--cine-anim-ms) cubic-bezier(.4,0,.2,1);
}
.cine-hero.anim-fade .cine-slide.is-leaving{opacity:0}

/* ---- Anim: SLIDE (full-width) ---- */
.cine-hero.anim-slide .cine-slide.is-entering.dir-next{animation:cineSlideInL var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-slide .cine-slide.is-entering.dir-prev{animation:cineSlideInR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-slide .cine-slide.is-leaving.dir-next{animation:cineSlideOutL var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-slide .cine-slide.is-leaving.dir-prev{animation:cineSlideOutR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
@keyframes cineSlideInL{from{transform:translate3d(100%,0,0)}to{transform:none}}
@keyframes cineSlideInR{from{transform:translate3d(-100%,0,0)}to{transform:none}}
@keyframes cineSlideOutL{from{transform:none}to{transform:translate3d(-100%,0,0)}}
@keyframes cineSlideOutR{from{transform:none}to{transform:translate3d(100%,0,0)}}

/* ---- Anim: PUSH (classic carousel) ---- */
.cine-hero.anim-push .cine-slide.is-entering.dir-next{animation:cinePushInL var(--cine-anim-ms) cubic-bezier(.25,.8,.25,1) both}
.cine-hero.anim-push .cine-slide.is-entering.dir-prev{animation:cinePushInR var(--cine-anim-ms) cubic-bezier(.25,.8,.25,1) both}
.cine-hero.anim-push .cine-slide.is-leaving.dir-next{animation:cinePushOutL var(--cine-anim-ms) cubic-bezier(.25,.8,.25,1) both}
.cine-hero.anim-push .cine-slide.is-leaving.dir-prev{animation:cinePushOutR var(--cine-anim-ms) cubic-bezier(.25,.8,.25,1) both}
@keyframes cinePushInL{from{transform:translate3d(100%,0,0)}to{transform:none}}
@keyframes cinePushInR{from{transform:translate3d(-100%,0,0)}to{transform:none}}
@keyframes cinePushOutL{from{transform:none}to{transform:translate3d(-100%,0,0)}}
@keyframes cinePushOutR{from{transform:none}to{transform:translate3d(100%,0,0)}}

/* ---- Anim: SLIDE + FADE ---- */
.cine-hero.anim-slide_fade .cine-slide.is-entering.dir-next{animation:cineSFInL var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-slide_fade .cine-slide.is-entering.dir-prev{animation:cineSFInR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-slide_fade .cine-slide.is-leaving.dir-next{animation:cineSFOutL var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-slide_fade .cine-slide.is-leaving.dir-prev{animation:cineSFOutR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
@keyframes cineSFInL{from{opacity:0;transform:translate3d(42%,0,0)}to{opacity:1;transform:none}}
@keyframes cineSFInR{from{opacity:0;transform:translate3d(-42%,0,0)}to{opacity:1;transform:none}}
@keyframes cineSFOutL{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(-28%,0,0)}}
@keyframes cineSFOutR{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(28%,0,0)}}

/* ---- Anim: SLIDE + ZOOM ---- */
.cine-hero.anim-slide_zoom .cine-slide.is-entering.dir-next{animation:cineSZInL var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-slide_zoom .cine-slide.is-entering.dir-prev{animation:cineSZInR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-slide_zoom .cine-slide.is-leaving.dir-next{animation:cineSZOutL var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-slide_zoom .cine-slide.is-leaving.dir-prev{animation:cineSZOutR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
@keyframes cineSZInL{from{opacity:0;transform:translate3d(55%,0,0) scale(1.08)}to{opacity:1;transform:none}}
@keyframes cineSZInR{from{opacity:0;transform:translate3d(-55%,0,0) scale(1.08)}to{opacity:1;transform:none}}
@keyframes cineSZOutL{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(-35%,0,0) scale(.94)}}
@keyframes cineSZOutR{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(35%,0,0) scale(.94)}}

/* ---- Anim: ZOOM ---- */
.cine-hero.anim-zoom .cine-slide.is-entering{animation:cineZoomIn var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-zoom .cine-slide.is-leaving{animation:cineZoomOut var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
@keyframes cineZoomIn{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}
@keyframes cineZoomOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.92)}}

/* ---- Anim: WIPE ---- */
.cine-hero.anim-wipe .cine-slide{
  transition:none;
  clip-path:inset(0 100% 0 0);
  opacity:1;visibility:hidden;
}
.cine-hero.anim-wipe .cine-slide.is-active{
  visibility:visible;clip-path:inset(0 0 0 0);
}
.cine-hero.anim-wipe .cine-slide.is-entering.dir-next{animation:cineWipeIn  var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
.cine-hero.anim-wipe .cine-slide.is-entering.dir-prev{animation:cineWipeInR var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
.cine-hero.anim-wipe .cine-slide.is-leaving.dir-next{animation:cineWipeOut  var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both;visibility:visible}
.cine-hero.anim-wipe .cine-slide.is-leaving.dir-prev{animation:cineWipeOutR var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both;visibility:visible}
@keyframes cineWipeIn{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes cineWipeInR{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cineWipeOut{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 100% 0 0)}}
@keyframes cineWipeOutR{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}

/* ---- Anim: FLIP ---- */
.cine-hero.anim-flip .cine-slide{
  transform-style:preserve-3d;backface-visibility:hidden;
  transition:none;
}
.cine-hero.anim-flip .cine-slide.is-entering.dir-next{animation:cineFlipIn var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-flip .cine-slide.is-entering.dir-prev{animation:cineFlipInR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-flip .cine-slide.is-leaving.dir-next{animation:cineFlipOut var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-flip .cine-slide.is-leaving.dir-prev{animation:cineFlipOutR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
@keyframes cineFlipIn{from{opacity:0;transform:rotateY(-78deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes cineFlipInR{from{opacity:0;transform:rotateY(78deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes cineFlipOut{from{opacity:1;transform:none}to{opacity:0;transform:rotateY(78deg) scale(.96)}}
@keyframes cineFlipOutR{from{opacity:1;transform:none}to{opacity:0;transform:rotateY(-78deg) scale(.96)}}

/* ---- Anim: SLIDE UP / DOWN ---- */
.cine-hero.anim-slide_up .cine-slide.is-entering{animation:cineSlideUpIn var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-slide_up .cine-slide.is-leaving{animation:cineSlideUpOut var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
@keyframes cineSlideUpIn{from{transform:translate3d(0,100%,0)}to{transform:none}}
@keyframes cineSlideUpOut{from{transform:none}to{transform:translate3d(0,-100%,0)}}

.cine-hero.anim-slide_down .cine-slide.is-entering{animation:cineSlideDownIn var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-slide_down .cine-slide.is-leaving{animation:cineSlideDownOut var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
@keyframes cineSlideDownIn{from{transform:translate3d(0,-100%,0)}to{transform:none}}
@keyframes cineSlideDownOut{from{transform:none}to{transform:translate3d(0,100%,0)}}

/* ---- Anim: REVEAL ---- */
.cine-hero.anim-reveal .cine-slide.is-entering.dir-next{animation:cineRevIn var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
.cine-hero.anim-reveal .cine-slide.is-entering.dir-prev{animation:cineRevInR var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
.cine-hero.anim-reveal .cine-slide.is-leaving.dir-next{animation:cineRevOut var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
.cine-hero.anim-reveal .cine-slide.is-leaving.dir-prev{animation:cineRevOutR var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
@keyframes cineRevIn{from{clip-path:inset(0 0 0 100%);transform:translate3d(8%,0,0)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes cineRevInR{from{clip-path:inset(0 100% 0 0);transform:translate3d(-8%,0,0)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes cineRevOut{from{opacity:1;transform:none}to{opacity:.35;transform:translate3d(-12%,0,0) scale(.98)}}
@keyframes cineRevOutR{from{opacity:1;transform:none}to{opacity:.35;transform:translate3d(12%,0,0) scale(.98)}}

/* ---- Anim: SWING ---- */
.cine-hero.anim-swing{perspective:1400px}
.cine-hero.anim-swing .cine-slide.is-entering.dir-next{animation:cineSwingIn var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-swing .cine-slide.is-entering.dir-prev{animation:cineSwingInR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-swing .cine-slide.is-leaving.dir-next{animation:cineSwingOut var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-swing .cine-slide.is-leaving.dir-prev{animation:cineSwingOutR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
@keyframes cineSwingIn{from{opacity:0;transform:translate3d(40%,0,0) rotateY(-18deg)}to{opacity:1;transform:none}}
@keyframes cineSwingInR{from{opacity:0;transform:translate3d(-40%,0,0) rotateY(18deg)}to{opacity:1;transform:none}}
@keyframes cineSwingOut{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(-30%,0,0) rotateY(14deg)}}
@keyframes cineSwingOutR{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(30%,0,0) rotateY(-14deg)}}

/* ---- Anim: SHUTTER ---- */
.cine-hero.anim-shutter .cine-slide.is-entering.dir-next{animation:cineShutIn var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
.cine-hero.anim-shutter .cine-slide.is-entering.dir-prev{animation:cineShutInR var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
.cine-hero.anim-shutter .cine-slide.is-leaving.dir-next{animation:cineShutOut var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
.cine-hero.anim-shutter .cine-slide.is-leaving.dir-prev{animation:cineShutOutR var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
@keyframes cineShutIn{from{clip-path:inset(0 50% 0 50%);opacity:.6}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes cineShutInR{from{clip-path:inset(0 50% 0 50%);opacity:.6}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes cineShutOut{from{clip-path:inset(0 0 0 0);opacity:1}to{clip-path:inset(0 50% 0 50%);opacity:0}}
@keyframes cineShutOutR{from{clip-path:inset(0 0 0 0);opacity:1}to{clip-path:inset(0 50% 0 50%);opacity:0}}

/* ---- Anim: KEN BURNS ---- */
.cine-hero.anim-kenburns .cine-slide.is-entering{animation:cineKbFadeIn var(--cine-anim-ms) ease both}
.cine-hero.anim-kenburns .cine-slide.is-leaving{animation:cineKbFadeOut var(--cine-anim-ms) ease both}
.cine-hero.anim-kenburns .cine-slide.is-active .cine-bg{animation:cineKenBurns 8s ease-in-out alternate infinite}
@keyframes cineKbFadeIn{from{opacity:0}to{opacity:1}}
@keyframes cineKbFadeOut{from{opacity:1}to{opacity:0}}
@keyframes cineKenBurns{
  from{transform:scale(1.03) translate(0,0)}
  to{transform:scale(1.14) translate(-2%,1%)}
}

/* ---- Anim: COVERFLOW ---- */
.cine-hero.anim-coverflow{perspective:1400px}
.cine-hero.anim-coverflow .cine-slide.is-entering.dir-next{animation:cineCoverIn var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-coverflow .cine-slide.is-entering.dir-prev{animation:cineCoverInR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-coverflow .cine-slide.is-leaving.dir-next{animation:cineCoverOut var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-coverflow .cine-slide.is-leaving.dir-prev{animation:cineCoverOutR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
@keyframes cineCoverIn{from{opacity:0;transform:translate3d(18%,0,0) rotateY(-28deg) scale(.88)}to{opacity:1;transform:none}}
@keyframes cineCoverInR{from{opacity:0;transform:translate3d(-18%,0,0) rotateY(28deg) scale(.88)}to{opacity:1;transform:none}}
@keyframes cineCoverOut{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(-14%,0,0) rotateY(22deg) scale(.9)}}
@keyframes cineCoverOutR{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(14%,0,0) rotateY(-22deg) scale(.9)}}

/* ---- Anim: CUBE ---- */
.cine-hero.anim-cube{perspective:1600px}
.cine-hero.anim-cube .cine-slide{transform-style:preserve-3d}
.cine-hero.anim-cube .cine-slide.is-entering.dir-next{animation:cineCubeIn var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-cube .cine-slide.is-entering.dir-prev{animation:cineCubeInR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-cube .cine-slide.is-leaving.dir-next{animation:cineCubeOut var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-cube .cine-slide.is-leaving.dir-prev{animation:cineCubeOutR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
@keyframes cineCubeIn{from{opacity:.4;transform:translateX(55%) rotateY(-55deg)}to{opacity:1;transform:none}}
@keyframes cineCubeInR{from{opacity:.4;transform:translateX(-55%) rotateY(55deg)}to{opacity:1;transform:none}}
@keyframes cineCubeOut{from{opacity:1;transform:none}to{opacity:.2;transform:translateX(-45%) rotateY(48deg)}}
@keyframes cineCubeOutR{from{opacity:1;transform:none}to{opacity:.2;transform:translateX(45%) rotateY(-48deg)}}

/* ---- Anim: CARDS ---- */
.cine-hero.anim-cards .cine-slide.is-entering{animation:cineCardIn var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-cards .cine-slide.is-leaving{animation:cineCardOut var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
@keyframes cineCardIn{from{opacity:0;transform:translate3d(0,8%,0) scale(.92) rotate(-1.5deg)}to{opacity:1;transform:none}}
@keyframes cineCardOut{from{opacity:1;transform:none}to{opacity:0;transform:translate3d(0,-6%,0) scale(1.04)}}

/* ---- Anim: BLUR ---- */
.cine-hero.anim-blur .cine-slide.is-entering{animation:cineBlurIn var(--cine-anim-ms) ease both}
.cine-hero.anim-blur .cine-slide.is-leaving{animation:cineBlurOut var(--cine-anim-ms) ease both}
@keyframes cineBlurIn{from{opacity:0;filter:blur(16px);transform:scale(1.04)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes cineBlurOut{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(12px);transform:scale(.98)}}

/* ---- Anim: PARALLAX ---- */
.cine-hero.anim-parallax .cine-slide.is-entering.dir-next{animation:cineParIn var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-parallax .cine-slide.is-entering.dir-prev{animation:cineParInR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-parallax .cine-slide.is-leaving.dir-next{animation:cineParOut var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-parallax .cine-slide.is-leaving.dir-prev{animation:cineParOutR var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-parallax .cine-slide.is-entering .cine-bg{animation:cineParBg var(--cine-anim-ms) cubic-bezier(.22,1,.36,1) both}
@keyframes cineParIn{from{opacity:0;transform:translate3d(12%,0,0)}to{opacity:1;transform:none}}
@keyframes cineParInR{from{opacity:0;transform:translate3d(-12%,0,0)}to{opacity:1;transform:none}}
@keyframes cineParOut{from{opacity:1}to{opacity:0;transform:translate3d(-6%,0,0)}}
@keyframes cineParOutR{from{opacity:1}to{opacity:0;transform:translate3d(6%,0,0)}}
@keyframes cineParBg{from{transform:scale(1.08) translateX(-3%)}to{transform:scale(1.03) translateX(0)}}

/* ---- EPIC FADES ---- */
/* ---- Anim: FADE SOFT LUX (clean fade in → soft cross to next) ---- */
.cine-hero.anim-fade_soft_lux .cine-slide.is-entering{animation:cineSoftLuxIn 1.35s cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-fade_soft_lux .cine-slide.is-leaving{animation:cineSoftLuxOut 1.2s cubic-bezier(.4,0,.2,1) both}
.cine-hero.anim-fade_soft_lux .cine-slide.is-entering .cine-bg,
.cine-hero.anim-fade_soft_lux .cine-slide.is-entering .cine-m-img{animation:cineSoftLuxImg 1.55s ease both}
@keyframes cineSoftLuxIn{
  0%{opacity:0;filter:brightness(1.08);transform:scale(1.025)}
  35%{opacity:1;filter:none;transform:scale(1.01)}
  100%{opacity:1;filter:none;transform:none}
}
@keyframes cineSoftLuxOut{
  0%{opacity:1;transform:none;filter:none}
  100%{opacity:0;transform:scale(.985);filter:brightness(.92)}
}
@keyframes cineSoftLuxImg{
  from{transform:scale(1.06);opacity:.85}
  to{transform:scale(1);opacity:1}
}

.cine-hero.anim-fade_epic .cine-slide.is-entering{animation:cineFadeEpicIn 1.25s cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-fade_epic .cine-slide.is-leaving{animation:cineFadeEpicOut 1.25s cubic-bezier(.4,0,.2,1) both}
.cine-hero.anim-fade_epic .cine-slide.is-entering .cine-bg{animation:cineFadeEpicBg 1.4s ease both}
@keyframes cineFadeEpicIn{from{opacity:0;filter:brightness(1.15) saturate(1.1);transform:scale(1.04)}to{opacity:1;filter:none;transform:none}}
@keyframes cineFadeEpicOut{from{opacity:1;transform:none}to{opacity:0;transform:scale(.97);filter:brightness(.85)}}
@keyframes cineFadeEpicBg{from{transform:scale(1.08)}to{transform:scale(1.02)}}

.cine-hero.anim-fade_glow .cine-slide.is-entering{animation:cineFadeGlowIn 1.1s ease both}
.cine-hero.anim-fade_glow .cine-slide.is-leaving{animation:cineFadeGlowOut 1.1s ease both}
@keyframes cineFadeGlowIn{from{opacity:0;filter:brightness(1.6) blur(8px)}to{opacity:1;filter:none}}
@keyframes cineFadeGlowOut{from{opacity:1}to{opacity:0;filter:brightness(1.4) blur(6px)}}

.cine-hero.anim-fade_blur .cine-slide.is-entering{animation:cineFadeBlurIn 1.15s cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-fade_blur .cine-slide.is-leaving{animation:cineFadeBlurOut 1.15s ease both}
@keyframes cineFadeBlurIn{from{opacity:0;filter:blur(22px);transform:scale(1.06)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes cineFadeBlurOut{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(18px);transform:scale(.98)}}

.cine-hero.anim-crossfade .cine-slide.is-entering{animation:cineCrossIn 1.05s ease both}
.cine-hero.anim-crossfade .cine-slide.is-leaving{animation:cineCrossOut 1.05s ease both}
@keyframes cineCrossIn{from{opacity:0}to{opacity:1}}
@keyframes cineCrossOut{from{opacity:1}to{opacity:0}}

.cine-hero.anim-dissolve .cine-slide.is-entering{animation:cineDissIn 1.2s ease both}
.cine-hero.anim-dissolve .cine-slide.is-leaving{animation:cineDissOut 1.2s ease both}
@keyframes cineDissIn{from{opacity:0;filter:contrast(1.2) saturate(1.3) blur(4px)}to{opacity:1;filter:none}}
@keyframes cineDissOut{from{opacity:1}to{opacity:0;filter:contrast(.8) blur(6px)}}

.cine-hero.anim-fade_scale .cine-slide.is-entering{animation:cineFSIn 1.1s cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-fade_scale .cine-slide.is-leaving{animation:cineFSOut 1.1s ease both}
@keyframes cineFSIn{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}
@keyframes cineFSOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}

.cine-hero.anim-zoom_fade .cine-slide.is-entering{animation:cineZFIn 1.15s cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-zoom_fade .cine-slide.is-leaving{animation:cineZFOut 1.15s ease both}
@keyframes cineZFIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
@keyframes cineZFOut{from{opacity:1}to{opacity:0;transform:scale(1.08)}}

.cine-hero.anim-rotate_fade .cine-slide.is-entering{animation:cineRFIn 1.1s cubic-bezier(.22,1,.36,1) both}
.cine-hero.anim-rotate_fade .cine-slide.is-leaving{animation:cineRFOut 1.1s ease both}
@keyframes cineRFIn{from{opacity:0;transform:rotate(-4deg) scale(1.05)}to{opacity:1;transform:none}}
@keyframes cineRFOut{from{opacity:1}to{opacity:0;transform:rotate(3deg) scale(.96)}}

.cine-hero.anim-slice .cine-slide.is-entering.dir-next{animation:cineSliceIn var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
.cine-hero.anim-slice .cine-slide.is-entering.dir-prev{animation:cineSliceInR var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
.cine-hero.anim-slice .cine-slide.is-leaving.dir-next{animation:cineSliceOut var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
.cine-hero.anim-slice .cine-slide.is-leaving.dir-prev{animation:cineSliceOutR var(--cine-anim-ms) cubic-bezier(.65,0,.35,1) both}
@keyframes cineSliceIn{from{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);opacity:.7}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}}
@keyframes cineSliceInR{from{clip-path:polygon(0 0,0 0,0 100%,0 100%);opacity:.7}to{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}}
@keyframes cineSliceOut{from{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}to{clip-path:polygon(0 0,0 0,0 100%,0 100%);opacity:0}}
@keyframes cineSliceOutR{from{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}to{clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);opacity:0}}

/* ---- Per-element entrance ---- */
.cine-hero.has-el-anim .cine-slide:not(.is-active):not(.is-entering) .el-anim{opacity:0}
.cine-hero.has-el-anim .cine-slide.is-active .el-anim,
.cine-hero.has-el-anim .cine-slide.is-entering .el-anim{
  animation-duration:.85s;
  animation-timing-function:cubic-bezier(.22,1,.36,1);
  animation-fill-mode:both;
  animation-delay:var(--el-delay,0s);
}
.cine-hero.has-el-anim .el-none{animation:none!important;opacity:1}
.cine-hero.has-el-anim .cine-slide.is-active .el-fade_up,
.cine-hero.has-el-anim .cine-slide.is-entering .el-fade_up{animation-name:elFadeUp}
.cine-hero.has-el-anim .cine-slide.is-active .el-fade_down,
.cine-hero.has-el-anim .cine-slide.is-entering .el-fade_down{animation-name:elFadeDown}
.cine-hero.has-el-anim .cine-slide.is-active .el-fade_left,
.cine-hero.has-el-anim .cine-slide.is-entering .el-fade_left{animation-name:elFadeLeft}
.cine-hero.has-el-anim .cine-slide.is-active .el-fade_right,
.cine-hero.has-el-anim .cine-slide.is-entering .el-fade_right{animation-name:elFadeRight}
.cine-hero.has-el-anim .cine-slide.is-active .el-zoom_in,
.cine-hero.has-el-anim .cine-slide.is-entering .el-zoom_in{animation-name:elZoomIn}
.cine-hero.has-el-anim .cine-slide.is-active .el-zoom_out,
.cine-hero.has-el-anim .cine-slide.is-entering .el-zoom_out{animation-name:elZoomOut}
.cine-hero.has-el-anim .cine-slide.is-active .el-blur_in,
.cine-hero.has-el-anim .cine-slide.is-entering .el-blur_in{animation-name:elBlurIn}
.cine-hero.has-el-anim .cine-slide.is-active .el-bounce,
.cine-hero.has-el-anim .cine-slide.is-entering .el-bounce{animation-name:elBounce}
.cine-hero.has-el-anim .cine-slide.is-active .el-elastic,
.cine-hero.has-el-anim .cine-slide.is-entering .el-elastic{animation-name:elElastic}
.cine-hero.has-el-anim .cine-slide.is-active .el-flip_x,
.cine-hero.has-el-anim .cine-slide.is-entering .el-flip_x{animation-name:elFlipX}
.cine-hero.has-el-anim .cine-slide.is-active .el-flip_y,
.cine-hero.has-el-anim .cine-slide.is-entering .el-flip_y{animation-name:elFlipY}
.cine-hero.has-el-anim .cine-slide.is-active .el-glow_in,
.cine-hero.has-el-anim .cine-slide.is-entering .el-glow_in{animation-name:elGlowIn}
.cine-hero.has-el-anim .cine-slide.is-active .el-drop,
.cine-hero.has-el-anim .cine-slide.is-entering .el-drop{animation-name:elDrop}
.cine-hero.has-el-anim .cine-slide.is-active .el-pop,
.cine-hero.has-el-anim .cine-slide.is-entering .el-pop{animation-name:elPop}
.cine-hero.has-el-anim .cine-slide.is-active .el-slide_soft,
.cine-hero.has-el-anim .cine-slide.is-entering .el-slide_soft{animation-name:elSlideSoft}
@keyframes elFadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes elFadeDown{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}
@keyframes elFadeLeft{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:none}}
@keyframes elFadeRight{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}}
@keyframes elZoomIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes elZoomOut{from{opacity:0;transform:scale(1.18)}to{opacity:1;transform:none}}
@keyframes elBlurIn{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:none}}
@keyframes elBounce{0%{opacity:0;transform:translateY(40px)}60%{opacity:1;transform:translateY(-8px)}100%{transform:none}}
@keyframes elElastic{0%{opacity:0;transform:scale(.6)}55%{opacity:1;transform:scale(1.08)}75%{transform:scale(.96)}100%{transform:none}}
@keyframes elFlipX{from{opacity:0;transform:rotateX(70deg)}to{opacity:1;transform:none}}
@keyframes elFlipY{from{opacity:0;transform:rotateY(70deg)}to{opacity:1;transform:none}}
@keyframes elGlowIn{from{opacity:0;filter:brightness(2) drop-shadow(0 0 20px rgba(0,200,220,.6))}to{opacity:1;filter:none}}
@keyframes elDrop{from{opacity:0;transform:translateY(-50px)}to{opacity:1;transform:none}}
@keyframes elPop{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.08)}100%{transform:none}}
@keyframes elSlideSoft{from{opacity:0;transform:translate3d(18%,0,0)}to{opacity:1;transform:none}}

.cine-bg-overlay{
  position:absolute;inset:0;opacity:.55;pointer-events:none;z-index:1
}
/* Always keep a readability scrim so white copy stays ≥4.5:1 on light product photos */
.cine-slide::after{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(105deg, rgba(6,16,31,.62) 0%, rgba(6,16,31,.28) 42%, rgba(6,16,31,.18) 70%, rgba(6,16,31,.4) 100%);
}
.cine-slide.layout-product-left::after{
  background:
    linear-gradient(255deg, rgba(6,16,31,.62) 0%, rgba(6,16,31,.28) 42%, rgba(6,16,31,.18) 70%, rgba(6,16,31,.4) 100%);
}
.cine-slide.align-center::after{
  background:
    linear-gradient(180deg, rgba(6,16,31,.22) 0%, rgba(6,16,31,.38) 45%, rgba(6,16,31,.62) 100%);
}
.cine-slide.no-copy::after{display:none}

/* Content stagger when slide becomes active */
.cine-hero.has-copy-anim .cine-slide.is-active .cine-copy > *,
.cine-hero.has-copy-anim .cine-slide.is-entering .cine-copy > *{
  animation:cineCopyStagger .7s cubic-bezier(.22,1,.36,1) both
}
.cine-hero.has-copy-anim .cine-slide.is-active .cine-copy > *:nth-child(1),
.cine-hero.has-copy-anim .cine-slide.is-entering .cine-copy > *:nth-child(1){animation-delay:.05s}
.cine-hero.has-copy-anim .cine-slide.is-active .cine-copy > *:nth-child(2),
.cine-hero.has-copy-anim .cine-slide.is-entering .cine-copy > *:nth-child(2){animation-delay:.12s}
.cine-hero.has-copy-anim .cine-slide.is-active .cine-copy > *:nth-child(3),
.cine-hero.has-copy-anim .cine-slide.is-entering .cine-copy > *:nth-child(3){animation-delay:.2s}
.cine-hero.has-copy-anim .cine-slide.is-active .cine-copy > *:nth-child(4),
.cine-hero.has-copy-anim .cine-slide.is-entering .cine-copy > *:nth-child(4){animation-delay:.28s}
.cine-hero.has-copy-anim .cine-slide.is-active .cine-copy > *:nth-child(5),
.cine-hero.has-copy-anim .cine-slide.is-entering .cine-copy > *:nth-child(5){animation-delay:.36s}
@keyframes cineCopyStagger{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .cine-hero .cine-slide,
  .cine-hero .cine-bg,
  .cine-hero .cine-copy > *{animation:none!important;transition:opacity .2s!important;filter:none!important;transform:none!important}
}

.cine-bg{
  position:absolute;inset:0;
  background-color:#06101f;
  background-image:var(--cine-bg);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  transform:scale(1.03);
  transition:transform 7s cubic-bezier(.25,.1,.25,1);
  z-index:0;
}
@media(max-width:780px){
  .cine-bg{
    background-image:var(--cine-bg-m,var(--cine-bg));
  }
}
.cine-slide.is-active .cine-bg{transform:scale(1)}
.cine-veil{
  display:none;
  pointer-events:none;
}
.cine-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:0}
.mood-winter .cine-particles{opacity:1;background-image:
  radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.85), transparent),
  radial-gradient(2px 2px at 30% 60%, rgba(255,255,255,.55), transparent),
  radial-gradient(1.5px 1.5px at 70% 30%, rgba(255,255,255,.7), transparent),
  radial-gradient(2px 2px at 85% 70%, rgba(255,255,255,.5), transparent),
  radial-gradient(1px 1px at 50% 80%, rgba(255,255,255,.65), transparent),
  radial-gradient(2px 2px at 20% 90%, rgba(255,255,255,.4), transparent),
  radial-gradient(1.5px 1.5px at 55% 15%, rgba(255,255,255,.6), transparent),
  radial-gradient(2px 2px at 40% 45%, rgba(255,255,255,.45), transparent);
  animation:cineSnow 14s linear infinite;
}
@keyframes cineSnow{
  from{background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0}
  to{background-position:20px 200px,-12px 240px,18px 180px,-22px 220px,10px 260px,28px 210px,-8px 190px,14px 230px}
}

.cine-inner{
  position:relative;z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-areas:"visual copy";
  align-items:center;gap:12px;
  min-height:min(72vh,640px);
  padding:36px 44px 64px;
  width:100%;box-sizing:border-box;
  direction:ltr; /* layout positions are absolute L/R, independent of site RTL */
}
.cine-visual{grid-area:visual} /* base area; full rules below */
.cine-copy{
  grid-area:copy;
  direction:rtl;
  color:#fff;max-width:520px;justify-self:end;text-align:right;
  min-width:0;width:100%;
  transform:translate3d(var(--cx,0),var(--cy,0),0);
  text-shadow:0 1px 2px rgba(0,0,0,.45), 0 6px 22px rgba(0,0,0,.35);
}

/* Swap product / text sides */
.layout-product-left .cine-inner{grid-template-areas:"visual copy"}
.layout-product-left .cine-copy{justify-self:end;text-align:right}
.layout-product-right .cine-inner{grid-template-areas:"copy visual"}
.layout-product-right .cine-copy{justify-self:start;text-align:right}
.layout-product-right .cine-visual{justify-self:center}

/* Text align overrides */
.align-right .cine-copy{text-align:right}
.align-center .cine-copy{text-align:center;justify-self:center}
.align-center .cine-eyebrow{justify-content:center}
.align-center .cine-feats{justify-content:center}
.align-center .cine-cta,.align-center .cine-cta--ice{margin-inline:auto}
.align-center .cine-lead{margin-inline:auto}
.align-left .cine-copy{text-align:left;direction:ltr}
.align-left .cine-eyebrow{justify-content:flex-start}
.align-left .cine-feats{justify-content:flex-start}

.cine-slide.no-product .cine-inner,
.cine-slide.no-copy .cine-inner{
  grid-template-columns:1fr;
  grid-template-areas:"copy";
}
.cine-slide.no-copy .cine-inner{grid-template-areas:"visual"}
.cine-slide.no-product .cine-copy{justify-self:center;max-width:640px}

.cine-visual{
  grid-area:visual;
  position:relative;display:grid;place-items:center;
  min-height:440px;min-width:0;width:100%;
  transform:translate3d(var(--vx,0),var(--vy,0),0);
}
.cine-glow{
  position:absolute;width:72%;height:58%;border-radius:50%;
  background:radial-gradient(circle,rgba(126,182,217,.38),transparent 70%);
  filter:blur(22px);pointer-events:none;
}
.cine-float-wrap{
  position:relative;z-index:2;width:100%;
  display:flex;justify-content:center;align-items:center;
}
.is-floating .cine-float-wrap{animation:cineFloat 5.2s ease-in-out infinite;will-change:transform}
.no-float .cine-float-wrap{animation:none}
.cine-product-link{display:block;line-height:0;max-width:100%}
.cine-float{
  display:block;width:min(calc(480px * var(--pscale,1)),94%);max-width:100%;height:auto;
  filter:drop-shadow(0 32px 40px rgba(0,0,0,.5));
}
.cine-slide.is-active .cine-float{animation:cineInFloat 1s cubic-bezier(.22,1,.36,1) both}
@keyframes cineFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-1deg)}
  50%{transform:translate3d(0,-16px,0) rotate(.8deg)}
}
@keyframes cineInFloat{
  from{opacity:0;transform:translate3d(0,28px,0) scale(.94)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

.cine-slide.is-active .cine-copy{animation:cineCopyIn .9s cubic-bezier(.22,1,.36,1) both}
@keyframes cineCopyIn{
  from{opacity:0;transform:translate3d(var(--cx,0),calc(var(--cy,0) + 22px),0)}
  to{opacity:1;transform:translate3d(var(--cx,0),var(--cy,0),0)}
}
.cine-eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin-bottom:12px;
}
.cine-eyebrow i{display:block;width:28px;height:1px;background:rgba(255,255,255,.45)}
.cine-title{
  margin:0 0 12px;font-size:clamp(28px,4.8vw,58px);
  line-height:1.2;letter-spacing:-.03em;font-weight:950;
  text-shadow:0 10px 40px rgba(0,0,0,.35);
  word-break:break-word;overflow-wrap:anywhere;
}
.mood-winter .cine-title{
  background:none;
  -webkit-text-fill-color:#fff;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 8px 28px rgba(0,0,0,.4);
  filter:none;
}
.cine-lead{margin:0 0 18px;color:rgba(255,255,255,.92);font-size:15px;line-height:1.75;max-width:420px;word-break:break-word}
.cine-feats{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px}
.cine-feats li{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:800;color:rgba(255,255,255,.88);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  padding:7px 11px;border-radius:999px;backdrop-filter:blur(8px);max-width:100%;
}
.cine-ico{display:grid;place-items:center;opacity:.95;line-height:0;flex-shrink:0}
.cine-ico svg{display:block}

/* ---- CTA styles ---- */
.cine-cta{
  display:inline-flex;align-items:center;gap:10px;
  min-height:52px;padding:0 22px;border-radius:999px;
  font-size:14px;font-weight:900;color:#fff;text-decoration:none;
  position:relative;overflow:visible;max-width:100%;
  transition:transform .28s ease,filter .28s ease,box-shadow .28s ease;
}
.cine-cta em{font-style:normal;font-size:16px;opacity:.9}
.cine-cta:hover{transform:translateY(-2px);filter:brightness(1.06)}

.cine-cta--pill{
  background:rgba(255,255,255,.94);color:var(--midnight,#06101f);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.cine-cta--cyan{
  background:linear-gradient(180deg,var(--cyan-2,#19b7cf),var(--cyan,#009ab4));
  color:#fff;border:1px solid rgba(255,255,255,.25);
  box-shadow:0 12px 28px rgba(0,154,180,.35);
}
.cine-cta--outline{
  background:rgba(255,255,255,.06);color:#fff;
  border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 10px 24px rgba(0,0,0,.2);
  backdrop-filter:blur(8px);
}
.cine-cta--solid{
  background:var(--midnight,#06101f);color:#fff;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.cine-cta--glass{
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  color:#fff;border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 28px rgba(0,0,0,.25);
  backdrop-filter:blur(12px);
}
.cine-cta--glass:before{
  content:"";position:absolute;left:10%;right:10%;top:0;height:40%;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);
  border-radius:999px;pointer-events:none;
}

.cine-cta--ice{
  padding:0;border:0;background:none;box-shadow:none;min-height:0;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,.4));display:inline-block;
}
.cine-cta--ice img{display:block;width:min(280px,100%);height:auto;transition:transform .3s ease,filter .3s ease}
.cine-cta--ice:hover{transform:none;filter:none}
.cine-cta--ice:hover img{transform:translateY(-3px) scale(1.02);filter:brightness(1.06)}

/* legacy mood CTA fallbacks */
.mood-spring .cine-cta--pill{box-shadow:0 12px 28px rgba(63,143,92,.25)}
.mood-summer .cine-cta--cyan{background:linear-gradient(180deg,#f0c57a,#c9842e)}
.mood-autumn .cine-cta--solid{background:linear-gradient(180deg,#e09a6d,#a85028)}

.cine-controls{
  position:absolute;z-index:5;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;max-width:calc(100% - 24px);
}
.cine-nav{
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(6,16,31,.45);
  color:#fff;font-size:20px;backdrop-filter:blur(8px);
  display:grid;place-items:center;transition:.2s;cursor:pointer;flex-shrink:0;
}
.cine-nav:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5)}
.cine-dots{display:flex;gap:7px}
.cine-dot{
  width:8px;height:8px;border-radius:50%;padding:0;border:0;
  background:rgba(255,255,255,.35);transition:.3s;cursor:pointer;
  position:relative;
}
.cine-dot:after{
  content:"";position:absolute;inset:-14px;
}
.cine-dot.is-active{width:26px;border-radius:20px;background:#fff}
.cine-progress{
  position:absolute;left:8%;right:8%;bottom:0;height:3px;z-index:5;
  background:rgba(255,255,255,.12);overflow:hidden;
}
.cine-progress span{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--cyan,#7EB6D9),#fff);
  transform:scaleX(0);
  transform-origin:right center;
  will-change:transform;
  transition:transform linear;
}
.cine-slide:not(.is-active):not(.is-entering):not(.is-leaving){
  content-visibility:hidden;
  contain-intrinsic-size:800px 560px;
}

@media (max-width:980px){
  .cine-hero-wrap{
    padding:8px 0 0;
    width:100%;
  }
  .cine-hero{
    height:auto !important;
    border-radius:18px;
    perspective:none;
    box-shadow:0 10px 28px rgba(6,16,31,.16);
  }
  .cine-slides,
  .cine-slide.is-active{
    height:auto;
  }
  .cine-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    grid-template-columns:none !important;
    grid-template-areas:none !important;
    width:100% !important;
    max-width:100% !important;
    padding:12px 14px 48px !important;
    gap:8px !important;
    direction:rtl !important;
    box-sizing:border-box !important;
  }
  .layout-product-left .cine-inner,
  .layout-product-right .cine-inner{
    display:flex !important;
    flex-direction:column !important;
  }
  .cine-visual{
    order:1 !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    padding:2px 0 0 !important;
    justify-self:center;
    transform:none !important;
    flex:0 0 auto !important;
  }
  .cine-copy{
    order:2 !important;
    flex:0 0 auto !important;
  }
  .cine-glow{display:none}
  .cine-float-wrap{
    animation-duration:6s;
  }
  .cine-float{
    width:min(220px,58vw) !important;
    max-height:240px !important;
    height:auto !important;
    object-fit:contain !important;
    filter:drop-shadow(0 14px 18px rgba(0,0,0,.28));
  }
  .is-floating .cine-float-wrap{
    animation:cineFloatMobile 5.5s ease-in-out infinite;
  }
  @keyframes cineFloatMobile{
    0%,100%{transform:translate3d(0,0,0)}
    50%{transform:translate3d(0,-8px,0)}
  }
  .cine-copy{
    justify-self:stretch !important;
    max-width:none !important;
    width:100%;
    text-align:center !important;
    padding:0 2px 4px;
    direction:rtl;
    transform:none !important;
  }
  .align-left .cine-copy,
  .align-right .cine-copy,
  .align-center .cine-copy{text-align:center !important}
  .cine-eyebrow{
    display:inline-flex;
    justify-content:center;
    flex-wrap:wrap;
    margin:0 auto 8px;
    font-size:9px;
    letter-spacing:.12em;
    gap:6px;
    max-width:100%;
  }
  .cine-eyebrow i{width:14px;flex-shrink:0}
  .cine-title{
    font-size:clamp(20px,6.2vw,28px) !important;
    margin:0 0 8px !important;
    line-height:1.35 !important;
    padding:0 4px;
  }
  .mood-winter .cine-title{
    background:none !important;
    -webkit-text-fill-color:#fff !important;
    color:#fff !important;
    text-shadow:0 1px 2px rgba(0,0,0,.55), 0 6px 18px rgba(0,0,0,.4) !important;
    filter:none !important;
  }
  .cine-lead{
    margin:0 auto 12px !important;
    font-size:12.5px !important;
    line-height:1.7 !important;
    max-width:34em;
    padding:0 6px;
    color:rgba(255,255,255,.95);
    text-shadow:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.35);
  }
  .cine-slide::after{
    background:linear-gradient(180deg, rgba(6,16,31,.18) 0%, rgba(6,16,31,.42) 50%, rgba(6,16,31,.68) 100%);
  }
  .cine-feats{
    justify-content:center;
    margin:0 auto 14px !important;
    gap:6px !important;
    max-width:100%;
  }
  .cine-feats li{
    font-size:10px !important;
    padding:6px 9px !important;
    border-radius:999px;
  }
  .cine-ico svg{width:12px;height:12px}
  .cine-cta,
  .cine-cta--ice{
    margin-inline:auto;
    display:flex;
    justify-content:center;
  }
  .cine-cta:not(.cine-cta--ice){
    width:auto;
    min-width:min(100%,220px);
    max-width:100%;
    justify-content:center;
    min-height:44px;
    padding:0 18px;
    font-size:13px;
  }
  .cine-cta--ice{
    width:auto;
    max-width:min(210px,78vw);
  }
  .cine-cta--ice img{width:100%;height:auto}
  .cine-controls{
    bottom:8px;
    gap:8px;
    max-width:calc(100% - 16px);
  }
  .cine-nav{width:32px;height:32px;font-size:16px}
  .cine-dot{width:7px;height:7px}
  .cine-dot.is-active{width:20px}
  .cine-progress{left:10%;right:10%;height:2px}
  .cine-hero.anim-flip .cine-slide.is-entering,
  .cine-hero.anim-flip .cine-slide.is-leaving{animation-duration:.7s}
}
@media (max-width:650px){
  .cine-hero-wrap{padding-top:0}
  .cine-hero{
    border-radius:14px;
    width:100%;
  }
  .cine-hero-wrap .container{
    width:min(var(--max),calc(100% - 16px));
  }
  .cine-inner{padding:12px 12px 52px;gap:8px}
  .cine-float{
    width:min(190px,54vw) !important;
    max-height:200px;
  }
  .cine-title{font-size:clamp(18px,5.8vw,24px) !important}
  .cine-lead{font-size:12px !important;margin-bottom:10px !important}
  .cine-feats{margin-bottom:12px !important}
  .cine-feats li{font-size:9.5px !important;padding:5px 8px !important}
  .cine-cta--ice{max-width:min(190px,72vw)}
  .cine-controls{bottom:6px}
  .cine-progress{left:8%;right:8%}
}
@media (max-width:400px){
  .cine-float{width:min(168px,52vw) !important;max-height:180px}
  .cine-inner{padding:10px 10px 50px}
  .cine-title{font-size:17px !important}
  .cine-cta--ice{max-width:170px}
  .cine-feats li{padding:5px 7px !important}
}
@media (prefers-reduced-motion:reduce){
  .cine-float-wrap,.cine-particles,.cine-bg,.cine-slide,.cine-copy,.cine-float{
    animation:none!important;transition:opacity .2s ease!important
  }
}