/* Gastronova – Claude Motion Studio (preview 29. 9. 2026)
   Scoped to .studio sections + small preview helpers. Content is visible without JS;
   motion is added only under html.studio-js and never under prefers-reduced-motion. */
:root{
  --st-ink:#0e1512;--st-ink-2:#15221b;--st-cream:#f4f2ea;--st-cream-2:#e9e6da;
  --st-text:#f4f2ea;--st-muted:#aab5ad;--st-ink-muted:#4f5b53;--st-line:rgba(244,242,234,.16);--st-line-dark:rgba(21,34,27,.16);
  --st-action:#ffd829;--st-ease:cubic-bezier(.2,.7,.1,1);--st-wipe:cubic-bezier(.7,0,.2,1);
  --st-gutter:clamp(16px,5vw,86px);--st-max:1440px;
}
.st-preview-ribbon{position:relative;z-index:5;background:#ffd829;color:#15221b;font:600 12px/1.2 Manrope,Arial,sans-serif;letter-spacing:.02em;text-align:center;padding:7px 16px}
.st-preview-status{margin:.8em 0 0;font-weight:600}

.studio{font-family:Manrope,Arial,sans-serif;position:relative;overflow:clip;scroll-margin-top:84px}
.studio *{box-sizing:border-box}
.studio [id]{scroll-margin-top:84px}
.st-wrap{width:100%;max-width:var(--st-max);margin-inline:auto;padding-inline:var(--st-gutter)}
.st-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px 48px;padding-top:clamp(64px,7.5vw,112px);padding-bottom:clamp(32px,4vw,56px)}
.st-head>*{margin:0}
.studio h2{font-size:clamp(38px,5.6vw,84px);line-height:.98;letter-spacing:-.045em;font-weight:500;margin:0;text-wrap:balance}
.studio h2 em{font-style:normal;color:var(--st-action)}
.st-eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin:0 0 18px;opacity:.78}
.st-lead{font-size:clamp(17px,1.35vw,20px);line-height:1.55;margin:0;max-width:34ch}
.st-note{margin:0;max-width:30ch;font-size:15px;line-height:1.5;opacity:.8}

/* Buttons & links */
.st-btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;background:var(--st-action);color:#15221b;font:700 15px/1 Manrope,Arial,sans-serif;text-decoration:none;border:0;border-radius:2px;transition:transform .35s var(--st-ease),box-shadow .35s var(--st-ease)}
.st-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(255,216,41,.7)}
.st-link{display:inline-flex;align-items:center;min-height:44px;color:inherit;font:600 15px/1.2 Manrope,Arial,sans-serif;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;border-bottom:1px solid currentColor;border-bottom-color:color-mix(in srgb,currentColor 35%,transparent);transition:border-color .3s}
.st-link:hover{border-bottom-color:currentColor}
.studio a:focus-visible,.studio button:focus-visible{outline:3px solid var(--st-action);outline-offset:4px}
.studio-extint a:focus-visible,.studio-extint button:focus-visible{outline-color:#15221b}
.st-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 28px;margin-top:32px}

/* ---------- 1. Families: photo dissolving into copy ---------- */
.studio-families{background:var(--st-ink);color:var(--st-text);padding-bottom:clamp(40px,6vw,90px)}
.studio-families .st-head{grid-template-columns:minmax(0,1fr)}
.st-family-index{display:flex;gap:10px;flex-wrap:wrap;position:static;margin:0;padding:0;background:none;height:auto}
.st-family-index a{display:grid;gap:4px;min-width:170px;padding:14px 18px 13px;border:1px solid var(--st-line);color:inherit;text-decoration:none;transition:border-color .3s,background .3s}
.st-family-index a span{font-size:18px;font-weight:600;letter-spacing:-.02em}
.st-family-index a small{font-size:12.5px;color:var(--st-muted)}
.st-family-index a:hover{border-color:var(--st-action);background:rgba(255,216,41,.06)}
.st-family{position:relative;margin-top:clamp(20px,2.5vw,40px)}
.st-family-media{position:relative;margin:0;height:clamp(380px,62vh,700px);overflow:hidden;background:#0a0f0c}
.st-family-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(14,21,18,0) 52%,rgba(14,21,18,.62) 80%,var(--st-ink) 100%)}
.st-family-media img,.st-family-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%;transform-origin:50% 60%;
  transform:scale(calc(1 + .07 * var(--st-zoom,0)))}
