/*
Theme Name:   Blocksy Child — Overprint
Theme URI:    https://jeremymak.orgs.hk
Description:  CMYK overprint design system. Process colours, real multiply blending, misregistration effects.
Author:       Jeremy Mak
Template:     blocksy
Version:      1.0.0
Text Domain:  blocksy-child-overprint
*/

/* ==========================================================================
   1. DESIGN TOKENS
   Change values here — everything else inherits.
   ========================================================================== */

:root {
  /* Process colours — true printing primaries */
  --c: #00AEEF;
  --m: #EC008C;
  --y: #FFF200;
  --k: #111111;

  /* Substrate */
  --paper: #F4F2ED;
  --paper-warm: #EDE9E0;

  /* Semantic */
  --ink: var(--k);
  --bg: var(--paper);
  --accent: var(--m);

  /* Type scale — fluid, 1.25 ratio at base */
  --step--1: clamp(0.80rem, 0.77rem + 0.15vw, 0.89rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.25rem, 1.16rem + 0.45vw, 1.55rem);
  --step-2:  clamp(1.56rem, 1.41rem + 0.76vw, 2.07rem);
  --step-3:  clamp(1.95rem, 1.70rem + 1.24vw, 2.76rem);
  --step-4:  clamp(2.44rem, 2.04rem + 1.98vw, 3.68rem);
  --step-5:  clamp(3.05rem, 2.43rem + 3.09vw, 4.91rem);
  --step-6:  clamp(3.81rem, 2.86rem + 4.75vw, 6.55rem);

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.5rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 10rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.85, 0, 0.15, 1);
  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 900ms;

  /* Registration offset — how far plates misalign */
  --misreg: 6px;
}

/* ==========================================================================
   2. BASE
   ========================================================================== */

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: var(--step-0);
  font-variation-settings: 'wght' 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.op-display {
  font-family: 'Archivo', sans-serif;
  font-variation-settings: 'wght' 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0 0 var(--sp-4);
}

h1 { font-size: var(--step-6); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }

/* Technical labels — the small uppercase text that carries the print voice */
.op-label {
  font-size: var(--step--1);
  font-variation-settings: 'wght' 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1;
}

a { color: inherit; text-decoration: none; }

/* Link underline that fills like ink */
.entry-content a,
.op-link {
  background-image: linear-gradient(var(--m), var(--m));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-med) var(--ease-out);
}
.entry-content a:hover,
.op-link:hover { background-size: 100% 40%; }

/* ==========================================================================
   3. PLATE REGISTRATION — the signature effect
   Three process plates stacked, multiply-blended, offset on hover.
   ========================================================================== */

.op-plate {
  position: relative;
  display: block;
  overflow: hidden;
  background: #fff;
  isolation: isolate;      /* keeps multiply contained */
  aspect-ratio: 4 / 3;
}

.op-plate img,
.op-plate .op-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* Each plate carries one process colour, multiplied over the others */
.op-plate .op-layer { mix-blend-mode: multiply; }
.op-plate .op-layer--c { filter: url(#op-sep-c); }
.op-plate .op-layer--m { filter: url(#op-sep-m); }
.op-plate .op-layer--y { filter: url(#op-sep-y); }

/* Touch devices: no hover state, so plates sit registered and meta shows */
@media (pointer: coarse) {
  .op-card__meta { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   4. PROJECT CARD
   ========================================================================== */

.op-card { position: relative; display: block; }

.op-card__meta {
  padding-top: var(--sp-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-3);
}

.op-card__title {
  font-size: var(--step-1);
  font-variation-settings: 'wght' 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0;
}

.op-card__year {
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  opacity: 0.5;
}

.op-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-5) var(--sp-4);
}

/* ==========================================================================
   5. MARQUEE — section divider
   ========================================================================== */

.op-marquee {
  --speed: 28s;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  padding: var(--sp-3) 0;
  border-block: 2px solid var(--ink);
  background: var(--y);
  will-change: transform;
}

.op-marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: var(--sp-4);
  padding-right: var(--sp-4);
  animation: op-scroll var(--speed) linear infinite;
}

.op-marquee:hover .op-marquee__track { animation-play-state: paused; }

.op-marquee__item {
  font-size: var(--step-2);
  font-variation-settings: 'wght' 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

@keyframes op-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ==========================================================================
   6. SCROLL REVEALS — native CSS, no JS
   ========================================================================== */

@supports (animation-timeline: view()) {
  [data-anim="fade-up"] {
    animation: op-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

@keyframes op-fade-up {
  from { opacity: 0; transform: translateY(2.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Split-line reveal target state, set up by JS */
.op-line { display: block; overflow: hidden; }
.op-line > span { display: block; will-change: transform; }

/* ==========================================================================
   7. LAYOUT HELPERS
   ========================================================================== */

.op-wrap {
  width: min(100% - var(--sp-4) * 2, 1440px);
  margin-inline: auto;
}

.op-section { padding-block: var(--sp-7); }

.op-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

/* Colour bar — the strip printers use to check ink density */
.op-colorbar {
  display: flex;
  height: 10px;
  width: 100%;
}
.op-colorbar span { flex: 1; }
.op-colorbar span:nth-child(1) { background: var(--c); }
.op-colorbar span:nth-child(2) { background: var(--m); }
.op-colorbar span:nth-child(3) { background: var(--y); }
.op-colorbar span:nth-child(4) { background: var(--k); }

/* ==========================================================================
   8. ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .op-marquee__track { animation: none; }
  [data-anim] { opacity: 1 !important; transform: none !important; }
}

:focus-visible {
  outline: 3px solid var(--m);
  outline-offset: 3px;
}