/* Dreamscreen Lab v4 — full-bleed wallpaper hero · Cloudset $5.99 / rest $6.99 · magazine vibe */

:root {
  --ink: #140e1f;
  --ink-soft: #3a314f;
  --paper: #f4f0f8;
  --paper-deep: #ebe4f2;
  --lilac: #b8a4ef;
  --pink: #f08abb;
  --chrome-hi: #f8f9ff;
  --chrome-mid: #a8b2d4;
  --chrome-lo: #5c6588;
  --vamp: #5a1832;
  --vamp-glow: #d94a7a;
  --signal: #9b7ae8;
  --cloud: #8ec8f5;
  --radius: 0.65rem;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "DM Sans", system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

/* —— Quiet wordmark header —— */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  max-width: none;
  pointer-events: none;
}

.site-header a {
  pointer-events: auto;
}

.wordmark {
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: rgba(20, 14, 31, 0.72);
  mix-blend-mode: multiply;
}

.wordmark:hover {
  color: var(--ink);
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav a {
  text-decoration: none;
  color: rgba(20, 14, 31, 0.7);
}

.nav a:hover {
  color: var(--ink);
}

.nav-cta {
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(20, 14, 31, 0.12);
  backdrop-filter: blur(8px);
}

/* —— FULL-BLEED wallpaper field ——
   Entire hero viewport IS the wallpaper. Edge-to-edge. No floating card. */
.hero-field {
  position: relative;
  width: 100%;
  min-height: 100svh;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  border: none;
  box-shadow: none;
}

.wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 55% at 78% 72%, rgba(255, 200, 230, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse 70% 45% at 18% 78%, rgba(180, 210, 255, 0.4) 0%, transparent 50%),
    linear-gradient(
      168deg,
      #7eb8e8 0%,
      #9ec8f0 14%,
      #c8b8ef 36%,
      #e8a8c8 58%,
      #b898e0 78%,
      #8a78c0 100%
    );
}

/* Y2K haze overlay — richer, less pastel-blob */
.wp-haze {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 62% 48%, rgba(255, 255, 255, 0.28) 0%, transparent 28%),
    radial-gradient(circle at 30% 55%, rgba(255, 220, 245, 0.2) 0%, transparent 32%),
    linear-gradient(180deg, rgba(120, 170, 220, 0.15) 0%, transparent 35%, rgba(40, 20, 60, 0.25) 100%);
  pointer-events: none;
}

.wp-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    transparent 42%,
    rgba(20, 10, 40, 0.18) 62%,
    rgba(12, 6, 28, 0.55) 100%
  );
  pointer-events: none;
}

/* Chrome butterflies */
.wp-butterfly {
  position: absolute;
  z-index: 2;
  filter: drop-shadow(0 4px 12px rgba(80, 60, 140, 0.35));
  opacity: 0.92;
}

.bf-1 {
  right: 14%;
  top: 42%;
  width: clamp(56px, 10vw, 88px);
  height: auto;
  transform: rotate(12deg);
}

.bf-2 {
  left: 12%;
  top: 52%;
  width: clamp(36px, 6vw, 56px);
  height: auto;
  transform: rotate(-18deg);
  opacity: 0.75;
}

.bf-3 {
  right: 28%;
  top: 58%;
  width: clamp(28px, 4.5vw, 40px);
  height: auto;
  transform: rotate(28deg);
  opacity: 0.55;
}

/* Chrome orbs / CD gleam */
.wp-orb {
  position: absolute;
  left: 18%;
  bottom: 22%;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  z-index: 1;
  background: linear-gradient(
    135deg,
    #fff 0%,
    #d0d8f5 22%,
    #8a96c0 42%,
    #e0c8ff 62%,
    #ffb8d4 82%,
    #eef2ff 100%
  );
  box-shadow:
    inset 0 3px 8px rgba(255, 255, 255, 0.85),
    inset -2px -4px 10px rgba(100, 80, 160, 0.25),
    0 10px 28px rgba(80, 50, 140, 0.3);
  opacity: 0.88;
}

.wp-orb-sm {
  left: auto;
  right: 22%;
  bottom: 36%;
  width: 2.4rem;
  height: 2.4rem;
  opacity: 0.7;
}

