/* fotonet Studio page. Loads after /assets/site.css. */

/* Hero: the mark, the promise, and the app window rising from the bottom */
.studio-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(640px, calc(100svh - 44px), 980px);
  padding: 96px var(--gutter) 0;
  display: flex; flex-direction: column; align-items: center; gap: 64px;
  background: radial-gradient(ellipse 70% 55% at 50% 100%, rgba(59, 91, 219, .22), transparent 70%), var(--black);
  text-align: center;
}
.studio-hero-text { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.studio-mark { width: 96px; height: 96px; margin-bottom: 18px; }
.studio-name { font-size: 24px; font-weight: 600; color: var(--text-2); letter-spacing: .009em; }
.studio-headline { font-size: 80px; line-height: 1.05; font-weight: 600; letter-spacing: -0.015em; }
.studio-soon { margin-top: 14px; font-size: 21px; color: var(--text-2); }
.studio-ctas { margin-top: 22px; }
.studio-window { width: min(1080px, 100%); margin-top: auto; }
.studio-window .appwin-body { min-height: 330px; }

/* Overview: the six tabs, in order */
.steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 80px; }
.steps li { display: grid; gap: 4px; padding: 22px 20px; border-radius: 22px; background: var(--alt); }
.steps span { font-family: var(--mono); font-size: 12px; color: var(--glacier-l); }
.steps b { font-size: 21px; font-weight: 600; }
.steps small { font-size: 14px; color: var(--text-2); }

.studio-intro { max-width: 760px; }

/* Label: four features */
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 64px; }
.feature { display: grid; align-content: start; gap: 18px; padding: 30px 28px; border-radius: 28px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); }
.feature svg { width: 36px; height: 36px; color: var(--glacier-l); }
.feature p { font-size: 17px; color: var(--text-2); }
.feature strong { color: var(--text); font-weight: 600; }

/* Train: the chart, large */
.chart-panel { margin-top: 64px; padding: 28px 28px 20px; border-radius: 28px; background: var(--alt); }
.chart-panel svg { display: block; width: 100%; height: clamp(220px, 32vw, 380px); }
.chart-panel path { fill: none; vector-effect: non-scaling-stroke; }
.chart-panel .grid { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.chart-panel .band { fill: rgba(111, 166, 242, .18); stroke: none; }
.chart-panel .map { stroke: var(--glacier-m); stroke-width: 3; }
.chart-panel .forecast { stroke: var(--glacier-l); stroke-width: 2.5; stroke-dasharray: 6 7; }
.chart-panel .loss { stroke: var(--amber); stroke-width: 2.5; opacity: .75; }
.chart-panel .now { stroke: rgba(255, 255, 255, .25); stroke-width: 1; stroke-dasharray: 2 5; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 16px; font-size: 14px; color: var(--text-2); }
.chart-legend span::before { content: ""; display: inline-block; width: 18px; height: 3px; margin-right: 8px; vertical-align: middle; border-radius: 2px; background: currentColor; }
.lg-map::before { background: var(--glacier-m) !important; }
.lg-forecast::before { background: repeating-linear-gradient(90deg, var(--glacier-l) 0 5px, transparent 5px 9px) !important; }
.lg-loss::before { background: var(--amber) !important; }

.cols2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 64px; }
.col-title { margin-bottom: 12px; font-size: 28px; line-height: 1.14; font-weight: 600; }
.cols2 p { font-size: 19px; color: var(--text-2); }

/* Test and export: where it runs, what it exports */
.chip-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 64px; }
.chip-rows h3 { margin-bottom: 16px; font-size: 17px; font-weight: 600; color: var(--text-2); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 12px 20px; border-radius: 980px; background: rgba(255, 255, 255, .08); font-size: 17px; }

/* Agents: a deep gradient lit by the colour of one model an agent can be, changing every 5 s
   (studio.js sets data-brand): Claude's orange first, then ChatGPT's green, Gemini's blue,
   DeepSeek's blue and Qwen's purple. The colours are registered properties, so the gradient
   itself fades from one model to the next. --ag-glow lights the top right, --ag-mid the top
   left, where the text is (white text keeps 4.5:1 on every --ag-mid), --ag-deep the bottom. */
