/* =========================================================================
   TECHWISE.NYC · site layer on top of the Cowork Design System
   1) Brand re-seed (blue) per the design system's rebrand contract
   2) Blue-dark canvas + cool light theme + warm ember accent
   3) Narrative scroll machinery: aurora, flow canvas, grain, reveals,
      scrub, rail, seams, marquee, capability icons, case visuals
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. BRAND RE-SEED — the four accent values + accent-rgb, as documented
   ------------------------------------------------------------------------- */
:root {
  --brand-accent:        #4D9DFF;
  --brand-accent-light:  #85BEFF;
  --brand-accent-deep:   #2270E6;
  --brand-accent-deeper: #1453B4;
  --brand-ivory:         #EDF2F9;
  --accent-rgb:          77,157,255;

  /* Warm counterpoint — used sparingly for highlights and glow */
  --ember:     #F09A54;
  --ember-rgb: 240,154,84;

  /* Dark theme retuned from warm charcoal to blue-black */
  --canvas:    #05080F;
  --surface-1: #0B1220;
  --surface-2: #121B2F;
  --surface-3: #1A2540;
  --ink:       #F2F6FC;
  --ink-muted: #A2B0C8;
  --ink-dim:   #66738D;
  --hairline:      rgba(148,181,255,0.14);
  --hairline-soft: rgba(148,181,255,0.06);

  --aurora-o: 0.6;
  --grain-o:  0.04;
}

[data-theme="light"] {
  --canvas:    #EFF3F9;
  --surface-1: #E1E8F2;
  --surface-2: #D4DEED;
  --surface-3: #C2D0E5;
  --ink:       #0D1526;
  --ink-muted: #3E4B64;
  --ink-dim:   #6C7891;
  --hairline:      rgba(13,21,38,0.14);
  --hairline-soft: rgba(13,21,38,0.07);
  --ember:     #C06A1C;
  --aurora-o:  0.38;
  --grain-o:   0.03;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* -------------------------------------------------------------------------
   2. GLOBAL SCAFFOLD — aurora + canvas behind, grain above, content between
   ------------------------------------------------------------------------- */
#flow-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.site { position: relative; z-index: 1; }

/* Aurora — slow drifting color fields for depth and warmth.
   No filter: blur() — the gradients fade to transparent on their own, and
   blurring three viewport-scale layers stalls the compositor. */
.aurora { position: fixed; inset: -20%; z-index: 0; pointer-events: none; opacity: var(--aurora-o); }
.aurora i { position: absolute; border-radius: 50%; display: block; will-change: transform; }
.aurora i:nth-child(1) {
  width: 58vw; height: 58vw; left: -12%; top: -18%;
  background: radial-gradient(circle at 40% 40%, rgba(34,112,230,0.42) 0%, rgba(34,112,230,0.18) 38%, transparent 68%);
  animation: tw-a1 52s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  width: 50vw; height: 50vw; right: -14%; top: 8%;
  background: radial-gradient(circle at 60% 40%, rgba(77,157,255,0.28) 0%, rgba(77,157,255,0.12) 40%, transparent 68%);
  animation: tw-a2 64s ease-in-out infinite alternate;
}
.aurora i:nth-child(3) {
  width: 44vw; height: 44vw; left: 18%; bottom: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--ember-rgb),0.18) 0%, rgba(var(--ember-rgb),0.08) 40%, transparent 65%);
  animation: tw-a3 76s ease-in-out infinite alternate;
}
@keyframes tw-a1 { to { transform: translate(14vw, 10vh) scale(1.18); } }
@keyframes tw-a2 { to { transform: translate(-12vw, 16vh) scale(0.92); } }
@keyframes tw-a3 { to { transform: translate(10vw, -12vh) scale(1.12); } }

/* Film grain — filmic warmth over everything (plain opacity; blend modes
   force full-page recomposits every frame alongside the canvas) */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 2000; pointer-events: none;
  opacity: var(--grain-o);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 100;
  width: 100%; height: 2px;
  background: var(--gradient-accent);
  transform: scaleX(0); transform-origin: left center;
}

/* Wordmark set in Orbitron — the logo face */
.wordmark {
  font-family: 'Orbitron', 'Mona Sans', 'Inter', sans-serif;
  font-weight: 700; font-size: 16.5px; letter-spacing: 0.09em; text-transform: uppercase;
}
.wordmark .tld { color: var(--accent); font-weight: 900; }

/* Nav gets a touch more transparency so the flow shows through */
.nav { background: color-mix(in srgb, var(--canvas) 76%, transparent); }

/* -------------------------------------------------------------------------
   3. HERO
   ------------------------------------------------------------------------- */
