/* Homepage composition only. Public background, palette and layout chrome live in site.css. */

.home-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1120px;
  margin: auto;
  padding: 4px 10px;
  border: 1px solid #b6b7f23d;
  border-radius: 40px;
  background: #080d21b8;
  box-shadow: inset 0 1px 0 #ffffff08, 0 8px 32px #0003;
  backdrop-filter: blur(16px);
}

.home-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  color: var(--roamie-ink);
  font: 650 1.25rem var(--roamie-display);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-nav-brand img {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 0 10px #a0eeef40);
}

.home-nav-links {
  display: flex;
  gap: 2px;
  padding: 0;
  margin: 0 0 0 auto;
  list-style: none;
}

.home-nav-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 12px 10px;
  border-radius: 24px;
  color: #d2d2ed;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 550;
  white-space: nowrap;
}

.home-nav-spark {
  display: none;
  color: var(--roamie-peach);
  text-shadow: 0 0 16px #ffe6c580;
}

.home-page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 0 16px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.home-page h1, .home-page h2, .home-page h3, .home-roamies figcaption {
  font-family: var(--roamie-display);
}

.home-hero {
  display: grid;
  gap: 8px;
  align-items: center;
}

.home-hero-copy {
  min-width: 0;
  text-align: center;
}

.home-page h1 {
  margin: 0 0 16px;
  font-size: clamp(2.75rem, 8.8vw, 5.25rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.035em;
  text-transform: uppercase;
  text-wrap: balance;
  filter: drop-shadow(0 4px 18px #05071699);
}

.home-brand-heading, .home-gradient-heading {
  display: block;
}

.home-gradient-heading {
  padding-bottom: .09em;
  color: var(--roamie-violet);
  background: linear-gradient(100deg, #f6bed9 5%, #d2a8f3 38%, #9fddfa 70%, #ffe0bb 98%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-proposition {
  margin-bottom: 8px;
  color: #c8eafa;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 650;
  text-wrap: balance;
}

.home-hero-copy > p:not([class]) {
  max-width: 43ch;
  margin: 0 auto;
  color: #deddf3;
  font-size: max(1rem, 16px);
  text-shadow: 0 2px 8px #080b1b;
}

.home-status {
  width: 100%;
  max-width: 480px;
  margin: 20px auto 0;
  padding: 12px 18px;
  border: 1px solid #d9bbf52e;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 0 0, #a0eeef18, transparent 65%),
    radial-gradient(ellipse at 100% 100%, #ffe6c514, transparent 65%),
    linear-gradient(110deg, #c7aff512, #f2b1d710), #0d102de6;
  box-shadow: 0 0 24px #a0eeef0a, 0 0 36px #c7aff514;
  text-align: center;
  cursor: default;
}

.home-status p {
  margin: 0;
}

.home-status-eyebrow {
  color: #d7c9ed;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
}

.home-status-title {
  padding-top: 4px;
  color: #f8eaff;
  font: 650 clamp(1.6rem, 3vw, 2rem)/1.15 var(--roamie-display);
  letter-spacing: .04em;
  text-shadow: 0 0 16px #c7aff540;
}

.home-status-detail {
  padding-top: 4px;
  color: #deddf3;
  font-size: max(.9rem, 14px);
  line-height: 1.4;
  text-wrap: balance;
}

.home-hero-roamies {
  position: relative;
  isolation: isolate;
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%;
  max-width: 520px;
  margin: auto;
  padding: 12px 2% 8px;
}

.home-hero-roamies::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 35% 0 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, #d4a3e72e, #80d8ef12 45%, transparent 70%);
  filter: blur(12px);
}

.home-hero-roamies::after {
  content: '\2726';
  position: absolute;
  top: 14%;
  right: 10%;
  color: var(--roamie-peach);
  text-shadow: 0 0 14px #ffe6c580;
}

.home-character--cloud { --character-accent: #a9d6ff; }
.home-character--drop { --character-accent: #a0eeef; }
.home-character--pebble { --character-accent: #ffe0b0; }
.home-character--star { --character-accent: #ffb9cc; }
.home-character--moon { --character-accent: #d7afff; }

.home-hero-roamies img {
  position: relative;
  width: 24%;
  height: auto;
  margin-inline: -2%;
  filter: drop-shadow(0 12px 12px #05071699) drop-shadow(0 0 12px color-mix(in srgb, var(--character-accent) 25%, transparent));
}

.home-hero-roamies img:nth-child(even) {
  transform: translateY(-10%);
}

.home-flow {
  margin-top: 20px;
}

.home-flow > h2 {
  margin-bottom: 16px;
  font-size: 1.2rem;
  text-align: center;
  color: #deddf3;
  font-weight: 500;
}

.home-follow {
  margin: 16px 0 0;
  text-align: center;
  color: #e1c8f6;
  font: 500 1.2rem var(--roamie-display);
}

.home-follow span { margin-right: 8px; color: var(--roamie-peach); }

.home-collection {
  margin-top: 28px;
  padding: 20px 14px 14px;
  border: 1px solid #b6b7f23d;
  border-radius: var(--roamie-card-radius);
  background: linear-gradient(140deg, #11172a99, #0c0e20dd);
  box-shadow: 0 16px 48px #0003, inset 0 1px 0 #ffffff08;
  backdrop-filter: blur(14px);
}

.home-collection h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  font-weight: 650;
  text-align: center;
}

.home-collection h2::before, .home-collection h2::after {
  content: '';
  height: 1px;
  flex: 1;
  max-width: 180px;
  background: linear-gradient(90deg, transparent, #b6b7f280);
}

.home-collection h2::after { transform: rotate(180deg); }

.home-roamies {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.home-roamies li:last-child {
  grid-column: 1 / -1;
  width: calc(50% - 6px);
  justify-self: center;
}

.home-roamies figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  height: 100%;
  padding: 10px 8px 16px;
  border: 1px solid color-mix(in srgb, var(--character-accent) 28%, transparent);
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--character-accent) 17%, transparent), transparent 70%), #11162bc9;
  text-align: center;
}

.home-roamies figure::before {
  content: '';
  position: absolute;
  top: 12px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: var(--character-accent);
  clip-path: polygon(50% 0, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0 50%, 35% 35%);
  opacity: .7;
}

.home-roamies img {
  display: block;
  width: 100%;
  max-width: 180px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 12px #05071666);
}

.home-roamies figcaption {
  color: var(--roamie-ink);
  font-size: 1.35rem;
  font-weight: 550;
  overflow-wrap: anywhere;
}

.home-prototype-label {
  display: inline-block;
  max-width: 100%;
  margin-top: 4px;
  padding: 2px 6px;
  border: 1px solid #b6b7f23d;
  border-radius: 999px;
  background: #a8baff0d;
  color: var(--roamie-muted);
  font-size: max(.8rem, 12px);
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: normal;
}

.home-journey {
  padding: 44px 12px 24px;
  text-align: center;
}

.home-journey-eyebrow {
  margin: 0 0 8px;
  color: #cdcfeb;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.home-journey h2 {
  max-width: 30ch;
  margin: 0 auto 8px;
  color: var(--roamie-ink);
  font: 650 clamp(1.5rem, 3vw, 2rem)/1.25 var(--roamie-display);
  text-wrap: balance;
}

.home-journey-detail {
  margin: 0;
  color: #d5d9ee;
  font-size: .95rem;
  text-wrap: balance;
}

.home-journey-instagram {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 4px;
  color: var(--roamie-cyan);
  text-underline-offset: 4px;
}

.home-journey-instagram svg {
  flex-shrink: 0;
}

@media (min-width: 600px) {
  .home-nav { padding-inline: 20px; gap: 24px; }
  .home-nav-brand { font-size: 1.6rem; gap: 8px; }
  .home-nav-brand img { width: 44px; height: 44px; }
  .home-nav-links { margin-left: 0; gap: 8px; }
  .home-nav-links a { padding-inline: 18px; }
  .home-nav-spark { display: block; margin-left: auto; }
  .home-page { padding-top: 40px; }
  .home-roamies { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .home-roamies li:last-child { grid-column: auto; width: auto; justify-self: stretch; }
  .home-collection { padding: 20px; }
}

@media (min-width: 1000px) {
  .home-hero { grid-template-columns: 1.05fr 1fr; min-height: 370px; }
  .home-hero-copy { text-align: left; }
  .home-page h1 { font-size: clamp(3.6rem, 5.2vw, 4.5rem); }
  .home-hero-copy > p:not([class]), .home-status { margin-inline: 0; }
  .home-hero-roamies { align-self: end; margin: 0; }
  .home-hero-roamies img { width: 28%; margin-inline: -4%; }
  .home-flow, .home-collection { margin-top: 24px; }
}

@media (min-width: 520px) and (max-width: 999px) and (orientation: landscape) {
  .home-page { padding-top: 20px; }
  .home-hero { grid-template-columns: 1.2fr 1fr; gap: 16px; }
  .home-page h1 { font-size: clamp(2.2rem, 4.5vw, 3rem); }
  .home-proposition { font-size: 1.05rem; }
  .home-hero-copy > p:not([class]) { font-size: .9rem; }
  .home-status { margin-top: 16px; padding: 10px 18px; }
}

@media (hover: hover) {
  .home-nav a:hover { color: var(--roamie-cyan); }
}

@media (forced-colors: active) {
  .home-gradient-heading { background: none; -webkit-text-fill-color: currentColor; }
  .home-nav, .home-status, .home-roamies figure, .home-collection {
    border-color: CanvasText;
    box-shadow: none;
    backdrop-filter: none;
  }
  .home-hero-roamies img, .home-roamies img, .home-page h1 { filter: none; }
}