/* content.css — hero, rules, bargain widget, featured quote, tiles */

/* ---------- unbox index ---------- */
body.page-index { background: #07060b; }
body.page-index main { max-width: 100%; padding: 0; }
body.page-index .trap-head { background: transparent; border-bottom: none; padding: 0.25rem clamp(1rem, 4vw, 3rem); }

/* ---------- hero viewport (first fold) ---------- */
.hero-viewport {
  position: relative;
  width: 100%;
  height: calc(100vh - 3.2rem);
  height: calc(100dvh - 3.2rem);
  min-height: 24rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #07060b;
  overflow: hidden;
}
.hero-smoke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.hero-quote-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--measure);
  min-height: 8.5rem;
  margin: 0 auto;
  padding: 0 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-quote-wrap blockquote { margin: 0; width: 100%; }
.hero-quote-wrap blockquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 3vw, 1.85rem);
  line-height: 1.35;
  color: var(--accent);
  margin: 0;
  min-height: 3.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-quote-wrap blockquote p::after {
  content: "▍";
  color: var(--accent-2);
  animation: caret-blink 1.1s steps(2) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.hero-quote-wrap figcaption {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--bone-dim);
  margin: 0.4rem 0 0;
  min-height: 1.2em;
  transition: opacity 0.5s;
}

.scroll-hint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--bone-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0.45;
  z-index: 1;
  transition: opacity 0.3s;
  animation: scroll-bob 2.8s ease-in-out infinite;
}
.scroll-hint:hover { opacity: 0.9; color: var(--bone); }
.scroll-arrow { font-size: 0.9rem; }
@keyframes scroll-bob {
  0%, 100% { transform: translate(-50%, 0); opacity: 0.35; }
  50% { transform: translate(-50%, 6px); opacity: 0.7; }
}

.gone { text-align: center; padding: clamp(1rem, 3vw, 2rem) 0 0; }
.hero-title {
  filter: url(#warp);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.8rem, 11vw, 8rem);
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 1.25rem;
  background: linear-gradient(115deg, var(--bone) 30%, var(--accent) 55%, var(--accent-2) 75%, var(--bone) 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-desc { max-width: var(--measure); margin: 0 auto 1.75rem; color: var(--bone); font-size: 1.08em; }
.gone .hero-title { background: none; color: var(--bone-dim); }
.back { font-family: var(--font-mono); }

/* ---------- rules ---------- */
.rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0;
  color: var(--line);
}
.rule-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }
.rule-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.5em; color: var(--bone-dim); }

/* ---------- bargain widget ---------- */
.bargain-box {
  width: 100%;
  max-width: 40rem;
  min-height: 13.5rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 12px;
  padding: 1.1rem clamp(1.25rem, 3vw, 1.75rem);
  background: color-mix(in srgb, var(--void-2) 70%, transparent);
  box-shadow: 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
  animation: wish-glow 4.5s ease-in-out infinite;
}
@keyframes wish-glow {
  50% { box-shadow: 0 0 32px color-mix(in srgb, var(--accent) 22%, transparent); }
}
.bargain-copy { flex: 1; min-width: 0; }
.bargain-copy p { margin: 0.4rem 0 0; }
.bargain-form { flex: 0 0 24rem; min-width: 0; }
.bargain-copy .bargain-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; margin: 0; }
.wish-form label { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; display: block; margin-bottom: 0.5rem; }
.wish-row { display: flex; gap: 0.6rem; }
.wish-row input {
  flex: 1;
  min-width: 0;
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--bone);
  font: inherit;
  padding: 0.7rem 0.9rem;
}
.wish-row input:focus-visible { border-color: var(--accent); }
.wish-row button, .copy-btn {
  background: var(--accent);
  color: var(--void);
  border: 0;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
}
.wish-row button:hover, .copy-btn:hover { background: var(--accent-2); color: var(--void); }
.wish-output {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--accent);
  min-height: 5.4rem;
  max-height: 5.4rem;
  overflow-y: auto;
}
.wish-output:empty { visibility: hidden; }

/* ---------- tiles ---------- */
.tiles {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1rem clamp(1rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}
.tiles-head {
  font: italic 400 1.05rem var(--font-display);
  color: var(--accent); margin: 0 0 2rem;
}
.tiles ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}
.tile { width: 8.5rem; aspect-ratio: 1 / 1; }
/* The doors arch upward — the center door stands tallest. */
@media (min-width: 52rem) {
  .tile:nth-child(1), .tile:nth-child(5) { transform: translateY(1.6rem); }
  .tile:nth-child(2), .tile:nth-child(4) { transform: translateY(0.55rem); }
}
.tile a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.45rem;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem;
  text-decoration: none;
  text-align: center;
  color: var(--bone);
  background: color-mix(in srgb, var(--void-2) 55%, transparent);
  transition: border-color 0.25s, transform 0.25s;
}
.tile a:hover { border-color: var(--accent); transform: translateY(-2px); }
.tile-name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; }
.tile-blurb { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tile-cta { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .scroll-hint { animation: none; opacity: 0.5; }
  .hero-viewport {
    background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(199, 125, 255, 0.08) 0%, rgba(143, 227, 208, 0.04) 40%, #07060b 80%) !important;
  }
}
@media (max-width: 720px) {
  .hero-viewport {
    height: calc(100vh - 5.2rem);
    height: calc(100dvh - 5.2rem);
    min-height: 20rem;
  }
}