/* ==========================================================================
   SW.CSS — Spookies Workshop studio site
   Analog horror / found-footage transmission aesthetic.
   Complements portfolio.css (base tokens, buttons, form shell, embeds).
   All rules are scoped under body.sw-site.
   ========================================================================== */

:root {
  --red: #d63031;
}

/* --- Signal noise overlay ------------------------------------------------ */
body.sw-site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.028) 0,
    rgba(255, 255, 255, 0.028) 1px,
    transparent 1px,
    transparent 3px
  );
}

body.sw-site::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 998;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.6) 100%);
}

/* --- Header -------------------------------------------------------------- */
.sw-header {
  padding: clamp(2rem, 6vw, 4rem) var(--gutter) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.sw-logo-frame {
  border: 0;
  padding: 0;
  background: none;
}

.sw-logo-frame img {
  display: block;
  width: min(42vw, 700px);
  height: auto;
}

.sw-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.6rem;
}

.sw-nav a {
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-size: 0.68rem;
  text-decoration: none;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid transparent;
}

.sw-nav a:hover,
.sw-nav a[aria-current='page'] {
  border-bottom-color: var(--white);
}

/* --- Hero / transmission head ------------------------------------------- */
.sw-hero {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) 0;
  text-align: center;
}

.sw-stamp {
  font-size: 0.62rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--grey);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.rec-dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--red);
  animation: blink 1.1s steps(1) infinite;
}

.sw-title {
  margin: 1.4rem auto 1rem;
  font-size: clamp(2.1rem, 6vw, 3.75rem);
  line-height: 1;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  animation: sw-flicker 7s infinite;
}

.sw-tagline {
  color: var(--grey);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  max-width: 46ch;
  margin: 0 auto;
}

.sw-msg {
  margin: 1.25rem auto 0;
  max-width: 40ch;
  color: var(--grey-dim);
  font-size: 0.78rem;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}

.sw-hero-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

.sw-hero .sw-nav {
  margin-top: 2rem;
}

@keyframes sw-flicker {
  0%, 100% { opacity: 1; }
  90% { opacity: 1; }
  91% { opacity: 0.55; }
  92% { opacity: 1; }
  95% { opacity: 0.85; }
  96% { opacity: 1; }
}

/* --- Rules & sections ---------------------------------------------------- */
.sw-rule {
  border: 0;
  border-top: 1px dashed var(--grey-dim);
  margin: clamp(3rem, 7vw, 5rem) auto;
  max-width: 720px;
}

.sw-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sw-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.sw-section-head h2 {
  font-size: 1.05rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* --- Cards --------------------------------------------------------------- */
.sw-card {
  border: 1px solid var(--grey-dim);
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.25rem;
  background: linear-gradient(180deg, var(--card-top), var(--card-bottom));
}

.sw-card:hover {
  animation: sw-glitch 0.35s steps(2) infinite;
  border-color: var(--white);
}

@keyframes sw-glitch {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, 0); }
  100% { transform: translate(0, 0); }
}

.sw-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.sw-card h3 {
  font-size: 0.95rem;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}

.sw-card p {
  color: var(--grey);
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.sw-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 1rem;
  border: 1px solid var(--grey-dim);
}

.sw-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --- Links --------------------------------------------------------------- */
.sw-link {
  display: inline-block;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--track-mid);
  font-size: 0.62rem;
  border: 1px solid var(--grey-dim);
  padding: 0.4rem 0.75rem;
  margin: 0 0.6rem 0.6rem 0;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.sw-link:hover {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

/* --- Footer -------------------------------------------------------------- */
.sw-footer {
  max-width: 720px;
  margin: clamp(3rem, 7vw, 5rem) auto 0;
  padding: 2rem var(--gutter) clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--grey-dim);
  text-align: center;
}

.sw-footer .sw-stamp {
  display: block;
  margin-bottom: 1.25rem;
}

/* --- Contact form restyle (same system, different look) ------------------- */
.sw-form .form-shell {
  border: 1px dashed var(--grey-dim);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.sw-form .field label {
  color: var(--white);
}

.sw-form .field label::before {
  content: "[ ";
  color: var(--grey-dim);
}

.sw-form .field label::after {
  content: " ]";
  color: var(--grey-dim);
}

.sw-form .field input,
.sw-form .field select,
.sw-form .field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--grey-dim);
  border-radius: 0;
  padding: 0.7rem 0.1rem;
}

.sw-form .field input:focus,
.sw-form .field select:focus,
.sw-form .field textarea:focus {
  border-bottom-color: var(--white);
}

.sw-form .field input::placeholder,
.sw-form .field textarea::placeholder {
  color: var(--grey-dim);
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sw-title,
  .sw-card:hover {
    animation: none;
  }
}

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 560px) {
  .sw-section-head {
    flex-direction: column;
  }
  .sw-logo-frame img {
    width: min(86vw, 420px);
  }
}