/* Ghostlovecake optional integrations: TikTok recent posts and Shopify merch.
   Uses the tokens from styles.v2.css on the main page. Frame rules are scoped to .glc-frame. */

/* ---------- Main page: TikTok recent posts ---------- */

.recent {
  position: relative;
  padding: clamp(72px, 9vw, 130px) var(--gutter) clamp(72px, 9vw, 120px);
  background:
    radial-gradient(55% 45% at 80% 30%, rgba(64, 196, 186, 0.1), transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
}
.recent > .section-head { max-width: var(--max); }

.recent-panel {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(143, 227, 214, 0.14), transparent 60%),
    linear-gradient(150deg, rgba(22, 34, 74, 0.85), rgba(10, 15, 31, 0.7));
  box-shadow: 0 0 0 1px var(--line);
}
.recent-intro { padding: clamp(22px, 3vw, 32px); }
.recent-intro .replay-actions { margin-top: 14px; }
.recent-status {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.95rem;
}
.recent-status:empty { display: none; }
[data-state="failed"] .recent-status { color: var(--cream); }

/* The iframe area. Space is reserved while loading so the page doesn't jump,
   then the wrapper reports its real height and the reservation is dropped. */
.embed-stage {
  position: relative;
  min-height: 600px;
  padding: 0 clamp(0px, 2vw, 20px) clamp(12px, 2vw, 20px);
}
.embed-stage[hidden],
.recent-panel[hidden],
.merch[hidden] { display: none !important; }
.embed-stage.is-sized { min-height: 0; }
.embed-stage--shop { min-height: 420px; }
.embed-stage iframe {
  display: block;
  width: 100%;
  height: 600px;
  border: 0;
  background: transparent;
  color-scheme: dark;
  transition: opacity 0.3s var(--ease);
}
.embed-stage--shop iframe { height: 420px; }
.embed-stage[aria-busy="true"] iframe { opacity: 0; }
.embed-stage[aria-busy="true"]::before {
  content: "";
  position: absolute;
  inset: 0 clamp(0px, 2vw, 20px) clamp(12px, 2vw, 20px);
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, rgba(244, 238, 228, 0.03) 30%, rgba(143, 227, 214, 0.09) 50%, rgba(244, 238, 228, 0.03) 70%);
  background-size: 300% 100%;
  animation: glc-embed-wait 1.6s linear infinite;
}
@keyframes glc-embed-wait {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@media (max-width: 479px) {
  .embed-stage { min-height: 640px; }
  .embed-stage--shop { min-height: 420px; }
  .embed-stage iframe { height: 640px; }
}
/* At 320 to 400px wide, give TikTok's card (about 288px minimum) the full width. */
@media (max-width: 400px) {
  .recent-panel {
    margin-inline: calc(8px - var(--gutter));
    border-radius: var(--radius-sm);
  }
  .embed-stage { padding-inline: 0; }
}

/* ---------- Main page: merch (hidden unless configured) ---------- */

.merch {
  position: relative;
  padding: clamp(64px, 8vw, 110px) var(--gutter);
  background: linear-gradient(180deg, var(--night-2) 0%, var(--night) 100%);
}
.merch-body { max-width: var(--max); margin-inline: auto; }
.merch-body > .replay-actions { margin-top: 0; }
.merch-panel { margin-top: 28px; }
.merch .btn .arrow { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) {
  .embed-stage[aria-busy="true"]::before { animation: none; }
  .embed-stage iframe { transition: none; }
}

/* ---------- Inside the wrapper frames (embeds/tiktok/, embeds/shop/) ---------- */

@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.glc-frame {
  margin: 0;
  background: transparent;
  color: #f4eee4;
  font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.glc-frame *,
.glc-frame *::before,
.glc-frame *::after { box-sizing: border-box; }
.glc-frame-root { width: 100%; }
.glc-frame a { color: #8fe3d6; }
.glc-frame .visuallyhidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* TikTok: the official blockquote, before and after TikTok replaces it */
.glc-frame--tiktok .tiktok-embed {
  width: 100%;
  max-width: 720px;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
}
.glc-frame--tiktok .tiktok-embed section { padding: 16px 4px; }
.glc-frame--tiktok iframe { display: block; max-width: 100%; border: 0; }

/* Shopify Buy Button, rendered without its own iframes because this page is already isolated */
.glc-frame--shop .glc-frame-root { padding: 4px 2px 8px; }
.glc-frame--shop .shopify-buy__collection-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 20px;
}
.glc-frame--shop .shopify-buy__product {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 14px;
  border-radius: 14px;
  background: rgba(10, 15, 31, 0.55);
  box-shadow: 0 0 0 1px rgba(244, 238, 228, 0.14);
}
.glc-frame--shop .shopify-buy__product-img-wrapper { margin-bottom: 4px; }
.glc-frame--shop .shopify-buy__product img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: #0e1630;
}
.glc-frame--shop .shopify-buy__product__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  color: #f4eee4;
}
.glc-frame--shop .shopify-buy__product__price,
.glc-frame--shop .shopify-buy__product__unit-price { color: #c3cad8; font-size: 0.95rem; }
.glc-frame--shop .shopify-buy__product__compare-price { color: #929db4; text-decoration: line-through; margin-right: 6px; }
.glc-frame--shop .shopify-buy__option-select { margin-top: 4px; }
.glc-frame--shop .shopify-buy__option-select__label { display: block; font-size: 0.85rem; color: #c3cad8; }
.glc-frame--shop .shopify-buy__option-select__select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(244, 238, 228, 0.3);
  border-radius: 10px;
  background: #0e1630;
  color: #f4eee4;
  font: inherit;
}
.glc-frame--shop .shopify-buy__select-icon { display: none; }
.glc-frame--shop .shopify-buy__btn-wrapper { margin-top: auto; padding-top: 6px; }
.glc-frame--shop .shopify-buy__btn,
.glc-frame--shop .shopify-buy__collection-pagination-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #8fe3d6;
  color: #0a0f1f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.glc-frame--shop .shopify-buy__btn:hover { background: #b6f0e7; }
.glc-frame--shop .shopify-buy__btn:focus-visible,
.glc-frame--shop .shopify-buy__collection-pagination-button:focus-visible {
  outline: 3px solid #f4eee4;
  outline-offset: 3px;
}
.glc-frame--shop .shopify-buy__btn-disabled,
.glc-frame--shop .shopify-buy__btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.glc-frame--shop .shopify-buy__collection-pagination-button {
  width: auto;
  margin: 24px auto 0;
  background: transparent;
  border-color: rgba(244, 238, 228, 0.3);
  color: #f4eee4;
}
.glc-frame--shop .shopify-buy__collection-pagination-button:not(.is-active) { display: none; }
/* Buttons only open the store or checkout in a new tab, so the cart UI is never used here. */
.glc-frame--shop .shopify-buy__cart-wrapper,
.glc-frame--shop .shopify-buy__cart-toggle-wrapper,
.glc-frame--shop .shopify-buy__cart-toggle,
.glc-frame--shop .shopify-buy__modal-overlay,
.glc-frame--shop .shopify-buy__collection__title { display: none !important; }