/* =========================
   PROGRESSIVE MOTION BLUR
========================= */

.motion-blur-footer{

  position:fixed;

  left:0;

  bottom:0;

  width:100%;

  height:120px;

  pointer-events:none;

  z-index:10;

  overflow:hidden;
}

/* BASE */

.motion-blur-footer .blur-layer{

  position:absolute;

  inset:0;

  pointer-events:none;
}

/* =========================
   LAYER 1
========================= */

.motion-blur-footer .blur-1{

  z-index:1;

  backdrop-filter:blur(0.5px);

  -webkit-backdrop-filter:blur(0.5px);

  mask-image:
  linear-gradient(
    to bottom,
    transparent 0%,
    black 12.5%,
    black 25%,
    transparent 37.5%
  );

  -webkit-mask-image:
  linear-gradient(
    to bottom,
    transparent 0%,
    black 12.5%,
    black 25%,
    transparent 37.5%
  );
}

/* =========================
   LAYER 2
========================= */

.motion-blur-footer .blur-2{

  z-index:2;

  backdrop-filter:blur(1px);

  -webkit-backdrop-filter:blur(1px);

  mask-image:
  linear-gradient(
    to bottom,
    transparent 12.5%,
    black 25%,
    black 37.5%,
    transparent 50%
  );

  -webkit-mask-image:
  linear-gradient(
    to bottom,
    transparent 12.5%,
    black 25%,
    black 37.5%,
    transparent 50%
  );
}

/* =========================
   LAYER 3
========================= */

.motion-blur-footer .blur-3{

  z-index:3;

  backdrop-filter:blur(2px);

  -webkit-backdrop-filter:blur(2px);

  mask-image:
  linear-gradient(
    to bottom,
    transparent 25%,
    black 37.5%,
    black 50%,
    transparent 62.5%
  );

  -webkit-mask-image:
  linear-gradient(
    to bottom,
    transparent 25%,
    black 37.5%,
    black 50%,
    transparent 62.5%
  );
}

/* =========================
   LAYER 4
========================= */

.motion-blur-footer .blur-4{

  z-index:4;

  backdrop-filter:blur(4px);

  -webkit-backdrop-filter:blur(4px);

  mask-image:
  linear-gradient(
    to bottom,
    transparent 37.5%,
    black 50%,
    black 62.5%,
    transparent 75%
  );

  -webkit-mask-image:
  linear-gradient(
    to bottom,
    transparent 37.5%,
    black 50%,
    black 62.5%,
    transparent 75%
  );
}

/* =========================
   LAYER 5
========================= */

.motion-blur-footer .blur-5{

  z-index:5;

  backdrop-filter:blur(8px);

  -webkit-backdrop-filter:blur(8px);

  mask-image:
  linear-gradient(
    to bottom,
    transparent 50%,
    black 62.5%,
    black 75%,
    transparent 87.5%
  );

  -webkit-mask-image:
  linear-gradient(
    to bottom,
    transparent 50%,
    black 62.5%,
    black 75%,
    transparent 87.5%
  );
}

/* =========================
   LAYER 6
========================= */

.motion-blur-footer .blur-6{

  z-index:6;

  backdrop-filter:blur(16px);

  -webkit-backdrop-filter:blur(16px);

  mask-image:
  linear-gradient(
    to bottom,
    transparent 62.5%,
    black 75%,
    black 87.5%,
    transparent 100%
  );

  -webkit-mask-image:
  linear-gradient(
    to bottom,
    transparent 62.5%,
    black 75%,
    black 87.5%,
    transparent 100%
  );
}

/* =========================
   LAYER 7
========================= */

.motion-blur-footer .blur-7{

  z-index:7;

  backdrop-filter:blur(32px);

  -webkit-backdrop-filter:blur(32px);

  mask-image:
  linear-gradient(
    to bottom,
    transparent 75%,
    black 87.5%,
    black 100%
  );

  -webkit-mask-image:
  linear-gradient(
    to bottom,
    transparent 75%,
    black 87.5%,
    black 100%
  );
}

/* =========================
   LAYER 8
========================= */

.motion-blur-footer .blur-8{

  z-index:8;

  backdrop-filter:blur(64px);

  -webkit-backdrop-filter:blur(64px);

  mask-image:
  linear-gradient(
    to bottom,
    transparent 87.5%,
    black 100%
  );

  -webkit-mask-image:
  linear-gradient(
    to bottom,
    transparent 87.5%,
    black 100%
  );
}















