/* ─── Fonts ──────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Univers LT Std';
  src: url('../fonts/Univers LT Std/UniversLTStd.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Univers LT Std';
  src: url('../fonts/Univers LT Std/UniversLTStd-Obl.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Univers LT Std';
  src: url('../fonts/Univers LT Std/UniversLTStd-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Univers LT Std';
  src: url('../fonts/Univers LT Std/UniversLTStd-BoldObl.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ─── Design Tokens ──────────────────────────────────────────────────────── */

:root {
  /* Colors */
  --color-bg:       #000000;
  --color-surface:  #fcfaf6; /* card / warm cream */
  --color-logo:     #f4f2ec; /* logo on dark bg */
  --color-border:   #000000;
  --color-text:     #000000;
  --color-text-inv: #ffffff;

  /* Typography — content (Univers LT Std) */
  --font-content:         'Univers LT Std', sans-serif;
  --font-size-content:    16px;
  --font-size-content-sm: 14px;
  --line-height-content:  1.2;
  --font-weight-regular:  400;
  --font-weight-bold:     700;

  /* Typography — UI / labels / button (IBM Plex Mono) */
  --font-mono:      'IBM Plex Mono', monospace;
  --font-size-ui:   12px;
  --line-height-ui: 1.3;

  /* Borders */
  --border:      1px solid var(--color-border);
  --border-thin: 0.5px solid var(--color-border);

  /* Card dimensions (from Figma: MacBook Pro 14" - Home 1) */
  --card-w: 452px;
  --card-h: 251px;

  /* Timing */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fade: 0.5s;
  --duration-expand: 0.45s;
}

/* ─── Base ───────────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-content);
  font-size: var(--font-size-content);
  line-height: var(--line-height-content);
  -webkit-font-smoothing: antialiased;
}

button {
  cursor: pointer;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
}

/* ─── Scene ──────────────────────────────────────────────────────────────── */

.scene {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ─── Card ───────────────────────────────────────────────────────────────── */

.card {
  position: relative;
  width: var(--card-w);
  height: var(--card-h);
  background-color: var(--color-surface);
  overflow: hidden;
  cursor: pointer;
}

/* Height per state — default (home, event-image) stays at --card-h */

.card[data-state="waitlist"] {
  cursor: default;
}

.card[data-state="event-image"] {
  cursor: default;
}

.card[data-state="event-text"] {
  cursor: default;
}

.card[data-state="newsletter"] {
  cursor: default;
}

/* ─── Card Faces ─────────────────────────────────────────────────────────── */

.card__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
}

/* Active face per state */
.card[data-state="home"]                 [data-face="home"],
.card[data-state="waitlist"]             [data-face="waitlist"],
.card[data-state="event-image"]          [data-face="event-image"],
.card[data-state="event-text"]           [data-face="event-text"],
.card[data-state="newsletter"]           [data-face="newsletter"],
.card[data-state="newsletter-success"]   [data-face="newsletter-success"],
.card[data-state="newsletter-error"]     [data-face="newsletter-error"] {
  opacity: 1;
  pointer-events: auto;
}

.card[data-state="newsletter-success"],
.card[data-state="newsletter-error"] {
  cursor: default;
}

/* ─── Newsletter status message ─────────────────────────────────────────── */

.newsletter-status {
  font-family: var(--font-mono);
  font-size: var(--font-size-ui);
  letter-spacing: 0.04em;
  color: var(--color-text);
  text-align: center;
  line-height: 1.6;
}

/* ─── Logo ───────────────────────────────────────────────────────────────── */

.card__logo {
  width: 156px;
  height: auto;
  display: block;
  overflow: visible;
  pointer-events: none;
  /* Own compositing layer so the filtered SVG re-rasterizes at full
     resolution instead of a stretched cached bitmap while the card
     resizes or the face opacity fades (Chrome/Safari filter blur bug). */
  transform: translateZ(0);
}

.card__logo--sm {
  width: 104px;
}

/* ─── Clickable logo (event views → back to start) ──────────────────────── */

.js-btn-logo-home {
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.2s ease;
}


/* ─── Inner wrapper (event-text face) ───────────────────────────────────── */

.card__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex: 1;
  text-align: center;
  overflow-y: auto;
}

