/* ═══════════════════════════════════════════════════════════════
   type.css — COMISSIONS persona system
   Six voices. One platform.

   Body classes: persona-architect | persona-antiquarian |
                 persona-operator  | persona-scholar     |
                 persona-editor    | persona-terminal

   Each persona defines:
     1. Hero typography overrides
     2. Color token overrides
     3. Section-transition motion graphic (replaces default .reveal)
        — suppresses transition, fires animation on .visible
        — uses ::before / ::after for the decorative motion element
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────
   SHARED: disable default transition when any persona is active
   so the animation takes full control
   ───────────────────────────────────────────────────────────────── */

body[class*="persona-"] .reveal {
  transition: none;
  position: relative;
}

/* stagger delays — applied via animation-delay on .visible */
body[class*="persona-"] .reveal-delay-1.visible { animation-delay: 0.08s; }
body[class*="persona-"] .reveal-delay-2.visible { animation-delay: 0.16s; }
body[class*="persona-"] .reveal-delay-3.visible { animation-delay: 0.24s; }
body[class*="persona-"] .reveal-delay-4.visible { animation-delay: 0.32s; }


/* ═══════════════════════════════════════════════════════════════
   ᛟ  ARCHITECT — Plus Jakarta Sans — design professional
   Motion: blueprint construction — a measuring rule sweeps
   across, then the element rises from below the cut line.
   ═══════════════════════════════════════════════════════════════ */

