/* artifact_id: studio-automaten-background-project
   version: 4.0.0
   updated_at: 2026-10-16
   status: REVIEW
   supersedes: studio-automaten-preview 3.0.0
   source: internal configurator project@2a405ab, anonymized for Redlift Media collaboration */

.automaton-showcase { position: relative; min-height: min(720px,calc(100svh - 128px)); overflow: hidden; border-radius: 22px; background:#151b18; color:#f7f1e8; isolation:isolate; box-shadow:0 38px 90px -52px rgba(23,22,26,.82); }
.automaton-project-page .studio-case-detail { overflow:visible; }
.automaton-showcase--home { margin:0 0 clamp(58px,9vh,96px); }
.automaton-showcase--case { margin-bottom:0; }
.automaton-showcase video { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.automaton-showcase__shade { position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(10,14,12,.88),rgba(10,14,12,.42) 52%,rgba(10,14,12,.16)),linear-gradient(0deg,rgba(10,14,12,.8),transparent 58%); }
.automaton-showcase__copy { position:absolute; left:clamp(28px,5vw,72px); top:50%; width:min(590px,56%); transform:translateY(-50%); }
.automaton-showcase__copy .case-kicker { color:#dce95f; }
.automaton-showcase__copy h2,.automaton-showcase__copy h3 { max-width:12ch; margin-top:12px; color:#f7f1e8; font:400 clamp(3.1rem,6.3vw,6.9rem)/.88 "DM Serif Display",Georgia,serif; letter-spacing:-.048em; text-wrap:balance; }
.automaton-showcase--case .automaton-showcase__copy { top:46%; }
.automaton-showcase--case .automaton-showcase__copy h2 { max-width:15ch; font-size:clamp(3rem,5vw,5.6rem); }
.automaton-showcase--home .automaton-showcase__copy h3 { max-width:10ch; }
.automaton-showcase__copy > p:not(.case-kicker) { max-width:48ch; margin-top:24px; color:rgba(247,241,232,.72); font-size:clamp(.98rem,1.3vw,1.14rem); line-height:1.58; }
.automaton-showcase__copy .btn { width:fit-content; margin-top:28px; background:#dce95f; color:#151b18; }
.automaton-showcase__rail { position:absolute; left:clamp(28px,5vw,72px); right:clamp(28px,5vw,72px); bottom:26px; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(247,241,232,.22); }
.automaton-showcase__rail button { min-height:62px; padding:12px 12px 0 0; border:0; border-top:2px solid transparent; background:transparent; color:rgba(247,241,232,.5); text-align:left; font:600 .8rem/1.2 "Outfit",sans-serif; cursor:pointer; }
.automaton-showcase__rail button span { margin-right:10px; color:#dce95f; font-size:.68rem; }
.automaton-showcase__rail button[aria-selected="true"] { border-color:#dce95f; color:#f7f1e8; }
.automaton-showcase__status { position:absolute; top:24px; right:28px; display:flex; align-items:center; gap:9px; color:rgba(247,241,232,.6); font-size:.72rem; }
.automaton-showcase__status span { width:7px; height:7px; border-radius:50%; background:#dce95f; box-shadow:0 0 0 4px rgba(220,233,95,.12); }

.automaton-config { --auto-paper:#f7f1e8; --auto-muted:rgba(247,241,232,.62); --auto-line:rgba(247,241,232,.14); --auto-signal:#dce95f; --auto-cold:#8fd6dc; --auto-height:min(720px,calc(100svh - 128px)); padding:clamp(76px,10vh,118px) 0; background:#0f1311; color:var(--auto-paper); }
.automaton-config__intro { display:grid; grid-template-columns:minmax(150px,.3fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); margin-bottom:56px; }
.automaton-config__intro h2 { max-width:12ch; color:var(--auto-paper); font:800 clamp(3rem,6vw,6.2rem)/.86 "Outfit",sans-serif; letter-spacing:-.055em; text-transform:uppercase; }
.automaton-config__intro > p:last-child { align-self:end; max-width:58ch; color:var(--auto-muted); line-height:1.6; }
.automaton-eyebrow { color:var(--auto-cold); font:800 .7rem/1.2 "Outfit",sans-serif; letter-spacing:.16em; text-transform:uppercase; }
.automaton-config__experience { display:grid; grid-template-columns:minmax(370px,.9fr) minmax(0,1.1fr); gap:46px; align-items:start; }

.automaton-stage { position:sticky; top:92px; height:var(--auto-height); display:grid; grid-template-rows:auto 1fr auto auto; gap:16px; padding:20px; overflow:hidden; border:1px solid rgba(247,241,232,.18); background:linear-gradient(180deg,rgba(247,241,232,.09),rgba(247,241,232,.035)),#171c1a; }
.automaton-stage__topline,.automaton-stage__meta { display:flex; justify-content:space-between; gap:20px; color:rgba(247,241,232,.64); font:600 .72rem/1.2 "Outfit",sans-serif; letter-spacing:.1em; text-transform:uppercase; }
.automaton-stage__topline strong,.automaton-stage__meta strong { color:var(--auto-paper); letter-spacing:0; text-transform:none; }
.automaton-stage__visual { position:relative; min-height:0; overflow:hidden; border:1px solid var(--auto-line); background:#171c1a; }
.automaton-stage__backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.52; transform:scale(1.04); }
.automaton-stage__visual::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(20,24,23,.68),rgba(20,24,23,.1) 56%,rgba(20,24,23,.66)),linear-gradient(0deg,rgba(20,24,23,.8),transparent 58%); pointer-events:none; }
.automaton-stage__render { position:absolute; inset:16px; z-index:2; display:grid; place-items:center; overflow:hidden; border:1px solid var(--auto-line); background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.022)),rgba(27,33,31,.74); }
.automaton-device-composite { position:relative; width:min(74%,340px); max-height:86%; aspect-ratio:3/4; }
.automaton-stage__device { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 28px 48px rgba(0,0,0,.4)); }
.automaton-extra { position:absolute; z-index:3; display:none; object-fit:contain; filter:drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.automaton-extra.is-visible { display:block; }
.automaton-extra--cashless { left:67%; top:44%; width:15%; }
.automaton-extra--coin { left:67%; top:54%; width:13%; }
.automaton-extra--telemetry { left:22%; top:14%; width:11%; }
.automaton-extra--branding { left:19%; top:34%; width:22%; height:32%; }
.automaton-extra--assortment { left:24%; top:16%; width:52%; height:56%; }
.automaton-stage__service { position:absolute; z-index:5; top:18px; right:18px; display:none; padding:10px 12px; background:var(--auto-signal); color:#111; font:800 .65rem/1 "Outfit",sans-serif; }
.automaton-stage__service.is-visible { display:block; }
.automaton-stage__context { position:absolute; z-index:4; left:32px; right:32px; bottom:28px; padding:18px 20px; border:1px solid var(--auto-line); background:rgba(15,19,17,.86); }
.automaton-stage__context span { color:#d7a872; font:800 .63rem/1.2 "Outfit",sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.automaton-stage__context strong { display:block; margin-top:8px; font:800 1.25rem/1 "Outfit",sans-serif; text-transform:uppercase; }
.automaton-stage__context p { margin-top:8px; color:var(--auto-muted); font-size:.8rem; line-height:1.35; }
.automaton-stage__meta { display:grid; grid-template-columns:minmax(0,1fr) max-content; align-items:end; }
.automaton-stage__meta > div { display:grid; gap:6px; }
.automaton-stage__meta > div:first-child strong { max-width:24ch; line-height:1.25; }
.automaton-stage__meta > div:last-child { text-align:right; }
.automaton-stage__meta > div:last-child strong { color:var(--auto-signal); }
.automaton-stage__rail { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.automaton-stage__rail span { height:2px; background:rgba(247,241,232,.12); }
.automaton-stage__rail span.is-active { background:var(--auto-signal); }

.automaton-steps { display:grid; gap:28px; }
.automaton-step { min-height:var(--auto-height); display:grid; align-content:start; gap:16px; padding:28px; overflow:visible; scroll-margin-top:92px; border:1px solid var(--auto-line); background:linear-gradient(180deg,rgba(247,241,232,.06),rgba(247,241,232,.025)),rgba(32,38,34,.78); opacity:.7; transition:opacity .25s,border-color .25s,background .25s; }
.automaton-step.is-active { opacity:1; border-color:rgba(220,233,95,.28); background:linear-gradient(180deg,rgba(247,241,232,.085),rgba(247,241,232,.035)),rgba(37,44,40,.86); }
.automaton-step h3 { max-width:15ch; font:800 clamp(2.15rem,3.8vw,3.7rem)/.91 "Outfit",sans-serif; letter-spacing:-.045em; text-transform:uppercase; }
.automaton-step > p:not(.automaton-eyebrow) { max-width:52ch; color:var(--auto-muted); line-height:1.5; }
.automaton-machines { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:6px; }
.automaton-machines button { min-height:88px; display:grid; grid-template-columns:58px auto 1fr; grid-template-rows:auto auto; align-items:center; gap:3px 10px; padding:9px; overflow:hidden; border:1px solid var(--auto-line); background:#171c1a; color:var(--auto-paper); text-align:left; cursor:pointer; }
.automaton-machines img { grid-row:1/span 2; width:58px; height:68px; object-fit:contain; background:rgba(27,33,31,.72); }
.automaton-machines span { align-self:end; color:var(--auto-cold); font-size:.64rem; font-weight:800; }
.automaton-machines strong { align-self:end; font-size:.92rem; }
.automaton-machines small { grid-column:2/span 2; align-self:start; color:var(--auto-muted); }
.automaton-machines button.is-active,.automaton-machines button:hover { border-color:rgba(220,233,95,.4); background:rgba(247,241,232,.11); }
.automaton-next { width:fit-content; margin-top:auto; padding:14px 18px; background:var(--auto-signal); color:#111; font:800 .84rem/1 "Outfit",sans-serif; text-decoration:none; }
.automaton-next--secondary { border:1px solid rgba(247,241,232,.24); background:transparent; color:var(--auto-paper); }
.automaton-value { display:flex; justify-content:space-between; padding:18px; border:1px solid var(--auto-line); background:rgba(247,241,232,.05); }
.automaton-value span { color:var(--auto-muted); }
.automaton-radio-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.automaton-radio-grid label,.automaton-toggle,.automaton-service { min-height:58px; display:flex; align-items:center; gap:12px; padding:14px; border:1px solid var(--auto-line); background:rgba(247,241,232,.05); }
.automaton-config input { accent-color:var(--auto-signal); }
.automaton-toggle { margin-top:4px; }
.automaton-extras { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.automaton-extras label { min-height:92px; display:grid; grid-template-columns:auto 58px 1fr; align-items:center; gap:12px; padding:12px; border:1px solid var(--auto-line); background:rgba(247,241,232,.055); }
.automaton-extras label.is-unavailable { display:none; }
.automaton-extras img { width:58px; height:58px; object-fit:contain; background:rgba(27,33,31,.58); }
.automaton-service span { display:grid; gap:5px; }
.automaton-service small { color:var(--auto-muted); }
.automaton-summary { display:grid; gap:0; padding:20px 22px; border:1px solid var(--auto-line); background:rgba(247,241,232,.06); }
.automaton-summary div { display:flex; justify-content:space-between; gap:20px; padding:14px 0; border-bottom:1px solid var(--auto-line); }
.automaton-summary div:first-child strong { color:var(--auto-signal); font-size:1.3rem; }
.automaton-summary p { margin-top:18px; color:var(--auto-muted); font-size:.88rem; line-height:1.45; }
.automaton-preview-button { min-height:52px; margin-top:8px; border:1px solid var(--auto-line); background:transparent; color:var(--auto-muted); font:700 .8rem/1 "Outfit",sans-serif; }

@media (max-width:900px) {
  .automaton-config__experience { grid-template-columns:minmax(300px,.82fr) minmax(0,1.18fr); gap:22px; }
  .automaton-machines { grid-template-columns:1fr; }
  .automaton-machines button { min-height:70px; }
  .automaton-extras { grid-template-columns:1fr; }
}
@media (max-width:767px) {
  .studio-case-hero h1 { font-size:clamp(3rem,14vw,4.8rem); }
  .automaton-showcase { width:calc(100% + 42px); min-height:660px; margin-left:-21px; border-radius:0; }
  .automaton-showcase--home { margin-top:6px; margin-bottom:46px; }
  .automaton-showcase__shade { background:linear-gradient(0deg,rgba(10,14,12,.92),rgba(10,14,12,.12) 76%); }
  .automaton-showcase__copy { left:21px; right:21px; top:auto; bottom:126px; width:auto; transform:none; }
  .automaton-showcase__copy h2,.automaton-showcase__copy h3 { font-size:clamp(2.8rem,13vw,4.4rem); }
  .automaton-showcase__copy > p:not(.case-kicker) { margin-top:16px; font-size:.95rem; }
  .automaton-showcase__copy .btn { width:100%; justify-content:center; margin-top:20px; }
  .automaton-showcase__rail { left:21px; right:21px; bottom:18px; }
  .automaton-showcase__rail button { min-height:54px; font-size:.68rem; }
  .automaton-showcase__rail button span { display:block; margin:0 0 4px; }
  .automaton-showcase__status { top:18px; right:21px; font-size:.66rem; }
  .automaton-config { --auto-height:auto; padding:64px 0; }
  .automaton-config__intro { grid-template-columns:1fr; gap:16px; margin-bottom:36px; }
  .automaton-config__intro h2 { font-size:clamp(2.8rem,13vw,4.2rem); }
  .automaton-config__experience { grid-template-columns:1fr; }
  .automaton-stage { position:relative; top:auto; height:600px; }
  .automaton-step { height:auto; min-height:560px; overflow:visible; padding:22px; }
  .automaton-machines,.automaton-extras { grid-template-columns:1fr 1fr; }
  .automaton-machines button { grid-template-columns:46px 1fr; min-height:82px; }
  .automaton-machines img { width:46px; height:58px; }
  .automaton-machines span { display:none; }
  .automaton-machines small { grid-column:2; }
}
@media (max-width:430px) {
  .automaton-stage { height:540px; padding:14px; }
  .automaton-stage__context { left:20px; right:20px; bottom:18px; }
  .automaton-stage__meta { font-size:.62rem; }
  .automaton-step { min-height:0; }
  .automaton-machines,.automaton-extras,.automaton-radio-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .automaton-showcase video { display:none; } }