/* ============================================================
   THE SC CREATIONS — Coming Soon
   Mobile-first. Loaded only on the coming-soon page.
   ============================================================ */

/* Full-height split. Mobile: image band on top, content beneath.
   Desktop: two columns, both full height. */
.cs {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 30svh 1fr;
  grid-template-columns: 100%;   /* single column; never wider than the screen */
}

/* Explicit placement on BOTH axes at every size. Relying on auto-placement
   pushed the panel onto row 2 (the image claims column 2 first), which left a
   full-height gap on desktop. */
.cs__media { grid-row: 1; grid-column: 1; position: relative; overflow: hidden; }
.cs__panel { grid-row: 2; grid-column: 1; min-width: 0; }

@media (min-width: 768px) {
  /* minmax so a short window (or long copy) grows instead of clipping */
  .cs { grid-template-rows: minmax(100svh, auto); grid-template-columns: 1fr 1fr; }
  .cs__panel { grid-row: 1; grid-column: 1; }
  .cs__media { grid-row: 1; grid-column: 2; }
}
@media (min-width: 1100px) {
  .cs { grid-template-columns: 1.05fr 0.95fr; }
}

/* ---------- Media ---------- */
.cs__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  animation: csdrift 26s var(--ease-in-out) infinite alternate;
}
@keyframes csdrift {
  0%   { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.12) translate3d(0, -1.5%, 0); }
}
/* warm scrim so the panel and image read as one surface */
.cs__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(247,243,237,0.30), rgba(247,243,237,0) 45%);
}
@media (min-width: 768px) {
  .cs__media::after {
    background: linear-gradient(to right, rgba(247,243,237,0.55), rgba(247,243,237,0) 38%);
  }
}

/* ---------- Panel ---------- */
.cs__panel {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-l);
  padding: var(--space-l) var(--gutter) var(--space-m);
}
@media (min-width: 768px) {
  .cs__panel { padding-block: var(--space-xl); }
}

/* ambient light behind the panel */
.cs__light {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(55% 45% at 25% 20%, rgba(255,252,245,0.95), transparent 60%),
    radial-gradient(45% 55% at 80% 75%, rgba(219,205,185,0.45), transparent 55%);
  animation: lightdrift 22s var(--ease-in-out) infinite alternate;
}
.cs__panel > * { position: relative; z-index: 1; }

.cs__brand {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--charcoal);
}
.cs__brand small {
  display: block; margin-top: 0.55em;
  font-family: var(--font-body); font-size: 0.5rem;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--clay);
}

/* `safe center` centres when it fits (tall phones / desktop) but falls back to
   top-alignment when the content is taller than its track — otherwise a short
   phone would push the eyebrow up behind the brand/image. */
.cs__main { align-self: safe center; max-width: 34rem; min-width: 0; }

/* The panel is only ~half the viewport, so the headline must be sized against
   the COLUMN, not the screen. The global --step-5/6 (up to 160px) overflowed
   its column and got clipped by .line-mask's overflow:hidden. */
.cs__title {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(2rem, 1.15rem + 3.6vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--charcoal);
  overflow-wrap: break-word;   /* safety net: never overflow the mask */
  hyphens: auto;
}
@media (min-width: 768px) {
  /* vw is the full viewport but the column is half of it — hence the low slope */
  .cs__title { font-size: clamp(2.1rem, 0.7rem + 3.1vw, 3.6rem); }
}
@media (min-width: 1440px) {
  .cs__title { font-size: clamp(3rem, 1.4rem + 2.2vw, 4.3rem); }
}

.cs__lead { margin-top: var(--space-m); color: var(--ink-60); font-size: var(--step-0); line-height: 1.6; }

/* ---------- Notify form ---------- */
.cs__form { margin-top: var(--space-l); }
.cs__row { display: flex; flex-direction: column; gap: var(--space-s); }
@media (min-width: 480px) {
  .cs__row { flex-direction: row; align-items: stretch; }
  .cs__row .field { flex: 1 1 auto; }
  .cs__row .btn { flex: 0 0 auto; }
}
/* the shared .field has top padding for its floating label; not needed here */
.cs__form .field { padding-top: 0; }
.cs__form .field label { top: 0.25rem; font-size: var(--step-0); }
.cs__form .field input {
  font-size: var(--step-0); padding: 0.75rem 0; min-height: 48px;
}
.cs__form .field input:focus + label,
.cs__form .field input:not(:placeholder-shown) + label {
  transform: translateY(-1.35em);
}
.cs__note { margin-top: var(--space-s); font-size: var(--step--1); color: var(--ink-40); }
.cs__msg {
  margin-top: var(--space-s); font-size: var(--step--1);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  font-weight: 600; color: var(--clay);
}

/* ---------- Foot ---------- */
.cs__foot {
  align-self: end;
  display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l);
  justify-content: space-between; align-items: center;
  padding-top: var(--space-m);
  border-top: 1px solid var(--ink-12);
  font-size: var(--step--1); color: var(--ink-60);
}
.cs__links { display: flex; flex-wrap: wrap; gap: var(--space-m); }
.cs__links a {
  display: inline-flex; align-items: center; min-height: 48px; /* tap target */
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  font-weight: 600; color: var(--espresso); position: relative;
}
.cs__links a::after {
  content: ""; position: absolute; left: 0; bottom: 12px; height: 1px; width: 100%;
  background: var(--espresso); transform: scaleX(0); transform-origin: right;
  transition: transform var(--dur-med) var(--ease-out);
}
.cs__links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .cs__media img, .cs__light { animation: none; }
  .cs__media img { transform: scale(1.02); }
}