/* ==========================================================================
   TAULA — Age Verification Gate
   Files: block-age-gate.php | block-age-gate.css
   Enqueued globally (all pages) via functions.php.

   Layout:
   - Fixed 100vw × 100vh overlay, z-index 99999 (above everything)
   - 6-frame cycling background (hard-cut, ~300ms/frame, 1.8s loop)
   - Logo: absolute top-left
   - Content: absolute centred — heading + two buttons
   ========================================================================== */

/* ── Overlay shell ───────────────────────────────────────────────────────── */
.taula-age-gate {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Fade-out state — triggered by JS on Enter click */
.taula-age-gate--leaving {
  opacity: 0;
  pointer-events: none;
}

/* ── Background image wrapper ────────────────────────────────────────────── */
.taula-age-gate__bg-wrap {
  position: absolute;
  inset: 0;
}

/* All 6 bg images stacked — each animated to be visible for exactly 1 frame */
.taula-age-gate__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  animation-duration: 1.35s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/*
  Each frame visible for 300ms out of 1800ms = 16.67% of the cycle.
  Hard cuts achieved by a near-instantaneous opacity step in the keyframe.
  Individual @keyframes per image avoids delay stacking issues.

  Frame windows:
    f1: 0–16.67%    (0–300ms)
    f2: 16.67–33.3% (300–600ms)
    f3: 33.3–50%    (600–900ms)
    f4: 50–66.67%   (900–1200ms)
    f5: 66.67–83.3% (1200–1500ms)
    f6: 83.3–100%   (1500–1800ms)
*/

@keyframes taula-age-f1 {
  0%,   16.6% { opacity: 1; }
  16.7%, 100% { opacity: 0; }
}
@keyframes taula-age-f2 {
  0%,   16.6%  { opacity: 0; }
  16.7%, 33.2% { opacity: 1; }
  33.3%, 100%  { opacity: 0; }
}
@keyframes taula-age-f3 {
  0%,   33.2%  { opacity: 0; }
  33.3%, 49.9% { opacity: 1; }
  50%,   100%  { opacity: 0; }
}
@keyframes taula-age-f4 {
  0%,   49.9%  { opacity: 0; }
  50%,   66.5% { opacity: 1; }
  66.6%, 100%  { opacity: 0; }
}
@keyframes taula-age-f5 {
  0%,   66.5%  { opacity: 0; }
  66.6%, 83.2% { opacity: 1; }
  83.3%, 100%  { opacity: 0; }
}
@keyframes taula-age-f6 {
  0%,   83.2% { opacity: 0; }
  83.3%, 100% { opacity: 1; }
}

.taula-age-gate__bg--1 { animation-name: taula-age-f1; }
.taula-age-gate__bg--2 { animation-name: taula-age-f2; }
.taula-age-gate__bg--3 { animation-name: taula-age-f3; }
.taula-age-gate__bg--4 { animation-name: taula-age-f4; }
.taula-age-gate__bg--5 { animation-name: taula-age-f5; }
.taula-age-gate__bg--6 { animation-name: taula-age-f6; }

/* Subtle dark vignette — improves text legibility over the images */
.taula-age-gate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1;
  pointer-events: none;
}

/* ── Logo — top-left ─────────────────────────────────────────────────────── */
.taula-age-gate__logo {
  position: absolute;
  top: 36px;
  left: 40px;
  max-height: 110px;
  width: auto;
  display: block;
  z-index: 2;
}

/* ── Centre content ──────────────────────────────────────────────────────── */
.taula-age-gate__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
  text-align: center;
}

/* ── Heading ─────────────────────────────────────────────────────────────── */
.taula-age-gate__heading {
  font-family: 'Staatliches', sans-serif;
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}

/* ── Button row ──────────────────────────────────────────────────────────── */
.taula-age-gate__buttons {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: stretch;
}

/* ── Button base ─────────────────────────────────────────────────────────── */
.taula-age-gate__btn {
  font-family: 'Staatliches', sans-serif;
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  padding: 14px 56px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  line-height: 1;
}

/* Leave — white bg, black text; hover inverts */
.taula-age-gate__btn--leave {
  background: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}
.taula-age-gate__btn--leave:hover {
  background: #000000;
  color: #ffffff;
}

/* Enter — black bg, white text; hover inverts */
.taula-age-gate__btn--enter {
  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;
}
.taula-age-gate__btn--enter:hover {
  background: #ffffff;
  color: #000000;
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

  .taula-age-gate__logo {
    max-height: 70px;
    top: 24px;
    left: 24px;
  }

  .taula-age-gate__center {
    gap: 28px;
  }

  .taula-age-gate__heading {
    font-size: 36px;
  }

  /* Stack vertically — column-reverse puts Enter (2nd in DOM) on top */
  .taula-age-gate__buttons {
    flex-direction: column-reverse;
    gap: 12px;
    width: 100%;
    max-width: 320px;
  }

  .taula-age-gate__btn {
    font-size: 20px;
    padding: 14px 24px;
    width: 100%;
    text-align: center;
  }
}