/* Broad arc: 10° between cells, radius = cell spacing / (2 tan 5°).
   Camera-facing cards retain flat, readable frames along the curved path. */
.work-library { --card-height: clamp(300px, 50svh, 560px); --ring-radius: calc((var(--card-width) * .96 + 8px) * 5.7150262); --glow-a: 214 90% 65%; --glow-b: 245 85% 70%; }
.work-library .showcase-stage { overflow: hidden; }
.carousel-camera { position: relative; height: calc(var(--card-height) + 90px); perspective: 1400px; perspective-origin: 50% calc(var(--card-height) / 2 + 12px); z-index: 2; }
.work-library .carousel-camera .scene-cards { height: 100%; perspective: none; transform-style: preserve-3d; transform: translateZ(calc(var(--ring-radius) * -1)) rotateY(calc(var(--ring-turn, 0deg) + var(--gesture-turn, 0deg))); }
.work-library .carousel-camera .scene-card { top: 12px; border-radius: 18px; backface-visibility: hidden; transform: translateX(-50%) rotateY(var(--card-angle, 0deg)) translateZ(var(--ring-radius)) rotateY(calc(var(--face-angle, 0deg) - var(--gesture-turn, 0deg))) scale(var(--card-scale, 1)); opacity: var(--card-opacity, 1); transition: box-shadow .25s, border-color .25s; border: 1px solid #9dbdff70; box-shadow: 0 12px 45px #0007; }
.work-library .carousel-camera .scene-card[data-slot="0"] { z-index: 5; border: 2px solid #96b5ff; box-shadow: 0 0 0 4px #6688ee13, 0 0 30px #7092ed44, 0 20px 60px #0008; }
.work-library .carousel-camera .scene-card[data-slot="-1"], .work-library .carousel-camera .scene-card[data-slot="1"] { z-index: 4; }
.work-library .carousel-camera .scene-card[data-slot="-2"], .work-library .carousel-camera .scene-card[data-slot="2"] { z-index: 3; }
.work-library .carousel-camera .scene-card[data-slot="-3"], .work-library .carousel-camera .scene-card[data-slot="3"] { z-index: 2; }
.work-library .carousel-camera .scene-card[data-slot="-4"], .work-library .carousel-camera .scene-card[data-slot="4"] { pointer-events: none; }
.work-library .is-rotating .preview-play, .work-library .is-rotating .preview-state, .work-library .is-rotating .preview-toggle { visibility: hidden; pointer-events: none; }
.work-library .scene-card > img, .work-library .scene-card > video { border-radius: inherit; }
.work-library .scene-card.side-card:after { background: linear-gradient(transparent 65%, #080e1a8c); }
.work-library .is-landscape { --ring-radius: calc((var(--landscape-width) * .93 + 8px) * 5.7150262); }
.work-library .is-landscape .carousel-camera { height: calc(var(--landscape-width) * 9 / 16 + 90px); }
.work-library .is-landscape .carousel-camera .scene-cards { height: 100%; }
.work-library .showcase-caption { pointer-events: auto; }
.preview-state { max-width: calc(100% - 85px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 5px 7px; font-size: 7px; }
.preview-toggle { font-size: 9px; padding: 5px 7px; }
.showcase-aura { position: absolute; inset: 12px 4% 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 44% 23% at 50% 80%, hsl(var(--glow-a) / .3), transparent 75%), radial-gradient(ellipse 32% 40% at 65% 46%, hsl(var(--glow-b) / .14), transparent 78%); animation: ambient-glow 12s ease-in-out infinite alternate; }
.showcase-reflection { position: absolute; top: calc(var(--card-height) - 12px); left: 50%; width: var(--card-width); height: 100px; object-fit: cover; transform: translateX(-50%) scaleY(-1); opacity: .3; filter: blur(12px); mask-image: linear-gradient(transparent, #0008); pointer-events: none; z-index: 0; }
.is-landscape .showcase-reflection { top: calc(var(--landscape-width) * 9 / 16 - 12px); width: var(--landscape-width); }
.audio-toggle { border: 1px solid #7098dc; border-radius: 30px; padding: 10px 13px; display: flex; align-items: center; gap: 7px; background: #122442; color: #d7e6ff; font: 600 10px var(--body); white-space: nowrap; }
.audio-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.audio-toggle .sound-strike { display: none; }
.audio-toggle.is-muted .sound-strike { display: block; }
.audio-toggle.is-muted .sound-waves { display: none; }
.dialog-controls { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 12px; }
.work-library .showcase-actions { gap: 15px; }
.work-library .showcase-actions > span { padding-right: 15px; font-size: 10px; }
.round-control:hover:not(:disabled), .audio-toggle:hover:not(:disabled), #showcase-watch:hover { background: linear-gradient(115deg,#326fc8,#675bc1,#247d9a); background-size: 220% 100%; animation: gradient-drift 4s ease infinite; box-shadow: 0 0 18px #7094f33b; }
.tool-tile { position: relative; overflow: hidden; isolation: isolate; }
.tool-tile:before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; background: linear-gradient(125deg,#22498c90,#6250a8a0,#287c9380); background-size: 220% 100%; transition: opacity .3s; }
.tool-tile:hover:before, .tool-tile:focus-within:before { opacity: 1; animation: gradient-drift 6s ease infinite; }
.is-dragging { cursor: grabbing; user-select: none; }
.work-library .is-dragging .scene-cards { transition: none; }
.motion-paused .carousel-camera .scene-card, .motion-paused .carousel-camera .scene-cards { transition: none; }
@keyframes ambient-glow { from { translate: -2% 0; opacity: .75; } to { translate: 2% -3%; opacity: 1; } }
@keyframes gradient-drift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (min-width: 1101px) {
  .work-library .showcase-caption { position: absolute; left: 4px; bottom: 12px; margin: 0; padding: 0; width: min(390px, calc(50% - var(--card-width) / 2 - 42px)); }
  .work-library .showcase-caption h3 { font-size: clamp(23px, 2vw, 30px); }
  .work-library .showcase-caption p { font-size: 11px; }
  .work-library .showcase-caption small { display: none; }
  .work-library .showcase-stage { min-height: calc(var(--card-height) + 90px); }
}
@media (min-width: 1101px) and (max-height: 860px) { .work-library { --card-height: clamp(200px, calc(100svh - 380px), 450px); } }
@media (min-width: 1101px) and (max-width: 1450px) { .work-library { --card-height: min(clamp(200px, calc(100svh - 380px), 450px), calc((100vw - 180px) * .326)); --ring-radius: calc((var(--card-width) * .875 + 8px) * 5.7150262); } .work-library .is-landscape { --ring-radius: calc((var(--landscape-width) * .875 + 8px) * 5.7150262); } .work-library .stage-arrow { width: 48px; height: 48px; } }
@media (min-width: 761px) and (max-width: 1100px) { .work-library { --card-height: clamp(220px, 35svh, 380px); } .work-library .showcase-caption { width: 100%; padding-bottom: 62px; } .showcase-actions { left: 4px; right: 4px; justify-content: flex-end; bottom: 10px; } }
@media (max-width: 1100px) and (min-height: 521px) { .work-library .carousel-camera .scene-card[data-slot="-2"], .work-library .carousel-camera .scene-card[data-slot="2"], .work-library .carousel-camera .scene-card[data-slot="-3"], .work-library .carousel-camera .scene-card[data-slot="3"], .work-library .carousel-camera .scene-card[data-slot="-4"], .work-library .carousel-camera .scene-card[data-slot="4"] { visibility: hidden; pointer-events: none; } }
@media (min-width: 761px) and (max-width: 1100px) { .work-library .carousel-camera { height: calc(var(--card-height) + 35px); } .work-library .is-landscape .carousel-camera { height: calc(var(--landscape-width) * 9 / 16 + 35px); } }
@media (min-width: 761px) and (max-width: 1100px) and (max-height: 860px) { .work-library { --card-height: clamp(170px, calc(100svh - 450px), 330px); } }
@media (max-width: 760px) {
  .work-library { --card-height: clamp(215px, 38svh, 315px); }
  .work-library .carousel-camera { perspective: 900px; }
  .work-library .carousel-camera { height: calc(var(--card-height) + 35px); }
  .work-library .is-landscape .carousel-camera { height: calc(var(--landscape-width) * 9 / 16 + 35px); }
  .work-library .carousel-camera .scene-card { border-radius: 13px; }
  .work-library .carousel-camera .scene-card[data-slot="-2"], .work-library .carousel-camera .scene-card[data-slot="2"] { display: block; }
  .work-library .carousel-camera .scene-card[data-slot="-3"], .work-library .carousel-camera .scene-card[data-slot="3"] { visibility: hidden; pointer-events: none; }
  .work-library .showcase-caption { padding-bottom: 55px; }
  .work-library .showcase-actions { gap: 10px; justify-content: space-between; }
  .audio-toggle { padding: 8px 10px; font-size: 9px; }
  .audio-toggle svg { width: 17px; height: 17px; }
  .work-library .showcase-actions > span { padding: 0; font-size: 9px; }
  #showcase-watch { padding: 10px 13px; }
  .preview-state { font-size: 6px; padding: 4px 5px; max-width: calc(100% - 68px); }
  .preview-toggle { font-size: 8px; }
  .dialog-controls { flex-direction: row; justify-content: space-between; align-items: center; margin-top: 18px; }
}
@media (max-width: 360px) { .work-library { --card-height: clamp(195px, 33svh, 240px); } .audio-toggle .audio-label { display: none; } }
@media (max-width: 760px) and (max-height: 520px) { .work-library { --card-height: clamp(105px, 30svh, 150px); } .work-library .carousel-camera { height: calc(var(--card-height) + 25px); } .work-library .showcase-caption { padding-bottom: 45px; width: calc(100% - 20px); } .showcase-actions { left: 10px; right: 10px; } .preview-state { display: none; } .filmstrip-navigation .round-control { width: 28px; height: 28px; } .work-library .thumbnail-image { height: 36px; } .library-hint { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .work-library .carousel-camera .scene-cards { transform: none; transition: none; }
  .work-library .carousel-camera .scene-card { transform: translateX(calc(-50% + var(--card-slot) * (var(--card-width) + 14px))); transition: none; }
  .showcase-aura, .tool-tile:before, .round-control, .audio-toggle { animation: none!important; }
}

/* Keep guidance above the picture. */
.work-library .preview-state, .work-library .preview-toggle { display: none; }
.showcase-open-hint { position: relative; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: max-content; max-width: 100%; height: 40px; margin: 0 auto; padding: 0; border: 0; background: transparent; color: #b0caff; font: 500 10px/1.4 var(--body); letter-spacing: .04em; }
.showcase-open-hint svg { width: 40px; height: 24px; display: block; animation: full-view-nudge 3s ease-in-out infinite; }
.showcase-open-hint:hover { color: #dfebff; }
.showcase-open-hint:focus-visible { outline: 2px solid #9ebcff; outline-offset: 4px; border-radius: 4px; }
.hint-touch { display: none; }
.work-library .stage-arrow { top: calc(50px + var(--card-height) / 2); }
.work-library .is-landscape .stage-arrow { top: calc(50px + var(--landscape-width) * 9 / 32); }
.work-library .section-intro p { color: #a0c2ff; font-size: 18px; }
.work-library .section-kicker span:last-child { color: #8eb8ff; font-size: calc(1em + 2px); }
.full-view-close { display: none; }
.dialog-video-wrap:fullscreen { position: relative; width: 100vw; height: 100dvh; max-height: none; background: #03060d; }
.dialog-video-wrap:fullscreen video { width: auto; height: auto; max-width: 100vw; max-height: 100dvh; }
.dialog-video-wrap:fullscreen iframe { width: 100vw; height: 100dvh; max-height: none; }
.dialog-video-wrap:fullscreen .full-view-close { position: absolute; display: grid; place-items: center; right: 20px; top: 20px; z-index: 10; width: 40px; height: 40px; border: 1px solid #a8bde899; background: #091326bb; color: white; border-radius: 50%; }
.video-dialog.is-full-view { width: 98vw; max-height: 98dvh; }
.video-dialog.is-full-view .dialog-video-wrap:not(:fullscreen) { max-height: 84dvh; }
.video-dialog.is-full-view .dialog-video-wrap:not(:fullscreen) video { max-height: 84dvh; }
@keyframes full-view-nudge { 0%,100% { translate: 0 -1px; } 50% { translate: 0 2px; } }
@media (min-width: 761px) and (max-height: 860px) { .work-library .section-intro p { font-size: 13px; } }
@media (min-width: 761px) and (max-width: 1100px) and (min-height: 861px) { .work-library .section-intro p { font-size: 15px; } }
@media (max-width: 760px) { .work-library .section-intro p { font-size: 15px; } .showcase-open-hint { height: 28px; font-size: 9px; } .showcase-open-hint svg { height: 16px; } .hint-desktop { display: none; } .hint-touch { display: inline; } .work-library .stage-arrow { top: calc(38px + var(--card-height) / 2); } .work-library .is-landscape .stage-arrow { top: calc(38px + var(--landscape-width) * 9 / 32); } }
@media (max-width: 760px) and (max-height: 520px) { .work-library { --card-height: clamp(105px, 27svh, 138px); } .showcase-open-hint { height: 22px; } .showcase-open-hint svg { height: 10px; } .work-library .showcase-caption { padding-bottom: 38px; } .work-library .stage-arrow { top: calc(32px + var(--card-height) / 2); } }
@media (prefers-reduced-motion: reduce) { .showcase-open-hint svg { animation: none; } }