/* SEPRA premium interaction layer · August 2026
   Intentionally restrained: depth, focus and kinetic clarity rather than decorative motion. */
:root{
  --ease-premium:cubic-bezier(.16,1,.3,1);
  --ease-snappy:cubic-bezier(.2,.8,.2,1);
  --premium-shadow:0 24px 70px rgba(10,31,22,.10),0 3px 14px rgba(10,31,22,.05);
}
html{scroll-behavior:smooth}
body{background-attachment:fixed}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light}

/* slim reading progress — institutional, not gamified */
.sepra-progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:10001;pointer-events:none;background:transparent}
.sepra-progress i{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(0);
  background:var(--grad);box-shadow:0 0 14px color-mix(in srgb,var(--brand) 50%,transparent)}

/* header acquires depth only once content is moving beneath it */
header,.topbar{transition:background .35s ease,box-shadow .35s ease,border-color .35s ease,backdrop-filter .35s ease}
body.scrolled header,body.scrolled .topbar{backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25)}
body.scrolled header{box-shadow:0 12px 38px rgba(10,31,22,.055)}

/* reveal language: depth + optical focus, not a generic slide-up */
.reveal{filter:blur(2.2px);transform:translateY(24px) scale(.994);
  transition:opacity .9s var(--ease-premium),transform 1.0s var(--ease-premium),filter .72s var(--ease-premium)}
.reveal.in{filter:blur(0);transform:none}
.stagger>*{transition-timing-function:var(--ease-premium)!important}

/* premium surfaces */
.card,.glass,.guideband,.model,.site3d,.checker,.person,.tw{
  transform:translateZ(0);backface-visibility:hidden}
.card,.person,.glass{transition:transform .42s var(--ease-premium),box-shadow .42s var(--ease-premium),border-color .3s ease}
@media(hover:hover) and (pointer:fine){
  .card:hover,.person:hover{transform:translateY(-5px);box-shadow:var(--premium-shadow)}
}

/* buttons: slight optical lift and one highlight pass on hover */
.btn,.gbtn{position:relative;isolation:isolate;overflow:hidden;transition:transform .3s var(--ease-premium),box-shadow .3s ease,border-color .25s ease}
.btn:before,.gbtn:before{content:"";position:absolute;z-index:-1;inset:-1px;pointer-events:none;
  background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.28) 48%,transparent 66%);
  transform:translateX(-130%);transition:transform .8s var(--ease-premium)}
@media(hover:hover) and (pointer:fine){
  .btn:hover,.gbtn:hover{transform:translateY(-2px)}
  .btn:hover:before,.gbtn:hover:before{transform:translateX(130%)}
}

/* HERO: quieter background, sharper content */
.hero .aurora{opacity:.82}
#lattice{opacity:.72;filter:saturate(.9)}
#heroflow canvas{opacity:.46!important;filter:blur(.15px) saturate(1.06)}
.hero .scrim{backdrop-filter:saturate(1.03)}
.herogrid>div:first-child{transform:translateZ(0)}

/* FOUR ELECTRICITY ROUTES — a premium systems visualization */
.model{position:relative;border:1px solid color-mix(in srgb,var(--line) 84%,transparent);
  box-shadow:0 34px 90px rgba(4,24,16,.12),0 2px 8px rgba(4,24,16,.04);background:color-mix(in srgb,var(--card) 94%,transparent)}
.model:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(70% 120% at 15% 0%,color-mix(in srgb,var(--brand-l) 70%,transparent),transparent 55%),
             radial-gradient(48% 80% at 92% 24%,color-mix(in srgb,var(--bronze) 10%,transparent),transparent 68%)}
.model>*{position:relative;z-index:1}
.mtabs{background:color-mix(in srgb,var(--card) 78%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.mtab{position:relative;transition:color .3s ease,background .3s ease,transform .3s var(--ease-premium)}
.mtab:before{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--brand),var(--bronze));opacity:.72}
.mtab.on:before{animation:routeProgress 7.5s linear forwards}
.model.user-held .mtab.on:before{animation:none;transform:scaleX(1);opacity:.5}
@keyframes routeProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mstage{position:relative;overflow:hidden;background:
 radial-gradient(55% 70% at 50% 50%,color-mix(in srgb,var(--brand-l) 24%,transparent),transparent 74%)}