@property --ag-glow { syntax: "<color>"; inherits: true; initial-value: #f4a58a; }
@property --ag-mid { syntax: "<color>"; inherits: true; initial-value: #a8492a; }
@property --ag-deep { syntax: "<color>"; inherits: true; initial-value: #2a0f08; }
@property --ag-tint { syntax: "<color>"; inherits: true; initial-value: #ffc4ad; }
/* The painted layers. Every brand draws the same three gradient layers, so a change of brand is
   only a change of these colours and fades like the rest. Flat brands give the glow and the corner
   no colour and make the top and the end of the ramp their flat colour (--ag-deep); Gemini lights
   them, so only Gemini shows a gradient. */
@property --ag-l-glow { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --ag-l-corner { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --ag-l-top { syntax: "<color>"; inherits: true; initial-value: #2a0f08; }
@property --ag-l-end { syntax: "<color>"; inherits: true; initial-value: #2a0f08; }
.bg-agents {
  --ag-glow: #f4a58a; --ag-mid: #a8492a; --ag-deep: #2a0f08; --ag-tint: #ffc4ad;
  --ag-l-glow: transparent; --ag-l-corner: transparent; --ag-l-top: var(--ag-deep); --ag-l-end: var(--ag-deep);
  --text: #fff; --text-2: rgba(255, 255, 255, .78); --line: rgba(255, 255, 255, .16);
  color: var(--text);
  /* eased multi-stop ramps (no two-stop falloffs), so the glow and the corner fade out without edges */
  background:
    radial-gradient(90% 95% at 96% -8%,
      color-mix(in srgb, var(--ag-l-glow) 50%, transparent) 0%,
      color-mix(in srgb, var(--ag-l-glow) 30%, transparent) 20%,
      color-mix(in srgb, var(--ag-l-glow) 14%, transparent) 42%,
      color-mix(in srgb, var(--ag-l-glow) 5%, transparent) 64%,
      transparent 88%),
    radial-gradient(95% 85% at -4% 108%,
      color-mix(in srgb, var(--ag-l-corner) 60%, transparent) 0%,
      color-mix(in srgb, var(--ag-l-corner) 28%, transparent) 40%,
      transparent 85%),
    linear-gradient(172deg,
      var(--ag-l-top) 0%,
      color-mix(in srgb, var(--ag-l-top) 80%, var(--ag-l-end)) 18%,
      color-mix(in srgb, var(--ag-l-top) 58%, var(--ag-l-end)) 38%,
      color-mix(in srgb, var(--ag-l-top) 36%, var(--ag-l-end)) 60%,
      color-mix(in srgb, var(--ag-l-top) 16%, var(--ag-l-end)) 82%,
      var(--ag-l-end) 100%);
  transition: --ag-glow 1.6s ease, --ag-mid 1.6s ease, --ag-deep 1.6s ease, --ag-tint 1.6s ease,
    --ag-l-glow 1.6s ease, --ag-l-corner 1.6s ease, --ag-l-top 1.6s ease, --ag-l-end 1.6s ease;
}
.bg-agents[data-brand="gemini"] {
  --ag-l-glow: var(--ag-glow); --ag-l-corner: var(--ag-deep); --ag-l-top: var(--ag-mid); --ag-l-end: #05060a;
}
.bg-agents[data-brand="chatgpt"] { --ag-glow: #6fdcb8; --ag-mid: #0b6e56; --ag-deep: #032a20; --ag-tint: #a6f0d6; }
.bg-agents[data-brand="gemini"] { --ag-glow: #9fd0ff; --ag-mid: #2a62d4; --ag-deep: #0a1748; --ag-tint: #c4e2ff; }
.bg-agents[data-brand="deepseek"] { --ag-glow: #a3b2ff; --ag-mid: #2f48d8; --ag-deep: #0a1150; --ag-tint: #c9d1ff; }
.bg-agents[data-brand="qwen"] { --ag-glow: #b0acff; --ag-mid: #4a44cf; --ag-deep: #15114b; --ag-tint: #d3d0ff; }
.bg-agents .eyebrow { color: var(--ag-tint); }
.bg-agents .dim { color: var(--text-2); }
.bg-agents .intro { color: var(--text-2); }
.bg-agents .feature {
  background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1px var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.bg-agents .feature p { color: var(--text-2); }
.bg-agents .feature strong { color: var(--text); }
.bg-agents .feature svg { color: var(--ag-tint); }
.agent-note { margin-top: 40px; font-size: 14px; color: var(--text-2); }
/* the ask: one message to the agent, as a chat bubble */
.agent-ask { margin-top: 56px; }
.agent-ask figcaption { margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--ag-tint); }
.agent-ask p { width: fit-content; max-width: 720px; padding: 20px 26px; border-radius: 26px 26px 26px 8px; background: #fff; color: #1d1d1f; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); font-size: 24px; line-height: 1.3; font-weight: 500; }
@media (max-width: 734px) { .agent-ask { margin-top: 40px; } .agent-ask p { font-size: 19px; padding: 16px 20px; } }
@media (prefers-reduced-motion: reduce) { .bg-agents { transition: none; } }

@media (max-width: 1068px) {
  .studio-headline { font-size: 64px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 734px) {
  .studio-hero { padding-top: 64px; gap: 44px; }
  .studio-mark { width: 72px; height: 72px; }
  .studio-name { font-size: 19px; }
  .studio-headline { font-size: 40px; line-height: 1.1; }
  .studio-soon { font-size: 17px; }
  .studio-window .appwin-body { min-height: 200px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; }
  .feature-grid, .cols2, .chip-rows { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cols2, .chip-rows { gap: 36px; }
  .chart-panel { padding: 20px 16px 14px; border-radius: 22px; }
}

/* Real screenshots */
.studio-window { width: min(1180px, 100%); margin-top: auto; border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 -30px 120px rgba(59, 91, 219, .3); }
.studio-window img { width: 100%; height: auto; }

/* The tour: a frosted tab bar like the app's, the screen it opens, and what it does */
.tour { margin-top: 72px; }
.tour-panel { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: center; }
.tour-panel[hidden] { display: none; }
.tour-shot { border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 80px rgba(0, 0, 0, .5); }
.tour-shot img { width: 100%; height: auto; }
.tour-text h3 { font-size: 32px; line-height: 1.12; font-weight: 600; }
.tour-text p { margin-top: 14px; font-size: 19px; color: var(--text-2); }
.tour-text ul { margin-top: 20px; display: grid; gap: 10px; }
.tour-text li { position: relative; padding-left: 22px; font-size: 17px; }
.tour-text li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--glacier-m); }
@media (max-width: 1068px) { .tour-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
@media (max-width: 734px) {
  .tour-text h3 { font-size: 26px; }
  .tour-text p { font-size: 17px; }
}

/* The tab bar: the native kit's tab bar (imge-native ui.rs) in its dark variant, with the liquid
   glass selector of assets/liquid-tabs.js. Tabs sit edge to edge: each its label plus 12 px a side,
   at least 64 px, 52 px tall, inside a 4 px rim; icons 24 px, labels 10 px. */
.tour-bar {
  position: relative; display: flex; gap: 0; width: max-content; max-width: 100%;
  margin: 40px auto 0; padding: 4px; border-radius: 999px; overflow: visible;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  --liquid-page: #000; --liquid-bar: #1b1b1d; --liquid-ink: #d9d9dc; --liquid-on: #a7cffa;
  background: rgba(31, 31, 33, .88);
  -webkit-backdrop-filter: blur(3px) saturate(140%); backdrop-filter: blur(3px) saturate(140%);
  box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 26px rgba(0, 0, 0, .3);
  transform-origin: center;
}
.tour-bar button {
  position: relative; z-index: 1; flex: none; display: grid; justify-items: center; align-content: start;
  min-width: 64px; height: 52px; padding: 6px 12px 0; border: 0; border-radius: 999px; background: none;
  color: var(--liquid-ink); font-size: 10px; line-height: 12px; touch-action: pan-y; cursor: pointer;
}
.tour-bar button svg { width: 24px; height: 24px; margin-bottom: 4px; }
.tour-bar button[aria-selected="true"] { color: var(--liquid-on); }
.tour-bar button:focus-visible { outline: 2px solid var(--liquid-on); outline-offset: -2px; }
/* the grey pill (the kit's fill-3) and the glass, both placed by the script */
.tour-bar .liquid-pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: rgba(120, 120, 128, .24); pointer-events: none; will-change: transform, width, height; }
.tour-bar .liquid-canvas { position: absolute; z-index: 3; pointer-events: none; }
.tour-bar.is-dragging { cursor: grabbing; }
/* narrow phones: the six tabs share the width instead of scrolling, so a drag never fights a scroll */
@media (max-width: 440px) {
  .tour-bar { width: 100%; }
  .tour-bar button { flex: 1 1 0; min-width: 0; padding-inline: 0; }
}

/* phones: the floating bar keeps its title and Explore; the page itself says coming soon */
@media (max-width: 480px) {
  .localnav-actions .pill-tag { display: none; }
}

/* the glass canvas reaches past the bar so the grown lens is never cut; at the screen's edge it
   must not widen the page */
#overview { overflow-x: hidden; overflow-x: clip; }

/* the page is at 80% on desktop; the tab bar is shown at 1.3x the native size, so its glass and
   its details read clearly; 0.8 x 1.625 = 1.3 */
@media (min-width: 1069px) {
  .tour-bar { zoom: 1.625; }
}

/* the six-tab section fits one 1080p screen on desktop, heading to tab bar */
@media (min-width: 1069px) {
  #overview.section { padding-top: 96px; }
  #overview .tour { margin-top: 48px; }
  #overview .tour-bar { margin-top: 28px; }
}

/* Hero: the whole hero fits one screen, the app shown whole, the text higher up.
   Corners scale with the picture, so they read the same on a phone as on a desktop. */
.studio-hero { min-height: calc(var(--screen) - 44px); padding: 40px var(--gutter) 48px; gap: 32px; justify-content: center; }
.studio-mark { width: 72px; height: 72px; margin-bottom: 8px; }
.studio-ctas { margin-top: 16px; }
.studio-window { margin-top: 0; width: min(1180px, 100%, max(300px, calc((var(--screen) - 44px - 560px) * 1.6))); border-radius: 1.36% / 2.17%; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 120px rgba(59, 91, 219, .3); }
.tour-shot { border-radius: 2.2% / 3.5%; }
@media (max-width: 734px) {
  .studio-hero { padding-top: 48px; gap: 28px; }
}