body.persona-architect {
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --indigo:        #6366f1;
  --cyan:          #06b6d4;
  --gradient-text: linear-gradient(135deg, #6366f1, #8b5cf6, #06b6d4);
}

body.persona-architect .hero-headline {
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-weight: 800;
}
body.persona-architect .hero-kicker {
  letter-spacing: 0.2em;
}
body.persona-architect .hero-sub {
  letter-spacing: 0.01em;
  font-weight: 500;
}

/* rule sweeps left → right before content builds up */
body.persona-architect .reveal::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--indigo), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
}
body.persona-architect .reveal.visible::before {
  animation: arch-rule 0.56s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
body.persona-architect .reveal.visible {
  animation: arch-build 0.875s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
  opacity: 0; /* hold until animation starts */
}

@keyframes arch-rule {
  0%   { transform: scaleX(0); opacity: 1; }
  70%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes arch-build {
  from { opacity: 0; clip-path: inset(100% 0 0 0); }
  to   { opacity: 1; clip-path: inset(0% 0 0 0); }
}


/* ═══════════════════════════════════════════════════════════════
   ᚱ  ANTIQUARIAN — Cormorant — high contrast editorial serif
   Motion: ink bloom — content materialises out of a warm blur,
   sharpening like ink resolving on parchment.
   ═══════════════════════════════════════════════════════════════ */

body.persona-antiquarian {
  --font-display:  'Cormorant', serif;
  --indigo:        #b8965a;
  --cyan:          #d4a96a;
  --gradient-text: linear-gradient(135deg, #e8d5b0, #c8a46e, #a67850);
  --gradient:      linear-gradient(135deg, #b8965a, #8b6a3e, #d4a96a);
}

body.persona-antiquarian .hero-headline {
  font-size: clamp(3.5rem, 10vw, 9.5rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  font-weight: 700;
}
body.persona-antiquarian .hero-headline em {
  font-style: italic;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.persona-antiquarian .hero-kicker {
  font-variant: small-caps;
  letter-spacing: 0.22em;
  color: var(--cyan);
}
body.persona-antiquarian .hero-sub {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}
body.persona-antiquarian .hero-sub strong {
  font-style: normal;
}

/* no ::before graphic — the bloom IS the graphic */
body.persona-antiquarian .reveal.visible {
  animation: antiq-bloom 1.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

@keyframes antiq-bloom {
  0%   { opacity: 0; filter: blur(10px); transform: scale(1.04); }
  50%  { opacity: 0.7; filter: blur(3px);  transform: scale(1.01); }
  100% { opacity: 1; filter: blur(0);    transform: scale(1); }
}


/* ═══════════════════════════════════════════════════════════════
   ᛏ  OPERATOR — Space Grotesk — technical precision
   Motion: system initialise — a bright cyan scanline sweeps
   the element top → bottom, leaving rendered content behind it.
   ═══════════════════════════════════════════════════════════════ */

body.persona-operator {
  --font-display:  'Space Grotesk', sans-serif;
  --indigo:        #22d3ee;
  --cyan:          #06b6d4;
  --gradient-text: linear-gradient(135deg, #67e8f9, #22d3ee, #0891b2);
  --gradient:      linear-gradient(135deg, #22d3ee, #0891b2, #06b6d4);
}

body.persona-operator .hero-headline {
  letter-spacing: -0.025em;
  line-height: 1.08;
}
body.persona-operator .hero-kicker {
  letter-spacing: 0.2em;
  font-size: 0.62rem;
  color: var(--cyan);
}
body.persona-operator .hero-kicker::before {
  background: var(--cyan);
}
body.persona-operator .hero-sub {
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* scanline travels top → bottom over the element */
body.persona-operator .reveal::before {
  content: '';
  position: absolute;
  left: -4px; right: -4px;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  box-shadow: 0 0 12px 3px rgba(6, 182, 212, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 10;
}
body.persona-operator .reveal.visible::before {
  animation: op-scanline 0.625s linear forwards;
}
body.persona-operator .reveal.visible {
  animation: op-render 0.625s linear forwards;
  opacity: 0;
}

@keyframes op-scanline {
  0%   { top: 0;    opacity: 1; }
  85%  { top: 100%; opacity: 0.8; }
  100% { top: 100%; opacity: 0; }
}
@keyframes op-render {
  0%   { opacity: 0; clip-path: inset(0 0 100% 0); }
  100% { opacity: 1; clip-path: inset(0 0 0% 0); }
}


/* ═══════════════════════════════════════════════════════════════
   ᚦ  SCHOLAR — Playfair Display — literary serif
   Motion: page settle — content drifts down and lands with a
   slight rotational overshoot, like a sheet placed on a desk.
   ═══════════════════════════════════════════════════════════════ */

body.persona-scholar {
  --font-display:  'Playfair Display', serif;
  --indigo:        #818cf8;
  --cyan:          #a5b4fc;
  --gradient-text: linear-gradient(135deg, #e0e7ff, #a5b4fc, #818cf8);
}

body.persona-scholar .hero-headline {
  font-size: clamp(2.6rem, 6.5vw, 6rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  font-weight: 700;
}
body.persona-scholar .hero-kicker {
  font-variant: small-caps;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
}
body.persona-scholar .hero-sub {
  line-height: 1.75;
  font-weight: 300;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}
body.persona-scholar .hero-sub strong {
  font-weight: 500;
}

/* soft drop-shadow blooms before element settles */
body.persona-scholar .reveal.visible {
  animation: scholar-settle 1.125s cubic-bezier(0.34, 1.45, 0.64, 1) forwards;
  opacity: 0;
}

@keyframes scholar-settle {
  0%   { opacity: 0; transform: translateY(-14px) rotate(0.5deg);
         filter: drop-shadow(0 24px 32px rgba(129, 140, 248, 0)); }
  40%  { opacity: 0.8; }
  70%  { transform: translateY(4px) rotate(-0.1deg);
         filter: drop-shadow(0 8px 16px rgba(129, 140, 248, 0.2)); }
  100% { opacity: 1; transform: translateY(0) rotate(0);
         filter: drop-shadow(0 0 0 transparent); }
}


/* ═══════════════════════════════════════════════════════════════
   ᚹ  EDITOR — DM Serif Display — modern editorial
   Motion: editorial cut — a single precise left→right clip wipe.
   No blur, no bounce, no ornament. One clean motion.
   ═══════════════════════════════════════════════════════════════ */

body.persona-editor {
  --font-display:  'DM Serif Display', serif;
  --indigo:        #94a3b8;
  --cyan:          #cbd5e1;
  --gradient-text: linear-gradient(135deg, #f1f5f9, #94a3b8, #64748b);
  --gradient:      linear-gradient(135deg, #94a3b8, #64748b);
}

body.persona-editor .hero-headline {
  font-size: clamp(2.8rem, 6.8vw, 6.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
}
body.persona-editor .hero-headline em {
  font-style: italic;
}
body.persona-editor .hero-kicker {
  color: var(--cyan);
  letter-spacing: 0.16em;
}
body.persona-editor .hero-kicker::before {
  background: var(--cyan);
}
body.persona-editor .hero-sub {
  font-style: italic;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-secondary);
  font-family: var(--font-body);  /* body weight sub — editorial contrast */
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
}
body.persona-editor .hero-sub strong {
  font-style: normal;
  background: none;
  -webkit-text-fill-color: var(--text-primary);
}

/* the cut — linear, surgical */
body.persona-editor .reveal.visible {
  animation: editor-cut 0.69s cubic-bezier(0.25, 0, 0, 1) forwards;
  opacity: 0;
}

@keyframes editor-cut {
  from { opacity: 1; clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; clip-path: inset(0 0%   0 0); }
}


/* ═══════════════════════════════════════════════════════════════
   ᛇ  TERMINAL — JetBrains Mono — monospace grid
   Motion: buffer flush — content prints top → bottom, one
   raster line at a time. A blinking cursor ::after marks
   the active print head during the flush.
   ═══════════════════════════════════════════════════════════════ */

body.persona-terminal {
  --font-display:  'JetBrains Mono', monospace;
  --indigo:        #4ade80;
  --cyan:          #86efac;
  --gradient-text: linear-gradient(135deg, #bbf7d0, #4ade80, #16a34a);
  --gradient:      linear-gradient(135deg, #4ade80, #16a34a);
}

body.persona-terminal .hero-headline {
  font-size: clamp(2rem, 5vw, 4.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
}
body.persona-terminal .hero-kicker {
  color: var(--indigo);
  letter-spacing: 0.1em;
  font-family: var(--font-display);
}
body.persona-terminal .hero-kicker::before {
  content: '> ';
  background: none;
  width: auto;
  height: auto;
  display: inline;
  color: var(--indigo);
  font-size: inherit;
}
/* suppress the default line pseudo from .section-kicker */
body.persona-terminal .section-kicker::before {
  display: none;
}
body.persona-terminal .hero-sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.8rem, 1.2vw, 0.95rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}
body.persona-terminal .hero-sub strong {
  color: var(--indigo);
  background: none;
  -webkit-text-fill-color: var(--indigo);
}

/* blinking cursor marks the print-head as content flushes in */
body.persona-terminal .reveal::after {
  content: '▋';
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--indigo);
  opacity: 0;
  line-height: 1;
}
body.persona-terminal .reveal.visible::after {
  animation:
    term-cursor-on   0.05s linear 0s         1 forwards,
    term-cursor-blink 0.5s  linear 0.05s     6,
    term-cursor-off  0.05s linear 3s         1 forwards;
}
body.persona-terminal .reveal.visible {
  animation: term-flush 0.75s steps(24, end) forwards;
  opacity: 0;
}

@keyframes term-flush {
  from { opacity: 1; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0%   0); }
}
@keyframes term-cursor-on {
  to { opacity: 1; }
}
@keyframes term-cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes term-cursor-off {
  to { opacity: 0; }
}