/* ─── Event image ────────────────────────────────────────────────────────── */

[data-face="event-image"] {
  padding: 0;
}

.event__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

/* ─── Event text ─────────────────────────────────────────────────────────── */

[data-face="event-text"] .card__logo {
  width: 156px;
}

.event__text {
  font-family: var(--font-content);
  font-size: var(--font-size-content-sm);
  line-height: var(--line-height-content);
  color: var(--color-text);
  text-align: center;
}

.event__text p {
  margin-bottom: 12px;
}

.event__text p:last-child {
  margin-bottom: 0;
}

/* ─── Waitlist button ────────────────────────────────────────────────────── */

.btn-waitlist {
  font-family: var(--font-mono);
  font-size: var(--font-size-ui);
  line-height: var(--line-height-ui);
  color: var(--color-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none; 
  padding: 6px 14px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btn-waitlist:hover {
  text-decoration: underline;
}

/* ─── Newsletter (Brevo HTML embed) ─────────────────────────────────────── */

/* Minimum rules the Brevo JS needs — replaces sib-styles.css entirely */
.sib-form-message-panel              { display: none; }
.sib-hide-loader-icon                { display: none; }
.input--hidden                       { display: none; }

[data-face="newsletter"] {
  padding: 0;
  justify-content: flex-start;
  align-items: flex-start;
}

.newsletter {
  width: 100%;
  height: 100%;
}

.newsletter .sib-form {
  background-color: transparent;
  padding: 0;
  text-align: left;
  height: 100%;
}

.newsletter #sib-form-container {
  height: 100%;
}

.newsletter #sib-container {
  background-color: transparent;
  border: none;
  max-width: 100%;
  text-align: left;
  padding: 20px 20px;
  height: 100%;
}

.newsletter #sib-form {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.newsletter .sib-form-block {
  padding: 0;
}

.newsletter__fields {
  width: 100%;
}

.newsletter .sib-text-form-block p {
  font-family: var(--font-mono);
  font-size: var(--font-size-ui);
  color: var(--color-text);
  letter-spacing: 0.02em;
  text-align: center;
}

.newsletter .form__label-row {
  display: block;
}

.newsletter .form__entry {
  position: relative;
  margin-top: 6px;
}

.newsletter .entry__field {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--color-border);
  margin: 0;
}

.newsletter .input {
  display: block;
  width: 100%;
  height: 22px;
  font-family: var(--font-mono);
  font-size: var(--font-size-ui);
  line-height: 1;
  color: var(--color-text);
  background: transparent;
  border: none;
  padding: 0;
  outline: none;
  letter-spacing: 0.02em;
  -webkit-appearance: none;
  appearance: none;
}

.newsletter .input::placeholder {
  color: var(--color-text);
  opacity: 1;
  font-family: var(--font-mono);
}

.newsletter .input:focus::placeholder {
  opacity: 0.5;
}

.newsletter .sib-form-block--button {
  text-align: center;
}

.newsletter .sib-form-block__button {
  font-family: var(--font-mono);
  font-size: var(--font-size-ui);
  color: var(--color-text);
  background-color: transparent;
  border: 0px solid var(--color-border);
  border-radius: 0;
  padding: 6px 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.newsletter .sib-form-block__button:hover {
text-decoration: underline;
}

.newsletter .clickable__icon {
  display: none;
}

.newsletter .entry__error {
  position: absolute;
  top: 0;
  right: 0;
  font-family: var(--font-mono);
  font-size: var(--font-size-ui);
  line-height: 22px;
  color: #b00;
  padding: 0;
  white-space: nowrap;
  pointer-events: none;
}

.newsletter .sib-form-message-panel {
  font-family: var(--font-mono);
  font-size: 11px;
  max-width: 100%;
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 520px) {
  :root {
    --card-w: calc(100vw - 40px);
    --card-h: 210px;
  }

  .card[data-state="event-text"] {
    height: auto;
    min-height: 280px;
  }

  .card__logo {
    width: 125px;
  }

  .card__logo--sm {
    width: 83px;
  }

  [data-face="event-text"] .card__logo {
    width: 125px;
  }

  [data-face="newsletter-error"] .newsletter-status {
    font-size: 8px !important;
  }

  .newsletter .entry__error {
    font-size: 8px !important;
  }

}