:root{

  --red:#d91c1c;
  --dark-red:#7a0e12;
  --black:#070707;
  --white:#f5f1ea;
  --gray:#9d9d9d;

}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{

  background:var(--black);
  color:var(--white);

  font-family:'Inter', sans-serif;

  overflow-x:hidden;

}

/* GRAIN */

.grain{

  position:fixed;
  inset:0;

  pointer-events:none;

  opacity:.08;

  z-index:9999;

  background-image:
  url("https://grainy-gradients.vercel.app/noise.svg");

}

/* NAVBAR */

.navbar{

  position:fixed;
  top:0;

  width:100%;

  z-index:1000;

  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:25px 7%;

  backdrop-filter:blur(10px);

  background:
  linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.05)
  );

}

.logo{

  font-family:'Anton', sans-serif;

  font-size:2rem;

  letter-spacing:2px;

}

nav{

  display:flex;

  gap:35px;

}

nav a{

  color:white;

  text-decoration:none;

  font-size:.95rem;

  transition:.3s;

  position:relative;

}

nav a::after{

  content:"";

  position:absolute;

  left:0;
  bottom:-6px;

  width:0%;
  height:2px;

  background:var(--red);

  transition:.3s;

}

nav a:hover::after{

  width:100%;

}

/* HERO */

.hero{

  position:relative;

  min-height:100vh;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

}

/* HERO BG */

.hero-bg{

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.75)
  ),
  url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?q=80&w=1974&auto=format&fit=crop");

  background-size:cover;
  background-position:center;

  transform:scale(1.1);

  animation:bgMove 14s ease-in-out infinite alternate;

}

@keyframes bgMove{

  from{
    transform:scale(1.1) translateY(0px);
  }

  to{
    transform:scale(1.18) translateY(-20px);
  }

}

/* HERO OVERLAY */

.hero-overlay{

  position:absolute;
  inset:0;

  background:
  radial-gradient(
    circle at center,
    rgba(217,28,28,.1),
    rgba(217,28,28,.75)
  );

  mix-blend-mode:screen;

}

.hero::after{

  content:"";

  position:absolute;

  width:650px;
  height:650px;

  border-radius:50%;

  background:
  radial-gradient(
    rgba(217,28,28,.18),
    transparent 70%
  );

  filter:blur(50px);

  animation:pulseGlow 5s ease-in-out infinite;

}

@keyframes pulseGlow{

  0%{
    opacity:.5;
    transform:scale(1);
  }

  50%{
    opacity:1;
    transform:scale(1.1);
  }

  100%{
    opacity:.5;
    transform:scale(1);
  }

}

/* HERO CONTENT */

.hero-content{

  position:relative;

  z-index:5;

  text-align:center;

  width:90%;
  max-width:1100px;

}

.mini-title{

  font-size:.9rem;

  letter-spacing:4px;

  margin-bottom:25px;

  opacity:.9;

}

.hero h1{

  font-family:'Anton', sans-serif;

  font-size:clamp(5rem, 18vw, 14rem);

  line-height:.85;

  letter-spacing:6px;

  text-shadow:
  0 0 30px rgba(217,28,28,.25);

  animation:titleEntry 1.2s ease;

}

@keyframes titleEntry{

  from{

    opacity:0;

    transform:translateY(40px);

  }

  to{

    opacity:1;

    transform:translateY(0px);

  }

}

.hero-description{

  max-width:650px;

  margin:30px auto;

  font-size:1.1rem;

  line-height:1.7;

  color:#dddddd;

}

/* COUNTDOWN */

.countdown{

  display:flex;
  justify-content:center;

  gap:35px;

  margin-top:40px;
  margin-bottom:45px;

  flex-wrap:wrap;

}

.count-box{

  min-width:90px;

}

.count-box span{

  display:block;

  font-size:3.6rem;
  font-weight:800;

}

.count-box small{

  color:#c8c8c8;

  letter-spacing:3px;

}

/* BUTTONS */

.hero-buttons{

  display:flex;

  justify-content:center;

  gap:20px;

  flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

  padding:18px 28px;

  text-decoration:none;

  font-weight:700;

  letter-spacing:1px;

  transition:.3s;

}

.btn-primary{

  background:var(--white);

  color:black;

}

.btn-primary:hover{

  background:var(--red);

  color:white;

  transform:translateY(-3px);

}

.btn-secondary{

  border:1px solid rgba(255,255,255,.5);

  color:white;

}

.btn-secondary:hover{

  background:var(--red);

  border-color:var(--red);

}

/* WAVES */

.waves{

  position:absolute;

  width:240px;
  height:240px;

  opacity:.5;

  animation:wavesFloat 7s ease-in-out infinite;

}

.waves::before{

  content:"";

  position:absolute;
  inset:0;

  background:
  repeating-radial-gradient(
    circle at left,
    transparent 0 12px,
    white 13px 14px
  );

  transform:rotate(90deg);

}

