/* =========================================================
   Valentine Tide — styles
   Goth / punk surf apparel. Dark, high-contrast, minimal.
   ---------------------------------------------------------
   Phase 1: foundation — brand tokens, reset, typography base.
   Visual sections are styled in later phases.
   ========================================================= */

/* ---------- Brand tokens ---------- */
:root {
  /* Three brand colors — tweak here, everything follows. */
  --bone: #f5f0e8;       /* bone white — primary text / logo on dark */
  --blood: #8b0000;      /* blood red — accent, the word TIDE, buttons */
  --near-black: #161616; /* near black — background base */

  /* Derived / utility tones */
  --bone-dim: rgba(245, 240, 232, 0.66); /* muted body copy */
  --bone-faint: rgba(245, 240, 232, 0.12); /* hairlines, borders */
  --blood-bright: #b30000; /* hover state for blood-red elements */

  /* Type families */
  --font-display: "Pirata One", "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout */
  --content-max: 64rem;
  --gutter: 1.5rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--near-black);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--bone);
  text-decoration: none;
}

/* ---------- Typography base ---------- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0;
}

p {
  margin: 0;
}

/* ---------- Accessibility helpers ---------- */
:focus-visible {
  outline: 2px solid var(--blood-bright);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   HERO  (Phase 2)
   Mobile-first. Full-viewport, centered, generous negative space.
   ========================================================= */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh; /* svh avoids mobile URL-bar jump; falls back below */
  min-height: 100vh;
  padding: clamp(2rem, 8vh, 6rem) var(--gutter);
  text-align: center;
}

