@property --g1   { syntax: '<color>'; inherits: true; initial-value: #00a83a; }
@property --g2   { syntax: '<color>'; inherits: true; initial-value: #00ff41; }
@property --glow { syntax: '<color>'; inherits: true; initial-value: rgba(0,255,65,.35); }
html.iv-lock, html.iv-lock body { overflow: hidden; }
#intro {
  --bg: #09090b; --green: #00ff41; --red: #ff0050; --v: #e4e4e4;
  position: absolute; left: 0; top: 0; width: 100%; height: 100svh;
  z-index: 100; pointer-events: none;
  animation: greens 15s ease-in-out 2050ms infinite;
}
html.iv-lock #intro { pointer-events: auto; }

html[data-nav-in="light"]::before {
  content: ''; position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; background: #e8e9e3;
  animation: nav-veil .4s 3s forwards;
}
@keyframes nav-veil { to { opacity: 0; visibility: hidden; } }

html.iv-leaving #intro, html.iv-leaving #machine { position: fixed; inset: 0; width: auto; height: auto; }
@keyframes greens {
  0%, 100% { --g1: #00a83a; --g2: #00ff41; --glow: rgba(0,255,65,.35); }
  33.333%  { --g1: #00875a; --g2: #2de0a0; --glow: rgba(45,224,160,.32); }
  66.667%  { --g1: #6fbf00; --g2: #d6ff3a; --glow: rgba(190,255,60,.30); }
}
.iv-skin, .iv-flap, .iv-shade { position: absolute; inset: 0; }
.iv-skin { background: var(--bg); overflow: hidden; }
.iv-skin canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.iv-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(9,9,11,.75) 100%);
}
.iv-scan {
  position: absolute; inset: 0; opacity: .35;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
}
.iv-mover { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.iv-logo {
  display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 0 22px color-mix(in srgb, var(--glow), transparent var(--mix, 0%)));
  animation: iv-breathe 7s ease-in-out infinite;
}
@keyframes iv-breathe {
  0%, 100% { opacity: .92; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.015); }
}
.iv-logo-a { fill: url(#iv-grad); }
.iv-v-main    { animation: glitch-logo-main    2.5s infinite; }
.iv-v-ghost-l { animation: glitch-logo-ghost-l 2.5s infinite; }
.iv-v-ghost-r { animation: glitch-logo-ghost-r 2.5s infinite; }
@keyframes glitch-logo-main {
  0%,80%,100% { transform: none; filter: none; }
  82%  { transform: translateX(-5px); }
  86%  { transform: translateX(5px); }
  90%  { transform: none; }
  94%  { transform: translateX(2.5px); filter: brightness(1.38); }
  97%  { transform: none; filter: none; }
}
@keyframes glitch-logo-ghost-l {
  0%,80%,100% { transform: none; opacity: 0; }
  82%  { transform: translateX(-20px); opacity: 1; }
  86%  { transform: translateX(20px); opacity: 1; }
  90%  { transform: none; opacity: 0; }
  94%  { opacity: 0; }
}
@keyframes glitch-logo-ghost-r {
  0%,80%,100% { transform: none; opacity: 0; }
  82%  { transform: translateX(20px); opacity: 1; }
  86%  { transform: translateX(-20px); opacity: 1; }
  90%  { transform: none; opacity: 0; }
  94%  { transform: translateX(-14px); opacity: 1; }
  97%  { transform: none; opacity: 0; }
}
.iv-slice-top, .iv-slice-bottom { opacity: 0; transform-box: fill-box; }
.iv-slice-top    { animation: logoSliceTop    2.5s infinite; }
.iv-slice-bottom { animation: logoSliceBottom 2.5s infinite; }
@keyframes logoSliceTop {
  0%,80%,100% { transform: translateX(0); opacity: 0; }
  83% { transform: translateX(15%);  opacity: 1; }
  85% { transform: translateX(-11%); opacity: 1; }
  87% { transform: translateX(0);    opacity: 0; }
}
@keyframes logoSliceBottom {
  0%,80%,100% { transform: translateX(0); opacity: 0; }
  84% { transform: translateX(-19%); opacity: 1; }
  86% { transform: translateX(11%);  opacity: 1; }
  88% { transform: translateX(0);    opacity: 0; }
}
.iv-res { mix-blend-mode: screen; }
.iv-res-l { animation: residue-l 2.5s infinite; }
.iv-res-r { animation: residue-r 2.5s infinite; }
.iv-res-gate { opacity: 0; animation: res-gate 0s 2s forwards; }
@keyframes res-gate { to { opacity: 1; } }
@keyframes residue-l {
  0%   { opacity: .7;  transform: translateX(-16px); }
  40%  { opacity: 0;   transform: translateX(-6px); }
  88%  { opacity: 0;   transform: translateX(-22px); }
  90%  { opacity: 1;   transform: translateX(-22px); }
  100% { opacity: .7;  transform: translateX(-16px); }
}
@keyframes residue-r {
  0%   { opacity: .7;  transform: translateX(16px); }
  40%  { opacity: 0;   transform: translateX(6px); }
  88%  { opacity: 0;   transform: translateX(22px); }
  90%  { opacity: 1;   transform: translateX(22px); }
  100% { opacity: .7;  transform: translateX(16px); }
}

.iv-lipwrap { position: absolute; inset: 0; filter: drop-shadow(4px -4px 7px rgba(0,0,0,.55)); }
.iv-lip { position: absolute; inset: 0; background: #f4f5f0; clip-path: polygon(0 0,0 0,0 0); }
#intro[data-mode="tear"] .iv-lip { background: #fbfbf7; }

.iv-tip {
  position: absolute; inset: 0; border: 0; background: transparent; cursor: pointer;
  pointer-events: auto; clip-path: polygon(0 0, 0 0, 0 0); -webkit-tap-highlight-color: transparent;
}
.iv-tip:focus-visible { outline: none; }

html:not([data-intro]):not([data-nav-in]):not(.iv-on) #machine,
html:not([data-intro]):not([data-nav-in]):not(.iv-on) #intro { visibility: hidden; }

html:not(.iv-on) .iv-mover { visibility: hidden; }
html:not(.iv-on) #machine, html:not(.iv-on) .iv-paper { animation: nav-veil .4s 3s forwards; }
.iv-page { position: relative; z-index: 1; }


#machine {
  --bg: #09090b;
  position: absolute; left: 0; top: 0; right: auto; bottom: auto; width: 100%; height: 100svh;
  z-index: 100; pointer-events: none;
}
#machine.behind { position: fixed; inset: 0; width: auto; height: auto; z-index: 0; }
#intro { z-index: 101; }


.iv-paper { position: absolute; inset: 0; filter: drop-shadow(4px -4px 7px rgba(0,0,0,.55)); }
html[data-theme="dark"] .iv-paper { filter: drop-shadow(-5px 5px 9px rgba(0,0,0,.7)); }
.iv-scrap, .iv-lip { position: absolute; inset: 0; clip-path: polygon(0 0,0 0,0 0); }
.iv-scrap { background: #e8e9e3; }
.iv-lip { background: #fbfbf7; }


.theme-switch {
  position: absolute; top: 0; left: 0; padding: 6px; margin: -6px; background: none; border: 0; cursor: pointer;
  pointer-events: auto; transform-origin: 6px 6px; -webkit-tap-highlight-color: transparent;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s;
}
.theme-switch.shown { opacity: 1; visibility: visible; transition: opacity .25s; }
@media (hover: hover) {
  .theme-switch:hover .ts-knob { transform: translateX(3px); }
  .theme-switch[aria-checked="true"]:hover .ts-knob { transform: translateX(13px); }
}
.theme-switch:focus-visible { outline: none; }
.theme-switch:focus-visible .ts-track { outline: 2px solid #00ff41; outline-offset: 4px; }
.ts-track {
  position: relative; display: block; width: 36px; height: 20px; border-radius: 10px;
  background: #e8e9e3;
}
.ts-knob {
  position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: #09090b;
  transition: transform .3s cubic-bezier(.2,.75,.15,1);
}

html[data-theme="dark"] .ts-track { background: transparent; }
html[data-theme="dark"] .ts-knob { background: #e8e9e3; }
.theme-switch[aria-checked="true"] .ts-knob { transform: translateX(16px); }

.ts-eye .ts-knob { transition: none; }

.ts-track::before {
  content: ''; position: absolute; top: 5px; width: 10px; height: 10px; opacity: 0; transition: opacity .2s;
  -webkit-mask: var(--ts-ico) center / contain no-repeat; mask: var(--ts-ico) center / contain no-repeat;
}
html[data-theme="light"] .theme-switch[aria-checked="false"] .ts-track::before {
  --ts-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.5 2a10 10 0 1 0 9.5 13.1A8 8 0 0 1 12.5 2z'/%3E%3C/svg%3E");
  left: 21px; background: #09090b; opacity: .75;
}
html[data-theme="dark"] .theme-switch[aria-checked="true"] .ts-track::before {
  --ts-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.6'/%3E%3Cpath d='M12 1.5v2.6M12 19.9v2.6M1.5 12h2.6M19.9 12h2.6M4.6 4.6l1.8 1.8M17.6 17.6l1.8 1.8M4.6 19.4l1.8-1.8M17.6 6.4l1.8-1.8'/%3E%3C/svg%3E");
  left: 5px; background: #e8e9e3; opacity: .8;
}
html .theme-switch[aria-checked] .ts-track.ts-eye::before { opacity: 0; }

.ts-drop {
  position: absolute; left: 5px; top: 15.5px; width: 5px; height: 5px; opacity: 0; pointer-events: none;
  background: #d0021b; border-radius: 0 50% 50% 50%; transform-origin: 50% 50%;
}
@media (max-width: 599px) { .theme-switch { transform: scale(.85); } }