/* =========================
   BASE / GLOBAL
========================= */
* { box-sizing: border-box; }

:root{
  /* Ticket sizing + positioning (responsive) */
  --ticket-w: clamp(180px, 26vw, 320px);
  --ticket-h: calc(var(--ticket-w) * 0.6875); /* 220/320 aspect ratio */
  --ticket-left: clamp(-20px, 2.5vw, 20px);
  --ticket-top: clamp(-70px, -6vw, -35px);    /* half outside */
  --ticket-rot: 8deg;

  --ticket-pop: 28px;   /* how far it “comes out” on hover */
  --ticket-pop-sm: 22px;
}

body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(
    circle at top left,
    rgba(255, 215, 100, 1) 0%,
    rgba(255, 170, 50, 1) 40%,
    #dc7814 100%
  );
  background-attachment: fixed;
  overflow: hidden;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fog-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,255,255,0.15), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,0.10), transparent 70%);
  mix-blend-mode: soft-light;
  opacity: 0.35;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgWw2X2cAAAAASUVORK5CYII=");
  opacity: 0.08;
}


/* =========================
   HERO
========================= */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle at 20% 0%, #ffdd72 0, #f5a623 30%, #f08a10 60%, #955200 100%);
  overflow: hidden;
}

.hero-top {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
}

.hero-top img {
  height: 15vh;
  width: auto;
  object-fit: contain;
}

/* Tagline swap */
.tagline-desktop { display: block; }
.tagline-mobile  { display: none; }

@media (max-width: 900px) {
  .tagline-desktop { display: none; }
  .tagline-mobile  { display: block; }
}

.headline-img { width: auto; }

.headline-img img {
  height: 80vh;
  width: auto;
  object-fit: contain;
}

/* Artist */
.artist-img {
  position: absolute;
  bottom: 0;
  left: 64%;
  transform: translateX(-50%);
  max-height: 100vh;
  width: auto;
  max-width: 90vw;

  z-index: 10;
  pointer-events: none;
  object-fit: contain;
}


/* =========================
   TICKER
========================= */
.ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ece2d5;
  color: #2f320a;
  overflow: hidden;
  z-index: 30;
}

.ticker-inner {
  display: inline-block;
  white-space: nowrap;
  padding: 18px 0;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 1.4rem;
  animation: ticker-move 28s linear infinite;
}

@keyframes ticker-move {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* =========================
   TICKET BUTTON (RESPONSIVE)
========================= */
.ticket-btn{
  position: fixed;
  left: var(--ticket-left);
  top: var(--ticket-top);

  width: var(--ticket-w);
  height: var(--ticket-h);

  background: url("img/buy-ticket.png") no-repeat center / contain;
  display: block;
  z-index: 1000;

  transform: rotate(var(--ticket-rot)) translateY(0) scale(1);
  transform-origin: 40% 40%;

  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.25));

  animation: ticket-idle 5.5s ease-in-out infinite;
  transition: transform 0.22s ease, filter 0.22s ease;
  will-change: transform, filter;
}

/* Idle wiggle + pulse */
@keyframes ticket-idle {
  0%, 40% { transform: rotate(var(--ticket-rot)) translateY(0) scale(1); }
  55%     { transform: rotate(calc(var(--ticket-rot) + 2deg)) translateY(0) scale(1.03); }
  65%     { transform: rotate(calc(var(--ticket-rot) - 1deg)) translateY(0) scale(1.02); }
  75%     { transform: rotate(calc(var(--ticket-rot) + 1deg)) translateY(0) scale(1.03); }
  100%    { transform: rotate(var(--ticket-rot)) translateY(0) scale(1); }
}

/* Hover = “straight out” */
.ticket-btn:hover{
  animation-play-state: paused;
  transform: rotate(var(--ticket-rot)) translateY(var(--ticket-pop)) scale(1.02);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.45));
}

.ticket-btn:active{
  transform: rotate(var(--ticket-rot)) translateY(calc(var(--ticket-pop) + 6px)) scale(0.98);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ticket-btn { animation: none; }
}


/* =========================
   MOBILE LAYOUT
========================= */
@media (max-width: 768px) {
  .hero-top {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .headline-img img {
    width: 100%;
    height: auto;
  }

  .headline-tagline { margin-top: 8px; }

  .tagline-desktop { display: none; }
  .tagline-mobile {
    display: block;
    width: 80%;
    height: auto;
  }

  .artist-img {
    left: 57%;
    transform: translateX(-40%);
    max-height: 90vh;
  }

  /* Ticket tweaks on smaller screens */
  :root{
    --ticket-w: clamp(170px, 52vw, 250px);
    --ticket-left: clamp(-24px, -2vw, -10px);
    --ticket-top: clamp(-65px, -10vw, -35px);
    --ticket-pop: var(--ticket-pop-sm);
  }
}

@media (max-width: 600px) {
  .headline-img { width: 100%; }
  .hero-top { flex-direction: column; }
}