/* Product preview composition; shared header and lights live in scene.css. */
.workshop-opening .hero-environment {position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.workshop-opening .ambient-light {position:absolute;width:62%;height:90%;top:0;right:-8%;background:radial-gradient(ellipse,var(--h-glow),transparent 66%);opacity:.11;filter:blur(35px)}
.workshop-opening .ambient-core {position:absolute;inset:28% 8% 10% 57%;background:radial-gradient(ellipse,var(--h-glow),transparent 65%);opacity:.08;filter:blur(30px)}
.workshop-opening .workshop-hero {position:relative;max-width:1440px;margin:auto;padding:64px 64px 80px;display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);align-items:center;gap:56px;min-height:640px}
.workshop-opening .hero-copy {min-width:0;position:relative;z-index:3;padding-bottom:44px}
.workshop-opening .hero-eyebrow {font-size:11px;line-height:1.6;letter-spacing:.11em;text-transform:uppercase;font-weight:600;color:var(--h-muted);margin:0 0 24px}
.workshop-opening h1 {font-family:Sora,"Avenir Next",system-ui,sans-serif;font-size:clamp(44px,4.15vw,64px);font-weight:500;line-height:1.12;letter-spacing:-.065em;color:var(--h-ink);margin:0 0 28px}
.workshop-opening h1>span {display:block;white-space:normal}
.workshop-opening .hero-accent {color:var(--h-ink)}
.workshop-opening .hero-description {max-width:36ch;font-size:19px;line-height:1.65;letter-spacing:-.025em;color:var(--h-muted);margin:0 0 32px}
.workshop-opening .hero-cta {display:inline-flex;align-items:center;gap:28px;min-height:54px;padding:14px 24px;border:1px solid transparent;border-radius:14px;background:var(--h-apricot);color:#262a2b;font-size:14px;font-weight:700;transition:background-color 320ms}
.workshop-opening .hero-cta>span {font-size:23px;line-height:1}
.workshop-opening .hero-small {margin:20px 0 0;color:var(--h-muted);font-size:12px;line-height:1.6}
.workshop-opening .hero-product {min-width:0;position:relative;z-index:2}
.workshop-opening .product-heading {display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 4px 0 8px}
.workshop-opening .product-eyebrow {font-size:10px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--h-muted);margin:0 0 6px}
.workshop-opening .product-heading h2 {font-family:Sora,"Avenir Next",system-ui,sans-serif;font-size:22px;font-weight:500;letter-spacing:-.055em;line-height:1.2;margin:0;color:var(--h-ink)}
.workshop-opening .product-heading h2>span {color:var(--h-accent)}
.workshop-opening .development-status {font-size:10px;font-weight:600;line-height:1.5;white-space:nowrap;border:1px solid var(--h-line);padding:7px 11px;border-radius:999px;color:var(--h-muted)}
.workshop-opening .product-composition {position:relative;isolation:isolate;aspect-ratio:1.50;margin-top:24px;--awake:0;--companion-x:0px;--companion-y:0px;--screen-yaw:0deg;--screen-pitch:0deg;--screen-lift:0px;--reflection-x:0%}
.workshop-opening .hero-layer {position:absolute;--px:0px;--py:0px;--pr:0deg;--sy:0px;min-width:0}
.workshop-opening .web-layer {top:7%;left:0;width:94%;z-index:1}
.workshop-opening .mobile-layer {top:20%;right:0;width:23%;z-index:2}
.workshop-opening .product-aura {inset:-10% 0 -10% 0;z-index:-1;pointer-events:none}
.workshop-opening .digital-light {width:100%;height:350px;background:radial-gradient(ellipse at 65% 50%,var(--h-glow),transparent 60%);opacity:.14;filter:blur(30px)}
.workshop-opening .pointer-depth {transform:translate3d(calc(var(--px)*.38),calc(var(--py)*.35),0) rotate(calc(var(--pr)*.2));transform-origin:center}
.workshop-opening .scroll-depth {transform:translateY(calc(var(--sy)*.2))}
.workshop-opening .product-preview {display:block;overflow:hidden;border:1px solid var(--h-line);background:var(--h-raised);border-radius:18px;box-shadow:0 20px 48px var(--h-shadow);transition:filter 200ms,border-color 200ms;position:relative;-webkit-tap-highlight-color:transparent}
.workshop-opening .web-preview {transform:perspective(1300px) translateY(var(--screen-lift)) rotateX(var(--screen-pitch)) rotateY(calc(-2deg + var(--screen-yaw))) rotateZ(-1deg);transform-origin:50% 50%}
.workshop-opening .preview-bar {display:flex;align-items:center;gap:12px;min-height:36px;padding:8px 12px;color:var(--h-muted);font-size:11px;line-height:1.5}
.workshop-opening .window-dots {display:flex;gap:4px;flex:none}
.workshop-opening .window-dots i {width:5px;height:5px;border-radius:50%;background:var(--h-line)}
.workshop-opening .preview-demo {margin-left:auto;font-size:10px}
.workshop-opening .preview-image {display:block;position:relative;overflow:hidden;aspect-ratio:1763/990;background:var(--h-surface)}
.workshop-opening .product-preview picture {display:block}
.workshop-opening .preview-image img {display:block;width:100%;height:100%;object-fit:cover}
.workshop-opening .preview-frame {position:absolute;inset:0;opacity:0;pointer-events:none}
.workshop-opening .preview-frame.is-current {opacity:1;z-index:1}
.workshop-opening .preview-frame.is-entering {z-index:2;animation:preview-reveal 900ms ease-in-out both;animation-play-state:var(--h-play)}
.workshop-opening .preview-clock {position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.workshop-opening .product-composition[data-previews-ready="true"] .preview-clock {animation:preview-clock 8s linear infinite;animation-play-state:var(--h-play)}
.workshop-opening .product-composition[data-engaged="true"] .preview-clock {animation-play-state:paused}
.workshop-opening .screen-shine {z-index:3}
.workshop-opening .screen-shine {position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 44%,#ffffff10 50%,transparent 56%);pointer-events:none;translate:var(--reflection-x) 0}
.workshop-opening .mobile-preview {border-radius:20px;transform:perspective(900px) translateY(var(--screen-lift)) rotateX(calc(var(--screen-pitch)*.7)) rotateY(calc(var(--screen-yaw)*-.7)) rotate(3deg);border:4px solid var(--h-raised);outline:1px solid var(--h-line)}
.workshop-opening .mobile-screen {display:block;position:relative;overflow:hidden;aspect-ratio:684/1398;border-radius:14px;background:var(--h-surface)}
.workshop-opening .mobile-preview img {display:block;width:100%;height:100%;object-fit:cover;border-radius:14px}
.workshop-opening .mobile-preview-bar {display:flex;align-items:center;justify-content:center;gap:8px;min-height:29px;color:var(--h-muted);font-size:10px;line-height:1.5}
.workshop-opening .mobile-preview-bar>span {display:block;width:20px;height:3px;background:var(--h-line);border-radius:2px}
.workshop-opening .product-preview:hover,.workshop-opening .product-preview:focus-visible {filter:brightness(1.06);border-color:var(--h-accent)}
.workshop-opening .product-preview:active {filter:brightness(.96)}
.workshop-opening .product-preview-footer {display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;margin:2px 0 0 8px}
.workshop-opening .product-source-note {font-size:11px;line-height:1.5;color:var(--h-muted);margin:0}
.workshop-opening .product-source-note>span {padding:0 4px}
.workshop-opening .preview-switcher {display:flex;flex:none}
.workshop-opening .preview-switcher[hidden] {display:none}
.workshop-opening .preview-switcher button {display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:0;border-radius:12px;background:transparent;color:var(--h-accent);cursor:pointer}
.workshop-opening .preview-switcher button>span {width:6px;height:6px;border-radius:9px;background:var(--h-muted);opacity:.75;transition:width 180ms,opacity 180ms,background 180ms}
.workshop-opening .preview-switcher button[aria-pressed="true"]>span {width:18px;background:currentColor;opacity:1}
.workshop-opening .preview-switcher button:hover>span,.workshop-opening .preview-switcher button:focus-visible>span {opacity:1}
.workshop-opening .preview-switcher button:focus-visible {outline-offset:-4px}
.workshop-opening .preview-switcher button:active {background:var(--h-shadow)}
@keyframes preview-reveal {from{opacity:0}to{opacity:1}}
@keyframes preview-clock {from{opacity:0}to{opacity:0}}
.workshop-opening .hero-directions {display:flex;align-items:center;gap:24px;border-top:1px solid var(--h-line);padding:8px 8px 0}
.workshop-opening .hero-directions a {min-height:44px;display:inline-flex;align-items:center;gap:20px;font-size:12px;font-weight:600;color:var(--h-ink)}
.workshop-opening .hero-directions a>span {font-size:15px;color:var(--h-muted)}
.workshop-opening .ambient-light {animation:ambient-light 16s ease-in-out -4s infinite;animation-play-state:var(--h-play)}
.workshop-opening .ambient-core {animation:ambient-core 21s ease-in-out -8s infinite;animation-play-state:var(--h-play)}
.workshop-opening .web-idle {animation:web-idle 12s ease-in-out -3s infinite;animation-play-state:var(--h-play)}
.workshop-opening .mobile-idle {animation:mobile-idle 14s ease-in-out -7s infinite;animation-play-state:var(--h-play)}
.workshop-opening .screen-shine {animation:screen-shine 19s ease-in-out -6s infinite;animation-play-state:var(--h-play)}
@keyframes ambient-light {0%,100%{opacity:.08;transform:translate(-8px,0)}50%{opacity:.15;transform:translate(8px,4px)}}
@keyframes ambient-core {0%,100%{opacity:.04}50%{opacity:.12}}
@keyframes web-idle {0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes mobile-idle {0%,100%{transform:translateY(1px)}50%{transform:translateY(-2px)}}
@keyframes screen-shine {0%,100%{transform:translateX(-10%);opacity:.25}50%{transform:translateX(10%);opacity:.65}}
.workshop-opening[data-motion="reduced"] .pointer-depth,.workshop-opening[data-motion="reduced"] .scroll-depth {transform:none}
.workshop-opening[data-motion="reduced"] .ambient-light,.workshop-opening[data-motion="reduced"] .ambient-core,.workshop-opening[data-motion="reduced"] .web-idle,.workshop-opening[data-motion="reduced"] .mobile-idle,.workshop-opening[data-motion="reduced"] .screen-shine {animation:none}
@media(max-width:1200px) and (min-width:1001px) {
  .workshop-opening .workshop-hero {padding-inline:40px;gap:32px}
  .workshop-opening h1 {font-size:4.3vw}
  .workshop-opening .hero-description {font-size:18px}
}
@media(max-width:1000px) {
  .workshop-opening .workshop-hero {display:block;padding:48px 32px 80px;min-height:0}
  .workshop-opening .hero-copy {max-width:650px;padding-bottom:56px}
  .workshop-opening h1 {font-size:clamp(44px,6.8vw,62px);letter-spacing:-.065em}
  .workshop-opening .hero-description {max-width:40ch}
  .workshop-opening .hero-product {max-width:690px;margin:auto}
  .workshop-opening .product-composition {aspect-ratio:1.50}
}
@media(max-width:600px) {
  .workshop-opening .workshop-hero {padding:40px 20px 80px}
  .workshop-opening .hero-copy {padding-bottom:48px}
  .workshop-opening .hero-eyebrow {font-size:10px;margin-bottom:20px}
  .workshop-opening h1 {font-size:clamp(32px,9vw,44px);line-height:1.16;letter-spacing:-.06em;margin-bottom:24px}
  .workshop-opening .hero-description {font-size:17px;line-height:1.65;max-width:34ch;margin-bottom:28px}
  .workshop-opening .hero-cta {min-height:52px;padding:13px 20px;gap:28px;font-size:13px}
  .workshop-opening .hero-small {font-size:11px;margin-top:16px}
  .workshop-opening .product-heading {padding-inline:0}
  .workshop-opening .product-heading h2 {font-size:20px}
  .workshop-opening .product-eyebrow {font-size:10px}
  .workshop-opening .development-status {padding:6px 9px;font-size:10px}
  .workshop-opening .product-composition {aspect-ratio:1.03;margin-top:20px}
  .workshop-opening .web-layer {width:100%;top:5%}
  .workshop-opening .web-preview {transform:perspective(1200px) translateY(var(--screen-lift)) rotateX(var(--screen-pitch)) rotateY(calc(-2deg + var(--screen-yaw))) rotateZ(-1deg);border-radius:14px;box-shadow:0 10px 24px var(--h-shadow)}
  .workshop-opening .preview-bar {gap:8px;min-height:30px;font-size:10px;padding:6px 10px}
  .workshop-opening .preview-demo {font-size:9px}
  .workshop-opening .mobile-layer {top:20%;width:32%;right:2%}
  .workshop-opening .mobile-preview {border-radius:16px;border-width:3px;box-shadow:0 12px 28px var(--h-shadow)}
  .workshop-opening .mobile-preview img {border-radius:11px}
  .workshop-opening .mobile-preview-bar {min-height:28px;font-size:9px}
  .workshop-opening .product-preview-footer {margin:2px 0 0;gap:4px}
  .workshop-opening .product-source-note {font-size:10px}
  .workshop-opening .hero-directions {gap:22px;padding-inline:0}
  .workshop-opening .hero-directions a {gap:12px;font-size:12px}
}
@media(prefers-reduced-motion:reduce) {
  .workshop-opening *, .workshop-opening *::before,.workshop-opening *::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .workshop-opening .pointer-depth,.workshop-opening .scroll-depth {transform:none!important}
}