/* FC Marokko Match Center V1.21.20 — Cinematic Homepage Hero
   Loaded after the child theme so this widget is fully owned by the plugin. */

.fcm-hero-shell--cinematic{
  --fcm-hero-red:#a60f28;
  --fcm-hero-red-bright:#d71b3b;
  --fcm-hero-red-dark:#37030d;
  position:relative!important;
  isolation:isolate!important;
  display:block!important;
  min-height:clamp(620px,64vw,760px)!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:32px!important;
  background:#190208!important;
  box-shadow:0 32px 90px rgba(47,3,13,.24)!important;
}

.fcm-hero-shell--cinematic:before,
.fcm-hero-shell--cinematic:after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.fcm-hero-shell--cinematic:before{
  z-index:2;
  inset:0;
  background:
    radial-gradient(circle at 14% 18%,rgba(213,24,56,.22),transparent 28%),
    linear-gradient(90deg,rgba(20,1,6,.98) 0%,rgba(51,3,13,.93) 30%,rgba(79,6,21,.72) 46%,rgba(38,6,13,.24) 67%,rgba(5,14,9,.12) 100%),
    linear-gradient(180deg,rgba(8,0,3,.08),rgba(8,0,3,.32) 62%,rgba(8,0,3,.72));
  opacity:var(--fcm-hero-overlay-opacity,1);
}

.fcm-hero-shell--cinematic:after{
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--fcm-hero-red-bright),rgba(255,255,255,.45),transparent);
  box-shadow:0 0 22px rgba(215,27,59,.8);
}

.fcm-hero-cinematic__media{
  position:absolute;
  z-index:1;
  inset:0;
  overflow:hidden;
  background:#21030a;
}

.fcm-hero-cinematic__media img,
.fcm-hero-cinematic__media video{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:var(--fcm-hero-media-position,67% center)!important;
  transform:scale(1.015);
  filter:saturate(1.04) contrast(1.03);
}

.fcm-hero-cinematic__media video{
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  opacity:0;
  pointer-events:none;
  transition:opacity .55s ease;
  background:#21030a;
}

.fcm-hero-cinematic__media video.is-ready{opacity:1}

.fcm-hero-cinematic__shade{
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(118deg,transparent 0 96px,rgba(255,255,255,.018) 96px 97px),
    radial-gradient(circle at 9% 84%,rgba(196,13,44,.21),transparent 30%);
  mix-blend-mode:screen;
  opacity:.85;
}

.fcm-hero-cinematic__season{
  position:absolute;
  z-index:6;
  top:clamp(28px,3.6vw,46px);
  left:clamp(28px,4vw,56px);
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:50px;
  padding:11px 18px;
  border:1px solid rgba(255,255,255,.27);
  border-radius:999px;
  color:#fff!important;
  background:linear-gradient(180deg,rgba(186,17,45,.88),rgba(118,7,25,.78));
  box-shadow:0 10px 30px rgba(69,3,16,.22),inset 0 1px rgba(255,255,255,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:.73rem;
  line-height:1;
  font-weight:900;
}

.fcm-hero-cinematic__season:before{
  content:"";
  width:28px;
  height:28px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.62);
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 50%,#fff 0 2px,transparent 2.5px),
    conic-gradient(from 0deg,transparent 0 12%,rgba(255,255,255,.92) 12% 16%,transparent 16% 32%,rgba(255,255,255,.92) 32% 36%,transparent 36% 52%,rgba(255,255,255,.92) 52% 56%,transparent 56% 72%,rgba(255,255,255,.92) 72% 76%,transparent 76%);
}

