/* ============================================================
   MIDLANDS CODE LAB — fidelity layer
   The dial control + every effect it switches on. The same
   markup renders three ways:  essential · studio · signature
   ============================================================ */

/* ---------- tier baseline: reveals ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--easeOut), transform .85s var(--easeOut); will-change: opacity, transform; }
.reveal.on { opacity: 1; transform: none; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }

/* Essential: everything is just present. No motion, no waiting. */
body[data-fid="essential"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
body[data-fid="essential"] .marquee-track { animation: none !important; transform: none !important; }
body[data-fid="essential"] .manifesto p .word { opacity: 1 !important; }

/* ---------- magnetic ---------- */
.mag { will-change: transform; transition: transform .3s var(--ease); }
body[data-fid="essential"] .mag { transform: none !important; }

/* ---------- custom cursor (studio + signature, fine pointers) ---------- */
.cursor-dot, .cursor-ring, .cursor-label { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; opacity: 0; }
.cursor-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); mix-blend-mode: normal; }
.cursor-ring { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--accent); transform: translate(-50%, -50%); transition: width .2s var(--ease), height .2s var(--ease), background .2s, border-color .2s, opacity .2s; }
.cursor-ring.lg { width: 78px; height: 78px; background: var(--accent); border-color: var(--accent); }
.cursor-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; background: var(--ink); color: var(--bg); transform: translate(18px, 18px); transition: opacity .15s; font-weight: 600; }
.cursor-label.on { opacity: 1; }

body[data-fid="studio"], body[data-fid="signature"] { cursor: none; }
body[data-fid="studio"] a, body[data-fid="studio"] button, body[data-fid="studio"] .scn-card,
body[data-fid="signature"] a, body[data-fid="signature"] button, body[data-fid="signature"] .scn-card { cursor: none; }
body[data-fid="studio"] .cursor-dot, body[data-fid="studio"] .cursor-ring,
body[data-fid="signature"] .cursor-dot, body[data-fid="signature"] .cursor-ring { opacity: 1; }
/* the floating word label is a Signature flourish only */
body[data-fid="signature"] .cursor-label.on { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  body { cursor: auto !important; }
  .cursor-dot, .cursor-ring, .cursor-label { display: none !important; }
}

/* ---------- hero flow field ---------- */
body[data-fid="studio"] .hero .field { opacity: .5; transition: opacity 1.2s ease; }
body[data-fid="signature"] .hero .field { opacity: 1; transition: opacity 1.2s ease; }

/* ---------- self-building hero ---------- */
/* The build sequence is a Signature-only flourish. In Studio the hero
   simply fades up; in Essential it is just there. */
.hero-build-cap {
  position: absolute; left: 5vw; top: calc(18vh - 34px); z-index: 3;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--teal); display: none; align-items: center; gap: 9px;
}
.hero-build-cap .bd { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: blip 1s steps(1) infinite; }
@keyframes blip { 50% { opacity: .25; } }

/* skeleton wireframe shown during the build (signature) */
.hero.building h1.display .row,
.hero.building .hero-intro,
.hero.building .cta-row { position: relative; }
.hero.building h1.display .row > *,
.hero.building .hero-intro > *,
.hero.building .cta-row > * { opacity: 0; }
.hero.building h1.display .row::before {
  content: ""; position: absolute; left: 0; top: 14%; height: 68%; width: var(--skw, 60%);
  border: 1.5px dashed var(--accent); border-radius: 8px; background: rgba(202,86,29,.05);
  animation: skel .9s var(--ease) both;
}
.hero.building .hero-intro::before {
  content: ""; position: absolute; left: 0; top: 0; height: 74px; width: 74px; border-radius: 50%;
  border: 1.5px dashed var(--accent); background: rgba(202,86,29,.05);
}
@keyframes skel { from { transform: scaleX(.2); opacity: 0; transform-origin: left; } to { transform: scaleX(1); opacity: 1; } }

