/* ==========================================================================
   OnlyCopy landing page - TASK-0162 + TASK-0162a (2026-09-27).
   Loaded ONLY by Custom/MouldshopOnlyCopyLanding.cshtml, not by MouldshopHead.cshtml.
   Everything is scoped under .ms-oc.

   A port of onlycopy.co (remikujawski/OC@main c04ecb1, src/pages/index.astro + global.css).
   Tailwind utilities there are written out here as plain rules; the values are OC's
   (sm = Tailwind's 640px step).

   COLOUR (TASK-0162a): no orange. One Mouldshop blue -> navy gradient behind the whole page
   body, the info stripe's recipe (145deg, blue to navy) from existing tokens only:
   --ms-blue, --ms-navy, --ms-white (mouldshop.css :root). Every mark on it is white.
   One gradient for all sections, not one per section, so there is no seam between them.

   Type: Humane Black (900) for the cycling text only, OC's own file, this page only.
   Everything else takes the site's font.
   ========================================================================== */

@font-face {
  font-family: 'Humane';
  src: url('fonts/humane-black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.ms-oc {
  --ms-oc-ink: var(--ms-white);
  --ms-oc-display: 'Humane', 'Arial Narrow', sans-serif;
  background-image: linear-gradient(145deg, var(--ms-blue) 0%, var(--ms-navy) 100%);
  color: var(--ms-oc-ink);
}

/* ── 1-2. HERO BAND ───────────────────────────────────────────────────────────
   OC: h-[50dvh]. Here 50svh (TASK-0162): the small viewport, so the band does not
   change height when a phone's browser bar hides. min 320px so a landscape phone
   still has room for the text. */
.ms-oc .ms-oc-hero {
  display: flex;
  flex-direction: column;
  height: 50svh;
  min-height: 320px;
}

.ms-oc .ms-oc-hero-head {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-bottom: 1px solid currentColor;  /* OC: border-black on orange; white here */
}

.ms-oc .ms-oc-logo {
  display: block;
  width: auto;
  height: 32px;
}

/* The box the fit maths measures (text-cycle.tsx: absolute inset-0 in a relative flex-1). */
.ms-oc .ms-oc-hero-text {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.ms-oc .ms-oc-cycle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* NOT SELECTABLE (operator, 2026-09-28): the animated phrase is a graphic, not copyable text.
     The h1 still carries the same words for assistive tech. */
  -webkit-user-select: none;
  user-select: none;
}

/* font-size is set inline by mouldshop-oc-textcycle.js. line-height = LEADING (.85),
   letter-spacing = TRACKING (.01em); the script measures with the same two numbers.
   translateY(.0625em): Humane's caps sit .125em above the line-box bottom, so this
   centres the CAPS optically (OC's own note). */
.ms-oc .ms-oc-cycle-text {
  width: 100%;
  margin: 0;
  color: inherit;
  font-family: var(--ms-oc-display);
  font-weight: 900;
  line-height: .85;
  letter-spacing: .01em;
  text-align: center;
  text-transform: uppercase;
  transform: translateY(.0625em);
}

/* nowrap: the line count is the fit maths' decision, never the browser's. */
.ms-oc .ms-oc-cycle-line {
  display: block;
  white-space: nowrap;
}

.ms-oc .ms-oc-cycle-char {
  display: inline-block;
  white-space: pre;
}

/* <noscript> only: no script, no measuring - a size that fits a phone and a desktop. */
.ms-oc .ms-oc-cycle-text--static {
  font-size: clamp(64px, 18vw, 240px);
}

/* Entrance: OC's .enter (rise + fade, staggered). Logo 100ms, text 1000ms. */
@keyframes ms-oc-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ms-oc .ms-oc-enter {
  opacity: 0;
  animation: ms-oc-rise .8s cubic-bezier(.22, 1, .36, 1) forwards;
}
.ms-oc .ms-oc-logo.ms-oc-enter  { animation-delay: .1s; }
.ms-oc .ms-oc-cycle.ms-oc-enter { animation-delay: 1s; }

/* ── 3. ALPHA NOTICE ─────────────────────────────────────────────────────────
   Operator fix 1 (2026-09-27): OC's Alpha section, under the hero, on white. OC's
   ground is #f4f4f4; here --ms-white, as asked. Text --ms-black, and OC's black/50 and
   black/80 as color-mix of that token (no new colour values). It paints over the
   .ms-oc gradient, which carries on below it. */
.ms-oc .ms-oc-alpha {
  padding: 56px 24px;
  background-color: var(--ms-white);
  color: var(--ms-black);
}

.ms-oc .ms-oc-alpha-inner {
  max-width: 80rem;
  margin: 0 auto;
}

.ms-oc .ms-oc-alpha-label {
  margin: 0 0 32px;
  color: color-mix(in srgb, var(--ms-black) 50%, transparent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: .025em;
}

.ms-oc .ms-oc-alpha-title {
  margin: 0;
  color: var(--ms-black);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.ms-oc .ms-oc-alpha-cols {
  margin-top: 32px;
}

.ms-oc .ms-oc-alpha-block {
  margin-bottom: 32px;
  break-inside: avoid;
}

.ms-oc .ms-oc-alpha-h {
  margin: 0;
  color: var(--ms-black);
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
}

.ms-oc .ms-oc-alpha-p,
.ms-oc .ms-oc-alpha-list {
  margin: 16px 0 0;
  color: color-mix(in srgb, var(--ms-black) 80%, transparent);
  line-height: 1.625;
}

/* OC: mt-2 on the paragraph straight under a heading, mt-3 on a list, mt-4 otherwise. */
.ms-oc .ms-oc-alpha-h + .ms-oc-alpha-p { margin-top: 8px; }
.ms-oc .ms-oc-alpha-list               { margin-top: 12px; padding: 0; list-style: none; }
.ms-oc .ms-oc-alpha-list li + li       { margin-top: 8px; }
.ms-oc .ms-oc-alpha strong             { font-weight: 700; }
/* 640 and 1024 steps: at the end of the file, sm before lg, so lg wins by order. */

/* ── 4. ALL IN ONE ───────────────────────────────────────────────────────── */
.ms-oc .ms-oc-allinone-inner {
  max-width: 48rem;
  margin: 0 auto;
  padding: 64px 24px;
  text-align: center;
}

.ms-oc .ms-oc-lockup {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto 48px;
}

.ms-oc .ms-oc-allinone-line {
  margin: 0;
  color: inherit;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.375;
}

.ms-oc .ms-oc-allinone-line strong {
  font-weight: 700;
}

/* ── 5. PLATFORMS ────────────────────────────────────────────────────────── */
.ms-oc .ms-oc-platforms {
  padding: 48px 0;
  text-align: center;
}

.ms-oc .ms-oc-platforms-title {
  margin: 0;
  padding: 0 24px;
  color: inherit;
  font-family: inherit;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
}

.ms-oc .ms-oc-platforms-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 40px;
  margin: 40px 0 0;
  padding: 0 24px;
  list-style: none;
}

.ms-oc .ms-oc-platforms-list li {
  margin: 0;
}

/* Heights are OC's per-logo classes (h-9 sm:h-11 and so on); width follows the viewBox. */
.ms-oc .ms-oc-platform                                  { display: block; width: auto; height: 36px; }
.ms-oc .ms-oc-platform[data-ms-oc-platform="WooCommerce"] { height: 24px; }
.ms-oc .ms-oc-platform[data-ms-oc-platform="Salesforce"]  { height: 40px; }
.ms-oc .ms-oc-platform[data-ms-oc-platform="Wix"]         { height: 32px; }
.ms-oc .ms-oc-platform[data-ms-oc-platform="Dynamicweb"]  { height: 24px; }

/* ── 6. LAPTOP IMAGE ─────────────────────────────────────────────────────────
   No bottom padding (operator fix 2, 2026-09-27: "padding at the bottom of the page -
   remove this"). OC had pb-10 / sm:pb-16 above its own footer; here the Mouldshop footer
   follows, and the padding showed as a strip of gradient under the image. */
.ms-oc .ms-oc-image {
  padding: 0;
}

.ms-oc .ms-oc-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── sm (640px) ──────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .ms-oc .ms-oc-hero-head         { padding: 12px 32px; }
  .ms-oc .ms-oc-alpha             { padding-top: 80px; padding-bottom: 80px; }
  .ms-oc .ms-oc-alpha-title       { font-size: 30px; line-height: 36px; }
  .ms-oc .ms-oc-allinone-inner    { padding: 96px 24px; }
  .ms-oc .ms-oc-allinone-line     { font-size: 30px; }
  .ms-oc .ms-oc-platforms         { padding: 64px 0; }
  .ms-oc .ms-oc-platforms-title   { font-size: 32px; }
  .ms-oc .ms-oc-platforms-list    { gap: 24px 56px; margin-top: 56px; }

  .ms-oc .ms-oc-platform                                  { height: 44px; }
  .ms-oc .ms-oc-platform[data-ms-oc-platform="WooCommerce"] { height: 32px; }
  .ms-oc .ms-oc-platform[data-ms-oc-platform="Salesforce"]  { height: 48px; }
  .ms-oc .ms-oc-platform[data-ms-oc-platform="Wix"]         { height: 40px; }
  .ms-oc .ms-oc-platform[data-ms-oc-platform="Dynamicweb"]  { height: 28px; }
}

/* ── lg (1024px) - after sm, so it wins by order ─────────────────────────── */
@media (min-width: 1024px) {
  .ms-oc .ms-oc-alpha-title { font-size: 36px; line-height: 40px; }
  .ms-oc .ms-oc-alpha-cols  { columns: 2; column-gap: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .ms-oc .ms-oc-enter {
    opacity: 1;
    animation: none;
  }
}