.hero__inner {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ---------- Wordmark ---------- */
.wordmark {
  margin: 0 auto;
  /* Fluid sizing: scales with the viewport, capped on large screens. */
  width: min(90vw, 40rem);
}

.wordmark__img {
  width: 100%;
  height: auto;
}

/* Styled text fallback — hidden until the image fails to load. */
.wordmark__text {
  display: none;
}

.wordmark--fallback .wordmark__img {
  display: none;
}

.wordmark--fallback .wordmark__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.25em;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 14vw, 7rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.wordmark__valentine {
  color: var(--bone);
}

.wordmark__tide {
  color: var(--blood);
}

/* ---------- Tagline + drop line ---------- */
.hero__tagline {
  margin-top: clamp(1rem, 4vw, 1.75rem);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 5vw, 1.9rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  /* letter-spacing adds trailing space; nudge back to stay optically centered */
  text-indent: 0.42em;
  color: var(--bone);
}

.hero__drop {
  margin-top: clamp(1.25rem, 5vw, 2rem);
  font-family: var(--font-body);
  font-size: clamp(0.7rem, 3.4vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

/* ---------- Larger screens ---------- */
@media (min-width: 48rem) {
  .wordmark {
    width: min(80vw, 46rem);
  }
}

/* =========================================================
   EMAIL CAPTURE  (Phase 3)
   ========================================================= */
.signup {
  padding: clamp(3rem, 12vw, 6rem) var(--gutter);
  text-align: center;
}

.signup__inner {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
}

.signup__heading {
  font-size: clamp(2rem, 9vw, 3rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--bone);
}

.signup__sub {
  margin-top: 0.75rem;
  font-size: clamp(0.9rem, 3.6vw, 1rem);
  color: var(--bone-dim);
}

/* ---------- Form ---------- */
.signup__form {
  margin-top: clamp(1.5rem, 6vw, 2.25rem);
}

/* Mobile-first: stacked. Goes inline on wider screens. */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.field__input {
  flex: 1 1 auto;
  width: 100%;
  padding: 0.95rem 1rem;
  background-color: transparent;
  border: 1px solid var(--bone-faint);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1rem;
  /* sharp, no rounded corners — per brand */
  border-radius: 0;
  transition: border-color 0.18s ease;
}

.field__input::placeholder {
  color: rgba(245, 240, 232, 0.5);
}

.field__input:hover {
  border-color: rgba(245, 240, 232, 0.32);
}

.field__input:focus {
  outline: none;
  border-color: var(--blood-bright);
}

/* Native invalid state after a failed submit */
.field__input[aria-invalid="true"] {
  border-color: var(--blood-bright);
}

/* ---------- Button ---------- */
.btn {
  display: inline-block;
  padding: 0.95rem 1.5rem;
  background-color: var(--blood);
  border: 1px solid var(--blood);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease,
    opacity 0.18s ease;
}

.btn:hover {
  background-color: var(--blood-bright);
  border-color: var(--blood-bright);
}

.btn:disabled {
  opacity: 0.55;
  cursor: progress;
}

/* ---------- Status message ---------- */
.form-status {
  min-height: 1.5rem; /* reserve space so layout doesn't jump */
  margin-top: 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.form-status[data-state="error"] {
  color: #e66; /* legible warm red on near-black */
}

.form-status[data-state="pending"] {
  color: var(--bone-dim);
}

.form-status[data-state="success"] {
  color: var(--bone);
  font-size: 1rem;
}

/* On success, retire the field and let the confirmation stand alone */
.signup__form.is-done .field {
  display: none;
}

/* ---------- Larger screens: inline field + button ---------- */
@media (min-width: 30rem) {
  .field {
    flex-direction: row;
  }

  .btn {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* =========================================================
   BRAND STORY  (Phase 4)
   ========================================================= */
.story {
  padding: clamp(3rem, 12vw, 6rem) var(--gutter);
  border-top: 1px solid var(--bone-faint);
}

.story__inner {
  max-width: 38rem;
  margin: 0 auto;
  text-align: center;
}

.story__heading {
  font-size: clamp(1.75rem, 8vw, 2.75rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bone);
}

.story__body {
  margin-top: clamp(1rem, 4vw, 1.5rem);
  font-size: clamp(0.95rem, 3.8vw, 1.0625rem);
  line-height: 1.75;
  color: var(--bone-dim);
}

/* =========================================================
   SOCIAL  (Phase 4)
   ========================================================= */
.social {
  padding: clamp(2.5rem, 9vw, 4rem) var(--gutter) 0;
  text-align: center;
}

.social__list {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--bone);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.18s ease;
}

.social__link:hover {
  color: var(--blood-bright);
}

.social__icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* =========================================================
   FOOTER  (Phase 4)
   ========================================================= */
.footer {
  padding: clamp(2.5rem, 9vw, 4rem) var(--gutter) clamp(2rem, 7vw, 3rem);
  text-align: center;
}

.footer__home {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color 0.18s ease;
}

.footer__home:hover {
  color: var(--bone);
}

.footer__wordmark {
  width: min(60vw, 14rem);
  height: auto;
  margin: clamp(1.5rem, 6vw, 2.25rem) auto;
  opacity: 0.85;
}

.footer__copy {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgba(245, 240, 232, 0.5);
}

/* =========================================================
   POLISH  (Phase 5)
   Background texture, entrance motion, skip link, motion-safety.
   ========================================================= */

/* ---------- Drifting background texture ---------- */
/* Fixed, very faint tile that slowly drifts behind everything. */
body::before {
  content: "";
  position: fixed;
  inset: -10%; /* overscan so the drift never reveals an edge */
  z-index: -1;
  background-image: url("assets/tile.png");
  background-repeat: repeat;
  background-size: 420px;
  opacity: 0.05;
  pointer-events: none;
  will-change: transform;
  animation: drift 90s linear infinite alternate;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-60px, -40px, 0);
  }
}

/* ---------- Entrance fade-in ---------- */
/* Hero content rises gently; later sections fade as a group. */
.hero__inner {
  animation: rise-in 1s ease-out both;
}

.signup__inner,
.story__inner,
.social__list,
.footer {
  animation: fade-in 1s ease-out both;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 10;
  padding: 0.6rem 1rem;
  background-color: var(--blood);
  color: var(--bone);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: transform 0.18s ease;
}

.skip-link:focus {
  transform: translate(-50%, 0.5rem);
  outline: 2px solid var(--bone);
  outline-offset: 2px;
}

/* ---------- Respect reduced-motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}