.wp-cloud {
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  filter: blur(3px);
  z-index: 1;
}

.c-a {
  width: 48%;
  height: 7%;
  left: 4%;
  top: 62%;
}

.c-b {
  width: 32%;
  height: 5.5%;
  right: 8%;
  top: 68%;
  opacity: 0.55;
}

.c-c {
  width: 40%;
  height: 6%;
  left: 22%;
  top: 74%;
  opacity: 0.4;
}

.wp-glint {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8);
  z-index: 2;
}

.g-1 { top: 44%; left: 42%; }
.g-2 { top: 56%; right: 38%; width: 2px; height: 2px; }
.g-3 { top: 48%; left: 68%; width: 2.5px; height: 2.5px; opacity: 0.7; }

/* Hash rain — soft over wallpaper field ONLY (not page-wide white) */
.hash-rain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  opacity: 0.085;
  mix-blend-mode: soft-light;
  /* clip to field — never paints over paper sections below */
}

.hash-rain-track {
  display: flex;
  flex-direction: column;
  gap: 2.6rem;
  padding: 2rem 0;
  width: max-content;
  min-width: 220%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: #1a1028;
  white-space: nowrap;
  animation: hash-drift 56s linear infinite;
  transform: rotate(-7deg) translateX(-6%);
}

.hash-rain-track span {
  display: block;
  padding-left: 1rem;
}

.hash-rain-track span:nth-child(even) {
  padding-left: 5rem;
  opacity: 0.7;
}

@keyframes hash-drift {
  from { transform: rotate(-7deg) translateX(-6%) translateY(0); }
  to   { transform: rotate(-7deg) translateX(-20%) translateY(-5%); }
}

@media (prefers-reduced-motion: reduce) {
  .hash-rain-track { animation: none; }
}

/* Top third = clock / status-bar safe — empty */
.field-safe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 34%;
  z-index: 4;
  pointer-events: none;
  /* Calm wash only — no text, no motifs crowding the status zone */
  background: linear-gradient(
    180deg,
    rgba(140, 190, 235, 0.2) 0%,
    transparent 100%
  );
}

/* Text overlays LOWER HALF only */
.field-content {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding: 0 1.35rem 2.25rem;
  padding-top: 38vh; /* keep content below clock-safe zone */
  max-width: 42rem;
}

.domain-chip {
  margin: 0 0 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  color: rgba(255, 245, 255, 0.75);
  font-weight: 500;
}

.field-content h1 {
  margin: 0 0 0.7rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 14ch;
  color: #faf6ff;
  text-shadow:
    0 1px 2px rgba(10, 4, 24, 0.45),
    0 8px 28px rgba(10, 4, 24, 0.35);
}

.chrome-heart-wrap {
  display: inline-flex;
  align-items: center;
  vertical-align: -0.1em;
  margin: 0 0.06em;
}

.chrome-heart {
  display: inline-block;
  width: 1.35em;
  height: 1.18em;
  flex-shrink: 0;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.65))
    drop-shadow(0 2px 8px rgba(60, 40, 120, 0.65));
}

.lede {
  margin: 0 0 1.4rem;
  max-width: 32rem;
  font-size: 0.98rem;
  line-height: 1.55;
  color: rgba(245, 238, 255, 0.88);
  text-shadow: 0 1px 8px rgba(10, 4, 24, 0.4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: stretch;
}

.btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.12rem;
  padding: 0.75rem 1.1rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-etsy {
  color: #140e1f;
  background: linear-gradient(135deg, #fff 0%, #ffe8f4 45%, #e0d0ff 100%);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 12px 32px rgba(20, 8, 40, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.btn-ghost {
  background: rgba(20, 10, 40, 0.35);
  border-color: rgba(255, 255, 255, 0.28);
  color: #faf6ff;
  backdrop-filter: blur(8px);
}

.btn-lg {
  padding: 0.95rem 1.4rem;
  font-size: 1.02rem;
}

.btn-note {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.65;
  text-transform: uppercase;
}

/* —— Below-hero sections: quiet paper —— */
.collections,
.about,
.cta-band {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.25rem 3rem;
}

.collections {
  padding-top: 2.75rem;
}

.shelf-head {
  margin-bottom: 1.35rem;
  border-bottom: 1px solid rgba(20, 14, 31, 0.1);
  padding-bottom: 0.85rem;
}

.shelf-head h2,
.about h2,
.cta-band h2 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  letter-spacing: -0.015em;
  color: var(--ink);
}

.shelf-head p,
.about p,
.cta-band p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 36rem;
}

