/* Styles for the section-hero layout.
   Uses design variables from styles/tokens.css.
   Scope limited to .section-hero to avoid style contamination. */

/* Navigation Header Bar */
.site-header {
  position: absolute;
  top: var(--frame-height); /* Sits below the wooden border frame */
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 1.5rem clamp(1rem, 5vw, 4rem); /* Balanced padding */
  font-family: var(--font-eyebrow);
}

/* Ornamental divider under the menu: a fading gold rule with a center
   diamond, same language as the section dividers. */
.site-header::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(100% - 3rem, 1200px);
  height: 13px;
  background:
    var(--ornament-diamond) center / 13px 13px no-repeat,
    linear-gradient(90deg, transparent, var(--gold-line) 20%, var(--gold-line) 43%, transparent 48%) center / 100% 2px no-repeat,
    linear-gradient(90deg, transparent 52%, var(--gold-line) 57%, var(--gold-line) 80%, transparent) center / 100% 2px no-repeat;
}

.header-shell {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
}

.header-logo {
  font-size: clamp(0.9rem, 0.7vw + 0.45rem, 1.15rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: #eae4d3;
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.95),
    0 1px 0px rgba(255, 255, 255, 0.15);
  text-transform: uppercase;
}

.header-logo .logo-x {
  color: var(--gold);
  margin: 0 0.5rem;
  font-weight: 400;
}

/* The two halves of the wordmark link out to each brand's site. */
.header-logo-link {
  transition: color 0.3s ease;
}

.header-logo-link:hover {
  color: var(--gold-light);
}

.header-nav {
  display: flex;
  gap: 1.5rem;
  white-space: nowrap;
}

.header-nav a {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold);
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.95),
    0 1px 0px rgba(255, 255, 255, 0.15);
  transition: color 0.3s ease;
}

.header-nav a:hover {
  color: var(--gold-light);
}

.header-cta {
  border: 2px solid var(--gold-line);
  color: var(--gold);
  padding: 0.75rem 1.6rem;
  border-radius: 2px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow:
    0 -1px 1px rgba(0, 0, 0, 0.95),
    0 1px 0px rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.header-cta:hover {
  background-color: rgba(212, 175, 55, 0.12);
  border-color: var(--gold-light);
  color: var(--gold-light);
}

/* Desktop: the menu wrapper dissolves (display: contents) so the nav and CTA
   become direct children of the shell again and lay out with the logo via
   space-between, exactly like before the mobile dropdown was added. The
   hamburger is hidden. (Mobile re-materialises .header-menu as the panel.) */
.header-menu {
  display: contents;
}

.header-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.header-toggle-box {
  display: block;
  width: 26px;
  height: 18px;
  position: relative;
}

.header-toggle-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--gold);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}

.header-toggle-bar:nth-child(1) { top: 0; }
.header-toggle-bar:nth-child(2) { top: 8px; }
.header-toggle-bar:nth-child(3) { top: 16px; }

/* Open: the bars fold into an X. */
.site-header.is-open .header-toggle-bar:nth-child(1) { top: 8px; transform: rotate(45deg); }
.site-header.is-open .header-toggle-bar:nth-child(2) { opacity: 0; }
.site-header.is-open .header-toggle-bar:nth-child(3) { top: 8px; transform: rotate(-45deg); }

.section-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  perspective: 1000px;
  padding-top: clamp(8rem, 11vw, 10rem); /* Give spacing for header menu */
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
}

.section-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 6;
  height: var(--frame-height);
  background-image: url("../assets/top_frame.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  filter: drop-shadow(0 1.4rem 1.35rem rgb(3 8 5 / 0.72));
  pointer-events: none;
}

/* Table props (transparent PNG/webp cut-outs) sit on the felt around the
   emblem. Absolute, behind the brand, non-interactive. */
.hero-prop {
  position: absolute;
  /* Above the text: the type is stamped into the felt, the props rest on top. */
  z-index: 5;
  pointer-events: none;
  user-select: none;
  /* Shared table light direction (upper-left), so props sit on the felt and
     cast to the lower-right. See --prop-shadow in tokens.css. */
  filter: var(--prop-shadow);
}

/* Chip case: upper right, rotated like the reference, clear of the top table
   border, only a little off the right edge. */