.hero { min-height: 92vh; display: flex; align-items: center; position: relative; padding: 40px 0; }
.hero-inner { position: relative; will-change: transform, opacity; }
.hero-eyebrow { opacity: 0; animation: tw-fade 0.8s ease 0.15s forwards; }
.hero-sub { max-width: 58ch; margin-top: 26px; opacity: 0; animation: tw-fade 0.9s ease 0.85s forwards; }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px; opacity: 0; animation: tw-fade 0.9s ease 1.05s forwards; }
.hero-note { display: inline-flex; align-items: center; gap: 10px; margin-top: 34px; opacity: 0; animation: tw-fade 0.9s ease 1.3s forwards; }

.hero-line { max-width: 13ch; }
.hero-line .w {
  display: inline-block; white-space: pre;
  opacity: 0; transform: translateY(0.45em); filter: blur(8px);
  animation: tw-rise 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(0.25s + var(--i, 0) * 110ms);
}
@keyframes tw-rise { to { opacity: 1; transform: none; filter: none; } }
@keyframes tw-fade { to { opacity: 1; } }

.scroll-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 58px; display: flex; justify-content: center;
  opacity: 0; animation: tw-fade 1s ease 2s forwards;
}
.cue-line { width: 1px; height: 100%; background: var(--hairline); position: relative; overflow: hidden; display: block; }
.cue-line::after {
  content: ''; position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: linear-gradient(180deg, transparent, var(--accent));
  animation: tw-cue 2.2s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}
@keyframes tw-cue { 0% { top: -40%; } 60%, 100% { top: 110%; } }

/* -------------------------------------------------------------------------
   4. STATS
   ------------------------------------------------------------------------- */
.stats-band { padding-top: 0; }
.tile { position: relative; overflow: hidden; }
.tile::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--gradient-accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s;
}
.revealed .tile::after, .tile.revealed::after { transform: scaleX(1); }
.t-unit { font-size: 20px; color: var(--ink-muted); font-weight: 500; }

/* -------------------------------------------------------------------------
   5. FLOW SEAMS — the thread that stitches sections together
   ------------------------------------------------------------------------- */
.flow-seam {
  width: 1px; height: 120px; margin: 0 auto; position: relative; z-index: 1;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), 0.55) 50%, transparent);
  transform: scaleY(0); transform-origin: top center;
  transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.flow-seam::after {
  content: ''; position: absolute; left: 50%; bottom: -3px; width: 7px; height: 7px;
  transform: translateX(-50%) scale(0); border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s;
}
.flow-seam.revealed { transform: scaleY(1); }
.flow-seam.revealed::after { transform: translateX(-50%) scale(1); }

/* -------------------------------------------------------------------------
   6. SCROLL-SCRUBBED STORY
   ------------------------------------------------------------------------- */
.scrub { position: relative; height: 260vh; }
.scrub-sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; }
.scrub-text {
  font-family: 'Mona Sans', 'Inter', sans-serif;
  font-size: clamp(26px, 3.6vw, 50px); font-weight: 600; line-height: 1.22;
  letter-spacing: 0; color: var(--ink); max-width: 26ch;
}
.scrub-text .w { opacity: 0.13; transition: opacity 0.35s ease, color 0.35s ease; }
.scrub-text .w.lit { opacity: 1; }
.scrub-text em .w { color: var(--accent); }
.scrub-text .warm-em .w.lit { color: var(--ember); }

/* -------------------------------------------------------------------------
   7. REVEAL SYSTEM  (JS adds .revealed; html.js gates the hidden state)
   ------------------------------------------------------------------------- */
/* One-shot animations (not transitions) so component hover effects stay snappy
   after the entrance finishes. 'backwards' fill holds the hidden state through
   the stagger delay, then releases the properties back to normal styles. */
html.js [data-reveal] { opacity: 0; }
html.js [data-reveal].revealed {
  opacity: 1;
  animation: tw-reveal-up 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}
html.js [data-reveal="blur"].revealed  { animation-name: tw-reveal-blur; }
html.js [data-reveal="scale"].revealed { animation-name: tw-reveal-scale; }
html.js [data-reveal="seam"] { opacity: 1; }
html.js [data-reveal="seam"].revealed { animation: none; }

html.js [data-reveal-group] > * { opacity: 0; }
html.js [data-reveal-group].revealed > * {
  opacity: 1;
  animation: tw-reveal-up 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: calc(var(--stagger, 0) * 90ms);
}

@keyframes tw-reveal-up    { from { opacity: 0; transform: translateY(28px); } }
@keyframes tw-reveal-blur  { from { opacity: 0; transform: translateY(16px); filter: blur(12px); } }
@keyframes tw-reveal-scale { from { opacity: 0; transform: translateY(20px) scale(0.96); } }

/* -------------------------------------------------------------------------
   8. SECTION RAIL (desktop)
   ------------------------------------------------------------------------- */
