/* =========================================================
   FNC SLIDER – FULL COMPILED CSS (ORIGINAL)
   Source: SUEZ CodePen (compiled from SCSS)
   ========================================================= */

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  background: #000;
}

/* ---------------- DEMO CONTAINER ---------------- */

.demo-cont {
  overflow: hidden;
  position: relative;
  height: 100vh;
  perspective: 1500px;
  background: #000;
}

/* =========================================================
   PHASE 1 – HEADING TEXT ANIMATION (CRITICAL)
   Restores before / active / previous choreography
   ========================================================= */

/* initial off-screen state */
.fnc-slide.m--before-sliding .fnc-slide__heading-line {
  transform: translateY(100%);
}

.fnc-slide.m--before-sliding .fnc-slide__heading-line span {
  transform: translateY(-100%);
}

/* active slide enters */
.fnc-slide.m--active-slide .fnc-slide__heading-line {
  transition: transform 1.5s 1s ease;
  transform: translateY(0);
}

.fnc-slide.m--active-slide .fnc-slide__heading-line span {
  transition: transform 1.5s 1s ease;
  transform: translateY(0);
}

/* previous slide exits */
.fnc-slide.m--previous-slide .fnc-slide__heading-line {
  transition: transform 1.5s ease;
  transform: translateY(-100%);
}

.fnc-slide.m--previous-slide .fnc-slide__heading-line span {
  transition: transform 1.5s ease;
  transform: translateY(100%);
}

/* ensure proper overflow clipping */
.fnc-slide__heading-line {
  overflow: hidden;
}

/* =========================================================
   PHASE 2 – SLIDE DEPTH & PARALLAX CHOREOGRAPHY
   Restores cinematic motion between slides
   ========================================================= */

/* default state */
.fnc-slide__inner {
  transform: translate3d(0,0,0);
  will-change: transform;
}

/* BEFORE sliding: next slide comes from right */
.fnc-slide.m--before-sliding .fnc-slide__inner {
  transform: translate3d(-100px, 0, 0);
}

/* ACTIVE slide enters smoothly */
.fnc-slide.m--active-slide .fnc-slide__inner {
  transition: transform 1s 0.66s ease-in-out;
  transform: translate3d(0, 0, 0);
}

/* PREVIOUS slide exits with depth */
.fnc-slide.m--previous-slide .fnc-slide__inner {
  transition: transform 1s ease-in-out;
  transform: translate3d(100px, 0, 0);
}

/* give subtle zoom depth */
.fnc-slide__inner {
  transform-origin: center center;
}

.fnc-slide.m--active-slide .fnc-slide__inner {
  transform: translate3d(0,0,0) scale(1);
}

.fnc-slide.m--previous-slide .fnc-slide__inner {
  transform: translate3d(100px,0,0) scale(1.05);
}

.fnc-slide.m--before-sliding .fnc-slide__inner {
  transform: translate3d(-100px,0,0) scale(0.95);
}


/* ---------------- SLIDER ---------------- */

.fnc-slider {
  overflow: hidden;
  position: relative;
  height: 100vh;
}

.fnc-slider *,
.fnc-slider *:before,
.fnc-slider *:after {
  box-sizing: border-box;
}

.fnc-slider__slides {
  position: relative;
  height: 100%;
  transition: transform 1s 0.66s ease-in-out;
}

/* ---------------- SLIDE ---------------- */

.fnc-slide {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.fnc-slide.m--before-sliding {
  z-index: 2 !important;
  transform: translate3d(100%, 0, 0);
}

.fnc-slide.m--active-slide {
  z-index: 1;
  transform: translate3d(0, 0, 0);
  transition: transform 1s 0.66s ease-in-out;
}

.fnc-slide.m--previous-slide {
  z-index: 0;
}

/* ---------------- SLIDE INNER ---------------- */

.fnc-slide__inner {
  position: relative;
  height: 100%;
  background-size: cover;
  background-position: center top;
}

.m--global-blending-active .fnc-slide__inner {
  background-blend-mode: luminosity;
}

/* ---------------- MASK ---------------- */

.fnc-slide__mask {
  overflow: hidden;
  z-index: 1;
  position: absolute;
  right: 60%;
  top: 15%;
  width: 50vh;
  height: 67vh;
  margin-right: -90px;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 100%,
    0 0,
    6vh 0,
    6vh 61vh,
    44vh 61vh,
    44vh 6vh,
    6vh 6vh
  );
}

.fnc-slide__mask-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  margin-left: -50vw;
  margin-top: -50vh;
  background-size: cover;
  background-position: center center;
  background-blend-mode: luminosity;
}
/* =========================================================
   PHASE 3 – MASK & INNER-MASK CINEMATIC ANIMATION
   Restores FNC signature rotating mask effect
   ========================================================= */

/* base mask state */
.fnc-slide__mask {
  transform-origin: 50% 0%;
  will-change: transform, opacity;
}

/* base inner mask */
.fnc-slide__mask-inner {
  will-change: transform;
  transform-origin: 50% 50%;
}

