.reveal-delay-1 { animation-delay: 0.2s !important; }
.reveal-delay-2 { animation-delay: 0.5s !important; }
.reveal-delay-3 { animation-delay: 0.8s !important; }
.reveal-delay-4 { animation-delay: 1.1s !important; }
.reveal-delay-5 { animation-delay: 1.4s !important; }
.reveal-delay-6 { animation-delay: 1.7s !important; }
/* ========== ANIMATION SLIDE & FADE POUR LE TITRE ========== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  animation: slideFadeIn 1.1s cubic-bezier(0.4,0,0.2,1) 0.2s forwards;
}
.reveal-on-scroll .reveal-on-scroll {
  animation-delay: 0.5s;
}
@keyframes slideFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ========== ANIMATION ROTATION PIZZA ========== */
.pizza-rotate {
  animation: pizzaSlideIn 1s ease-in-out forwards, pizzaSpin 50s linear 1.5s infinite;
  display: block;
  will-change: transform;
}

@keyframes pizzaSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pizzaSlideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ================= FONTS & VARIABLES ================= */
@font-face {
  font-family: "Arbonnie";
  src: url("./fonts/ARBONNIE.woff2") format("woff2"),
    url("./fonts/ARBONNIE.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MyriadWebPro";
  src: url("./fonts/MyriadWebPro.woff2") format("woff2"),
    url("./fonts/MyriadWebPro.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-red: #cb1719;
  --color-black: #111111;
  --color-gray: #555555;
  --color-white: #ffffff;

  --font-main: "Arbonnie";
  --font-secondary: "MyriadWebPro";
}

/* ================= RESET ================= */

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

body {
  font-family: var(--font-main);
  color: var(--color-black);
  overflow: hidden;
  background-image: url('./images/fond-texture-en-marbre-noir.png');
}

/* ================= APP ================= */

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 80px;
}

.logo {
  width: 24vw;
}

.logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* ================= HERO SECTION ================= */

.hero {
  width: 100%;

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

  /* position: relative; */
}

/* ================= HERO TEXT ================= */

.hero-text {
  max-width: 520px;
}

.hero-title {
  font-size: clamp(32px, 10vw, 4.5rem);
  font-weight: lighter;
  line-height: 1.1;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.highlight {
  color: var(--color-red);
  font-size: clamp(68px, 10vw, 9rem);
  font-weight: bold;
  text-transform: uppercase;
}

.hero-subtitle {
  font-family: var(--font-secondary);
  font-size: 30px;
  color: var(--color-gray);
  margin-bottom: 40px;
}

/* ================= WAITING INFO ================= */

.waiting {
  transform: translateY(-70px);
}

.waiting-label {
  display: inline-block;
  color: var(--color-red);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(32px, 2vw, 64px);
  margin-bottom: 8px;
}

.waiting-info {
  font-size: clamp(24px, 2vw, 32px);
  color: var(--color-gray);
  line-height: 1.2;
  display: flex;
}

.waiting-info li {
  list-style: none;
  display: flex;
  margin-right: 10px;
}

.waiting-info span {
  margin-right: 5px;
  font-weight: lighter;
}

/* ================= HERO VISUAL ================= */

/* Red background strip */
.hero-visual::before {
  content: "";
  position: absolute;
  right: 0px;
  top: 0px;
  width: 25vw;
  height: 100vh;
  background-color: var(--color-red);
  z-index: -1;
}

.hero-visual img {
  width: 45vw;
  max-width: 100%;
  /* aspect-ratio: 1 / 1; */
  border-radius: 50%;
  display: block;
  opacity: 0;
    transform: translateX(100px);
}

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

@media (max-width: 768px) {
  body {
    overflow: auto;
    position: relative;
    background-position: center;
  }
  .app {
    padding: 20px 40px;
    justify-content: center;
    gap: 40px;
  }

  .logo {
    width: 50vw;
    margin: auto;
    transform: translateY(-32px);
  }

  .hero {
    flex-direction: column;
    text-align: center;
    gap: 21px;
  }

  .hero-title {
    margin-bottom: 0;
  }

  .hero-subtitle {
    display: none;
  }

  .hero-visual::before {
    width: 100vw;
    height: 60vh;
    top: auto;
    bottom: 0;
    right: 0;
    clip-path: polygon(0 45%, 100% 0, 100% 100%, 0% 100%);
    /* transform: translateY(20vh); */
  }

  .waiting {
    transform: translateY(0);
  }

  .waiting div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .waiting-info {
    width: 100%;
    display: flex;
    justify-content: space-around;
    color: var(--color-white);
  }

  .waiting-info li {
    list-style: none;
    display: block;
  }

  .waiting-label {
    color: var(--color-white);
  }
}