#rada-box .st-family-media img{object-position:50% 50%}
.st-family-media video{opacity:0;transition:opacity .9s var(--st-ease)}
.st-family-media video.is-playing,.st-family-media video.has-played{opacity:1}
.st-family-media figcaption{position:absolute;right:var(--st-gutter);top:22px;z-index:2;font-size:12px;letter-spacing:.06em;color:#fff;background:rgba(10,15,12,.46);padding:7px 11px;backdrop-filter:blur(6px)}
.st-film-toggle{position:absolute;left:var(--st-gutter);top:18px;z-index:2;min-height:40px;padding:0 14px;border:1px solid rgba(255,255,255,.45);background:rgba(10,15,12,.46);color:#fff;font:600 12.5px/1 Manrope,Arial,sans-serif;cursor:pointer;backdrop-filter:blur(6px)}
.st-family-copy{position:relative;z-index:2;margin-top:clamp(-160px,-10vw,-96px);display:grid;grid-template-columns:minmax(0,1fr);justify-items:start}
.st-family-copy h3,.st-family-copy h2{font-size:clamp(52px,7.4vw,118px);line-height:.88;letter-spacing:-.055em;font-weight:500;margin:0 0 24px;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.st-family.is-flip .st-family-copy{justify-items:end;text-align:right}
.st-family.is-flip .st-actions,.st-family.is-flip .st-facts{justify-content:flex-end}
.st-family.is-flip .st-lead{margin-left:auto}
.st-facts{display:flex;flex-wrap:wrap;gap:12px 40px;margin:26px 0 0;padding-top:20px;border-top:1px solid var(--st-line);max-width:640px}
.st-family.is-flip .st-facts{margin-left:auto}
.st-facts div{display:grid;gap:4px}.st-facts dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--st-muted)}
.st-facts dd{margin:0;font-size:15px;font-weight:600}
.st-family-foot{display:flex;gap:18px 36px;flex-wrap:wrap;justify-content:flex-end;padding-top:clamp(28px,3vw,48px);color:var(--st-muted)}

/* ---------- 2. Exterior / interior ---------- */
.studio-extint{background:var(--st-cream);color:#15221b;padding-bottom:clamp(64px,8vw,120px)}
.st-extint-controls{display:flex;justify-content:space-between;align-items:center;gap:16px 24px;flex-wrap:wrap;margin-bottom:22px}
.st-units{display:flex;gap:6px;flex-wrap:wrap}
.st-units button,.st-switch button,.st-filter button{min-height:46px;padding:0 18px;border:1px solid var(--st-line-dark);background:transparent;color:inherit;font:600 15px/1 Manrope,Arial,sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:10px;transition:background .3s,color .3s,border-color .3s}
.st-units button small{font-weight:500;font-size:12px;opacity:.65}
.st-units button[aria-pressed=true]{background:#15221b;color:var(--st-cream);border-color:#15221b}
.st-switch{display:inline-flex;padding:4px;background:var(--st-cream-2);gap:4px}
.st-switch button{border:0;min-width:112px;justify-content:center}
.st-switch button[aria-pressed=true]{background:var(--st-action);color:#15221b}
.st-units-wrap{display:grid;gap:clamp(40px,5vw,72px)}
.st-stage{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.st-view{margin:0;position:relative;overflow:hidden;background:#d8d4c6}
.st-view img{display:block;width:100%;height:100%;aspect-ratio:3/2;object-fit:cover}
.st-view figcaption{position:absolute;left:0;bottom:0;right:0;padding:40px 22px 18px;color:#fff;font-size:14px;line-height:1.35;background:linear-gradient(transparent,rgba(8,12,10,.72))}
.st-view figcaption span{display:block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:6px;color:var(--st-action)}
.st-unit-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 24px;padding-top:16px}
.st-unit-bar p{margin:0;font-size:15px;color:var(--st-ink-muted)}.st-unit-bar strong{color:#15221b;margin-right:8px}
/* JS enhanced: one unit, one stage, wipe between views */
.studio-js .st-extint-controls{display:flex}
.studio-js .st-extint-controls[hidden]{display:none}
.studio-js .st-unit[data-inactive]{display:none}
.studio-js .st-stage{display:block;position:relative;aspect-ratio:16/9;max-height:78vh;width:100%}
.studio-js .st-stage .st-view{position:absolute;inset:0}
.studio-js .st-stage .st-view img{aspect-ratio:auto;height:100%}
.studio-js .st-view-int{clip-path:inset(0 0 0 100%);transition:clip-path 1s var(--st-wipe)}
.studio-js .st-view-int img{transform:scale(1.06);transition:transform 1.4s var(--st-ease)}
.studio-js .st-view-ext img{transition:transform 1.4s var(--st-ease)}
.studio-js [data-view-state=int] .st-view-int{clip-path:inset(0 0 0 0)}
.studio-js [data-view-state=int] .st-view-int img{transform:scale(1)}
.studio-js [data-view-state=int] .st-view-ext img{transform:scale(1.04) translateX(-1.5%)}
.studio-js .st-unit:not([data-inactive]){animation:st-fade .6s var(--st-ease)}
@keyframes st-fade{from{opacity:0}to{opacity:1}}

/* ---------- 3. Compact realizations ---------- */
.studio-cases{background:var(--st-ink-2);color:var(--st-text);padding-bottom:clamp(64px,8vw,120px)}
.studio-js .st-filter:not([hidden]){display:flex}
.st-filter{gap:6px;flex-wrap:wrap;margin-bottom:22px}
.st-filter button{border-color:var(--st-line)}
.st-filter button[aria-pressed=true]{background:var(--st-cream);color:#15221b;border-color:var(--st-cream)}
.st-case-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.st-case-grid li[hidden]{display:none}
.st-case{position:relative;display:block;overflow:hidden;color:#fff;text-decoration:none;background:#0a0f0c;aspect-ratio:4/3}
.st-case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--st-ease)}
.st-case::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,10,8,.82));transition:opacity .5s}
.st-case-copy{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:22px;display:grid;gap:6px}
.st-case-meta{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--st-action)}
.st-case strong{font-size:clamp(21px,1.8vw,28px);font-weight:600;letter-spacing:-.025em;line-height:1.1}
.st-case-more{font-size:14px;opacity:.82;transform:translateY(0);transition:opacity .4s,transform .4s var(--st-ease)}
.st-case:hover img,.st-case:focus-visible img{transform:scale(1.045)}
.st-filter-status{margin:12px 0 0;font-size:14px;color:var(--st-muted);min-height:1.4em}
.st-films{padding-top:clamp(44px,5vw,72px)}
.st-films h3{font-size:clamp(26px,2.6vw,38px);font-weight:500;letter-spacing:-.03em;margin:0 0 22px}
.st-film-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.st-film-grid article{display:grid;align-content:start;gap:10px}
.st-film-grid video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#0a0f0c;display:block}
.st-film-grid h4{margin:6px 0 0;font-size:18px;font-weight:600}
.st-film-grid blockquote{margin:0;font-size:15px;line-height:1.5;color:var(--st-muted)}
.st-film-grid .gn-video-sound,.st-film-grid .st-link{justify-self:start}
.st-cta{margin-top:clamp(44px,5vw,72px);display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:24px 60px;align-items:end;padding:clamp(28px,4vw,56px);background:var(--st-cream);color:#15221b}
.st-cta h3{font-size:clamp(28px,3.2vw,48px);line-height:1.02;letter-spacing:-.04em;font-weight:500;margin:0 0 14px}
.st-cta p{margin:0;max-width:52ch;line-height:1.55;color:var(--st-ink-muted)}
.st-cta .st-actions{margin-top:0}
.st-page-cta{padding-bottom:clamp(40px,6vw,80px)}

/* ---------- Motion (JS + no reduced motion only) ---------- */
@media (prefers-reduced-motion:no-preference){
  .studio-js [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--st-ease),transform 1.1s var(--st-ease)}
  .studio-js [data-reveal].is-in{opacity:1;transform:none}
  .studio-js .st-case-grid li:nth-child(3n+2){transition-delay:.08s}.studio-js .st-case-grid li:nth-child(3n){transition-delay:.16s}
  .studio-js .st-motion-grid .page-card{opacity:0;transform:translateY(24px);transition:opacity .8s var(--st-ease),transform 1s var(--st-ease)}
  .studio-js .st-motion-grid .page-card.is-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .studio *,.studio *::before,.studio *::after{transition-duration:0s!important;animation:none!important}
  .st-family-media img,.st-family-media video{transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .st-case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-film-grid{grid-template-columns:1fr;gap:34px}
  .st-cta{grid-template-columns:1fr;align-items:start}
  .studio-js .st-stage{aspect-ratio:4/3}
}
@media (max-width:640px){
  .st-head{padding-top:56px;grid-template-columns:1fr}
  .st-family-index{width:100%;display:grid;grid-template-columns:1fr}
  .st-family-index a{min-width:0;grid-template-columns:1fr auto;align-items:baseline}
  .st-family-media{height:auto;aspect-ratio:4/3.3}
  .st-family-media figcaption{top:14px;right:16px;font-size:11px;max-width:58%}
  .st-film-toggle{left:16px;top:14px}
  .st-family-copy{margin-top:-58px}
  .st-family.is-flip .st-family-copy{justify-items:start;text-align:left}
  .st-family.is-flip .st-actions,.st-family.is-flip .st-facts{justify-content:flex-start}
  .st-family.is-flip .st-lead,.st-family.is-flip .st-facts{margin-left:0}
  .st-actions{gap:12px 22px}.st-btn{width:100%;justify-content:space-between}
  .st-family-foot{justify-content:flex-start}
  .st-extint-controls{align-items:stretch}.st-units{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .st-units button{flex-direction:column;justify-content:center;gap:2px;padding:6px 4px;min-height:56px}
  .st-switch{width:100%}.st-switch button{flex:1;min-width:0}
  .st-stage{grid-template-columns:1fr}
  .studio-js .st-stage{aspect-ratio:4/5;max-height:none}
  .studio-js .st-filter:not([hidden]){display:grid;grid-template-columns:repeat(4,auto);justify-content:start}.st-filter button{padding:0 13px;font-size:14px}
  .st-case-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin-inline:calc(var(--st-gutter) * -1);padding-inline:var(--st-gutter);scroll-padding-inline:var(--st-gutter);scrollbar-width:none}
  .st-case-grid::-webkit-scrollbar{display:none}
  .st-case-grid li{flex:0 0 82%;scroll-snap-align:start}
  .st-case{aspect-ratio:4/5}
}

/* ---------- v2: compact family selector (home) ---------- */
.studio-selector{background:var(--st-ink);color:var(--st-text);padding-bottom:clamp(56px,7vw,104px)}
.st-head-links{display:flex;gap:14px 30px;flex-wrap:wrap;align-items:center;color:var(--st-muted)}
.st-head-links .st-link{color:var(--st-text)}
/* No JS: three compact cards */
.st-sel-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.st-sel-media{position:relative;margin:0;overflow:hidden;background:#0a0f0c;aspect-ratio:3/2}
.st-sel-media img,.st-sel-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.st-sel-media video{opacity:0;transition:opacity .9s var(--st-ease)}
.st-sel-media video.is-playing,.st-sel-media video.has-played{opacity:1}
.st-sel-media figcaption{position:absolute;right:14px;top:14px;z-index:2;font-size:12px;letter-spacing:.05em;color:#fff;background:rgba(10,15,12,.5);padding:6px 10px;backdrop-filter:blur(6px)}
.st-sel-media .st-film-toggle{left:14px;top:14px}
.st-sel-copy{padding-top:22px}
.st-sel-copy h3{font-size:clamp(34px,3.4vw,52px);line-height:.95;letter-spacing:-.045em;font-weight:500;margin:0 0 14px}
.st-sel-copy .st-lead{font-size:16px}
.st-sel-copy .st-facts{margin-top:18px}
.st-sel-copy .st-actions{margin-top:22px}
/* JS: active photo + three always-visible options */
.studio-js .st-sel{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr);grid-template-rows:auto 1fr;column-gap:clamp(24px,3.4vw,56px)}
.studio-js .st-sel-tabs:not([hidden]){grid-column:2;grid-row:1;display:grid;gap:8px;position:relative;z-index:3;align-self:start}
.studio-js .st-sel-panels{grid-column:1/-1;grid-row:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;column-gap:inherit;row-gap:0}
.studio-js .st-sel-panel{grid-column:1/-1;grid-row:1/-1;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;
  opacity:0;visibility:hidden;transition:opacity .7s var(--st-ease),visibility 0s linear .7s}
.studio-js .st-sel-panel.is-active{opacity:1;visibility:visible;transition:opacity .7s var(--st-ease),visibility 0s}
.studio-js .st-sel-panel:focus{outline:none}
.studio-js .st-sel-media{grid-column:1;grid-row:1/-1;aspect-ratio:auto;height:auto;min-height:clamp(420px,64vh,680px);align-self:stretch}
.studio-js .st-sel-copy{grid-column:2;grid-row:2;padding-top:30px;align-self:start}
.st-sel-tabs button{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 16px;text-align:left;width:100%;min-height:76px;padding:14px 18px;
  background:transparent;color:inherit;border:1px solid var(--st-line);border-left:3px solid transparent;cursor:pointer;font-family:inherit;transition:background .35s,border-color .35s}
.st-sel-tabs button:hover{background:rgba(244,242,234,.04)}
.st-sel-tabs button[aria-selected=true]{background:rgba(255,216,41,.07);border-color:var(--st-line);border-left-color:var(--st-action)}
.st-sel-tabs button:focus-visible{outline:3px solid var(--st-action);outline-offset:3px}
.st-opt-name{font-size:21px;font-weight:600;letter-spacing:-.02em}
.st-opt-price{font-size:13px;color:var(--st-muted);text-align:right}
.st-opt-meta{grid-column:1/-1;font-size:13.5px;color:var(--st-muted)}
@media (prefers-reduced-motion:no-preference){
  .studio-js .st-sel-panel .st-sel-media img{transform:scale(1.045);transition:transform 1.6s var(--st-ease)}
  .studio-js .st-sel-panel.is-active .st-sel-media img{transform:scale(1)}
  .studio-js .st-sel-panel .st-sel-copy{transform:translateY(14px);transition:transform .8s var(--st-ease)}
  .studio-js .st-sel-panel.is-active .st-sel-copy{transform:none}
}
@media (max-width:900px){
  .st-sel-panels{grid-template-columns:1fr;gap:40px}
  .studio-js .st-sel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  .studio-js .st-sel-tabs:not([hidden]){grid-column:1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
  .studio-js .st-sel-media{grid-row:1;height:auto;min-height:0;aspect-ratio:4/3;width:100%}
  .studio-js .st-sel-copy{grid-column:1;grid-row:3;padding-top:22px}
  .st-sel-tabs button{grid-template-columns:1fr;min-height:64px;padding:10px;text-align:center;border-left-width:1px;border-bottom:3px solid transparent;justify-items:center}
  .st-sel-tabs button[aria-selected=true]{border-left-color:var(--st-line);border-bottom-color:var(--st-action)}
  .st-sel-media figcaption{top:auto;bottom:10px;right:10px;font-size:11px}
  .st-opt-name{font-size:17px}.st-opt-meta{display:none}.st-opt-price{text-align:center;font-size:11.5px}
}

/* ---------- v2: stock-data warning (inherited section) ---------- */
.st-stock-note{margin:0 0 28px;padding:14px 18px;border:1px solid #ffd829;border-left-width:6px;background:#fff8cc;color:#15221b;font:500 14.5px/1.5 Manrope,Arial,sans-serif;max-width:980px}
.st-stock-note strong{font-weight:800;margin-right:4px}