.rail {
  position: fixed; left: 26px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; gap: 18px;
}
@media (max-width: 1240px) { .rail { display: none; } }
.rail a {
  position: relative; width: 8px; height: 8px; border-radius: 50%;
  background: var(--surface-3); border: 1px solid var(--hairline);
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}
.rail a:hover { background: var(--ink-dim); transform: scale(1.25); }
.rail a.active {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18), 0 0 14px rgba(var(--accent-rgb), 0.6);
}
.rail a .rail-tip {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%) translateX(-6px);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--surface-1); border: 1px solid var(--hairline-soft);
  padding: 4px 10px; border-radius: 100px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
}
.rail a:hover .rail-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* -------------------------------------------------------------------------
   9. CAPABILITIES — four discipline cards with self-drawing icons
   ------------------------------------------------------------------------- */
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 860px) { .cap-grid { grid-template-columns: 1fr; } }
.cap-card {
  background: var(--surface-1); border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg); padding: 30px 32px 26px;
  display: flex; flex-direction: column;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative; overflow: hidden;
}
.cap-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(80% 60% at 20% 0%, rgba(var(--accent-rgb),0.10), transparent 70%);
  transition: opacity 0.4s;
}
.cap-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), 0.35); box-shadow: 0 18px 50px rgba(var(--accent-rgb), 0.10); }
.cap-card:hover::before { opacity: 1; }
.cap-icon { width: 46px; height: 46px; color: var(--accent); margin-bottom: 18px; }
.cap-title { font-family: 'Mona Sans','Inter',sans-serif; font-size: 21px; font-weight: 600; color: var(--ink); margin-bottom: 10px; letter-spacing: 0; }
.cap-desc { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); flex: 1; }
.cap-card .c-foot { margin-top: 18px; }

/* Self-drawing strokes: hidden until any ancestor gains .revealed —
   covers .case-panel (data-reveal on itself) and .cap-card (whose reveal
   class lands on the parent .cap-grid group) */
html.js .vd {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
html.js .revealed .vd { stroke-dashoffset: 0; }

html.js .vp {
  transform: scale(0); transform-origin: center; transform-box: fill-box;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}
html.js .revealed .vp { transform: scale(1); }

html.js .vb {
  transform: scaleY(0); transform-origin: bottom; transform-box: fill-box;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s;
}
html.js .revealed .vb { transform: scaleY(1); }

/* -------------------------------------------------------------------------
   10. SYSTEMS MARQUEE
   ------------------------------------------------------------------------- */
.marquee-band { padding: 34px 0 44px; }
.marquee-label { text-align: center; margin-bottom: 22px; }
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: tw-marquee 55s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes tw-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }
.mq-set {
  display: inline-flex; align-items: center; gap: 38px; padding-right: 38px;
  font-family: 'Mona Sans', 'Inter', sans-serif; font-weight: 600; font-size: 15px;
  color: var(--ink-dim); white-space: nowrap;
}
.mq-set i { width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--accent-rgb), 0.5); flex-shrink: 0; }

/* -------------------------------------------------------------------------
   11. CASE STUDIES
   ------------------------------------------------------------------------- */
.case-list { display: flex; flex-direction: column; gap: 18px; }
.case-panel {
  display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 44px; align-items: center;
  background: var(--surface-1); border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg); padding: 38px 42px;
  position: relative; overflow: hidden;
  transition: border-color 0.35s, box-shadow 0.35s, transform 0.45s ease-out;
}
.case-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(70% 90% at 85% 15%, rgba(var(--accent-rgb),0.08), transparent 65%);
  transition: opacity 0.45s;
}
.case-panel:hover { border-color: rgba(var(--accent-rgb), 0.35); box-shadow: 0 24px 70px rgba(var(--accent-rgb), 0.10); }
.case-panel:hover::before { opacity: 1; }
.case-panel.flip .case-content { order: 2; }
.case-panel.flip .case-visual { order: 1; }
@media (max-width: 900px) {
  .case-panel { grid-template-columns: 1fr; gap: 26px; padding: 28px 24px; }
  .case-panel.flip .case-content { order: 1; }
  .case-panel.flip .case-visual { order: 2; }
}
.case-kick { color: var(--ember); margin-bottom: 12px; }
.case-title { font-family: 'Mona Sans','Inter',sans-serif; font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; line-height: 1.12; color: var(--ink); letter-spacing: 0; margin-bottom: 14px; }
.case-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.case-body { font-size: 14.5px; line-height: 1.65; color: var(--ink-muted); }
.case-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hairline-soft); }
@media (max-width: 560px) { .case-metrics { grid-template-columns: 1fr; gap: 12px; } }
.m-num { font-family: 'Mona Sans','Inter',sans-serif; font-size: 27px; font-weight: 600; color: var(--ink); line-height: 1; margin-bottom: 6px; white-space: nowrap; }
.m-arrow { color: var(--accent); font-weight: 500; }
.m-unit { font-size: 16px; color: var(--ink-muted); }
.m-label { font-size: 12px; line-height: 1.4; color: var(--ink-dim); }
.case-note { text-align: center; margin-top: 26px; }

