/**
 * Splash landing — Festival Culture Bar-Bars 2026
 * Scoped to body.splash-landing / .stage
 */

@font-face {
  font-family: "Mostra Nuova";
  src:
    url("../fonts/mostra-nuova.woff2") format("woff2"),
    url("../fonts/mostra-nuova.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body.splash-landing {
  --font-mostra: "Mostra Nuova", "Trebuchet MS", "Arial Narrow", sans-serif;
  --strip-w: 6.5%;
  --strip-inset: 2.1%;
  --frame-gap: 2.2%;
  --frame-border: 2px solid #111;

  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #1a1a1a;
}

html:has(body.splash-landing) {
  height: 100%;
  overflow: hidden;
}

body.splash-landing * {
  box-sizing: border-box;
}

body.splash-landing .stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  /* Dégradé recopié depuis frontpage-fond.webp */
  background: linear-gradient(
    180deg,
    #fffffd 0%,
    #fefef8 3%,
    #fdfdef 6%,
    #fbfae4 10%,
    #fcf8d7 15%,
    #f9edc8 20%,
    #f7e2be 22%,
    #f6dab6 25%,
    #f7c5a6 29%,
    #f1b295 34%,
    #f2a98d 37%,
    #f09e83 39%,
    #ef947a 42%,
    #ef836c 46%,
    #ee765f 50%,
    #ee6d5b 51%,
    #ec6452 54%,
    #eb5040 59%,
    #e7473b 61%,
    #dd4d42 64%,
    #d6514c 66%,
    #c95556 68%,
    #b75d65 73%,
    #af6276 76%,
    #a56777 78%,
    #9a6b7f 81%,
    #917089 83%,
    #867491 86%,
    #7e789c 88%,
    #737ca2 90%,
    #6a80ad 93%,
    #6184b5 95%,
    #558abf 98%,
    #4f8cc3 100%
  );
  overflow: hidden;
}

body.splash-landing .title {
  position: absolute;
  top: 1.5%;
  left: 50%;
  transform: translateX(-50%);
  width: min(52vw, 800px);
  height: auto;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
}

body.splash-landing .waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 38%;
  z-index: 1;
  pointer-events: none;
}

body.splash-landing .waves svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body.splash-landing .waves ellipse {
  transform-box: view-box;
  transform-origin: 800px 420px;
  animation: splash-wave-ripple 4.8s ease-out infinite;
}

body.splash-landing .waves ellipse:nth-child(1) { animation-delay: 2.45s; }
body.splash-landing .waves ellipse:nth-child(2) { animation-delay: 2.1s; }
body.splash-landing .waves ellipse:nth-child(3) { animation-delay: 1.75s; }
body.splash-landing .waves ellipse:nth-child(4) { animation-delay: 1.4s; }
body.splash-landing .waves ellipse:nth-child(5) { animation-delay: 1.05s; }
body.splash-landing .waves ellipse:nth-child(6) { animation-delay: 0.7s; }
body.splash-landing .waves ellipse:nth-child(7) { animation-delay: 0.35s; }
body.splash-landing .waves ellipse:nth-child(8) { animation-delay: 0s; }

@keyframes splash-wave-ripple {
  0% {
    transform: scale(0.72);
    stroke-opacity: 0;
    stroke-width: 1.4;
  }
  18% {
    stroke-opacity: 0.95;
  }
  55% {
    stroke-opacity: 0.55;
  }
  100% {
    transform: scale(1.08);
    stroke-opacity: 0;
    stroke-width: 2.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.splash-landing .waves ellipse {
    animation: none;
    stroke-opacity: 0.85;
  }
}

body.splash-landing .date {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  transform: translateX(-50%);
  width: min(34vw, 520px);
  height: auto;
  z-index: 5;
  pointer-events: none;
  border: 2.5px solid #111;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  background: #fff;
}

body.splash-landing .strip {
  position: absolute;
  top: 7.5%;
  bottom: 4%;
  width: var(--strip-w);
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--frame-gap);
}

body.splash-landing .strip-left {
  left: var(--strip-inset);
}

body.splash-landing .strip-right {
  right: var(--strip-inset);
}

body.splash-landing .frame {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  max-height: calc((100% - 3 * var(--frame-gap)) / 4);
  border: var(--frame-border);
  background: #0a0a0a;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

body.splash-landing .frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #111;
}