.fcm-hero-cinematic__season span{opacity:.74;color:#fff!important}
.fcm-hero-cinematic__season strong{font-size:.86rem;color:#fff!important;font-weight:950}

.fcm-hero-shell--cinematic .fcm-hero-cinematic__content{
  position:relative!important;
  z-index:5!important;
  width:min(49%,670px)!important;
  min-height:inherit!important;
  max-width:none!important;
  padding:clamp(126px,12vw,165px) 0 clamp(158px,14vw,178px) clamp(34px,4.3vw,66px)!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
}

.fcm-hero-shell--cinematic .fcm-hero-cinematic__eyebrow{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 25px!important;
  color:rgba(255,255,255,.82)!important;
  font-size:clamp(.66rem,.85vw,.82rem)!important;
  font-weight:900!important;
  letter-spacing:.18em!important;
  line-height:1.35!important;
  text-transform:uppercase!important;
  text-shadow:0 2px 12px rgba(0,0,0,.28)!important;
}

.fcm-hero-shell--cinematic .fcm-hero-cinematic__eyebrow:before{display:none!important}

.fcm-hero-cinematic__eyebrow i{
  display:inline-block;
  width:66px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,#d41434 0 39%,#fff 39% 71%,#0c7f45 71% 100%);
  box-shadow:0 0 16px rgba(214,22,53,.28);
}

.fcm-hero-shell--cinematic .fcm-hero-cinematic__title{
  margin:0!important;
  max-width:none!important;
  color:#fff!important;
  font-size:clamp(3.35rem,6.35vw,6.25rem)!important;
  line-height:.82!important;
  letter-spacing:-.055em!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  text-wrap:balance!important;
  text-shadow:0 8px 28px rgba(18,0,5,.28)!important;
}

.fcm-hero-cinematic__title span{display:block!important;color:#fff!important}

.fcm-hero-shell--cinematic .fcm-hero-cinematic__copy{
  margin:28px 0 0!important;
  max-width:540px!important;
  color:rgba(255,255,255,.88)!important;
  font-size:clamp(1rem,1.5vw,1.35rem)!important;
  line-height:1.45!important;
  font-weight:650!important;
  text-shadow:0 2px 14px rgba(0,0,0,.28)!important;
}

.fcm-hero-shell--cinematic .fcm-hero-cinematic__actions{
  width:min(100%,500px)!important;
  margin-top:34px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
}

.fcm-hero-shell--cinematic .fcm-hero-cinematic__actions a{
  min-height:64px!important;
  display:grid!important;
  grid-template-columns:26px 1fr auto!important;
  align-items:center!important;
  gap:14px!important;
  padding:14px 20px!important;
  border-radius:16px!important;
  text-decoration:none!important;
  font-size:.96rem!important;
  line-height:1.15!important;
  font-weight:900!important;
  letter-spacing:.005em!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease!important;
}

.fcm-hero-cinematic__actions a svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.fcm-hero-cinematic__actions a b{font-size:1.35rem;font-weight:500;transition:transform .22s ease}

.fcm-hero-shell--cinematic .fcm-hero-cinematic__actions a.is-primary{
  color:#fff!important;
  border:1px solid rgba(255,106,128,.74)!important;
  background:linear-gradient(135deg,#d41434 0%,#a80c29 52%,#8f0a23 100%)!important;
  box-shadow:0 12px 32px rgba(168,12,41,.34),0 0 0 1px rgba(255,255,255,.04) inset!important;
}

.fcm-hero-shell--cinematic .fcm-hero-cinematic__actions a.is-ghost{
  color:#fff!important;
  border:1px solid rgba(255,255,255,.28)!important;
  background:rgba(19,2,7,.46)!important;
  box-shadow:0 12px 28px rgba(17,0,5,.16)!important;
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}

.fcm-hero-shell--cinematic .fcm-hero-cinematic__actions a:hover{
  transform:translateY(-2px)!important;
}
.fcm-hero-shell--cinematic .fcm-hero-cinematic__actions a.is-primary:hover{
  box-shadow:0 18px 42px rgba(184,16,48,.48),0 0 26px rgba(229,32,66,.18)!important;
}
.fcm-hero-shell--cinematic .fcm-hero-cinematic__actions a.is-ghost:hover{
  border-color:rgba(255,255,255,.5)!important;
  background:rgba(40,4,13,.62)!important;
}
.fcm-hero-cinematic__actions a:hover b{transform:translateX(4px)}
.fcm-hero-cinematic__actions a:focus-visible{outline:3px solid rgba(255,255,255,.78)!important;outline-offset:3px!important}

.fcm-hero-cinematic__values{
  position:absolute;
  z-index:6;
  right:clamp(26px,3.6vw,54px);
  bottom:clamp(25px,3.4vw,42px);
  width:min(54%,690px);
  min-height:92px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  border:1px solid rgba(255,255,255,.15);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(18,4,8,.63),rgba(10,2,5,.79));
  box-shadow:0 18px 48px rgba(9,0,3,.24),inset 0 1px rgba(255,255,255,.06);
  backdrop-filter:blur(17px);
  -webkit-backdrop-filter:blur(17px);
  overflow:hidden;
}

.fcm-hero-cinematic__values span{
  min-height:58px;
  padding:10px 18px;
  display:grid;
  grid-template-columns:34px 1fr;
  align-items:center;
  gap:12px;
  color:#fff;
  border-right:1px solid rgba(255,255,255,.12);
}
.fcm-hero-cinematic__values span:last-child{border-right:0}
.fcm-hero-cinematic__values i{font-style:normal;font-size:2rem;line-height:1;color:#fff;text-align:center}
.fcm-hero-cinematic__values i.is-crown{color:#ff3355}
.fcm-hero-cinematic__values i.is-heart{color:#22a564}
.fcm-hero-cinematic__values b{font-size:.69rem;line-height:1.45;letter-spacing:.1em;text-transform:uppercase;font-weight:900;color:rgba(255,255,255,.87)}



/* V1.17.2 — desktop hero footer row
   Keep the CTA stack and club-values panel on one shared baseline. */
@media(min-width:821px){
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__actions{
    position:absolute!important;
    left:clamp(34px,4.3vw,66px)!important;
    bottom:clamp(25px,3.4vw,42px)!important;
    margin-top:0!important;
    width:min(390px,42vw)!important;
    z-index:7!important;
  }
  .fcm-hero-cinematic__values{
    bottom:clamp(25px,3.4vw,42px)!important;
    min-height:113px!important;
  }
  .fcm-hero-cinematic__values span{
    min-height:79px!important;
  }
}

/* V1.17.1 — compact desktop hero actions */
@media(min-width:821px){
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__actions{
    width:min(100%,390px)!important;
    margin-top:26px!important;
    gap:9px!important;
  }
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__actions a{
    min-height:52px!important;
    grid-template-columns:21px 1fr auto!important;
    gap:11px!important;
    padding:10px 15px!important;
    border-radius:13px!important;
    font-size:.88rem!important;
  }
  .fcm-hero-cinematic__actions a svg{
    width:20px!important;
    height:20px!important;
  }
  .fcm-hero-cinematic__actions a b{
    font-size:1.08rem!important;
  }
}

@media(max-width:1100px){
  .fcm-hero-shell--cinematic{min-height:650px!important}
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__content{width:55%!important;padding-left:38px!important}
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__title{font-size:clamp(3.25rem,7.3vw,5.7rem)!important}
  .fcm-hero-cinematic__values{width:56%;right:28px}
}

@media(max-width:820px){
  .fcm-hero-shell--cinematic{
    min-height:780px!important;
    border-radius:24px!important;
    background:#26040c!important;
  }
  .fcm-hero-shell--cinematic:before{
    background:
      linear-gradient(180deg,rgba(15,1,5,.04) 0%,rgba(28,2,8,.2) 31%,rgba(32,2,9,.78) 48%,rgba(35,3,10,.98) 63%,rgba(47,4,13,1) 100%),
      radial-gradient(circle at 25% 80%,rgba(190,17,49,.28),transparent 35%);
  }
  .fcm-hero-cinematic__media{height:54%;bottom:auto}
  .fcm-hero-cinematic__media img,
  .fcm-hero-cinematic__media video{
    object-position:var(--fcm-hero-media-position-mobile,61% 22%)!important;
    transform:scale(1.02);
  }
  .fcm-hero-cinematic__shade{background:linear-gradient(180deg,transparent 0 38%,rgba(28,2,8,.34) 48%,rgba(28,2,8,.94) 64%,#2d040d 100%)}
  .fcm-hero-cinematic__season{top:20px;left:20px;min-height:44px;padding:9px 14px;font-size:.66rem}
  .fcm-hero-cinematic__season:before{width:24px;height:24px}
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__content{
    width:100%!important;
    min-height:780px!important;
    padding:330px 22px 24px!important;
    justify-content:flex-end!important;
  }
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__eyebrow{margin-bottom:18px!important;font-size:.63rem!important;letter-spacing:.14em!important}
  .fcm-hero-cinematic__eyebrow i{width:48px;height:4px}
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__title{font-size:clamp(3.05rem,13.5vw,4.65rem)!important;line-height:.84!important}
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__copy{margin-top:20px!important;font-size:1rem!important}
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__actions{width:100%!important;margin-top:23px!important;gap:10px!important}
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__actions a{min-height:58px!important;border-radius:15px!important;padding:12px 17px!important}
  .fcm-hero-cinematic__values{display:none!important}
}

@media(max-width:480px){
  .fcm-hero-shell--cinematic{min-height:740px!important;border-radius:22px!important}
  .fcm-hero-cinematic__media{height:49%}
  .fcm-hero-cinematic__media img,.fcm-hero-cinematic__media video{object-position:var(--fcm-hero-media-position-mobile,60% 18%)!important}
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__content{min-height:740px!important;padding:300px 18px 20px!important}
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__title{font-size:clamp(2.85rem,15vw,4rem)!important}
  .fcm-hero-shell--cinematic .fcm-hero-cinematic__copy{font-size:.96rem!important}
  .fcm-hero-cinematic__season{left:16px;top:16px}
}

@media(prefers-reduced-motion:no-preference){
  .fcm-hero-cinematic__season{animation:fcmHeroSeasonPulse 5.5s ease-in-out infinite}
  @keyframes fcmHeroSeasonPulse{0%,100%{box-shadow:0 10px 30px rgba(69,3,16,.22),inset 0 1px rgba(255,255,255,.18)}50%{box-shadow:0 12px 36px rgba(198,16,49,.34),0 0 22px rgba(215,27,59,.12),inset 0 1px rgba(255,255,255,.2)}}
}

@media(prefers-reduced-motion:reduce){
  .fcm-hero-cinematic__media img,
  .fcm-hero-cinematic__media video,
  .fcm-hero-cinematic__season,
  .fcm-hero-cinematic__actions a,
  .fcm-hero-cinematic__actions a b{animation:none!important;transition:none!important}
}

/* V1.21.15 — Hero Motion System + smooth image slider */
.fcm-hero-cinematic__slider,
.fcm-hero-cinematic__slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.fcm-hero-cinematic__slider{overflow:hidden;z-index:1;background:#21030a}
.fcm-hero-cinematic__slide{
  z-index:0;
  opacity:0;
  pointer-events:none;
  will-change:opacity,transform,filter,clip-path;
  transition-duration:var(--fcm-hero-slide-duration,1200ms);
  transition-timing-function:cubic-bezier(.22,.72,.18,1);
  transition-property:opacity,transform,filter,clip-path;
}
.fcm-hero-cinematic__slide.is-active{z-index:2;opacity:1}
.fcm-hero-cinematic__slide img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}

/* Transition families */
.fcm-hero-cinematic__slider[data-effect="fade"] .fcm-hero-cinematic__slide{opacity:0}
.fcm-hero-cinematic__slider[data-effect="fade"] .fcm-hero-cinematic__slide.is-active{opacity:1}

.fcm-hero-cinematic__slider[data-effect="cinematic"] .fcm-hero-cinematic__slide{opacity:0;transform:scale(1.035)}
.fcm-hero-cinematic__slider[data-effect="cinematic"] .fcm-hero-cinematic__slide.is-active{opacity:1;transform:scale(1)}

.fcm-hero-cinematic__slider[data-effect="slide"] .fcm-hero-cinematic__slide{opacity:0;transform:translate3d(4.5%,0,0) scale(1.015)}
.fcm-hero-cinematic__slider[data-effect="slide"] .fcm-hero-cinematic__slide.is-active{opacity:1;transform:translate3d(0,0,0) scale(1)}

.fcm-hero-cinematic__slider[data-effect="blur"] .fcm-hero-cinematic__slide{opacity:0;filter:blur(13px) saturate(.88);transform:scale(1.035)}
.fcm-hero-cinematic__slider[data-effect="blur"] .fcm-hero-cinematic__slide.is-active{opacity:1;filter:blur(0) saturate(1);transform:scale(1)}

.fcm-hero-cinematic__slider[data-effect="wipe"] .fcm-hero-cinematic__slide{opacity:1;clip-path:inset(0 0 0 100%);transform:scale(1.018)}
.fcm-hero-cinematic__slider[data-effect="wipe"] .fcm-hero-cinematic__slide.is-active{clip-path:inset(0 0 0 0);transform:scale(1)}

/* Selectable image motion. Motion runs only on the visible image/slide. */
@media(prefers-reduced-motion:no-preference){
  .fcm-hero-motion--push .fcm-hero-cinematic__media>img,
  .fcm-hero-motion--push .fcm-hero-cinematic__slide.is-active img{animation:fcmHeroPush 12s ease-in-out both}
  .fcm-hero-motion--drift .fcm-hero-cinematic__media>img,
  .fcm-hero-motion--drift .fcm-hero-cinematic__slide.is-active img{animation:fcmHeroDrift 14s ease-in-out both}
  .fcm-hero-motion--kenburns .fcm-hero-cinematic__media>img,
  .fcm-hero-motion--kenburns .fcm-hero-cinematic__slide.is-active img{animation:fcmHeroKenBurns 14s cubic-bezier(.2,.7,.2,1) both}
  .fcm-hero-motion--float .fcm-hero-cinematic__media>img,
  .fcm-hero-motion--float .fcm-hero-cinematic__slide.is-active img{animation:fcmHeroFloat 10s ease-in-out both}

  @keyframes fcmHeroPush{
    0%{transform:scale(1.015) translate3d(0,0,0)}
    100%{transform:scale(1.085) translate3d(0,0,0)}
  }
  @keyframes fcmHeroDrift{
    0%{transform:scale(1.025) translate3d(.25%,0,0)}
    100%{transform:scale(1.065) translate3d(-.8%,.2%,0)}
  }
  @keyframes fcmHeroKenBurns{
    0%{transform:scale(1.02) translate3d(0,0,0)}
    100%{transform:scale(1.105) translate3d(-1.25%,-.55%,0)}
  }
  @keyframes fcmHeroFloat{
    0%{transform:scale(1.035) translate3d(0,.2%,0)}
    50%{transform:scale(1.055) translate3d(-.35%,-.45%,0)}
    100%{transform:scale(1.04) translate3d(.25%,.1%,0)}
  }
}

/* Discreet progress controls */
.fcm-hero-cinematic__slider-nav{
  position:absolute;
  z-index:8;
  right:clamp(28px,3.5vw,52px);
  bottom:clamp(145px,12vw,174px);
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:rgba(12,2,5,.34);
  box-shadow:0 10px 28px rgba(9,0,3,.15);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.fcm-hero-cinematic__slider-nav button{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:28px!important;
  height:5px!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:rgba(255,255,255,.22)!important;
  box-shadow:none!important;
  cursor:pointer!important;
  position:relative!important;
}
.fcm-hero-cinematic__slider-nav button span{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#e51b43,#fff 52%,#15975a);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s ease;
}
.fcm-hero-cinematic__slider-nav button.is-active span{animation:fcmHeroProgress var(--fcm-hero-slide-interval,5500ms) linear forwards}
@keyframes fcmHeroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(hover:hover){.fcm-hero-shell--cinematic:hover .fcm-hero-cinematic__slider-nav button.is-active span{animation-play-state:paused}}
.fcm-hero-cinematic__slider-nav button:focus-visible{outline:2px solid #fff!important;outline-offset:3px!important}

/* Override the old always-on drift so animation is now controlled by the selected preset. */
@media(prefers-reduced-motion:no-preference){
  .fcm-hero-motion--none .fcm-hero-cinematic__media img{animation:none!important}
}

@media(max-width:820px){
  .fcm-hero-cinematic__slider-nav{
    right:16px;
    bottom:auto;
    top:calc(54% - 38px);
    padding:6px 8px;
    gap:5px;
  }
  .fcm-hero-cinematic__slider-nav button{width:22px!important;height:4px!important}
}
@media(max-width:480px){
  .fcm-hero-cinematic__slider-nav{top:calc(49% - 34px);right:12px}
  .fcm-hero-cinematic__slider-nav button{width:19px!important}
}

@media(prefers-reduced-motion:reduce){
  .fcm-hero-cinematic__slide{transition:none!important;transform:none!important;filter:none!important;clip-path:none!important}
  .fcm-hero-cinematic__slide:not(.is-active){display:none!important}
  .fcm-hero-cinematic__slider-nav{display:none!important}
}

/* V1.21.18 — Looping image motion + animated cinematic overlays */
@media(prefers-reduced-motion:no-preference){
  .fcm-hero-motion-loop.fcm-hero-motion--push .fcm-hero-cinematic__media>img,
  .fcm-hero-motion-loop.fcm-hero-motion--push .fcm-hero-cinematic__slide.is-active img,
  .fcm-hero-motion-loop.fcm-hero-motion--drift .fcm-hero-cinematic__media>img,
  .fcm-hero-motion-loop.fcm-hero-motion--drift .fcm-hero-cinematic__slide.is-active img,
  .fcm-hero-motion-loop.fcm-hero-motion--kenburns .fcm-hero-cinematic__media>img,
  .fcm-hero-motion-loop.fcm-hero-motion--kenburns .fcm-hero-cinematic__slide.is-active img,
  .fcm-hero-motion-loop.fcm-hero-motion--float .fcm-hero-cinematic__media>img,
  .fcm-hero-motion-loop.fcm-hero-motion--float .fcm-hero-cinematic__slide.is-active img{
    animation-iteration-count:infinite!important;
    animation-direction:alternate!important;
  }

  .fcm-hero-cinematic__shade{
    overflow:hidden;
    opacity:calc(.85 * var(--fcm-hero-overlay-opacity,1));
  }
  .fcm-hero-cinematic__shade:before,
  .fcm-hero-cinematic__shade:after{
    content:"";
    position:absolute;
    inset:-18%;
    pointer-events:none;
    opacity:0;
    will-change:transform,opacity,filter;
  }

  .fcm-hero-overlay--pulse .fcm-hero-cinematic__shade:before{
    opacity:.42;
    background:radial-gradient(circle at 22% 68%,rgba(220,18,55,.34),transparent 38%),radial-gradient(circle at 82% 32%,rgba(10,154,82,.26),transparent 42%);
    animation:fcmOverlayPulse var(--fcm-hero-overlay-duration,12s) ease-in-out both;
  }
  .fcm-hero-overlay--flow .fcm-hero-cinematic__shade:before{
    opacity:.5;
    background:linear-gradient(115deg,rgba(188,7,43,.28),transparent 38%,rgba(17,130,74,.22) 72%,transparent 100%);
    filter:blur(24px);
    animation:fcmOverlayFlow var(--fcm-hero-overlay-duration,12s) cubic-bezier(.45,.05,.2,1) both;
  }
  .fcm-hero-overlay--glow .fcm-hero-cinematic__shade:before{
    opacity:.45;
    background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,.14),transparent 32%),radial-gradient(circle at 12% 75%,rgba(209,12,49,.3),transparent 34%),radial-gradient(circle at 88% 25%,rgba(21,146,79,.24),transparent 36%);
    filter:blur(12px) saturate(1.15);
    animation:fcmOverlayGlow var(--fcm-hero-overlay-duration,12s) ease-in-out both;
  }
  .fcm-hero-overlay--sweep .fcm-hero-cinematic__shade:after{
    inset:-35%;
    opacity:.34;
    background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.14) 49%,rgba(255,255,255,.04) 53%,transparent 62%);
    transform:translate3d(-45%,0,0) rotate(2deg);
    animation:fcmOverlaySweep var(--fcm-hero-overlay-duration,12s) cubic-bezier(.42,0,.28,1) both;
  }

  .fcm-hero-overlay-loop.fcm-hero-overlay--pulse .fcm-hero-cinematic__shade:before,
  .fcm-hero-overlay-loop.fcm-hero-overlay--flow .fcm-hero-cinematic__shade:before,
  .fcm-hero-overlay-loop.fcm-hero-overlay--glow .fcm-hero-cinematic__shade:before,
  .fcm-hero-overlay-loop.fcm-hero-overlay--sweep .fcm-hero-cinematic__shade:after{
    animation-iteration-count:infinite!important;
  }

  @keyframes fcmOverlayPulse{0%,100%{transform:scale(.96);opacity:.28}50%{transform:scale(1.08);opacity:.58}}
  @keyframes fcmOverlayFlow{0%{transform:translate3d(-8%,2%,0) scale(1.02)}50%{transform:translate3d(6%,-2%,0) scale(1.08)}100%{transform:translate3d(-3%,3%,0) scale(1.03)}}
  @keyframes fcmOverlayGlow{0%,100%{transform:scale(.96) translate3d(-1%,1%,0);opacity:.3}50%{transform:scale(1.08) translate3d(2%,-2%,0);opacity:.56}}
  @keyframes fcmOverlaySweep{0%{transform:translate3d(-48%,0,0) rotate(2deg);opacity:0}18%{opacity:.3}72%{opacity:.3}100%{transform:translate3d(48%,0,0) rotate(2deg);opacity:0}}
}

.fcm-hero-overlay--none .fcm-hero-cinematic__shade:before,
.fcm-hero-overlay--none .fcm-hero-cinematic__shade:after{display:none!important}

@media(prefers-reduced-motion:reduce){
  .fcm-hero-cinematic__shade:before,.fcm-hero-cinematic__shade:after{animation:none!important;display:none!important}
}

/* V1.21.19 — Overlay visibility fix.
   The effect layer now sits above the static darkening layer and has its own intensity control. */
.fcm-hero-shell--cinematic .fcm-hero-cinematic__shade{
  z-index:4!important;
  mix-blend-mode:normal!important;
  opacity:1!important;
  overflow:hidden!important;
}
.fcm-hero-shell--cinematic .fcm-hero-cinematic__shade:before,
.fcm-hero-shell--cinematic .fcm-hero-cinematic__shade:after{
  z-index:1;
  transform-origin:center center;
  mix-blend-mode:screen;
}

@media(prefers-reduced-motion:no-preference){
  .fcm-hero-overlay--pulse .fcm-hero-cinematic__shade:before{
    opacity:calc(var(--fcm-hero-overlay-effect,.8) * .72)!important;
    background:
      radial-gradient(circle at 18% 70%,rgba(238,16,57,.72) 0,rgba(207,7,45,.44) 22%,transparent 48%),
      radial-gradient(circle at 82% 30%,rgba(0,181,92,.62) 0,rgba(4,137,72,.34) 24%,transparent 50%)!important;
    filter:blur(8px) saturate(1.2)!important;
    animation:fcmOverlayPulseVisible var(--fcm-hero-overlay-duration,12s) ease-in-out both!important;
  }
  .fcm-hero-overlay--flow .fcm-hero-cinematic__shade:before{
    inset:-28%!important;
    opacity:calc(var(--fcm-hero-overlay-effect,.8) * .88)!important;
    background:
      radial-gradient(ellipse at 16% 64%,rgba(241,12,56,.82) 0,rgba(188,3,42,.46) 24%,transparent 50%),
      radial-gradient(ellipse at 84% 38%,rgba(0,191,95,.70) 0,rgba(0,122,63,.38) 25%,transparent 51%),
      linear-gradient(105deg,rgba(193,7,42,.24),transparent 44%,rgba(6,143,75,.20) 70%,transparent 100%)!important;
    filter:blur(18px) saturate(1.32)!important;
    animation:fcmOverlayFlowVisible var(--fcm-hero-overlay-duration,12s) cubic-bezier(.4,0,.2,1) both!important;
  }
  .fcm-hero-overlay--glow .fcm-hero-cinematic__shade:before{
    inset:-22%!important;
    opacity:calc(var(--fcm-hero-overlay-effect,.8) * .78)!important;
    background:
      radial-gradient(ellipse at 50% 46%,rgba(255,255,255,.34) 0,rgba(255,255,255,.13) 18%,transparent 38%),
      radial-gradient(circle at 10% 80%,rgba(229,11,50,.64),transparent 38%),
      radial-gradient(circle at 90% 22%,rgba(4,167,84,.55),transparent 40%)!important;
    filter:blur(10px) saturate(1.18)!important;
    animation:fcmOverlayGlowVisible var(--fcm-hero-overlay-duration,12s) ease-in-out both!important;
  }
  .fcm-hero-overlay--sweep .fcm-hero-cinematic__shade:after{
    inset:-45%!important;
    opacity:calc(var(--fcm-hero-overlay-effect,.8) * .72)!important;
    background:linear-gradient(100deg,transparent 37%,rgba(255,255,255,.08) 44%,rgba(255,255,255,.46) 50%,rgba(255,255,255,.12) 56%,transparent 64%)!important;
    filter:blur(4px)!important;
    animation:fcmOverlaySweepVisible var(--fcm-hero-overlay-duration,12s) cubic-bezier(.42,0,.28,1) both!important;
  }

  .fcm-hero-overlay-loop.fcm-hero-overlay--pulse .fcm-hero-cinematic__shade:before,
  .fcm-hero-overlay-loop.fcm-hero-overlay--flow .fcm-hero-cinematic__shade:before,
  .fcm-hero-overlay-loop.fcm-hero-overlay--glow .fcm-hero-cinematic__shade:before,
  .fcm-hero-overlay-loop.fcm-hero-overlay--sweep .fcm-hero-cinematic__shade:after{
    animation-iteration-count:infinite!important;
  }

  @keyframes fcmOverlayPulseVisible{
    0%,100%{transform:translate3d(-2%,2%,0) scale(.92);filter:blur(8px) saturate(1.05);}
    50%{transform:translate3d(2%,-2%,0) scale(1.12);filter:blur(4px) saturate(1.4);}
  }
  @keyframes fcmOverlayFlowVisible{
    0%{transform:translate3d(-12%,4%,0) scale(1.02) rotate(-1deg);}
    35%{transform:translate3d(2%,-4%,0) scale(1.08) rotate(.5deg);}
    70%{transform:translate3d(10%,3%,0) scale(1.12) rotate(1deg);}
    100%{transform:translate3d(-8%,-1%,0) scale(1.04) rotate(-.5deg);}
  }
  @keyframes fcmOverlayGlowVisible{
    0%,100%{transform:translate3d(-2%,2%,0) scale(.92);filter:blur(12px) brightness(.9);}
    50%{transform:translate3d(2%,-2%,0) scale(1.14);filter:blur(6px) brightness(1.32);}
  }
  @keyframes fcmOverlaySweepVisible{
    0%{transform:translate3d(-58%,0,0) rotate(3deg);}
    100%{transform:translate3d(58%,0,0) rotate(3deg);}
  }
}

/* Keep a visible static treatment when the OS asks for reduced motion. */
@media(prefers-reduced-motion:reduce){
  .fcm-hero-overlay--pulse .fcm-hero-cinematic__shade:before,
  .fcm-hero-overlay--flow .fcm-hero-cinematic__shade:before,
  .fcm-hero-overlay--glow .fcm-hero-cinematic__shade:before{
    display:block!important;
    animation:none!important;
    opacity:calc(var(--fcm-hero-overlay-effect,.8) * .48)!important;
    background:
      radial-gradient(circle at 18% 70%,rgba(224,12,51,.55),transparent 45%),
      radial-gradient(circle at 82% 30%,rgba(0,157,79,.48),transparent 46%)!important;
    filter:blur(10px)!important;
  }
  .fcm-hero-overlay--sweep .fcm-hero-cinematic__shade:after{display:none!important;}
}

/* Content always stays above the animated FX. */
.fcm-hero-shell--cinematic .fcm-hero-cinematic__content{z-index:5!important;}
.fcm-hero-shell--cinematic .fcm-hero-cinematic__season,
.fcm-hero-shell--cinematic .fcm-hero-cinematic__values,
.fcm-hero-shell--cinematic .fcm-hero-cinematic__slider-nav{z-index:6!important;}


/* V1.21.20 — Dedicated visible FX layer.
   Uses a real DOM layer instead of pseudo-elements on the shade, which is
   more reliable in Safari/iOS and remains above image/video/slider media. */
.fcm-hero-shell--cinematic .fcm-hero-cinematic__shade:before,
.fcm-hero-shell--cinematic .fcm-hero-cinematic__shade:after{content:none!important;display:none!important;}
.fcm-hero-cinematic__fx{
  position:absolute!important;
  inset:0!important;
  z-index:4!important;
  overflow:hidden!important;
  pointer-events:none!important;
  opacity:clamp(0,var(--fcm-hero-overlay-effect,.8),1)!important;
  mix-blend-mode:screen!important;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
.fcm-hero-cinematic__fx i{
  position:absolute!important;
  display:block!important;
  pointer-events:none!important;
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  will-change:transform,opacity,filter;
}
.fcm-hero-overlay--none .fcm-hero-cinematic__fx{display:none!important;}

/* Red / Green Flow: deliberately visible even on bright hero photography. */
.fcm-hero-overlay--flow .fcm-hero-fx__red{
  width:78%;height:92%;left:-30%;top:8%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,18,61,.90) 0%,rgba(203,4,47,.62) 26%,rgba(153,0,38,.20) 50%,transparent 69%);
  filter:blur(24px) saturate(1.38);
  -webkit-filter:blur(24px) saturate(1.38);
  animation:fcmFxFlowRed var(--fcm-hero-overlay-duration,12s) cubic-bezier(.45,0,.2,1) both;
}
.fcm-hero-overlay--flow .fcm-hero-fx__green{
  width:74%;height:90%;right:-28%;top:-4%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,222,108,.82) 0%,rgba(0,150,76,.56) 27%,rgba(0,105,54,.18) 52%,transparent 70%);
  filter:blur(25px) saturate(1.42);
  -webkit-filter:blur(25px) saturate(1.42);
  animation:fcmFxFlowGreen var(--fcm-hero-overlay-duration,12s) cubic-bezier(.45,0,.2,1) both;
}
.fcm-hero-overlay--flow .fcm-hero-fx__light{
  width:95%;height:55%;left:2%;top:22%;
  background:linear-gradient(108deg,transparent 20%,rgba(255,255,255,.12) 47%,transparent 70%);
  filter:blur(12px);-webkit-filter:blur(12px);
  animation:fcmFxBreath var(--fcm-hero-overlay-duration,12s) ease-in-out both;
}

/* Ambient pulse */
.fcm-hero-overlay--pulse .fcm-hero-fx__red{
  width:70%;height:80%;left:-18%;bottom:-20%;border-radius:50%;
  background:radial-gradient(circle,rgba(244,17,58,.78),rgba(175,3,42,.30) 42%,transparent 68%);
  filter:blur(22px);-webkit-filter:blur(22px);animation:fcmFxPulse var(--fcm-hero-overlay-duration,12s) ease-in-out both;
}
.fcm-hero-overlay--pulse .fcm-hero-fx__green{
  width:66%;height:76%;right:-16%;top:-14%;border-radius:50%;
  background:radial-gradient(circle,rgba(0,192,94,.68),rgba(0,118,61,.25) 43%,transparent 68%);
  filter:blur(24px);-webkit-filter:blur(24px);animation:fcmFxPulseGreen var(--fcm-hero-overlay-duration,12s) ease-in-out both;
}

/* Cinematic glow */
.fcm-hero-overlay--glow .fcm-hero-fx__light{
  width:88%;height:92%;left:6%;top:2%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.55) 0%,rgba(255,255,255,.20) 16%,rgba(235,20,62,.18) 36%,rgba(0,160,80,.13) 56%,transparent 72%);
  filter:blur(18px);-webkit-filter:blur(18px);animation:fcmFxGlow var(--fcm-hero-overlay-duration,12s) ease-in-out both;
}

/* Soft light sweep */
.fcm-hero-overlay--sweep .fcm-hero-fx__light{
  width:58%;height:180%;left:-70%;top:-40%;
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.10) 39%,rgba(255,255,255,.68) 50%,rgba(255,255,255,.12) 61%,transparent 76%);
  filter:blur(8px);-webkit-filter:blur(8px);transform:rotate(7deg);
  animation:fcmFxSweep var(--fcm-hero-overlay-duration,12s) cubic-bezier(.42,0,.25,1) both;
}