/* =========================
   PREMIUM FOOTER
========================= */

.premium-footer{

  position:relative;

  background:#050505;

  overflow:hidden;

  padding:80px 60px 220px;

  border-top:
  1px solid rgba(255,255,255,0.08);
}

/* =========================
   NOISE
========================= */

.footer-noise{

  position:absolute;

  inset:-50%;

  pointer-events:none;

  opacity:0.9;

  background-image:
  url("https://assets.iceable.com/img/noise-transparent.png");

  background-repeat:repeat;

  background-size:260px;

  mix-blend-mode:overlay;

  animation:
  grainMove 8s steps(6) infinite;
}

/* =========================
   GRAIN MOTION
========================= */

@keyframes grainMove{

  0%{
    transform:translate(0,0);
  }

  20%{
    transform:translate(-1%,1%);
  }

  40%{
    transform:translate(1%,-1%);
  }

  60%{
    transform:translate(-1%,0.5%);
  }

  80%{
    transform:translate(1%,1%);
  }

  100%{
    transform:translate(0,0);
  }
}

/* =========================
   MAIN GRID
========================= */

.footer-inner{

  position:relative;

  z-index:2;

  display:grid;

  grid-template-columns:
  1.2fr 1fr;

  gap:120px;

  padding-bottom:80px;

  border-bottom:
  1px solid rgba(255,255,255,0.08);
}

/* =========================
   BRAND
========================= */

.footer-brand{

  display:flex;

  align-items:center;

  gap:14px;

  margin-bottom:32px;
}

.footer-logo{

  width:42px;

  height:42px;

  border-radius:50%;

  background:#FF1E00;

  color:#000;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:18px;

  font-weight:700;
}

.footer-brand span{

  font-size:38px;

  font-family:"Oswald", sans-serif;

  color:#fff;

  letter-spacing:1px;
}

/* =========================
   LEFT TEXT
========================= */

.footer-left h2{

  font-size:64px;

  line-height:0.95;

  color:#fff;

  max-width:700px;

  margin-bottom:26px;

  font-family:"Oswald", sans-serif;

  text-transform:uppercase;
}

.footer-left p{

  color:rgba(255,255,255,0.45);

  font-size:18px;

  margin-bottom:40px;
	font-family:"Barlow", sans-serif;
}

/* =========================
   INPUT
========================= */

.footer-input{

  display:flex;

  align-items:center;

  width:360px;

  height:62px;

  border:
  1px solid rgba(255,255,255,0.08);

  background:
  rgba(255,255,255,0.02);

  backdrop-filter:blur(12px);

  -webkit-backdrop-filter:blur(12px);
}

.footer-input input{

  flex:1;

  height:100%;

  background:none;

  border:none;

  outline:none;

  padding:0 22px;

  color:#fff;

  font-size:16px;
	font-family:"Barlow", sans-serif;
}

.footer-input input::placeholder{

  color:rgba(255,255,255,0.35);
}

.footer-input button{

  width:62px;

  height:62px;

  border:none;

  background:#FF1E00;

  color:#000;

  font-size:22px;

  cursor:pointer;

  transition:0.3s ease;
}

.footer-input button:hover{

  transform:scale(1.05);
}

/* =========================
   LINKS
========================= */

.footer-links{

  display:grid;

  grid-template-columns:
  repeat(4,1fr);

  gap:40px;
}

.footer-links h4{

  color:#fff;

  font-size:15px;

  margin-bottom:28px;

  font-weight:600;
 font-family:"Barlow", sans-serif;
}

.footer-links a{

  display:block;

  color:rgba(255,255,255,0.55);

  margin-bottom:16px;

  text-decoration:none;

  transition:0.3s ease;
	font-family:"Barlow", sans-serif;
}

.footer-links a:hover{

  color:#fff;

  transform:translateX(4px);
}

/* =========================
   COPYRIGHT INLINE BAR
========================= */

.footer-bottom{

  position:absolute;

  left:50%;

  bottom:160px;

  transform:translateX(-50%);

  z-index:3;

  display:flex;

  align-items:center;

  gap:28px;

  padding:14px 28px;

  border:
  1px solid rgba(255,255,255,0.08);

  background:
  rgba(255,255,255,0.02);

  backdrop-filter:blur(12px);

  -webkit-backdrop-filter:blur(12px);

  border-radius:999px;
}