.hero-prop-box {
  top: clamp(14rem, 27vh, 23rem);
  right: clamp(-24rem, -17vw, -14rem);
  width: clamp(17rem, 39vw, 42rem);
  transform: rotate(27deg);
  transform-origin: center;
}

/* Card stack, upper left, fully on-screen and clear of the top wood border.
   (A negative left would bleed off the edge and get clipped, i.e. cut.) */
.hero-prop-cards {
  top: clamp(10rem, 17vh, 15rem);
  left: clamp(1rem, 2.5vw, 3rem);
  width: clamp(11rem, 18vw, 21rem);
  transform: rotate(-10deg);
}

.hero-prop-aces {
  top: auto;
  right: clamp(0.5rem, 4vw, 6rem);
  bottom: clamp(-2rem, -4vh, -1rem);
  width: clamp(11rem, 17vw, 19.5rem);
  transform: rotate(-9deg);
}

/* Single thrown card (solo element) that lands on the upper-left stack. */
.hero-prop-throw {
  top: clamp(8.5rem, 14vh, 12rem);
  left: clamp(4rem, 8vw, 10rem);
  width: clamp(8rem, 12vw, 13.5rem);
  transform: rotate(6deg);
}

/* Chip cluster hugging the left edge. */
.hero-prop-chips {
  left: -2rem;
  bottom: clamp(5rem, 15vh, 11rem);
  width: clamp(8rem, 15vw, 17rem);
}

.hero-prop-chipstack {
  left: clamp(3rem, 6vw, 8rem);
  bottom: clamp(-1.5rem, -3vh, -0.75rem);
  width: clamp(10rem, 15.5vw, 17.5rem);
  transform: rotate(6deg);
}

/* Velvet pouch, lower right. */
.hero-prop-bag {
  right: clamp(-2rem, -0.5vw, 0.5rem);
  bottom: clamp(6rem, 15vh, 12rem);
  width: clamp(7rem, 11vw, 13rem);
}

/* Single thrown brand card (solo element), lower-right corner over the aces,
   below the chips box. */
.hero-prop-brand {
  right: clamp(4rem, 10vw, 12rem);
  bottom: clamp(2rem, 9vh, 7rem);
  width: clamp(7rem, 10vw, 11.5rem);
  transform: rotate(-10deg);
}

/* Two dice scattered on the right. */
.hero-prop-die {
  width: clamp(1.9rem, 2.5vw, 3rem);
}

.hero-prop-die-a {
  top: clamp(11rem, 27vh, 21rem);
  right: clamp(8rem, 17vw, 21rem);
  transform: rotate(-10deg);
}

.hero-prop-die-b {
  top: clamp(15rem, 33vh, 26rem);
  right: clamp(3rem, 8vw, 10rem);
  transform: rotate(14deg);
}

/* Stage and stamped brand layout */
.hero-stage {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: clamp(2rem, 4vw, 4rem) var(--space-4) 0;
}

.hero-brand {
  position: relative;
  z-index: 2;
  /* Mobile shows the vertical logo (variant 01); desktop swaps to the wide
     landscape lockup (variant 02). Width is set per breakpoint to match. */
  width: min(17rem, 62vw);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  transform-style: preserve-3d;
}

.logo-wrap {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  transition: transform 0.3s ease;
}

/* Clean gold logo with a single soft shadow so it lifts off the felt.
   No emboss stack: the brand reads as flat foil, like the reference. */
.section-hero .casino-logo {
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 -1px 1px rgba(255, 244, 214, 0.2))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.8))
    drop-shadow(0 5px 12px rgba(0, 0, 0, 0.6));
}

/* Mobile: vertical logo only. Desktop: wide logo only. */
.casino-logo--wide {
  display: none;
}

@media (min-width: 768px) {
  .casino-logo--wide {
    display: block;
  }

  .casino-logo--tall {
    display: none;
  }

  .hero-brand {
    width: min(52.5rem, 82vw);
  }
}

@media (min-width: 1280px) {
  .hero-brand {
    width: min(67.5rem, 65vw);
  }
}

/* Two-tone emblem: the main lockup in the page gold, the accents in white. */
.section-hero .logo-primary {
  fill: var(--gold);
}

.section-hero .logo-accent {
  fill: var(--white-soft);
}

