/* Canva 1600×900 坐标系。原始 PNG 不变；只播放一次的独立错峰入场。
   位置沿统一的倾斜坐标轴排列，避免各窗口旋转后列边缘错开。 */
.composition{
  --composition-angle:6deg;
  --composition-offset-x:50px; /* 桌面整组右移，独立于各窗口参数 */
  /* 三列宽度与统一间隔。32px 间隔换算为画布宽度 2%，行间距自动等值换算。 */
  --left-column:32%; --left-width:23.875%; --center-width:25.5%; --right-width:20.875%;
  --column-gap:2%; --row-gap:calc(var(--column-gap) * 16 / 9);
  --center-column:calc(var(--left-column) + var(--left-width) + var(--column-gap));
  --right-column:calc(var(--center-column) + var(--center-width) + var(--column-gap));
  /* 各窗口参数：left / top / width / height；opacity / z；独立旋转修正值 angle。 */
  --hsl-left:var(--center-column); --hsl-top:-1.88889%; --hsl-width:var(--center-width); --hsl-opacity:1; --hsl-z:4; --hsl-angle:0deg;
  --lab-left:var(--left-column); --lab-top:46.66667%; --lab-width:var(--left-width); --lab-height:80.03330%; --lab-crop-top:-8.88%; --lab-opacity:.6375; --lab-z:2; --lab-angle:0deg;
  --expanded-hsl-left:var(--left-column); --expanded-hsl-width:var(--left-width); --expanded-hsl-height:108.01476%;
  --expanded-hsl-top:calc(var(--lab-top) - var(--row-gap) - var(--expanded-hsl-height)); --expanded-hsl-opacity:.595; --expanded-hsl-z:7; --expanded-hsl-angle:0deg;
  --upper-hsl-left:var(--center-column); --upper-hsl-width:var(--center-width); --upper-hsl-height:65.83484%;
  --upper-hsl-top:calc(var(--hsl-top) - var(--row-gap) - var(--upper-hsl-height)); --upper-hsl-crop-top:-54.6%; --upper-hsl-opacity:.65; --upper-hsl-z:6; --upper-hsl-angle:0deg;
  --inspiration-left:var(--right-column); --inspiration-top:6.55556%; --inspiration-width:var(--right-width); --inspiration-height:44.00561%; --inspiration-opacity:.65; --inspiration-z:3; --inspiration-angle:0deg;
  --history-left:var(--right-column); --history-width:var(--right-width); --history-height:14.81954%;
  --history-top:calc(var(--inspiration-top) - var(--row-gap) - var(--history-height)); --history-opacity:.55; --history-z:1; --history-angle:0deg;
  --hsv-left:var(--right-column); --hsv-top:calc(var(--inspiration-top) + var(--inspiration-height) + var(--row-gap)); --hsv-width:var(--right-width); --hsv-height:70.27632%; --hsv-crop-top:-8%; --hsv-opacity:.5; --hsv-z:5; --hsv-angle:0deg;
  /* 每张图片单独入场。延迟控制先后；停留期间不退场、不循环。 */
  --entry-duration:.72s; --entry-distance:-3.75cqw; --entry-easing:cubic-bezier(.16,1,.3,1);
  --entry-iterations:1; --entry-fill:both;
  --expanded-hsl-delay:0s; --upper-hsl-delay:.12s; --history-delay:.28s;
  --hsl-delay:.4s; --inspiration-delay:.56s; --lab-delay:.68s; --hsv-delay:.84s;
}
.hero{position:relative;isolation:isolate;min-height:540px}
.intro{position:relative;z-index:2}
.hero>.showcase{position:absolute;inset:0;margin:0;width:100%;display:grid;align-items:center;justify-items:end;container-type:size;z-index:-1;overflow:hidden}
.image-stage.composition{position:relative;display:block;width:min(100cqw,calc(100cqh * 16 / 9));height:auto;min-height:0;max-height:none;aspect-ratio:16/9;isolation:isolate;overflow:hidden;container-type:inline-size}
.composition-layout{position:absolute;inset:0;transform:translateX(var(--composition-offset-x)) rotate(var(--composition-angle));transform-origin:0 0}
.window-layer{position:absolute;transform:rotate(var(--layer-angle));transform-origin:center;isolation:isolate;opacity:var(--layer-opacity);animation:window-enter var(--entry-duration) var(--entry-easing) var(--layer-delay) var(--entry-iterations) normal var(--entry-fill)}
.window-layer img{display:block;width:100%;height:auto;max-width:none;max-height:none;object-fit:contain;filter:none;border-radius:0}
.cropped-window{overflow:hidden}
.layer-hsl{left:var(--hsl-left);top:var(--hsl-top);width:var(--hsl-width);--layer-opacity:var(--hsl-opacity);--layer-delay:var(--hsl-delay);--layer-angle:var(--hsl-angle);z-index:var(--hsl-z)}
.layer-lab{left:var(--lab-left);top:var(--lab-top);width:var(--lab-width);height:var(--lab-height);--layer-opacity:var(--lab-opacity);--layer-delay:var(--lab-delay);--layer-angle:var(--lab-angle);z-index:var(--lab-z)}
.layer-lab img{margin-top:var(--lab-crop-top)}
.layer-inspiration{left:var(--inspiration-left);top:var(--inspiration-top);width:var(--inspiration-width);--layer-opacity:var(--inspiration-opacity);--layer-delay:var(--inspiration-delay);--layer-angle:var(--inspiration-angle);z-index:var(--inspiration-z)}
.layer-history{left:var(--history-left);top:var(--history-top);width:var(--history-width);--layer-opacity:var(--history-opacity);--layer-delay:var(--history-delay);--layer-angle:var(--history-angle);z-index:var(--history-z)}
.layer-hsv{left:var(--hsv-left);top:var(--hsv-top);width:var(--hsv-width);height:var(--hsv-height);--layer-opacity:var(--hsv-opacity);--layer-delay:var(--hsv-delay);--layer-angle:var(--hsv-angle);z-index:var(--hsv-z)}
.layer-hsv img{margin-top:var(--hsv-crop-top)}
.layer-upper-hsl{left:var(--upper-hsl-left);top:var(--upper-hsl-top);width:var(--upper-hsl-width);height:var(--upper-hsl-height);--layer-opacity:var(--upper-hsl-opacity);--layer-delay:var(--upper-hsl-delay);--layer-angle:var(--upper-hsl-angle);z-index:var(--upper-hsl-z)}
.layer-upper-hsl img{margin-top:var(--upper-hsl-crop-top)}
.layer-expanded-hsl{left:var(--expanded-hsl-left);top:var(--expanded-hsl-top);width:var(--expanded-hsl-width);--layer-opacity:var(--expanded-hsl-opacity);--layer-delay:var(--expanded-hsl-delay);--layer-angle:var(--expanded-hsl-angle);z-index:var(--expanded-hsl-z)}
.composition .placeholder{position:absolute;inset:0;pointer-events:none}
.showcase figcaption{display:none}
@keyframes window-enter{
  from{transform:translateX(var(--entry-distance)) rotate(var(--layer-angle));opacity:0}
  to{transform:translateX(0) rotate(var(--layer-angle));opacity:var(--layer-opacity)}
}
@media(max-width:760px){
  .hero{min-height:0}
  .hero>.showcase{position:relative;inset:auto;width:100%;display:block;container-type:inline-size;z-index:auto;overflow:hidden;justify-items:start;align-items:start}
  /* 同一套桌面图层：保留全部图片和相对位置，仅放大画布并以 HSL 主窗口的视觉中心对齐屏幕。 */
  .image-stage.composition{width:210%;height:auto;aspect-ratio:16/9;overflow:hidden;padding:0;justify-self:start;margin:0;--composition-offset-x:-43.907cqw;--entry-distance:-3cqw}
  .showcase figcaption{display:flex;width:100%;max-width:none;margin-top:12px}
}
@media(prefers-reduced-motion:reduce){
  .window-layer{animation:none;transform:rotate(var(--layer-angle));opacity:var(--layer-opacity)}
}