/* SHOP SHELF — still + mood + price + Etsy. Not a feature grid. */
.shop-shelf {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shelf-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(20, 14, 31, 0.1);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.shelf-item:hover {
  border-color: rgba(20, 14, 31, 0.28);
  box-shadow: 0 8px 24px rgba(20, 14, 31, 0.08);
}

.shelf-item:focus-visible {
  outline: 2px solid var(--lilac);
  outline-offset: 3px;
}

.shelf-still {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.still-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    transparent 30%,
    rgba(255, 255, 255, 0.22) 48%,
    transparent 62%
  );
  pointer-events: none;
}

.still-motif {
  position: absolute;
  right: 0.7rem;
  bottom: 0.65rem;
  font-size: 1.35rem;
  opacity: 0.9;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.pack-chrome .shelf-still {
  background:
    linear-gradient(128deg, #f8faff 0%, #c0c8e8 22%, #7a86b0 44%, #d8c0f0 66%, #ffb8d4 88%, #eef0ff);
}

.pack-cloudset .shelf-still {
  background:
    radial-gradient(circle at 35% 72%, rgba(255, 255, 255, 0.85) 0%, transparent 38%),
    linear-gradient(165deg, #8ec8f5, #e8c8e8 50%, #c8b8ef);
}

.pack-vamp .shelf-still {
  background:
    radial-gradient(circle at 68% 28%, rgba(217, 74, 122, 0.5), transparent 42%),
    linear-gradient(165deg, #1a0810, #5a1832 48%, #0e0508);
}

.pack-vamp .still-motif {
  color: #f8d0e0;
}

.pack-signal .shelf-still {
  background:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 10px,
      rgba(155, 122, 232, 0.2) 10px,
      rgba(155, 122, 232, 0.2) 11px
    ),
    linear-gradient(150deg, #16101f, #2e2048 42%, #5a90a844);
}

.pack-signal .still-motif {
  color: #d8c8ff;
}

.shelf-label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.75rem 0.8rem 0.9rem;
  border-top: 1px solid rgba(20, 14, 31, 0.06);
}

.shelf-label h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
}

.shelf-price {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.shelf-size {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.85;
}

.shelf-etsy {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.shelf-etsy em {
  font-style: normal;
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-left: 0.25rem;
}

/* About — editorial note, not SaaS panel */
.about-panel {
  padding: 1.35rem 0;
  border-top: 1px solid rgba(20, 14, 31, 0.1);
  border-bottom: 1px solid rgba(20, 14, 31, 0.1);
  background: transparent;
  box-shadow: none;
}

.cta-band {
  text-align: center;
  padding-bottom: 3.5rem;
}

.cta-band p {
  margin: 0 auto 1.15rem;
}

.cta-band .btn {
  align-items: center;
  margin: 0 auto;
}

.site-footer {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.35rem 1.25rem 2.5rem;
  border-top: 1px solid rgba(20, 14, 31, 0.1);
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.footer-brand {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

.site-footer p {
  margin: 0.2rem 0;
}

.footer-note {
  font-size: 0.72rem;
  opacity: 0.7;
}

@media (min-width: 640px) {
  .site-header {
    padding: 1rem 2rem;
  }

  .field-content {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    padding-bottom: 3rem;
  }

  .shop-shelf {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.1rem;
  }

  .collections,
  .about,
  .cta-band,
  .site-footer {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (min-width: 960px) {
  .field-content {
    padding-left: 4rem;
    max-width: 46rem;
  }

  .shelf-still {
    aspect-ratio: 3 / 3.6;
  }
}


/* Real Cyber Angel still as full-bleed hero */
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  z-index: 0;
  pointer-events: none;
}
.hero-field .wallpaper {
  z-index: 1;
  opacity: 0.18;
  background: transparent; /* photo is the wallpaper */
}
.hero-field .wallpaper .wp-haze,
.hero-field .wallpaper .wp-vignette {
  opacity: 0.55;
}
.hero-field .hash-rain {
  z-index: 2;
  opacity: 0.35;
}
.hero-field .field-safe {
  z-index: 3;
}
.hero-field .field-content {
  z-index: 4;
  text-shadow: 0 1px 18px rgba(20, 14, 31, 0.35), 0 0 2px rgba(255,255,255,0.4);
}
.site-header .wordmark,
.site-header .nav a {
  text-shadow: 0 1px 10px rgba(255,255,255,0.55);
}
.shelf-still {
  position: relative;
  overflow: hidden;
}
.shelf-still img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shelf-still .still-shine {
  z-index: 1;
}

.pack-strip { padding: 2rem 1.25rem 3rem; max-width: 1100px; margin: 0 auto; }
.preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 720px) {
  .preview-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
  .preview-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px) {
  .preview-grid { grid-template-columns: repeat(7, 1fr); }
}
.preview-grid figure { margin: 0; border-radius: 0.75rem; overflow: hidden; background: #1a1228; }
.preview-grid img { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; }
.preview-grid figcaption {
  font-size: 0.75rem;
  padding: 0.4rem 0.6rem;
  color: #3d3358;
  background: rgba(255,255,255,0.9);
}


.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  pointer-events: auto;
}
.brand-mark {
  flex-shrink: 0;
  filter: drop-shadow(0 1px 6px rgba(20,14,31,0.35));
}
.brand .wordmark {
  margin: 0;
}

.hero-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(18, 10, 32, 0.28) 28%,
    rgba(12, 6, 24, 0.72) 72%,
    rgba(8, 4, 18, 0.88) 100%
  );
}

.field-content {
  z-index: 5;
}
.field-content h1 {
  color: #fff;
  max-width: 16ch;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.65),
    0 10px 32px rgba(0,0,0,0.45);
}
.chrome-heart-wrap.is-sm .chrome-heart {
  width: 0.95em;
  height: 0.82em;
}
.lede {
  color: rgba(255, 250, 255, 0.92) !important;
  font-size: 0.95rem !important;
  max-width: 28rem !important;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55);
}
.domain-chip {
  color: rgba(255, 255, 255, 0.82) !important;
}
.site-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, transparent 100%);
  backdrop-filter: blur(2px);
}