/* the moment the build resolves */
.hero.built h1.display .row > *,
.hero.built .hero-intro > *,
.hero.built .cta-row > * { animation: settle .6s var(--easeOut) both; }
.hero.built h1.display .row:nth-child(1) > * { animation-delay: .02s; }
.hero.built h1.display .row:nth-child(2) > * { animation-delay: .09s; }
.hero.built h1.display .row:nth-child(3) > * { animation-delay: .16s; }
.hero.built h1.display .row:nth-child(4) > * { animation-delay: .23s; }
.hero.built .hero-intro > * { animation-delay: .34s; }
.hero.built .cta-row > * { animation-delay: .42s; }
@keyframes settle { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Studio: gentle staggered fade for the hero (no wireframe) */
body[data-fid="studio"] .hero.built h1.display .row > *,
body[data-fid="studio"] .hero.built .hero-intro > *,
body[data-fid="studio"] .hero.built .cta-row > * { animation: settle .7s var(--easeOut) both; }

/* FAILSAFE: once revealed, content is unconditionally visible — never let a
   paused animation (backgrounded tab, throttled frame) leave the hero blank. */
.hero.revealed h1.display .row > *,
.hero.revealed .hero-intro > *,
.hero.revealed .cta-row > * { animation: none !important; opacity: 1 !important; transform: none !important; }
.hero.revealed h1.display .row::before,
.hero.revealed .hero-intro::before { display: none !important; }

/* ---------- manifesto word reveal (studio + signature) ---------- */
.manifesto p .word { display: inline-block; opacity: .16; transition: opacity .35s ease, color .35s ease; }
.manifesto p .word.on { opacity: 1; }

/* ---------- scenario card lift (studio + signature) ---------- */
body[data-fid="studio"] .scn-card:hover, body[data-fid="signature"] .scn-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(26,23,20,.10); }
.scn-card.dragging { box-shadow: 0 30px 60px rgba(26,23,20,.22), 0 0 0 1px var(--accent); border-color: var(--accent); z-index: 50; opacity: .97; pointer-events: none; }
.scn-card.placed { opacity: .28; transform: scale(.97); pointer-events: none; }

/* ---------- card hover depth ---------- */
body[data-fid="studio"] .price-card:hover, body[data-fid="signature"] .price-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 22px 48px rgba(26,23,20,.08); }
body[data-fid="studio"] .faq-card:hover, body[data-fid="signature"] .faq-card:hover { transform: translateY(-2px); }
body[data-fid="studio"] .care-card:hover, body[data-fid="signature"] .care-card:hover { transform: translateY(-3px); background: rgba(202,86,29,.03); }
body[data-fid="signature"] .proj-card .visual { transition: transform .7s var(--ease), box-shadow .7s var(--ease); }
body[data-fid="signature"] .proj-card:hover .visual { transform: translateY(-4px); box-shadow: 0 30px 60px rgba(26,23,20,.16); }

/* ---------- live-preview concept cards (signature) ---------- */
.concept-visual { position: relative; min-height: 440px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.concept-static { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 40px; transition: opacity .5s ease; z-index: 2; }
.concept-live { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s ease; z-index: 1; background: #fff; }
.concept-live iframe { position: absolute; top: 0; left: 0; width: 200%; height: 200%; transform: scale(.5); transform-origin: top left; border: 0; pointer-events: none; }
.concept-live .live-tag { position: absolute; left: 16px; bottom: 16px; z-index: 3; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: rgba(255,253,248,.85); padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(4px); display: flex; align-items: center; gap: 7px; opacity: 0; transition: opacity .4s; }
.concept-live .live-tag .ld { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
/* in Signature, when the live iframe is loaded + hovered, cross-fade to it */
body[data-fid="signature"] .concept-visual.live-ready .concept-static { opacity: 0; pointer-events: none; }
body[data-fid="signature"] .concept-visual.live-ready .concept-live { opacity: 1; }
body[data-fid="signature"] .concept-visual.live-ready .concept-live .live-tag { opacity: 1; }

/* ---------- the COMPLEXITY DIAL (draggable slider) ---------- */
.fconsole {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 200; display: flex; align-items: center; gap: 18px;
  padding: 11px 20px 11px 18px; border-radius: 18px;
  background: rgba(255, 253, 248, 0.82); border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(26,23,20,.16), 0 2px 8px rgba(26,23,20,.08);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  cursor: auto; max-width: calc(100vw - 28px);
}
body[data-fid="studio"] .fconsole, body[data-fid="signature"] .fconsole { cursor: none; }
.fconsole .fc-eyebrow { display: flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.fconsole .fc-eyebrow .fc-led { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(202,86,29,.16); }

/* the slider */
.fc-slider { display: flex; flex-direction: column; gap: 8px; width: 286px; outline: none; padding: 2px 0; }
.fc-rail { position: relative; height: 6px; border-radius: 999px; background: rgba(26,23,20,.10); cursor: pointer; touch-action: none; }
body[data-fid="studio"] .fc-rail, body[data-fid="signature"] .fc-rail { cursor: none; }
.fc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--accent2) 55%, var(--accent)); transition: width .42s var(--easeOut); }
.fc-tick { position: absolute; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,253,248,.85); transform: translate(-50%,-50%); pointer-events: none; z-index: 1; }
.fc-knob {
  position: absolute; top: 50%; left: 100%; width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--accent); z-index: 2;
  transform: translate(-50%,-50%); box-shadow: 0 4px 12px rgba(202,86,29,.32), 0 1px 3px rgba(26,23,20,.2);
  transition: left .42s var(--easeOut), box-shadow .2s, transform .15s; cursor: grab; touch-action: none;
}
.fc-knob:hover { box-shadow: 0 4px 16px rgba(202,86,29,.42), 0 0 0 5px rgba(202,86,29,.12); }
.fc-knob.grabbing { cursor: grabbing; transform: translate(-50%,-50%) scale(1.14); }
body[data-fid="studio"] .fc-knob, body[data-fid="signature"] .fc-knob { cursor: none; }
.fc-slider.dragging .fc-fill, .fc-slider.dragging .fc-knob { transition: box-shadow .2s, transform .15s; }
.fc-knob-grip { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translate(-50%,-50%); }
.fc-stoprow { display: flex; justify-content: space-between; }
.fc-stop { border: 0; background: transparent; padding: 0; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim2); cursor: pointer; transition: color .25s; white-space: nowrap; }
body[data-fid="studio"] .fc-stop, body[data-fid="signature"] .fc-stop { cursor: none; }
.fc-stop:hover { color: var(--dim); }
.fc-stop.active { color: var(--accent); font-weight: 600; }

