/* Finite five-second sequence; original logo pixels stay intact. */
.site-opening { display: none; }
.opening-active, .opening-active body { overflow: hidden; }
.opening-active .site-opening { display: grid; position: fixed; inset: 0; z-index: 1000; isolation: isolate; place-items: center; overflow: hidden; background: #020914; color: #f7fbff; color-scheme: only dark; outline: none; }
.opening-atmosphere { position: absolute; inset: -10%; z-index: -2; opacity: 0; background: radial-gradient(ellipse at 50% 43%, #0c1a2b 0%, #050c18 42%, #020610 76%); }
.opening-skyline { position: absolute; inset: 45% 0 0; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(0deg, #02091480, #02091440), url('../images/optimized/network-city-1672.webp') center 64%/cover no-repeat; -webkit-mask-image: linear-gradient(transparent, #000 80%); mask-image: linear-gradient(transparent, #000 80%); }
/* The accent is in normal flow BELOW the caption, never across the logo. */
.opening-horizon { position: relative; width: min(42%, 180px); height: 1px; margin: 34px auto 0; opacity: 0; background: linear-gradient(90deg, transparent, #659dc660 28%, #bddaf6 50%, #659dc660 72%, transparent); }
.opening-horizon span { position: absolute; inset: -6px -10px; background: radial-gradient(ellipse, #599ad42b, transparent 70%); }
.opening-composition { position: relative; z-index: 1; width: min(76vw, 610px); text-align: center; transform: translateY(-18px); }
.opening-logo { position: relative; opacity: 0; }
.opening-logo img { display: block; width: 100%; height: auto; filter: none; forced-color-adjust: none; color-scheme: only dark; }
.opening-logo-energy { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); pointer-events: none; }
.opening-logo::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(105deg, transparent 38%, #629be9 45%, #c7f5ff 49%, #629be9 53%, transparent 62%); background-size: 300% 100%; background-position: 100% 0; -webkit-mask: url('../images/esen-logo-white-20260911.png') center/100% 100% no-repeat; mask: url('../images/esen-logo-white-20260911.png') center/100% 100% no-repeat; }
.opening-caption { margin-top: clamp(20px, 3vh, 28px); color: #b4c4d7; font: 400 clamp(12px, 1.1vw, 15px)/1.6 var(--sans); letter-spacing: .045em; opacity: 0; }
.opening-bottom { position: absolute; left: 24px; right: 24px; bottom: max(36px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 20px; color: #7990a5; font: 400 9px/1.5 var(--mono); letter-spacing: .2em; opacity: 0; }
.opening-progress { display: block; width: 64px; height: 1px; background: #a6d9fa22; overflow: hidden; }
.opening-progress i { display: block; width: 100%; height: 100%; background: #b4ddfa; transform: scaleX(0); transform-origin: left; }
.opening-particles { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 45% 24% at 50% 45%, transparent 90%, #000 100%); mask-image: radial-gradient(ellipse 45% 24% at 50% 45%, transparent 90%, #000 100%); }
.opening-particles i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #a1d4f0; opacity: 0; }
.opening-particles i:nth-child(1) { left: 13%; top: 26%; }
.opening-particles i:nth-child(2) { left: 23%; top: 67%; }
.opening-particles i:nth-child(3) { left: 37%; top: 20%; }
.opening-particles i:nth-child(4) { left: 67%; top: 73%; }
.opening-particles i:nth-child(5) { left: 78%; top: 30%; }
.opening-particles i:nth-child(6) { left: 88%; top: 56%; }
.opening-particles i:nth-child(7) { left: 51%; top: 81%; }
.opening-particles i:nth-child(8) { left: 33%; top: 77%; }
.opening-particles i:nth-child(9) { left: 72%; top: 19%; }
.opening-particles i:nth-child(10) { left: 7%; top: 64%; }
.opening-particles i:nth-child(11) { left: 92%; top: 36%; }
.opening-particles i:nth-child(12) { left: 44%; top: 12%; }
.opening-particles i:nth-child(13) { left: 29%; top: 38%; }
.opening-particles i:nth-child(14) { left: 62%; top: 31%; }
.opening-particles i:nth-child(15) { left: 17%; top: 80%; }
.opening-particles i:nth-child(16) { left: 82%; top: 83%; }
.opening-playing .site-opening { animation: esen-curtain 5s linear both; }
.opening-playing .opening-atmosphere { animation: esen-atmosphere 5s ease both; }
.opening-playing .opening-skyline { animation: esen-skyline 5s ease both; }
.opening-playing .opening-horizon { animation: esen-horizon 5s cubic-bezier(.2,.65,.2,1) both; }
.opening-playing .opening-logo { animation: esen-brand 5s cubic-bezier(.18,.65,.2,1) both; }
.opening-playing .opening-logo img { animation: esen-logo-resolve 5s linear both; }
.opening-playing .opening-logo::after { animation: esen-sheen 5s ease both; }
.opening-playing .opening-caption { animation: esen-caption 5s ease both; }
.opening-playing .opening-bottom { animation: esen-bottom 5s ease both; }
.opening-playing .opening-progress i { animation: esen-progress 4.35s linear both; }
.opening-playing .opening-particles i { animation: esen-spark 5s ease both; }
.opening-playing .opening-particles i:nth-child(3n) { animation-delay: -.65s; }
.opening-playing .opening-particles i:nth-child(3n + 1) { animation-delay: -.3s; width: 1px; height: 1px; }
@keyframes esen-curtain { 0%, 86% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes esen-atmosphere { 0% { opacity: 0; transform: scale(1.08); } 30%, 82% { opacity: .8; } 100% { opacity: .8; transform: scale(1); } }
@keyframes esen-skyline { 0%, 15% { opacity: 0; transform: translateY(8px); } 65%, 100% { opacity: .24; transform: translateY(0); } }
@keyframes esen-horizon { 0%, 42% { opacity: 0; transform: scaleX(.05); } 65%, 86% { opacity: .65; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes esen-brand { 0% { opacity: 0; transform: scale(1.085); } 5% { opacity: 1; } 46%, 100% { opacity: 1; transform: scale(1); } }
@keyframes esen-logo-resolve { 0%, 9% { opacity: 0; clip-path: inset(0 100% 0 0); } 14% { opacity: .35; clip-path: inset(0 91% 0 0); } 24% { opacity: .72; clip-path: inset(0 61% 0 0); } 36% { opacity: 1; clip-path: inset(0 22% 0 0); } 46%, 100% { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes esen-sheen { 0%, 8% { opacity: 0; background-position: 100% 0; } 16%, 35% { opacity: .8; } 53%, 100% { opacity: 0; background-position: 0% 0; } }
@keyframes esen-caption { 0%, 42% { opacity: 0; transform: translateY(8px); } 62%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes esen-bottom { 0% { opacity: 0; } 18%, 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes esen-progress { to { transform: scaleX(1); } }
@keyframes esen-spark { 0%, 10% { opacity: 0; transform: translateY(18px); } 35% { opacity: .55; } 80%, 100% { opacity: 0; transform: translateY(-32px); } }
@media (max-width: 600px) { .opening-composition { width: min(88vw, 430px); } .opening-caption { letter-spacing: .015em; font-size: 12px; } .opening-horizon { margin-top: 28px; } .opening-bottom { bottom: max(28px, env(safe-area-inset-bottom)); } }
@media (max-height: 420px) { .opening-composition { width: min(58vw, 350px); transform: translateY(-8px); } .opening-caption { margin-top: 8px; font-size: 11px; } .opening-horizon { margin-top: 16px; } .opening-bottom { bottom: 14px; gap: 8px; } }
@media (prefers-reduced-motion: reduce) { .opening-active .site-opening { display: none; } }