/* Sogand page-transition curtain — 20 presets (data-preset). States: is-idle → is-cover → is-reveal → is-idle */
.sg-curtain{position:fixed;inset:0;z-index:99990;pointer-events:none;display:grid;place-items:center;overflow:hidden;--ct-ease-out:cubic-bezier(.16,1,.3,1)}
.sg-curtain.is-idle{visibility:hidden}
.sg-curtain.is-cover{pointer-events:auto;visibility:visible}
.sg-curtain .ct-a,.sg-curtain .ct-b,.sg-curtain .ct-s{position:absolute;inset:0}
.sg-curtain .ct-a,.sg-curtain .ct-b,.sg-curtain .ct-s i{background:linear-gradient(110deg,var(--ct-1),var(--ct-2))}
.sg-curtain.ct-pattern-on .ct-a,.sg-curtain.ct-pattern-on .ct-b{background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--sg-gold) 12%,transparent) 1px,transparent 0),linear-gradient(110deg,var(--ct-1),var(--ct-2));background-size:22px 22px,100% 100%}
.sg-curtain .ct-a{transform:translateY(101%)}
.sg-curtain .ct-b,.sg-curtain .ct-s{display:none}
.sg-curtain .ct-s{grid-template-columns:repeat(6,1fr)}
.sg-curtain .ct-s i{display:block}
.sg-curtain.is-idle *{transition:none!important}
.sg-curtain.is-cover .ct-a,.sg-curtain.is-cover .ct-b,.sg-curtain.is-cover .ct-s i{transition:transform var(--ct-dur) var(--ct-ease),opacity var(--ct-dur) ease,clip-path var(--ct-dur) var(--ct-ease),border-radius var(--ct-dur)}
.sg-curtain.is-reveal{visibility:visible}
.sg-curtain.is-reveal .ct-a,.sg-curtain.is-reveal .ct-b,.sg-curtain.is-reveal .ct-s i{transition:transform calc(var(--ct-dur) * 1.15) var(--ct-ease),opacity calc(var(--ct-dur) * 1.15) ease,clip-path calc(var(--ct-dur) * 1.15) var(--ct-ease),border-radius calc(var(--ct-dur) * 1.15)}
.sg-curtain .ct-center{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:1rem;opacity:0;transform:scale(.85)}
.sg-curtain .ct-spin{display:block}
.sg-curtain .ct-mark{display:block;width:var(--ct-logo);max-width:60vw;height:auto}
.sg-curtain .ct-name{font:300 clamp(1rem,2vw,1.4rem)/1 var(--sg-font,"Sogand Sans",system-ui,sans-serif);letter-spacing:.42em;text-transform:uppercase;color:var(--sg-text);padding-left:.42em;text-align:center}
.sg-curtain.is-cover .ct-center{opacity:1;transform:none;transition:opacity calc(var(--ct-dur) * .7) calc(var(--ct-dur) * .4),transform calc(var(--ct-dur) * 1.4) var(--ct-ease-out) calc(var(--ct-dur) * .35)}
.sg-curtain.is-reveal .ct-center{opacity:0;transition:opacity calc(var(--ct-dur) * .45)}
/* logo motion runs while the curtain is visible — on the old page, while the next page loads and while it opens.
   The scripts set its phase from the clock, so the logo carries on from the same angle on the next page
   instead of jumping back to straight. */