.fconsole .fc-readout {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .04em; color: var(--dim);
  white-space: nowrap; min-width: 150px; line-height: 1.5;
}
.fconsole .fc-readout b { color: var(--ink); font-weight: 600; }
.fconsole .fc-readout .fc-meter { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 2px; }
.fconsole .fc-readout .fc-meter i { width: 4px; height: 9px; border-radius: 1px; background: var(--dim2); display: inline-block; }
.fconsole .fc-readout .fc-meter i.lit { background: var(--accent); }

/* attention pulse on first load */
.fconsole.pulse { animation: fcpulse 2.2s var(--ease) 2; }
@keyframes fcpulse { 0%,100% { box-shadow: 0 16px 40px rgba(26,23,20,.16), 0 2px 8px rgba(26,23,20,.08); } 50% { box-shadow: 0 16px 40px rgba(26,23,20,.16), 0 0 0 6px rgba(202,86,29,.16); } }

/* first-run coachmark above the console */
.fc-coach {
  position: fixed; left: 50%; bottom: 86px; transform: translateX(-50%) translateY(8px);
  z-index: 201; background: var(--ink); color: var(--bg); padding: 11px 16px; border-radius: 12px;
  font-size: 13px; line-height: 1.4; max-width: 320px; text-align: center;
  box-shadow: 0 16px 40px rgba(26,23,20,.24); opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.fc-coach.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.fc-coach::after { content: ""; position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%) rotate(45deg); width: 14px; height: 14px; background: var(--ink); border-radius: 0 0 3px 0; }
.fc-coach b { color: var(--accent2); }

@media (max-width: 720px) {
  .fconsole { flex-direction: column; gap: 10px; border-radius: 18px; padding: 13px 16px; left: 50%; bottom: 14px; width: calc(100vw - 24px); align-items: stretch; }
  .fconsole .fc-eyebrow { justify-content: center; }
  .fc-slider { width: 100%; }
  .fconsole .fc-readout { min-width: 0; text-align: center; }
  .wa-fab { bottom: 168px; }
}