.fcm-hero-overlay-loop .fcm-hero-cinematic__fx i{animation-iteration-count:infinite!important;}

@keyframes fcmFxFlowRed{0%{transform:translate3d(-10%,7%,0) scale(.92)}35%{transform:translate3d(10%,-5%,0) scale(1.10)}70%{transform:translate3d(23%,4%,0) scale(1.18)}100%{transform:translate3d(-4%,-3%,0) scale(1.00)}}
@keyframes fcmFxFlowGreen{0%{transform:translate3d(13%,-8%,0) scale(.94)}38%{transform:translate3d(-8%,5%,0) scale(1.13)}74%{transform:translate3d(-22%,-2%,0) scale(1.20)}100%{transform:translate3d(5%,6%,0) scale(1.02)}}
@keyframes fcmFxBreath{0%,100%{opacity:.25;transform:scale(.94)}50%{opacity:.82;transform:scale(1.08)}}
@keyframes fcmFxPulse{0%,100%{opacity:.42;transform:scale(.82) translate3d(-5%,6%,0)}50%{opacity:1;transform:scale(1.18) translate3d(9%,-5%,0)}}
@keyframes fcmFxPulseGreen{0%,100%{opacity:.38;transform:scale(.86) translate3d(6%,-5%,0)}50%{opacity:.94;transform:scale(1.16) translate3d(-9%,6%,0)}}
@keyframes fcmFxGlow{0%,100%{opacity:.30;transform:scale(.88) translate3d(-3%,2%,0)}50%{opacity:1;transform:scale(1.18) translate3d(3%,-2%,0)}}
@keyframes fcmFxSweep{0%{transform:translate3d(0,0,0) rotate(7deg);opacity:0}12%{opacity:.9}82%{opacity:.9}100%{transform:translate3d(310%,0,0) rotate(7deg);opacity:0}}

@media(max-width:767px){
  .fcm-hero-cinematic__fx{opacity:min(1,calc(var(--fcm-hero-overlay-effect,.8) * 1.12))!important;}
  .fcm-hero-overlay--flow .fcm-hero-fx__red,.fcm-hero-overlay--flow .fcm-hero-fx__green{filter:blur(18px) saturate(1.42);-webkit-filter:blur(18px) saturate(1.42);}
}
@media(prefers-reduced-motion:reduce){
  .fcm-hero-cinematic__fx i{animation:none!important;}
  .fcm-hero-overlay--flow .fcm-hero-fx__red{transform:translate3d(8%,0,0) scale(1.06)!important;}
  .fcm-hero-overlay--flow .fcm-hero-fx__green{transform:translate3d(-8%,0,0) scale(1.06)!important;}
  .fcm-hero-overlay--sweep .fcm-hero-fx__light{display:none!important;}
}