.footer-bottom span{

  color:rgba(255,255,255,0.65);

  font-size:12px;

  letter-spacing:1px;

  text-transform:uppercase;

  white-space:nowrap;
	font-family:"Barlow", sans-serif;
}

.footer-bottom div{

  display:flex;

  align-items:center;

  gap:22px;
}

.footer-bottom a{

  position:relative;

  color:rgba(255,255,255,0.4);

  text-decoration:none;

  font-size:12px;

  text-transform:uppercase;

  transition:0.3s ease;
	font-family:"Barlow", sans-serif;
}

.footer-bottom a:hover{

  color:#fff;
}

/* DIVIDER */

.footer-bottom div a:not(:last-child)::after{

  content:"";

  position:absolute;

  right:-12px;

  top:50%;

  transform:translateY(-50%);

  width:1px;

  height:12px;

  background:
  rgba(255,255,255,0.15);
}

/* =========================
   FOOTER MARQUEE
========================= */

.footer-marquee{

  position:absolute;

  left:0;

  bottom:40px;

  width:100%;

  overflow:hidden;

  pointer-events:none;

  z-index:1;
}

/* TRACK */

.footer-marquee-track{

  display:flex;

  align-items:center;

  width:max-content;

  animation:
  footerMarquee 28s linear infinite;
}

/* TEXT */

.footer-marquee-track span{

  font-family:"Oswald", sans-serif;

  font-size:clamp(90px, 11vw, 220px);

  font-weight:700;

  line-height:0.9;

  text-transform:uppercase;

  color:transparent;

  -webkit-text-stroke:
  1px rgba(255,255,255,0.50);

  white-space:nowrap;

  padding-right:120px;

  letter-spacing:-4px;

  opacity:0.5;
}

/* ANIMATION */

@keyframes footerMarquee{

  from{

    transform:translateX(0);
  }

  to{

    transform:translateX(-50%);
  }
}
/* =========================
   MOBILE
========================= */

/* =========================
   MOBILE
========================= */

@media(max-width:991px){

  /* FOOTER */

  .premium-footer{

    padding:60px 24px 260px;
  }

  /* GRID */

  .footer-inner{

    grid-template-columns:1fr;

    gap:60px;

    padding-bottom:60px;
  }

  /* BRAND */

  .footer-brand{

    margin-bottom:24px;
  }

  .footer-brand span{

    font-size:28px;
  }

  .footer-logo{

    width:38px;

    height:38px;

    font-size:16px;
  }

  /* TITLE */

  .footer-left h2{

    font-size:44px;

    line-height:0.95;

    margin-bottom:20px;
  }

  /* TEXT */

  .footer-left p{

    font-size:16px;

    margin-bottom:32px;
  }

  /* INPUT */

  .footer-input{

    width:100%;

    height:58px;
  }

  .footer-input input{

    font-size:14px;

    padding:0 18px;
  }

  .footer-input button{

    width:58px;

    height:58px;

    font-size:18px;
  }

  /* LINKS */

  .footer-links{

    grid-template-columns:
    repeat(2,1fr);

    gap:40px 20px;
  }

  .footer-links h4{

    margin-bottom:18px;

    font-size:14px;
  }

  .footer-links a{

    font-size:14px;

    margin-bottom:14px;
  }

  /* COPYRIGHT BAR */

  .footer-bottom{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:150px;

    width:auto;

    max-width:calc(100% - 32px);

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    gap:14px;

    padding:14px 18px;

    border-radius:20px;
  }

  .footer-bottom span{

    font-size:10px;

    letter-spacing:0.5px;

    line-height:1.4;
  }

  .footer-bottom div{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    align-items:center;

    gap:14px;
  }

  .footer-bottom a{

    font-size:10px;
  }

  .footer-bottom div a:not(:last-child)::after{

    right:-8px;

    height:10px;
  }

  /* MARQUEE */

  .footer-marquee{

    bottom:60px;
  }

  .footer-marquee-track{

    animation:
    footerMarquee 18s linear infinite;
  }

  .footer-marquee-track span{

  font-size:72px;

  line-height:0.9;

  padding-right:60px;

  letter-spacing:-2px;

  color:transparent;

  -webkit-text-stroke:0;

  text-shadow:
    1px 0 rgba(255,255,255,0.12),
   -1px 0 rgba(255,255,255,0.12),
    0 1px rgba(255,255,255,0.12),
    0 -1px rgba(255,255,255,0.12);
}
}