/* ---------- film grain (signature only, very subtle) ---------- */
.grain { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; mix-blend-mode: multiply; transition: opacity 1s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
body[data-fid="signature"] .grain { opacity: .04; }

/* ============================================================
   TIER ESCALATION — make the three levels unmistakable
   ============================================================ */

/* ---------- AURORA (signature: a living, drifting glow) ---------- */
.aurora { position: absolute; inset: -10% -5%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; overflow: hidden; }
.aurora span { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .7; }
.aurora span:nth-child(1) { width: 46vw; height: 46vw; left: -6vw; top: -8vw; background: radial-gradient(circle at 40% 40%, rgba(202,86,29,.55), rgba(202,86,29,0) 70%); animation: aur1 16s var(--ease) infinite alternate; }
.aurora span:nth-child(2) { width: 40vw; height: 40vw; right: -4vw; top: 6vw; background: radial-gradient(circle at 50% 50%, rgba(31,59,47,.45), rgba(31,59,47,0) 70%); animation: aur2 20s var(--ease) infinite alternate; }
.aurora span:nth-child(3) { width: 34vw; height: 34vw; left: 38vw; bottom: -10vw; background: radial-gradient(circle at 50% 50%, rgba(224,122,71,.5), rgba(224,122,71,0) 70%); animation: aur3 24s var(--ease) infinite alternate; }
@keyframes aur1 { from { transform: translate(0,0) scale(1); } to { transform: translate(8vw,5vw) scale(1.25); } }
@keyframes aur2 { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-7vw,6vw) scale(.9); } }
@keyframes aur3 { from { transform: translate(0,0) scale(1); } to { transform: translate(5vw,-6vw) scale(1.2); } }
body[data-fid="signature"] .hero .aurora { opacity: 1; }

/* ---------- SCROLL PROGRESS BAR (studio + signature) ---------- */
.scrollbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 90; background: linear-gradient(90deg, var(--accent), var(--accent2)); opacity: 0; transition: opacity .4s ease; }
body[data-fid="studio"] .scrollbar, body[data-fid="signature"] .scrollbar { opacity: 1; }

/* ---------- ESSENTIAL: strip it right back to plain & flat ---------- */
body[data-fid="essential"] .aurora,
body[data-fid="essential"] .field,
body[data-fid="essential"] .grain,
body[data-fid="essential"] .scrollbar { display: none !important; }
/* solid type, no outline trickery */
body[data-fid="essential"] h1.display .shred { -webkit-text-stroke: 0; color: var(--ink); }
body[data-fid="essential"] h1.display .accent { font-style: normal; color: var(--accent); }
/* kill all the depth — flat cards, hairline borders, no shadows or lifts */
body[data-fid="essential"] .price-card,
body[data-fid="essential"] .faq-card,
body[data-fid="essential"] .care-card,
body[data-fid="essential"] .scn-card,
body[data-fid="essential"] .form-card,
body[data-fid="essential"] .proj-card .visual,
body[data-fid="essential"] .alt-contacts a,
body[data-fid="essential"] .callback-tile .alt-row { box-shadow: none !important; transform: none !important; }
body[data-fid="essential"] .price-card.featured { background: var(--paper); }
body[data-fid="essential"] .price-card.featured .pc-cta { background: transparent; border-color: var(--line); color: var(--ink); }
body[data-fid="essential"] .ai-callout { background: var(--bg2); color: var(--ink); }
body[data-fid="essential"] .ai-callout .aic-btn { background: var(--accent); color: #fff; }
body[data-fid="essential"] .ai-callout .aic-eyebrow { color: var(--accent); opacity: 1; }
body[data-fid="essential"] .step:hover { padding-left: 0; background: none; }
body[data-fid="essential"] .scn-card .scn-grip { display: none; }
body[data-fid="essential"] .hero-build-cap { display: none !important; }
/* the marquee sits still */
body[data-fid="essential"] .marquee { background: var(--bg); }

/* ---------- SIGNATURE: ambient always-on flourishes ---------- */
/* accent word gets a slow shimmer */
/* accent word underline removed 2026-07-13 (brand: orange fill + outlined "manual" only) */
/* the live status dot in the hero stamp / labels pulse */
body[data-fid="signature"] .setprep-label .live { animation: pulseLive 1.6s ease-in-out infinite; }
@keyframes pulseLive { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* 3D tilt readiness on cards (JS drives the angle) */
body[data-fid="signature"] .price-card,
body[data-fid="signature"] .care-card { transform-style: preserve-3d; transition: transform .18s var(--ease), border-color .22s, box-shadow .22s; }
/* a touch more drama on section titles */
body[data-fid="signature"] .sec-num::before { animation: lineGrow 2.4s var(--ease) infinite alternate; }
@keyframes lineGrow { from { width: 14px; } to { width: 30px; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .marquee-track { animation: none !important; }
}