/* Bottom info bar: date, venue, co-brand, and the ticket CTA on a single line,
   separated by hairline rules. Wide so it fits without cramping; wraps only on
   small screens. */
.hero-bar {
  position: relative;
  z-index: 4;
  width: min(100% - 3rem, 72rem);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-eyebrow);
  font-size: clamp(0.85rem, 1.1vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Date and venue share the first line; the co-brand sits on its own line. */
.hero-bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2vw, 1.6rem);
}

.hero-bar-item {
  display: flex;
  align-items: center;
  gap: 0.55em;
}

.hero-cobrand {
  display: flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
}

.cobrand-x {
  color: var(--gold-dim);
}

.hero-bar-sep {
  flex: none;
  width: 2px;
  height: 1.5em;
  background: var(--gold-line);
}

.detail-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  color: var(--gold);
}

/* Ticket CTA: thin gold outline, fills faintly on hover. */
.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.9rem 2.4rem;
  border: 2px solid var(--gold-line);
  border-radius: 2px;
  color: var(--gold);
  font-family: var(--font-eyebrow);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.hero-button:hover,
.hero-button:focus-visible {
  border-color: var(--gold);
  background-color: color-mix(in srgb, var(--gold) 12%, transparent);
  color: var(--gold-light);
}

/* Scroll cue at the bottom of the hero: a label over a bouncing arrow. */
.hero-scroll {
  position: relative;
  z-index: 4;
  margin: clamp(1.5rem, 4vh, 2.75rem) auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-eyebrow);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  transition: color 0.3s ease;
}

.hero-scroll:hover,
.hero-scroll:focus-visible {
  color: var(--gold-light);
}

.hero-scroll-arrow {
  width: 1.5rem;
  height: 1.5rem;
  animation: scroll-bounce 1.6s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50% { transform: translateY(7px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll-arrow {
    animation: none;
  }
}

@media (max-width: 767px) {
  /* The header sits BELOW the wooden table edge (nothing goes above that frame),
     so it stays absolute like desktop and the wordmark is dropped: only the
     hamburger floats top-right on the felt. The brand reads from the hero logo. */
  .site-header {
    padding: 0.6rem 1rem;
  }

  /* While the panel is open, lift the header above the cinematic overlay so the
     menu stays crisp. */
  .site-header.is-open {
    z-index: 10000;
  }

  .header-shell {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    text-align: left;
    gap: 0.75rem;
  }

  .header-logo {
    display: none;
  }

  .header-toggle {
    display: block;
    flex: none;
  }

  /* The links and CTA collapse into a dropdown panel below the bar. */
  .header-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem 1rem 1.25rem;
    background-color: rgba(3, 8, 5, 0.97);
    border-top: 1px solid var(--gold-line);
    border-bottom: 1px solid var(--gold-line);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.45);
  }

  .site-header.is-open .header-menu {
    display: flex;
  }

  .header-nav {
    flex-direction: column;
    gap: 0;
  }

  .header-nav a {
    padding: 0.95rem 0.25rem;
    font-size: 1rem;
    border-bottom: 1px solid rgba(212, 175, 55, 0.14);
  }

  .header-cta {
    margin-top: 1.1rem;
    text-align: center;
  }

  /* Header sits in flow above the hero on mobile, so the hero no longer needs
     the large top padding that reserves space for an absolute header. */
  .section-hero {
    padding-top: var(--space-6);
  }

  /* Stack date and venue and drop the separator on small screens. */
  .hero-bar-row {
    flex-direction: column;
    gap: var(--space-2);
  }

  .hero-bar-sep {
    display: none;
  }

  /* The centred logo (mid) and info bar (nearly full width, lower) must stay
     clear, so on mobile the hero props only peek from the top corners and the
     ones that would sit over the copy are hidden. Dice are unaffected. */
  .hero-prop-bag,
  .hero-prop-brand,
  .hero-prop-chipstack,
  .hero-prop-throw,
  .hero-prop-aces,
  .hero-prop-chips,
  .hero-prop-die {
    display: none;
  }

  .hero-prop-cards {
    top: 1.5rem;
    left: -4.5rem;
    width: 8rem;
    transform: rotate(-14deg);
  }

  .hero-prop-box {
    top: 0.5rem;
    right: -14rem;
    width: 18rem;
    transform: rotate(30deg);
  }
}