/* EPSTROM animated logo page — colours follow the system light/dark setting */
:root{--bg:#f5f5f7;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#16151a}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{display:grid;place-items:center;background:var(--bg);padding:16px}
.logo-wrap{width:min(440px,80vw,80vh);aspect-ratio:1}
.logo-wrap svg{display:block;width:100%;height:100%}

/* ---- logo animation ---- */
.epstrom-logo{--fg:#191919;--eye:#f4743b;color:var(--fg);overflow:visible}
@media (prefers-color-scheme:dark){.epstrom-logo{--fg:#e8ebf7}}
.epstrom-logo .e-fg{fill:currentColor}
.epstrom-logo .e-eye,.epstrom-logo .e-glow{fill:var(--eye)}
.epstrom-logo .e-part,.epstrom-logo .e-owl,.epstrom-logo .e-eye{transform-box:fill-box;transform-origin:50% 50%}
.epstrom-logo .e-part{animation:e-in .9s cubic-bezier(.22,1.35,.36,1) var(--t,0s) both}
@keyframes e-in{
  0%{opacity:0;transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg)) scale(var(--s,1))}
  35%{opacity:1}
  100%{opacity:1;transform:none}}
.epstrom-logo .e-owl{animation:e-snap .4s ease-out 1.15s both}
@keyframes e-snap{0%,100%{transform:none}35%{transform:scale(1.035)}}
.epstrom-logo .e-eye{animation:e-eye-on .45s cubic-bezier(.3,1.6,.5,1) 1.3s both,e-blink 6s linear 3s infinite}
@keyframes e-eye-on{0%{opacity:0;transform:scaleY(0)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes e-blink{0%,44%,48%,90%,94.5%,100%{transform:none}46%,92%,96.5%{transform:scaleY(.08)}94.6%{transform:none}96.6%,98.5%{transform:none}}
.epstrom-logo .e-glow{opacity:0;animation:e-glow 1.1s ease-out 1.3s both}
@keyframes e-glow{0%{opacity:0}25%{opacity:.95}100%{opacity:0}}
.epstrom-logo .e-cover{transform:translateX(832.7px);animation:e-type-cover 0.8s step-end 1.95s both}
@keyframes e-type-cover{0%{transform:translateX(50px)}6.25%{transform:translateX(155.1px)}20.00%{transform:translateX(267px)}31.25%{transform:translateX(382.2px)}47.50%{transform:translateX(494.1px)}58.75%{transform:translateX(606.7px)}75.00%{transform:translateX(720.4px)}86.25%{transform:translateX(832.7px)}100%{transform:translateX(832.7px)}}
.epstrom-logo .e-cursor{fill:var(--eye);transform:translateX(842.7px);animation:e-cur-hide 1.4s step-end,e-cur-blink .6s step-end 1.4s 1,e-cur-blink 1.06s step-end 2.90s infinite,e-type-cursor 0.8s step-end 1.95s both}
@keyframes e-type-cursor{0%{transform:translateX(63.1px)}6.25%{transform:translateX(165.1px)}20.00%{transform:translateX(277px)}31.25%{transform:translateX(392.2px)}47.50%{transform:translateX(504.1px)}58.75%{transform:translateX(616.7px)}75.00%{transform:translateX(730.4px)}86.25%{transform:translateX(842.7px)}100%{transform:translateX(842.7px)}}
@keyframes e-cur-hide{0%,100%{opacity:0}}
@keyframes e-cur-blink{0%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.epstrom-logo *{animation:none!important}.epstrom-logo .e-glow{opacity:0}}