@keyframes wavesFloat{

  0%{
    transform:translateY(0px);
  }

  50%{
    transform:translateY(-15px);
  }

  100%{
    transform:translateY(0px);
  }

}

.waves-left{

  left:-70px;
  top:120px;

}

.waves-right{

  right:-70px;
  bottom:120px;

}

/* FLOATING X */

.floating-x{

  position:absolute;

  top:120px;
  right:120px;

  width:80px;
  height:80px;

  opacity:.2;

  animation:rotateX 18s linear infinite;

}

.floating-x::before,
.floating-x::after{

  content:"";

  position:absolute;
  inset:0;

  background:white;

}

.floating-x::before{

  transform:rotate(45deg);

}

.floating-x::after{

  transform:rotate(-45deg);

}

@keyframes rotateX{

  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }

}

/* SECTIONS */

section{

  padding:120px 7%;

}

.section-tag{

  color:var(--red);

  font-weight:700;

  letter-spacing:3px;

  margin-bottom:20px;

}

.about h2,
.gallery h2,
.cta h2,
.dates h2,
.awards h2,
.rules h2{

  font-size:clamp(2rem,5vw,5rem);

  line-height:1.1;

  margin-bottom:25px;

}

.about p,
.rules p{

  max-width:800px;

  line-height:1.9;

  color:#cfcfcf;

}

/* CATEGORIES */

.categories{

  background:#0f0f0f;

}

.cards{

  margin-top:50px;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(230px,1fr));

  gap:25px;

}

.card{

  position:relative;

  overflow:hidden;

  padding:40px;

  border:1px solid rgba(255,255,255,.08);

  background:
  linear-gradient(
    145deg,
    rgba(255,255,255,.02),
    rgba(255,255,255,.01)
  );

  transition:.4s;

}

.card::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.06),
    transparent
  );

  transform:translateX(-100%);

  transition:.7s;

}

.card:hover::before{

  transform:translateX(100%);

}

.card:hover{

  transform:translateY(-8px);

  border-color:rgba(217,28,28,.5);

}

.card span{

  color:var(--red);

  font-size:1.5rem;
  font-weight:800;

}

.card h3{

  margin-top:20px;

  font-size:2rem;

}

/* GALLERY */

.gallery-grid{

  margin-top:50px;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(220px,1fr));

  gap:25px;

}

.vertical-card{

  position:relative;

  overflow:hidden;

  aspect-ratio:9/16;

  background:
  linear-gradient(
    rgba(0,0,0,.2),
    rgba(0,0,0,.8)
  ),
  url("https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?q=80&w=1974&auto=format&fit=crop");

  background-size:cover;
  background-position:center;

  border-radius:20px;

  transition:.4s;

}

.vertical-card::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.08),
    transparent
  );

  transform:translateX(-100%);

  transition:.7s;

}

.vertical-card:hover::before{

  transform:translateX(100%);

}

.vertical-card:hover{

  transform:scale(1.03);

}

/* DATES */

.dates{

  background:#0d0d0d;

}

.timeline{

  margin-top:60px;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(240px,1fr));

  gap:25px;

}

.timeline-item{

  padding:35px;

  border-left:2px solid var(--red);

  background:
  linear-gradient(
    145deg,
    rgba(255,255,255,.02),
    rgba(255,255,255,.01)
  );

  transition:.4s;

}

.timeline-item:hover{

  transform:translateY(-6px);

  border-color:white;

}

.timeline-date{

  display:inline-block;

  margin-bottom:18px;

  color:var(--red);

  font-weight:700;

  letter-spacing:2px;

}

.timeline-item h3{

  font-size:1.7rem;

  margin-bottom:15px;

}

.timeline-item p{

  color:#c9c9c9;

  line-height:1.7;

}

/* AWARDS */

.awards{

  background:#080808;

}

.awards-grid{

  margin-top:60px;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(240px,1fr));

  gap:25px;

}

.award-card{

  position:relative;

  overflow:hidden;

  padding:40px;

  border:1px solid rgba(255,255,255,.08);

  background:
  linear-gradient(
    145deg,
    rgba(255,255,255,.02),
    rgba(255,255,255,.01)
  );

  transition:.4s;

}

.award-card::before{

  content:"";

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.06),
    transparent
  );

  transform:translateX(-100%);

  transition:.7s;

}

.award-card:hover::before{

  transform:translateX(100%);

}

.award-card:hover{

  transform:translateY(-8px);

  border-color:rgba(217,28,28,.5);

}

.award-card span{

  color:var(--red);

  font-size:1.5rem;

  font-weight:800;

}

.award-card h3{

  margin-top:20px;

  margin-bottom:15px;

  font-size:2rem;

}

.award-card p{

  color:#cfcfcf;

  line-height:1.7;

}