/* ——— Compte à rebours flip-clock ——— */
body.splash-landing .countdown {
  --cd-card: #2a1520;
  --cd-card-top: #341a28;
  --cd-card-bot: #221018;
  --cd-num: #ffe566;
  --cd-num-dim: #f0b83a;
  --cd-label: #f3e6c8;
  --cd-hinge: #1a0c12;
  --cd-gap: clamp(0.3rem, 0.85vw, 0.7rem);

  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.55rem, 1.4vw, 1rem);
  font-family: var(--font-mostra);
  filter: drop-shadow(0 8px 20px rgba(40, 10, 20, 0.4));
  animation: splash-countdown-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.splash-landing .cd-heading {
  margin: 0;
  font-family: var(--font-mostra);
  font-weight: 700;
  font-size: clamp(0.72rem, 1.6vw, 1.15rem);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: #fff8e6;
  text-shadow:
    0 1px 0 rgba(80, 20, 30, 0.35),
    0 2px 8px rgba(40, 10, 20, 0.35);
  white-space: nowrap;
}

body.splash-landing .cd-row {
  display: flex;
  gap: var(--cd-gap);
  align-items: flex-start;
  justify-content: center;
}

@keyframes splash-countdown-in {
  from {
    opacity: 0;
    transform: translate(-50%, -42%) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

body.splash-landing .cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55em;
}

body.splash-landing .cd-card {
  position: relative;
  width: clamp(2.6rem, 5vw, 4.4rem);
  height: clamp(3.5rem, 7vw, 5.8rem);
  border-radius: 0.45em;
  background: linear-gradient(180deg, var(--cd-card-top) 49.5%, var(--cd-hinge) 49.5%, var(--cd-hinge) 50.5%, var(--cd-card-bot) 50.5%);
  box-shadow:
    0 6px 0 #14080e,
    0 10px 22px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 220, 160, 0.08);
  overflow: hidden;
  isolation: isolate;
}

body.splash-landing .cd-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: rgba(0, 0, 0, 0.55);
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 1px 0 rgba(255, 200, 120, 0.06);
}

body.splash-landing .cd-card::after {
  content: "";
  position: absolute;
  left: -0.28em;
  right: -0.28em;
  top: 50%;
  height: 0.55em;
  margin-top: -0.275em;
  background:
    radial-gradient(circle at left center, var(--cd-hinge) 0.28em, transparent 0.29em),
    radial-gradient(circle at right center, var(--cd-hinge) 0.28em, transparent 0.29em);
  z-index: 4;
  pointer-events: none;
}

body.splash-landing .cd-digits {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mostra);
  font-size: clamp(1.35rem, 3.5vw, 2.9rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--cd-num);
  text-shadow: 0 2px 0 rgba(120, 40, 20, 0.35);
  background: linear-gradient(180deg, var(--cd-num) 46%, var(--cd-num-dim) 54%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 1;
}

body.splash-landing .cd-digits.is-flip {
  animation: splash-digit-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes splash-digit-pop {
  0% {
    transform: translateY(-8%) scaleY(0.88);
    filter: brightness(1.25);
  }
  100% {
    transform: translateY(0) scaleY(1);
    filter: brightness(1);
  }
}

body.splash-landing .cd-label {
  font-family: var(--font-mostra);
  font-size: clamp(0.45rem, 0.8vw, 0.62rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  text-transform: uppercase;
  color: var(--cd-label);
  text-shadow: 0 1px 2px rgba(60, 20, 30, 0.35);
  white-space: nowrap;
}

/* Admin bar: keep splash full-viewport below it */
body.splash-landing.admin-bar .stage {
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
  body.splash-landing.admin-bar .stage {
    height: calc(100vh - 46px);
    height: calc(100dvh - 46px);
  }
}

@media (max-aspect-ratio: 4/3) {
  body.splash-landing .title {
    width: min(70vw, 800px);
    top: 2%;
  }

  body.splash-landing .strip {
    width: 10%;
    top: 14%;
  }

  body.splash-landing .date {
    width: min(55vw, 520px);
    bottom: 2.5%;
  }

  body.splash-landing .countdown {
    top: 54%;
  }
}

body.splash-landing .splash-click-hint {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  font-family: var(--font-mostra);
  font-size: clamp(0.55rem, 1.2vw, 0.72rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: splash-fade-in 0.6s ease-out 0.5s both;
}

@keyframes splash-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 640px) {
  body.splash-landing .strip {
    width: 20%;
    --strip-inset: 1.2%;
  }

  body.splash-landing .title {
    width: 78vw;
  }

  body.splash-landing .splash-click-hint {
    bottom: 3.5rem;
  }

  body.splash-landing .date {
    width: 70vw;
  }

  body.splash-landing .countdown {
    --cd-gap: 0.35rem;
    top: 55%;
    scale: 1;
  }

  body.splash-landing .cd-label {
    letter-spacing: 0.12em;
    text-indent: 0.12em;
  }
}