/* First-visit intro (see assets/js/intro.js). Everything here is inert unless <html class="intro-on">. */
#intro { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on #intro {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 9999; overflow: hidden;
  background: var(--bg-alt, #f5f7fc); transition: background .9s ease, opacity .8s ease;
}
html.intro-on #intro.out { opacity: 0; pointer-events: none; }
html.intro-on body > :not(#intro):not(#intro-fly) { opacity: 0; }
html.intro-on.intro-reveal body > :not(#intro):not(#intro-fly) { animation: pageDown .6s cubic-bezier(.2,.8,.2,1) both; }
html.intro-on .brand-mark { visibility: hidden; }
@keyframes pageDown { from { opacity: 0; transform: translateY(-70px); } to { opacity: 1; transform: none; } }

#intro-fly { position: fixed; z-index: 10000; border-radius: 50%; background: var(--navy); object-fit: cover; pointer-events: none; }

.i-scene {
  width: min(94vw, 860px, calc(88vh * 1.538)); height: auto; overflow: visible; }
.i-drop, .i-on, .i-logo, .wifi path { transform-box: fill-box; transform-origin: center; }
.i-scene .ink { stroke: var(--navy); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.i-scene .shd { fill: var(--navy); }

.i-drop { animation: drop .5s cubic-bezier(.34,1.56,.64,1) both; }
.d1 { animation-delay: 0s; } .d2 { animation-delay: .08s; } .d3 { animation-delay: .16s; } .d4 { animation-delay: .24s; }
@keyframes drop { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: none; } }

.i-on { animation: tvOn .5s .55s ease-out both; }
@keyframes tvOn {
  0% { opacity: 0; fill: #cfd8ee; transform: scaleY(.02); } 15% { opacity: 1; fill: #cfd8ee; transform: scaleY(1); }
  100% { opacity: 1; fill: #fff; transform: none; }
}
.i-logo { animation: logoPop .45s .8s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes logoPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
.led { fill: #5b6472; animation: blink 1.2s steps(1) .7s infinite; }
@keyframes blink { 0% { fill: #3ddc84; } 50% { fill: #1a7f46; } }
.wifi path { fill: none; stroke: var(--primary); stroke-width: 5; stroke-linecap: round; opacity: 0; animation: wifi 1.4s .8s infinite; }
.wifi path:nth-child(2) { animation-delay: 1s; } .wifi path:nth-child(3) { animation-delay: 1.2s; }
@keyframes wifi { 0%, 100% { opacity: 0; } 40% { opacity: 1; } }

.i-skip {
  position: absolute; right: 20px; bottom: 20px; font: 700 .9rem 'Baloo 2', 'Poppins', sans-serif; cursor: pointer;
  background: var(--white); color: var(--navy); border: 2.5px solid var(--navy); border-radius: 10px; padding: 8px 20px;
  box-shadow: 3px 3px 0 var(--navy);
}