/* Case visuals — line-art SVG panels that draw themselves in */
.case-visual {
  background: color-mix(in srgb, var(--canvas) 55%, var(--surface-1));
  border: 1px solid var(--hairline-soft); border-radius: var(--radius);
  padding: 26px 22px; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
}
.case-visual svg { width: 100%; height: auto; max-height: 260px; }
.case-visual text { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; fill: var(--ink-dim); }
.cv-axis  { stroke: var(--hairline); stroke-width: 1.5; }
.cv-grid  { stroke: var(--hairline-soft); stroke-width: 1; }
.cv-line  { stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; }
.cv-dot   { fill: var(--ember); }
.cv-bar-before { fill: var(--surface-3); }
.cv-bar-after  { fill: var(--accent); }
.cv-arrow { stroke: var(--ember); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cv-link  { stroke: rgba(var(--accent-rgb), 0.5); stroke-width: 1.5; stroke-linecap: round; }
.cv-node  { fill: var(--ink-dim); }
.cv-ring  { stroke: rgba(var(--accent-rgb), 0.6); stroke-width: 1.5; }
.cv-hub   { fill: var(--accent); }

/* -------------------------------------------------------------------------
   12. ABOUT
   ------------------------------------------------------------------------- */
.about-statement {
  font-family: 'Mona Sans','Inter',sans-serif;
  font-size: clamp(20px, 2.4vw, 30px); font-weight: 500; line-height: 1.4;
  color: var(--ink-muted); max-width: 46ch; margin: 8px 0 36px;
}
.about-statement em { color: var(--ember); }
.about-grid .c-title { font-size: 17px; }
.about-grid .c-desc { font-size: 13.5px; }

/* -------------------------------------------------------------------------
   13. ENGAGEMENTS
   ------------------------------------------------------------------------- */
.eng-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 960px) { .eng-grid { grid-template-columns: 1fr; } }
.eng { display: flex; flex-direction: column; position: relative; padding: 26px 26px 24px; transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s; }
.eng:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), 0.4); box-shadow: 0 18px 50px rgba(var(--accent-rgb), 0.10); }
.eng-head { margin-bottom: 14px; }
.eng-meta { display: flex; gap: 6px; margin-top: 10px; }
.eng ul { flex: 1; }
.eng-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hairline-soft); }
.eng-price { font-size: 13.5px; color: var(--ink-muted); }
.eng-price strong { font-family: 'Mona Sans', 'Inter', sans-serif; font-size: 19px; color: var(--ink); font-weight: 600; }
.eng-featured { box-shadow: 0 20px 60px rgba(var(--accent-rgb), 0.12); }
.eng-badge { position: absolute; top: -11px; right: 20px; }

/* -------------------------------------------------------------------------
   14. CARDS — blue glow on hover
   ------------------------------------------------------------------------- */
.card { border-radius: var(--radius); }
.card:hover { border-color: rgba(var(--accent-rgb), 0.35); box-shadow: 0 14px 40px rgba(var(--accent-rgb), 0.08); }

/* -------------------------------------------------------------------------
   15. SPOTLIGHT extras
   ------------------------------------------------------------------------- */
.spot-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 90% at 85% 10%, rgba(255,255,255,0.20), transparent 60%),
    radial-gradient(45% 70% at 15% 95%, rgba(var(--ember-rgb),0.30), transparent 60%),
    radial-gradient(50% 80% at 10% 100%, rgba(6,12,28,0.35), transparent 65%);
  animation: tw-glow 9s ease-in-out infinite alternate;
}
@keyframes tw-glow { from { opacity: 0.7; } to { opacity: 1; } }
.spot-ctas { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.spotlight h3, .spotlight p { position: relative; }

/* -------------------------------------------------------------------------
   16. FOOTER
   ------------------------------------------------------------------------- */
.footer { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   17. CALM MODE (?calm) — no infinite ambient animation; finite narrative
   animations (reveals, counters, scrub, timeline) still run
   ------------------------------------------------------------------------- */
html.calm #flow-canvas { display: none; }
html.calm .aurora i { animation: none; }
html.calm .marquee-track { animation: none; }
html.calm .cue-line::after { animation: none; }
html.calm .dot-pulse { animation: none; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.2); }
html.calm .pt-item.active .pt-dot { animation: none; }
html.calm .spot-glow { animation: none; }