/* ============================================================================
   Deep Current — the in-development module pages (shared skeleton).

   Loaded only by social-management, social-ads, reports and onboarding.
   Design tokens come from css/deep.css; nothing new is introduced here.

   Two layouts live in this file:
     default        — a still, complete page. No JS, or reduced motion.
     html.js …      — the stage pins and js/fx-indev.js draws it on scroll.
   ========================================================================== */

/* ------------------------------------------------------- the plain truth --- */
/* The sentence that says the product is not built yet. Not a chip: a paragraph
   in the hero, with a rule beside it so it cannot be read as decoration. */
.dev-note{
  margin:26px 0 0; max-width:62ch; padding:15px 20px 15px 18px;
  border-left:3px solid var(--accent); border-radius:0 12px 12px 0;
  background: rgba(var(--accent-rgb), .07);
  font-size:15.5px; line-height:1.55; color:#d6e8f2;
}
.dev-note b{ color: var(--accent); font-weight:700; }
.sec--light .dev-note, .sec--tintlight .dev-note{
  border-left-color: var(--primary); background: rgba(var(--primary-rgb), .06); color: var(--text);
}
.sec--light .dev-note b, .sec--tintlight .dev-note b{ color: var(--primary); }

.indev-fine{ margin-top:22px; font-size:14px; }
.indev-fine a{ color: var(--accent); text-decoration-thickness:1px; text-underline-offset:3px; }

/* the four modules that DO exist — a row of real links, never a fake CTA */
.built-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; padding:0; list-style:none; }
.built-row a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  font-size:14px; font-weight:600; padding:9px 15px; border-radius:100px;
  border:1px solid rgba(var(--primary-rgb), .28); color: var(--primary); background:#fff;
  transition: background .2s, border-color .2s, transform .2s var(--ease-out);
}
.built-row a::before{ content:""; width:7px; height:7px; border-radius:50%; background: var(--primary); }
.built-row a:hover{ background: rgba(var(--primary-rgb), .07); border-color: var(--primary); transform: translateY(-2px); }
.sec--dark .built-row a{ border-color: rgba(var(--accent-rgb), .3); color: var(--accent); background: rgba(var(--accent-rgb), .06); }
.sec--dark .built-row a::before{ background: var(--accent); }
.sec--dark .built-row a:hover{ background: rgba(var(--accent-rgb), .14); border-color: var(--accent); }

/* ------------------------------------------------------------- the stage --- */
.indev-stage{ position:relative; }
.indev-stick{ position:relative; }
.indev-grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px; align-items:start;
}
.indev-beats{ display:grid; gap:34px; }
.indev-beat .t-h2{ margin-top:16px; font-size:clamp(1.7rem,3.1vw,2.6rem); max-width:16ch; }
.indev-beat .copy{ margin-top:14px; max-width:44ch; }
.indev-figure{ position:relative; width:100%; min-width:0; }
.indev-hint{ display:none; }

/* the diagram sits on a glass panel, like the rail cards on the home page */
.indev-panel{
  position:relative; border-radius:16px; padding:clamp(14px,2vw,24px);
  background: linear-gradient(165deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  border:1px solid rgba(var(--accent-rgb), .16);
  box-shadow: 0 24px 50px -26px rgba(0,0,0,.75);
}
.indev-cap{
  margin:14px 0 0; font:600 10.5px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color: rgba(191,238,255,.62);
}

@media (max-width:900px){
  .indev-grid{ grid-template-columns:1fr; gap:30px; }
  .indev-figure{ order:-1; }
}

/* --------------------------------------------------- pinned, JS running --- */
html.js .indev-stage{ height:340vh; padding:0; }
html.js .indev-stick{
  position:sticky; top:70px; height:calc(100vh - 70px); overflow:clip;
  display:flex; align-items:center;
}
html.js .indev-stick > .wrap{ width:100%; }
html.js .indev-grid{ align-items:center; }
html.js .indev-beats{ position:relative; display:block; min-height:min(48vh, 400px); }
html.js .indev-beat{ position:absolute; top:0; left:0; width:100%; opacity:0; will-change:transform,opacity; }
html.js .indev-hint{
  display:block; position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  font:600 10.5px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(191,238,255,.55); white-space:nowrap; z-index:3;
  opacity: calc(1 - var(--q, 0) * 4);          /* gone once the reader has started */
}

/* timeline items start unresolved; js/fx-indev.js writes the rest inline */
html.js [data-at]{ opacity:0; }
html.js [data-fx="write"]{ opacity:1; clip-path:inset(0 100% 0 0); }
html.js [data-fx="fill"]{ opacity:1; transform:scaleY(0); }
html.js [data-fx="dim"]{ opacity:1; }
[data-fx="fill"]{ transform-origin:top center; }
[data-fx="dim"]{ opacity:.38; }                 /* finished state: stepped back */

@media (max-width:900px){
  html.js .indev-stage{ height:300vh; }
  html.js .indev-grid{ grid-template-rows:auto minmax(0,1fr); align-items:start; gap:16px; }
  html.js .indev-figure{ max-height:46svh; }
  html.js .indev-beats{ min-height:34svh; }
  html.js .indev-beat .t-h2{ font-size:clamp(1.35rem,5.6vw,1.8rem); }
  html.js .indev-beat .copy{ font-size:.98rem; }
  html.js .indev-hint{ bottom:10px; }
  /* the phone's reading window under the figure is small; the caption's
     truth line is already in the hero note and stays on the still page */
  html.js .indev-cap{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  /* belt and braces: html.js is never set under reduced motion, but if a
     browser flips the preference mid-session the page must still be whole */
  .indev-stage{ height:auto !important; padding:var(--pad-loose) 0 !important; }
  .indev-stick{ position:static !important; height:auto !important; display:block !important; }
  .indev-beats{ position:static !important; display:grid !important; min-height:0 !important; }
  .indev-beat{ position:static !important; opacity:1 !important; transform:none !important; }
  [data-at]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  [data-fx="dim"]{ opacity:.38 !important; }
  .indev-hint{ display:none !important; }
}