/* Sogand Work Gallery — 20 transitions */
.sg-gal{position:relative}
.sg-gal-main{position:relative;aspect-ratio:1;display:grid;place-items:center;cursor:zoom-in;border-radius:36px;overflow:hidden;background:linear-gradient(115deg,color-mix(in srgb,var(--sg-ox2) 34%,transparent),color-mix(in srgb,var(--sg-ox2) 26%,transparent));border:1px solid color-mix(in srgb,var(--sg-hi) 14%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--sg-hi) 6%,transparent),0 30px 80px rgba(0,0,0,.45);isolation:isolate}
.sg-gal-main.no-zoom{cursor:default}
.sg-gal-glow{position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--tone) 55%,transparent),transparent 72%);filter:blur(30px);opacity:.75;animation:sgBreatheG 7s ease-in-out infinite;z-index:0}
@keyframes sgBreatheG{50%{transform:scale(1.08);opacity:.95}}
.sg-gal-stage{position:absolute;inset:0;display:grid;place-items:center;perspective:1400px;overflow:hidden;border-radius:inherit;z-index:1}
.sg-gal-img{grid-area:1/1;width:var(--gimg,84%);height:var(--gimg,84%);object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
.sg-gal-img[hidden]{display:none}
.sg-gal-img.is-old{display:block;z-index:0;animation:gfxOut var(--gdur,800ms) ease both}
.sg-gal-img.gfx{z-index:1;animation-duration:var(--gdur,800ms)!important;animation-timing-function:cubic-bezier(.22,.61,.36,1)!important;animation-fill-mode:both!important}
.gfx-fade{animation-name:gfxFade!important}.gfx-slide{animation-name:gfxSlide!important}.gfx-slide-up{animation-name:gfxSlideUp!important}.gfx-zoom-in{animation-name:gfxZoomIn!important}.gfx-zoom-out{animation-name:gfxZoomOut!important}.gfx-blur{animation-name:gfxBlur!important}.gfx-flip-x{animation-name:gfxFlipX!important;backface-visibility:hidden}.gfx-flip-y{animation-name:gfxFlipY!important;backface-visibility:hidden}.gfx-rotate{animation-name:gfxRotate!important}.gfx-swing{animation-name:gfxSwing!important;transform-origin:0 50%}.gfx-skew{animation-name:gfxSkew!important}.gfx-wipe-left{animation-name:gfxWipeL!important}.gfx-wipe-up{animation-name:gfxWipeU!important}.gfx-circle{animation-name:gfxCircle!important}.gfx-diamond{animation-name:gfxDiamond!important}.gfx-split-v{animation-name:gfxSplitV!important}.gfx-split-h{animation-name:gfxSplitH!important}.gfx-blinds{animation-name:gfxBlinds!important}.gfx-drop{animation-name:gfxDrop!important}.gfx-glow{animation-name:gfxGlow!important}
.sg-gal[data-fx="slide"] .sg-gal-img.is-old{animation-name:gfxOutL}
.sg-gal[data-fx="slide-up"] .sg-gal-img.is-old{animation-name:gfxOutU}
.sg-gal[data-fx="flip-x"] .sg-gal-img.is-old,.sg-gal[data-fx="flip-y"] .sg-gal-img.is-old{animation-name:gfxOutFast}
@keyframes gfxFade{from{opacity:0}to{opacity:1}}
@keyframes gfxOut{from{opacity:1}to{opacity:0}}
@keyframes gfxOutFast{from{opacity:1}40%,to{opacity:0}}
@keyframes gfxOutL{to{opacity:0;transform:translateX(-30%)}}
@keyframes gfxOutU{to{opacity:0;transform:translateY(-30%)}}
@keyframes gfxSlide{from{opacity:0;transform:translateX(40%)}to{opacity:1;transform:none}}
@keyframes gfxSlideUp{from{opacity:0;transform:translateY(40%)}to{opacity:1;transform:none}}
@keyframes gfxZoomIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes gfxZoomOut{from{opacity:0;transform:scale(1.5)}to{opacity:1;transform:none}}
@keyframes gfxBlur{from{opacity:0;filter:blur(24px)}to{opacity:1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}}
@keyframes gfxFlipX{from{opacity:0;transform:rotateY(-95deg)}to{opacity:1;transform:none}}
@keyframes gfxFlipY{from{opacity:0;transform:rotateX(95deg)}to{opacity:1;transform:none}}
@keyframes gfxRotate{from{opacity:0;transform:rotate(-25deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes gfxSwing{from{opacity:0;transform:rotateY(80deg)}60%{transform:rotateY(-12deg)}to{opacity:1;transform:none}}
@keyframes gfxSkew{from{opacity:0;transform:skewX(-30deg) translateX(20%)}to{opacity:1;transform:none}}
@keyframes gfxWipeL{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes gfxWipeU{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes gfxCircle{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}
@keyframes gfxDiamond{from{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}to{clip-path:polygon(50% -50%,150% 50%,50% 150%,-50% 50%)}}
@keyframes gfxSplitV{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes gfxSplitH{from{clip-path:inset(50% 0 50% 0)}to{clip-path:inset(0 0 0 0)}}
@property --gb{syntax:'<percentage>';inherits:false;initial-value:10%}
@keyframes gfxBlinds{from{--gb:0%}to{--gb:10%}}
.gfx-blinds{-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 var(--gb),transparent var(--gb) 10%);mask-image:repeating-linear-gradient(90deg,#000 0 var(--gb),transparent var(--gb) 10%)}
@keyframes gfxDrop{0%{opacity:0;transform:translateY(-60%)}60%{opacity:1;transform:translateY(5%)}80%{transform:translateY(-2%)}to{transform:none}}
@keyframes gfxGlow{0%{opacity:0;filter:brightness(2.4) drop-shadow(0 0 40px var(--sg-gold))}to{opacity:1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}}
.sg-gal-zoom{position:absolute;inset:0;z-index:2;background-repeat:no-repeat;background-size:var(--gzoom,230%);background-position:var(--zx,50%) var(--zy,50%);opacity:0;transition:opacity .4s;pointer-events:none;background-color:#3f2427}
.sg-gal-main.is-zoom .sg-gal-zoom{opacity:1}
.sg-gal-hint{position:absolute;z-index:3;left:1.2rem;top:1.2rem;display:flex;align-items:center;gap:.4rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--sg-text) 56%,transparent);transition:opacity .3s}
.sg-gal-main.is-zoom .sg-gal-hint{opacity:0}
.sg-gal-arrows{position:absolute;z-index:3;right:1rem;bottom:1rem;display:flex;gap:.5rem}
html body .sg-round{position:relative;overflow:hidden;width:50px;height:50px;border-radius:999px;display:inline-grid;place-items:center;flex:none;cursor:pointer;color:var(--sg-text);background:color-mix(in srgb,var(--sg-hi) 6%,transparent);border:1px solid color-mix(in srgb,var(--sg-hi) 16%,transparent);transition:background .3s,transform .2s;padding:0}
html body .sg-round:hover{background:color-mix(in srgb,var(--sg-hi) 12%,transparent)}
html body .sg-round:active{transform:scale(.94)}
html body .sg-round-light{color:var(--sg-on-accent);background:var(--e-global-color-accent,#c8b68e);border-color:rgba(255,248,228,.35)}
html body .sg-round-light:hover{background:color-mix(in srgb,var(--sg-champagne),var(--sg-hi) 22%)}
.sg-gal-timer{position:absolute;left:18px;right:18px;bottom:12px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--e-global-color-primary,#e3c88f),transparent);transform-origin:left;opacity:.6;z-index:3;pointer-events:none;transform:scaleX(0)}
.sg-gal-timer.is-run{animation:galTimer var(--gint,4s) linear both}
.sg-gal-main.is-zoom .sg-gal-timer,.sg-gal.is-paused .sg-gal-timer{animation-play-state:paused}
@keyframes galTimer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.sg-gal-thumbs{display:flex;gap:.7rem;margin-top:1rem;overflow-x:auto;scrollbar-width:thin}
html body .sg-gal-thumb{flex:none;width:var(--gthumb,84px);height:var(--gthumb,84px);border-radius:16px;padding:6px;cursor:pointer;background:color-mix(in srgb,var(--sg-hi) 5%,transparent);border:1px solid color-mix(in srgb,var(--sg-hi) 12%,transparent);transition:border-color .3s}
html body .sg-gal-thumb.is-active{border-color:var(--e-global-color-primary,#e3c88f)}
html body .sg-gal-thumb img{width:100%;height:100%;object-fit:contain}
@media (prefers-reduced-motion:reduce){.sg-gal-img.gfx,.sg-gal-img.is-old{animation-duration:1ms!important}.sg-gal-glow{animation:none}}
html body .sg-gal-img{width:var(--gimg,84%);height:var(--gimg,84%);max-width:var(--gimg,84%);object-fit:contain}