.mstage:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px color-mix(in srgb,var(--sand) 26%,transparent)}
.mstage .scene{opacity:0;transform:translateY(6px) scale(.995);filter:blur(1.6px);transition:opacity .48s ease,transform .58s var(--ease-premium),filter .42s ease}
.mstage .scene.on{opacity:1;transform:none;filter:none}
.mcap .scene{opacity:0;transform:translateY(6px);transition:opacity .38s ease,transform .55s var(--ease-premium)}
.mcap .scene.on{opacity:1;transform:none}
.dia .flow{stroke-linecap:round;filter:drop-shadow(0 0 2.5px currentColor);animation:premiumDash 1.75s linear infinite}
.dia .flow.slow{animation-duration:2.8s}
@keyframes premiumDash{to{stroke-dashoffset:-34}}
.energy-glow{pointer-events:none;opacity:.15;filter:blur(2.3px)}
.energy-particle{pointer-events:none;mix-blend-mode:screen;filter:drop-shadow(0 0 5px rgba(255,255,255,.85))}
.energy-halo{pointer-events:none;opacity:.22;filter:blur(3px);mix-blend-mode:screen}
.mcap{background:linear-gradient(180deg,color-mix(in srgb,var(--sand-2) 82%,transparent),var(--card))}

/* THE INTERACTIVE SITE MODEL — showroom treatment */
.site3d{border-color:color-mix(in srgb,var(--line) 86%,transparent);box-shadow:0 34px 90px rgba(5,24,17,.14),0 2px 10px rgba(5,24,17,.05)}
.site3d .stage{position:relative;isolation:isolate;background:
 radial-gradient(70% 44% at 52% 82%,rgba(8,28,19,.11),transparent 72%),
 radial-gradient(90% 70% at 50% 4%,rgba(255,255,255,.86),transparent 59%),
 linear-gradient(180deg,color-mix(in srgb,var(--brand-l) 74%,#fff),color-mix(in srgb,var(--sand-2) 72%,#fff));
 --mx:0;--my:0}
html[data-theme="dark"] .site3d .stage{background:
 radial-gradient(72% 46% at 52% 82%,rgba(0,0,0,.36),transparent 72%),
 radial-gradient(90% 70% at 48% 5%,rgba(83,144,152,.12),transparent 62%),
 linear-gradient(180deg,#13232a,#101b21)}
html[data-theme="soft"] .site3d .stage{background:
 radial-gradient(72% 46% at 52% 82%,rgba(55,34,13,.12),transparent 72%),
 radial-gradient(90% 70% at 48% 5%,rgba(255,250,235,.92),transparent 62%),
 linear-gradient(180deg,#f4efe3,#eae0cf)}
.site3d .stage:before{content:"";position:absolute;inset:-10%;z-index:0;pointer-events:none;
 background:radial-gradient(30% 18% at calc(50% + var(--mx)*7%) calc(15% + var(--my)*4%),rgba(255,255,255,.58),transparent 76%);
 mix-blend-mode:soft-light;opacity:.78}
.site3d .stage:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
 box-shadow:inset 0 -55px 90px rgba(5,20,14,.08),inset 0 1px rgba(255,255,255,.5)}
.site3d .stage canvas{position:relative;z-index:1;opacity:0;transform:scale(1.012);filter:saturate(1.035) contrast(1.02);
 transition:opacity .9s ease,transform 1.35s var(--ease-premium)}
.site3d .stage.ready canvas{opacity:1;transform:none}
.site3d .hint{z-index:4;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.site3d .parts{position:relative;z-index:4;padding:14px;background:color-mix(in srgb,var(--sand-2) 88%,transparent)}
.p3d{transition:transform .3s var(--ease-premium),background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
.p3d:hover{transform:translateY(-2px)}
.p3d.on{box-shadow:0 8px 22px color-mix(in srgb,var(--brand) 17%,transparent)}
.site3d .say{position:relative;z-index:4;background:var(--card)}
.s3fail{position:absolute;inset:0;display:grid;place-items:center;z-index:5;padding:30px;text-align:center;color:var(--muted);font-size:13px}
.s3fail b{display:block;font-family:'Archivo';font-size:16px;color:var(--ink);margin-bottom:5px}

/* focused reading surfaces */
section{scroll-margin-top:120px}
section>.wrap{will-change:auto}
footer{position:relative}

@media(max-width:760px){
  body:before{opacity:.022}
  .model{box-shadow:0 22px 55px rgba(5,24,17,.10)}
  .site3d{box-shadow:0 22px 55px rgba(5,24,17,.12)}
  .site3d .stage{aspect-ratio:1/.82}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{filter:none;transform:none}
  .mtab.on:before,.dia .flow{animation:none}
  .energy-particle,.energy-halo{display:none}
  .site3d .stage canvas{opacity:1;transform:none;transition:none}
}
/* core uses display:none for route states, so animate each newly revealed route on entry */
.mstage .scene.on{animation:routeSceneIn .62s var(--ease-premium) both}
.mcap .scene.on{animation:routeCaptionIn .56s var(--ease-premium) both}
@keyframes routeSceneIn{from{opacity:0;transform:translateY(7px) scale(.994);filter:blur(1.6px)}to{opacity:1;transform:none;filter:none}}
@keyframes routeCaptionIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.mstage .scene.on,.mcap .scene.on{animation:none}}

/* ══ v22 · 3D site model: pin labels, legend, controls ══ */
.site3d .s3labels{position:absolute;inset:0;z-index:5;pointer-events:none;
 opacity:0;transition:opacity .6s ease}
.site3d .s3labels.in{opacity:1}
.site3d .s3labels.off{opacity:0;pointer-events:none}
.site3d .s3labels.off .s3lab{pointer-events:none}

.s3lab{position:absolute;left:0;top:0;display:flex;align-items:center;gap:7px;
 text-align:left;cursor:pointer;pointer-events:auto;white-space:nowrap;
 background:color-mix(in srgb,var(--card) 90%,transparent);
 border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:8px;
 padding:5px 10px 5px 8px;box-shadow:0 6px 20px rgba(0,0,0,.10);
 backdrop-filter:saturate(1.3) blur(6px);-webkit-backdrop-filter:saturate(1.3) blur(6px);
 transition:opacity .25s ease,padding .22s ease,border-color .2s ease,box-shadow .2s ease,
   background .22s ease,border-radius .22s ease}
.s3lab .pin{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:0 0 auto;
 box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.s3lab .txt{display:block;overflow:hidden;max-width:260px;transition:max-width .26s ease,opacity .2s ease}
.s3lab b{display:block;font-family:'Archivo';font-weight:700;font-size:10.4px;
 letter-spacing:.055em;color:var(--ink);line-height:1.15}
.s3lab small{display:block;font-family:'PlexMono';font-size:7.4px;letter-spacing:.13em;
 color:var(--muted);margin-top:2px}
.s3lab i{position:absolute;left:50%;bottom:-11px;width:1px;height:11px;
 background:linear-gradient(180deg,var(--line-3,rgba(0,0,0,.28)),transparent)}

/* collapsed state: just a pin, so the model is never obscured */
.s3lab.shut{padding:5px;border-left-width:1px;border-radius:99px;
 background:color-mix(in srgb,var(--card) 78%,transparent);box-shadow:0 3px 10px rgba(0,0,0,.10)}
.s3lab.shut .txt{max-width:0;opacity:0}
.s3lab.shut i{bottom:-8px;height:8px}

.s3lab:hover{border-color:var(--brand);box-shadow:0 10px 26px rgba(0,0,0,.16)}
.s3lab.neg{border-left-color:var(--brick)}
.s3lab.neg b{color:var(--brick)}
.s3lab.neg .pin{background:var(--brick);box-shadow:0 0 0 3px color-mix(in srgb,var(--brick) 22%,transparent)}

.s3togg{position:absolute;right:12px;top:12px;z-index:6;cursor:pointer;
 font-family:'PlexMono';font-size:8.4px;letter-spacing:.15em;text-transform:uppercase;
 color:var(--muted);background:color-mix(in srgb,var(--card) 90%,transparent);
 border:1px solid var(--line);border-radius:99px;padding:6px 11px;transition:.18s}
.s3togg:hover{color:var(--brand);border-color:var(--brand)}

.site3d .s3key{display:flex;gap:14px;flex-wrap:wrap;padding:10px 14px;
 border-top:1px solid var(--line-2);background:var(--card)}
.site3d .s3key span{display:inline-flex;align-items:center;gap:7px;
 font-family:'PlexMono';font-size:8.8px;letter-spacing:.12em;text-transform:uppercase;
 color:var(--muted)}
.site3d .s3key i{width:16px;height:3px;border-radius:2px;display:inline-block}
.site3d .s3key .k1 i{background:var(--brand)}
.site3d .s3key .k2 i{background:var(--bronze)}
.site3d .s3key .k3 i{background:repeating-linear-gradient(90deg,var(--brick) 0 4px,transparent 4px 7px)}

.site3d .s3fail{position:absolute;inset:0;z-index:4;display:flex;align-items:center;
 justify-content:center;padding:24px;text-align:center;color:var(--muted);
 font-size:12.5px;line-height:1.6;background:var(--sand-2)}
.site3d .s3fail b{color:var(--ink);font-family:'Archivo';font-size:13.5px}

@media(max-width:860px){
 .s3lab b{font-size:9.4px}
 .s3lab small{display:none}
 .s3lab .txt{max-width:170px}
 .site3d .s3key{gap:10px}
}
@media(prefers-reduced-motion:reduce){
 .site3d .s3labels,.s3lab,.s3lab .txt{transition:none}}