:root {
  --press-light: #f4f3f0;
  --press-dark: #0c0c0a;
  --woh-btn-height: 60px;
  --press-modal-duration: 1.15s;
  --press-modal-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --press-modal-ease-out: cubic-bezier(0.33, 1, 0.32, 1);
}

html,
body {
  margin: 0;
  background: var(--press-light);
}

html.press-transition-active,
html.press-transition-active body {
  overflow: hidden;
}

#intro-v01-enter-wrap {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Press kit slides up from the bottom as a full-screen modal */
.press-kit-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  flex-direction: column;
  background: var(--press-light);
  transform: translate3d(0, 100%, 0);
  opacity: 1;
  transition:
    transform var(--press-modal-duration) var(--press-modal-ease),
    visibility 0s linear var(--press-modal-duration);
  will-change: transform;
  visibility: hidden;
  pointer-events: none;
}

.press-kit-modal.is-open {
  transform: translate3d(0, 0, 0);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform var(--press-modal-duration) var(--press-modal-ease),
    visibility 0s linear 0s;
}

.press-kit-modal.is-closing {
  transform: translate3d(0, 100%, 0);
  visibility: visible;
  pointer-events: none;
  transition:
    transform var(--press-modal-duration) var(--press-modal-ease-out),
    visibility 0s linear var(--press-modal-duration);
}

#press-kit-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--press-light);
}

/* Close — top-right on desktop (Youtube slot); bottom-center on mobile */
.press-kit-close {
  position: absolute;
  top: 40px;
  right: 40px;
  bottom: auto;
  left: auto;
  z-index: 2;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px 24px;
  height: var(--woh-btn-height);
  min-width: 127px;
  border: none;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #0c0c0a;
  font-family: Poppins, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
  opacity: 1;
  transition:
    background-color 0.5s ease,
    color 0.5s ease,
    opacity 0.35s ease;
}

.press-kit-close:hover,
.press-kit-close:focus-visible {
  background: rgba(12, 12, 10, 0.4);
  color: #f4f3f0;
  outline: none;
}

.press-kit-modal.is-closing .press-kit-close {
  opacity: 0;
  pointer-events: none;
}

html.press-kit-hold-dark main,
html.press-kit-hold-dark main > div[style*="background"] {
  background-color: var(--press-dark) !important;
  transition: background-color 0.5s ease !important;
}

/* While hover is suppressed after close, keep intro light even if React lags */
html.press-kit-suppress-hover:not(.press-kit-hold-dark) main,
html.press-kit-suppress-hover:not(.press-kit-hold-dark) main > div[style*="background"] {
  background-color: var(--press-light) !important;
  transition: background-color 0.5s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .press-kit-modal,
  .press-kit-modal.is-open,
  .press-kit-modal.is-closing {
    transition: none;
  }
}

@media (max-width: 900px) {
  /* Same vertical rhythm as .press-share (bottom: 24px) */
  .press-kit-close {
    top: auto;
    right: auto;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid rgba(12, 12, 10, 0.1);
    background: rgba(12, 12, 10, 0.4);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: #f4f3f0;
  }

  .press-kit-close:hover,
  .press-kit-close:focus-visible {
    background: rgba(12, 12, 10, 0.55);
    color: #f4f3f0;
  }
}