/* BEFORE sliding – mask tilted & offset */
.fnc-slide.m--before-sliding .fnc-slide__mask {
  transform: rotate(-10deg) translate3d(200px, 0, 0);
  opacity: 0;
}

.fnc-slide.m--before-sliding .fnc-slide__mask-inner {
  transform: translate3d(-200px, 0, 0) rotate(-10deg);
}

/* ACTIVE slide – mask settles */
.fnc-slide.m--active-slide .fnc-slide__mask {
  transition:
    transform 0.7s 1.1s ease-in-out,
    opacity 0.35s 1.1s ease-in-out;
  transform: translate3d(0, 0, 0) rotate(0deg);
  opacity: 1;
}

.fnc-slide.m--active-slide .fnc-slide__mask-inner {
  transition: transform 0.7s 1.1s ease-in-out;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

/* PREVIOUS slide – mask exits opposite */
.fnc-slide.m--previous-slide .fnc-slide__mask {
  transition:
    transform 0.7s 0.33s ease-in-out,
    opacity 0.35s 0.33s ease-in-out;
  transform: rotate(10deg) translate3d(-200px, 0, 0);
  opacity: 0;
}

.fnc-slide.m--previous-slide .fnc-slide__mask-inner {
  transition: transform 0.7s 0.33s ease-in-out;
  transform: translate3d(200px, 0, 0) rotate(10deg);
}

/* ---------------- CONTENT ---------------- */

.fnc-slide__content {
  z-index: 2;
  position: absolute;
  left: 40%;
  top: 40%;
}

.fnc-slide__heading {
  margin-bottom: 10px;
  text-transform: uppercase;
}

.fnc-slide__heading-line {
  overflow: hidden;
  position: relative;
  padding-right: 20px;
  font-size: 100px;
  color: #fff;
  word-spacing: 10px;
}

.fnc-slide__heading-line:nth-child(2) {
  padding-left: 30px;
}

.fnc-slide__heading-line span {
  display: block;
}

/* ---------------- BUTTON ---------------- */

.fnc-slide__action-btn {
  position: relative;
  margin-left: 200px;
  padding: 5px 15px;
  font-size: 20px;
  color: transparent;
  background: transparent;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
}

.fnc-slide__action-btn span {
  position: absolute;
  inset: 0;
  color: #fff;
  line-height: 30px;
  text-align: center;
}

.fnc-slide__action-btn span:before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid #fff;
  border-top: none;
  border-bottom: none;
}

/* ---------------- NAV ---------------- */

.fnc-nav {
  z-index: 5;
  position: absolute;
  right: 0;
  bottom: 0;
}

.fnc-nav__bgs {
  z-index: -1;
  overflow: hidden;
  position: absolute;
  inset: 0;
}

.fnc-nav__bg {
  position: absolute;
  inset: 0;
}

.fnc-nav__bg.m--active-nav-bg {
  z-index: 1;
}

.fnc-nav__controls {
  font-size: 0;
}

.fnc-nav__control {
  display: inline-block;
  width: 120px;
  height: 50px;
  font-size: 14px;
  color: #fff;
  text-transform: uppercase;
  background: transparent;
  border: none;
  cursor: pointer;
}

.fnc-nav__control.m--active-control {
  background: #1f2833;
}

.fnc-nav__control-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: #fff;
  transform: scaleX(0);
}

/* ---------------- COLOR THEMES ---------------- */

.m--blend-green .fnc-slide__inner,
.m--blend-green .fnc-slide__mask-inner,
.m--navbg-green {
  background-color: #42605e;
}

.m--blend-dark .fnc-slide__inner,
.m--blend-dark .fnc-slide__mask-inner,
.m--navbg-dark {
  background-color: #444;
}

.m--blend-red .fnc-slide__inner,
.m--blend-red .fnc-slide__mask-inner,
.m--navbg-red {
  background-color: #7a1a1d;
}

.m--blend-blue .fnc-slide__inner,
.m--blend-blue .fnc-slide__mask-inner,
.m--navbg-blue {
  background-color: #2d7791;
}

/* ---------------- SLIDE IMAGES ---------------- */

.fnc-slide-1 .fnc-slide__inner,
.fnc-slide-1 .fnc-slide__mask-inner {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/blackwidow.jpg");
}

.fnc-slide-2 .fnc-slide__inner,
.fnc-slide-2 .fnc-slide__mask-inner {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/captainamerica.jpg");
}

.fnc-slide-3 .fnc-slide__inner,
.fnc-slide-3 .fnc-slide__mask-inner {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/ironman-alt.jpg");
}

.fnc-slide-4 .fnc-slide__inner,
.fnc-slide-4 .fnc-slide__mask-inner {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/thor.jpg");
}

/* ---------------- MOBILE ---------------- */

@media (max-width: 768px) {
  .fnc-slide__content {
    left: 10%;
    top: 55%;
  }
  .fnc-slide__heading-line {
    font-size: 48px;
  }
}