/* LoopFest Y2K26 — shader hero banner for the design_update page.
   Ported from /new-hero/styles.css. The WebGL warp fills the banner; the text
   is plain HTML/CSS. Every selector is scoped under .shader-hero so the generic
   class names (.brand, .logo, .overlay…) can't collide with the site's own
   header/components on this page. */

@import url("fonts/poppins.css");

/* ---- Banner shell -------------------------------------------------------- */
.shader-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #0b0a08;
  aspect-ratio: 2128 / 788;       /* cinematic ratio on desktop */
  max-height: 100svh;
  font-family: Poppins, system-ui, sans-serif;
  color: #fff;
  user-select: none;
}

.shader-hero .warp {               /* WebGL warp background, full bleed */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.shader-hero .scrim {              /* keeps text legible over the bright warp */
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(125% 105% at 50% 45%, transparent 42%, rgba(0,0,0,0.42) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.05) 35%, rgba(0,0,0,0.28));
}

/* ---- Content overlay ----------------------------------------------------- */
.shader-hero .overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
  /* Titles sit a fixed percentage of the viewport in from the left (scales with
     screen width), while the hands hug the very right edge (no right padding). */
  padding: clamp(10px, 1.6vw, 48px) 0 clamp(10px, 1.6vw, 48px) 6vw;
}

/* Left-aligned title block; everything stacks here, so the date naturally sits
   under LOOPFEST. */
.shader-hero .titles {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.8vw, 18px);
  min-width: 0;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55), 0 0 3px rgba(0,0,0,0.45);
  line-height: 1;
}

.shader-hero .titles .thin { font-weight: 300; }
.shader-hero .titles b { font-weight: 700; }

/* Force white: the site's header `.brand` rule otherwise tints this dark in
   light mode, but the brand sits over the dark shader and must stay white. */
.shader-hero .brand { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 20px); color: #fff; }
.shader-hero .logo {
  width: clamp(40px, 6.5vw, 104px);
  height: clamp(40px, 6.5vw, 104px);
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.shader-hero .y2k    { font-size: clamp(2rem, 6.5vw, 8.5rem); font-weight: 700; letter-spacing: -0.01em; }
.shader-hero .y2k .thin { font-weight: 400; }

.shader-hero .slovakia {
  margin: 0;
  font-style: italic;
  font-weight: 700;
  color: #F5B400;                  /* festival yellow */
  font-size: clamp(2.6rem, 8vw, 9rem);
}
.shader-hero .loopfest {
  margin: 0;
  font-weight: 700;
  font-size: clamp(2.6rem, 8vw, 9rem);
}
.shader-hero .dates {
  margin: clamp(2px, 0.6vw, 10px) 0 0;
  font-weight: 700;
  font-size: clamp(0.9rem, 2.4vw, 2.4rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.shader-hero .hands {
  flex: 0 0 auto;
  width: clamp(150px, 30vw, 560px);
  height: auto;
  align-self: center;
  filter: drop-shadow(0 3px 16px rgba(0,0,0,0.5));
}

/* The festival tagline sits centered just below the banner. */
.shader-hero + .hero__lead { text-align: center; }

/* ---- Mobile / narrow: taller hero, bigger text, hands in the freed space -- */
@media (max-width: 760px) {
  .shader-hero {
    aspect-ratio: auto;
    height: clamp(440px, 86svh, 760px);
    max-height: none;
  }
  .shader-hero .overlay {
    align-items: flex-start;
    padding-top: clamp(28px, 9vh, 80px);
  }
  .shader-hero .titles {
    gap: clamp(10px, 3.5vw, 26px);
    z-index: 2;                     /* keep titles above the enlarged hands */
  }
  .shader-hero .y2k      { font-size: clamp(2.4rem, 13vw, 4rem); }
  .shader-hero .slovakia { font-size: clamp(3rem, 15vw, 5rem); }
  .shader-hero .loopfest { font-size: clamp(3rem, 15vw, 5rem); }
  .shader-hero .dates    { font-size: clamp(1.2rem, 5.5vw, 2rem); }
  .shader-hero .logo     { width: clamp(48px, 11vw, 80px); height: clamp(48px, 11vw, 80px); }
  /* Hands move into the open space on the right, larger, and sit a bit lower so
     they don't crowd the title block. */
  .shader-hero .hands {
    position: absolute;
    right: clamp(-24px, -4vw, 0px);
    top: 50%;
    transform: translateY(-30%);
    width: clamp(200px, 52vw, 360px);
    z-index: 1;
  }
}

/* ---- Entrance animation (pure CSS, plays once) --------------------------- */
@keyframes shaderHeroInLeft  { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes shaderHeroInRight { from { opacity: 0; transform: translateX(48px);  } to { opacity: 1; transform: none; } }

.shader-hero .titles > * { animation: shaderHeroInLeft 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.shader-hero .titles > *:nth-child(1) { animation-delay: 0.05s; }
.shader-hero .titles > *:nth-child(2) { animation-delay: 0.18s; }
.shader-hero .titles > *:nth-child(3) { animation-delay: 0.30s; }
.shader-hero .titles > *:nth-child(4) { animation-delay: 0.42s; }
.shader-hero .hands { animation: shaderHeroInRight 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.15s; }

/* The mobile hands keep their translateY offset, so animate opacity only there. */
@media (max-width: 760px) {
  @keyframes shaderHeroHandsInMobile { from { opacity: 0; } to { opacity: 1; } }
  .shader-hero .hands { animation-name: shaderHeroHandsInMobile; }
}

@media (prefers-reduced-motion: reduce) {
  .shader-hero .titles > *, .shader-hero .hands { animation: none; }
}