/* RULES */

.rules{

  text-align:center;

  background:
  linear-gradient(
    180deg,
    #090909,
    #180909
  );

}

.rules .btn-primary{

  display:inline-block;

  margin-top:35px;

}

/* CTA */

.cta{

  text-align:center;

  background:
  linear-gradient(
    180deg,
    #0a0a0a,
    #2b0b0b
  );

}

.cta .btn-primary{

  display:inline-block;

  margin-top:30px;

}

/* FOOTER */

footer{

  padding:80px 7%;

  border-top:1px solid rgba(255,255,255,.08);

}

.footer-logo{

  font-family:'Anton', sans-serif;

  font-size:4rem;

  letter-spacing:4px;

}

footer p{

  margin-top:10px;

  color:#ccc;

}

footer small{

  display:block;

  margin-top:20px;

  color:#666;

}

/* RESPONSIVE */

@media(max-width:768px){

  .navbar{

    flex-direction:column;

    gap:18px;

    padding:20px 5%;

  }

  nav{

    gap:18px;

    flex-wrap:wrap;

    justify-content:center;

  }

  nav a{

    font-size:.9rem;

  }

  .hero{

    padding-top:140px;

  }

  .hero h1{

    font-size:5rem;

    line-height:.9;

    letter-spacing:2px;

  }

  .mini-title{

    font-size:.7rem;

    letter-spacing:2px;

  }

  .hero-description{

    font-size:1rem;

    line-height:1.7;

  }

  .hero-buttons{

    flex-direction:column;

    align-items:center;

    width:100%;

  }

  .btn-primary,
  .btn-secondary{

    width:100%;
    max-width:320px;

    text-align:center;

  }

  .waves{

    width:160px;
    height:160px;

    opacity:.25;

  }

  .waves-left{

    left:-60px;
    top:160px;

  }

  .waves-right{

    right:-60px;
    bottom:80px;

  }

  .floating-x{

    width:50px;
    height:50px;

    top:110px;
    right:30px;

  }

  section{

    padding:100px 7%;

  }

  .gallery-grid,
  .timeline,
  .awards-grid{

    grid-template-columns:1fr;

  }

}
/* PARTNER LOGO */

.partner{

  margin-top:60px;

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:20px;

}

.partner-text{

  color:#777;

  letter-spacing:4px;

  font-size:.8rem;

  text-transform:uppercase;

}

.partner-logo{

  width:100%;
  max-width:500px;

  opacity:.9;

  filter:brightness(1.1);

  transition:.4s;

}

.partner-logo:hover{

  opacity:1;

  transform:scale(1.02);

}

/* MOBILE */

@media(max-width:768px){

  .partner-logo{

    max-width:300px;

  }

}
/* FOOTER SOCIALS */

.footer-socials{

  margin-top:35px;

  display:flex;
  justify-content:center;
  align-items:center;

  gap:30px;

  flex-wrap:wrap;

}

.footer-social{

  display:flex;
  align-items:center;

  gap:12px;

  color:#d6d6d6;

  text-decoration:none;

  font-weight:500;

  transition:.3s;

}

.footer-social:hover{

  color:white;

  transform:translateY(-2px);

}

.footer-social i{

  font-size:1.2rem;

}

/* FOOTER ALIGN */

footer{

  text-align:center;

}

/* MOBILE SOCIALS */

@media(max-width:768px){

  .footer-socials{

    flex-direction:column;

    gap:18px;

  }

}
/* OFFICIAL SELECTION */

.official-selection{

  background:#090909;

}

.selection-grid{

  margin-top:60px;

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(240px,1fr));

  gap:30px;

}

.film-card{

  position:relative;

  overflow:hidden;

  border-radius:24px;

  aspect-ratio:9/16;

  text-decoration:none;

  background:#111;

  transition:.5s;

}

.film-card img{

  width:100%;
  height:100%;

  object-fit:cover;

  transition:.6s;

}

.film-overlay{

  position:absolute;

  inset:0;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:30px;

  background:
  linear-gradient(
    transparent,
    rgba(0,0,0,.92)
  );

  transition:.4s;

}

.film-overlay span{

  color:var(--red);

  font-size:.85rem;

  letter-spacing:2px;

  margin-bottom:10px;

  font-weight:700;

}

.film-overlay h3{

  color:white;

  font-size:2rem;

  margin-bottom:12px;

}

.film-overlay p{

  color:#d0d0d0;

  font-size:.95rem;

}

.film-card:hover{

  transform:translateY(-10px);

}

.film-card:hover img{

  transform:scale(1.08);

}

.film-card::after{

  content:"";

  position:absolute;

  inset:0;

  border:1px solid rgba(255,255,255,.08);

  border-radius:24px;

  transition:.4s;

}

.film-card:hover::after{

  border-color:
  rgba(217,28,28,.45);

}