.sg-curtain.ct-spin-on:is(.is-cover,.is-reveal) .ct-spin,html.sg-ct-arrive .sg-curtain.ct-spin-on .ct-spin{animation:sgCtSpin 1.6s linear infinite}
.sg-curtain.ct-pulse-on:is(.is-cover,.is-reveal) .ct-mark,html.sg-ct-arrive .sg-curtain.ct-pulse-on .ct-mark{animation:sgCtPulse 1.2s ease-in-out infinite}
@keyframes sgCtSpin{to{transform:rotate(360deg)}}
@keyframes sgCtPulse{50%{transform:scale(1.08);opacity:.75}}
.sg-curtain .ct-line{position:absolute;left:0;right:0;top:50%;height:1px;z-index:2;background:linear-gradient(90deg,transparent,var(--ct-line),transparent);transform:scaleX(0)}
.sg-curtain.ct-noline .ct-line{display:none}
.sg-curtain.is-cover .ct-line{transform:scaleX(1);transition:transform calc(var(--ct-dur) * 1.25) var(--ct-ease-out) calc(var(--ct-dur) * .27)}
.sg-curtain.is-reveal .ct-line{transform:scaleX(0);transform-origin:right;transition:transform calc(var(--ct-dur) * .9)}
.sg-curtain .ct-progress{position:absolute;left:0;bottom:0;height:2px;width:100%;z-index:4;background:linear-gradient(90deg,#b8955a,#f3e4bd,#c9a35c,#e9ecf0);transform-origin:left;transform:scaleX(0)}
.sg-curtain.is-cover .ct-progress{transform:scaleX(.85);transition:transform 2.4s cubic-bezier(.1,.6,.2,1)}
.sg-curtain.is-reveal .ct-progress{transform:scaleX(1);opacity:0;transition:transform .2s,opacity .4s .2s}
/* arriving from a curtain navigation: covered at first paint, no transition */
html.sg-ct-arrive .sg-curtain{visibility:visible;pointer-events:auto}
html.sg-ct-arrive .sg-curtain *{transition:none!important}
html.sg-ct-arrive .sg-curtain .ct-a,html.sg-ct-arrive .sg-curtain .ct-b,html.sg-ct-arrive .sg-curtain .ct-s i{transform:none!important;clip-path:none!important;opacity:1!important;border-radius:0!important}
html.sg-ct-arrive .sg-curtain .ct-center{opacity:1;transform:none}
html.sg-ct-arrive .sg-curtain .ct-line{transform:none}
html.sg-ct-arrive .sg-curtain .ct-progress{transform:scaleX(.85)}
html.sg-ct-arrive .sg-curtain[data-preset=split-v] .ct-a,html.sg-ct-arrive .sg-curtain[data-preset=split-v] .ct-b,html.sg-ct-arrive .sg-curtain[data-preset=split-h] .ct-a,html.sg-ct-arrive .sg-curtain[data-preset=split-h] .ct-b{display:block}

/* 1-4 slides */
.sg-curtain[data-preset=slide-up] .ct-a{transform:translateY(101%);border-radius:40px 40px 0 0}
.sg-curtain[data-preset=slide-up].is-cover .ct-a{transform:none;border-radius:0}
.sg-curtain[data-preset=slide-up].is-reveal .ct-a{transform:translateY(-101%);border-radius:0 0 40px 40px}
.sg-curtain[data-preset=slide-down] .ct-a{transform:translateY(-101%);border-radius:0 0 40px 40px}
.sg-curtain[data-preset=slide-down].is-cover .ct-a{transform:none;border-radius:0}
.sg-curtain[data-preset=slide-down].is-reveal .ct-a{transform:translateY(101%);border-radius:40px 40px 0 0}
.sg-curtain[data-preset=slide-left] .ct-a{transform:translateX(101%);border-radius:40px 0 0 40px}
.sg-curtain[data-preset=slide-left].is-cover .ct-a{transform:none;border-radius:0}
.sg-curtain[data-preset=slide-left].is-reveal .ct-a{transform:translateX(-101%);border-radius:0 40px 40px 0}
.sg-curtain[data-preset=slide-right] .ct-a{transform:translateX(-101%);border-radius:0 40px 40px 0}
.sg-curtain[data-preset=slide-right].is-cover .ct-a{transform:none;border-radius:0}
.sg-curtain[data-preset=slide-right].is-reveal .ct-a{transform:translateX(101%);border-radius:40px 0 0 40px}
/* 5 fade */
.sg-curtain[data-preset=fade] .ct-a{transform:none;opacity:0}
.sg-curtain[data-preset=fade].is-cover .ct-a{opacity:1}
.sg-curtain[data-preset=fade].is-reveal .ct-a{opacity:0}
/* 6 circle, 7 diamond */
.sg-curtain[data-preset=circle] .ct-a{transform:none;clip-path:circle(0% at 50% 50%)}
.sg-curtain[data-preset=circle].is-cover .ct-a{clip-path:circle(75% at 50% 50%)}
.sg-curtain[data-preset=circle].is-reveal .ct-a{clip-path:circle(0% at 50% 50%)}
.sg-curtain[data-preset=diamond] .ct-a{transform:none;clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}
.sg-curtain[data-preset=diamond].is-cover .ct-a{clip-path:polygon(50% -55%,155% 50%,50% 155%,-55% 50%)}
.sg-curtain[data-preset=diamond].is-reveal .ct-a{clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%)}
/* 8 split-v, 9 split-h */
.sg-curtain[data-preset=split-v] .ct-b,.sg-curtain[data-preset=split-h] .ct-b{display:block}
.sg-curtain[data-preset=split-v] .ct-a{right:50%;transform:translateX(-101%)}
.sg-curtain[data-preset=split-v] .ct-b{left:50%;transform:translateX(101%)}
.sg-curtain[data-preset=split-v].is-cover .ct-a,.sg-curtain[data-preset=split-v].is-cover .ct-b{transform:none}
.sg-curtain[data-preset=split-v].is-reveal .ct-a{transform:translateX(-101%)}
.sg-curtain[data-preset=split-v].is-reveal .ct-b{transform:translateX(101%)}
.sg-curtain[data-preset=split-v] .ct-line{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,transparent,var(--ct-line),transparent);transform:scaleY(0)}
.sg-curtain[data-preset=split-v].is-cover .ct-line{transform:scaleY(1)}
.sg-curtain[data-preset=split-v].is-reveal .ct-line{transform:scaleY(0)}
.sg-curtain[data-preset=split-h] .ct-a{bottom:50%;transform:translateY(-101%)}
.sg-curtain[data-preset=split-h] .ct-b{top:50%;transform:translateY(101%)}
.sg-curtain[data-preset=split-h].is-cover .ct-a,.sg-curtain[data-preset=split-h].is-cover .ct-b{transform:none}
.sg-curtain[data-preset=split-h].is-reveal .ct-a{transform:translateY(-101%)}
.sg-curtain[data-preset=split-h].is-reveal .ct-b{transform:translateY(101%)}
/* 10 blinds, 11 shutter, 15 stairs */
.sg-curtain[data-preset=blinds] .ct-a,.sg-curtain[data-preset=stairs] .ct-a,.sg-curtain[data-preset=shutter] .ct-a{display:none}
.sg-curtain[data-preset=blinds] .ct-s,.sg-curtain[data-preset=stairs] .ct-s{display:grid}
.sg-curtain[data-preset=blinds] .ct-s i{transform:scaleX(0);transform-origin:left;margin-right:-1px}
.sg-curtain[data-preset=blinds].is-cover .ct-s i{transform:scaleX(1);transition-duration:calc(var(--ct-dur) * .6);transition-delay:calc(var(--i) * var(--ct-dur) * .08)}
.sg-curtain[data-preset=blinds].is-reveal .ct-s i{transform:scaleX(0);transform-origin:right;transition-duration:calc(var(--ct-dur) * .7);transition-delay:calc(var(--i) * var(--ct-dur) * .09)}
.sg-curtain[data-preset=shutter] .ct-s{display:grid;grid-template-columns:1fr;grid-template-rows:repeat(6,1fr)}
.sg-curtain[data-preset=shutter] .ct-s i{transform:scaleY(0);transform-origin:top;margin-bottom:-1px}
.sg-curtain[data-preset=shutter].is-cover .ct-s i{transform:scaleY(1);transition-duration:calc(var(--ct-dur) * .6);transition-delay:calc(var(--i) * var(--ct-dur) * .08)}
.sg-curtain[data-preset=shutter].is-reveal .ct-s i{transform:scaleY(0);transform-origin:bottom;transition-duration:calc(var(--ct-dur) * .7);transition-delay:calc(var(--i) * var(--ct-dur) * .09)}
.sg-curtain[data-preset=stairs] .ct-s i{transform:translateY(101%);margin-right:-1px}
.sg-curtain[data-preset=stairs].is-cover .ct-s i{transform:none;transition-duration:calc(var(--ct-dur) * .6);transition-delay:calc(var(--i) * var(--ct-dur) * .08)}
.sg-curtain[data-preset=stairs].is-reveal .ct-s i{transform:translateY(-101%);transition-duration:calc(var(--ct-dur) * .7);transition-delay:calc(var(--i) * var(--ct-dur) * .09)}
html.sg-ct-arrive .sg-curtain[data-preset=blinds] .ct-s,html.sg-ct-arrive .sg-curtain[data-preset=stairs] .ct-s,html.sg-ct-arrive .sg-curtain[data-preset=shutter] .ct-s{display:grid}
/* 12 diagonal */
.sg-curtain[data-preset=diagonal] .ct-a{inset:-50%;transform:translateX(-80%) skewX(-18deg)}
.sg-curtain[data-preset=diagonal].is-cover .ct-a{transform:translateX(0) skewX(-18deg)}
.sg-curtain[data-preset=diagonal].is-reveal .ct-a{transform:translateX(80%) skewX(-18deg)}
/* 13 zoom */
.sg-curtain[data-preset=zoom] .ct-a{transform:none;opacity:0}
.sg-curtain[data-preset=zoom].is-cover .ct-a{opacity:1}
.sg-curtain[data-preset=zoom].is-reveal .ct-a{opacity:0}
.sg-curtain[data-preset=zoom] .ct-center{transform:scale(.3)}
.sg-curtain[data-preset=zoom].is-cover .ct-center{transform:none}
.sg-curtain[data-preset=zoom].is-reveal .ct-center{transform:scale(3.2);opacity:0;transition:opacity calc(var(--ct-dur) * .9),transform calc(var(--ct-dur) * 1.1) var(--ct-ease)}
/* 14 iris */
.sg-curtain[data-preset=iris] .ct-a{transform:none;clip-path:ellipse(120% 0% at 50% 50%)}
.sg-curtain[data-preset=iris].is-cover .ct-a{clip-path:ellipse(120% 100% at 50% 50%)}
.sg-curtain[data-preset=iris].is-reveal .ct-a{clip-path:ellipse(120% 0% at 50% 50%)}
/* 16 rotate */
.sg-curtain[data-preset=rotate] .ct-a{inset:-30%;transform-origin:20% 80%;transform:rotate(80deg)}
.sg-curtain[data-preset=rotate].is-cover .ct-a{transform:rotate(0)}
.sg-curtain[data-preset=rotate].is-reveal .ct-a{transform:rotate(-80deg)}
/* 17 blur */
.sg-curtain[data-preset=blur] .ct-a{transform:none;opacity:0;background:linear-gradient(110deg,color-mix(in srgb,var(--ct-1) 88%,transparent),color-mix(in srgb,var(--ct-2) 88%,transparent));-webkit-backdrop-filter:blur(26px) saturate(130%);backdrop-filter:blur(26px) saturate(130%)}
.sg-curtain[data-preset=blur].is-cover .ct-a{opacity:1}
.sg-curtain[data-preset=blur].is-reveal .ct-a{opacity:0}
/* 18 line */
.sg-curtain[data-preset=line] .ct-a{transform:scaleY(0)}
.sg-curtain[data-preset=line].is-cover .ct-a{transform:scaleY(1);transition-delay:calc(var(--ct-dur) * .2)}
.sg-curtain[data-preset=line].is-reveal .ct-a{transform:scaleY(0)}
.sg-curtain[data-preset=line] .ct-line{height:2px;transform:scaleX(0);transform-origin:left}
.sg-curtain[data-preset=line].is-cover .ct-line{transform:scaleX(1);transition:transform calc(var(--ct-dur) * .5) var(--ct-ease-out)}
/* 19 corner */
.sg-curtain[data-preset=corner] .ct-a{transform:none;clip-path:circle(0% at 100% 100%)}
.sg-curtain[data-preset=corner].is-cover .ct-a{clip-path:circle(145% at 100% 100%)}
.sg-curtain[data-preset=corner].is-reveal .ct-a{clip-path:circle(0% at 0% 0%)}
/* 20 ripple from the click point */
.sg-curtain[data-preset=ripple] .ct-a{transform:none;clip-path:circle(0% at var(--ct-x,50%) var(--ct-y,50%))}
.sg-curtain[data-preset=ripple].is-cover .ct-a{clip-path:circle(150% at var(--ct-x,50%) var(--ct-y,50%))}
.sg-curtain[data-preset=ripple].is-reveal .ct-a{clip-path:circle(150% at var(--ct-x,50%) var(--ct-y,50%));opacity:0}
@media (prefers-reduced-motion:reduce){.sg-curtain{display:none!important}}