.pack-chrome-relic .shelf-still { background: linear-gradient(160deg, #d8dde8, #9aa3b8 55%, #6a7388); }
.pack-cool-blue .shelf-still { background: linear-gradient(160deg, #c5e4ff, #7eb8e8 55%, #3a6a9a); }
.pack-fall .shelf-still { background: linear-gradient(160deg, #f0c9a0, #d4895a 55%, #8a4a28); }
.pack-frost .shelf-still { background: linear-gradient(160deg, #f2f6ff, #c8d4e8 55%, #8a9bb8); }
.shop-shelf {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) {
  .shop-shelf {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}


/* Soft declutter over real hero still — fewer chrome overlays */
.hero-field .wp-butterfly {
  opacity: 0.45;
  filter: drop-shadow(0 2px 8px rgba(80, 60, 140, 0.2));
}
.hero-field .wp-orb {
  opacity: 0.4;
  width: 3.5rem;
  height: 3.5rem;
}
.hero-field .wp-cloud,
.hero-field .wp-glint {
  opacity: 0.35;
}
.hero-field .wallpaper .wp-haze,
.hero-field .wallpaper .wp-vignette {
  opacity: 0.4;
}
/* Hide broken shelf imgs without reserve space issues */
.shelf-still img[src=""],
.shelf-still img:not([src]) {
  display: none;
}

/* Live polish 2026-09-21 */
.hash-rain-soft { opacity: 0.35; }
.hero-photo {
  object-fit: cover;
  object-position: center 30%;
  filter: none;
  opacity: 1;
}
.pack-teaser {
  max-width: 42rem;
  margin: 0 auto 3rem;
  padding: 0 1.25rem;
  text-align: center;
  color: #5a5268;
  font-size: 0.95rem;
  line-height: 1.5;
}
.shelf-still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}