:root{
  --bg: #000000;
  --tile: #f1f3f5;
  --tile-dim: #e9ecef;
  --grid-line: rgba(255,255,255,0.06);
  --glow: rgba(255,255,255,0.65);
  --cols: 14;
  --rows: 11;
  --tile-size: 9vmin;
  --perspective: 1200px;
  --tilt-start: 28deg;
  --tilt-end:   67deg;
  --tilt-duration: 14s;
  --tilt-delay: 1s;
}
html,body{ height:100%; }
body{ margin:0; background: var(--bg); color:#000; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; overflow:hidden; }
.scene{ position:fixed; inset:0; perspective: var(--perspective);
  background: radial-gradient(120vmax 60vmax at 50% 30%, rgba(255,255,255,0.04), transparent 60%),
              radial-gradient(120vmax 80vmax at 50% 120%, rgba(255,255,255,0.03), transparent 70%),
              var(--bg);
  filter: invert(0) hue-rotate(180deg);
}
.bg-canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; filter: invert(1) hue-rotate(180deg); pointer-events:none; }
.grid-wrap{ position:absolute; left:50%; top:56%; z-index:10; transform: translate(-50%,-50%) rotateX(var(--tilt-start)); transform-style: preserve-3d; width: calc(var(--cols) * var(--tile-size)); height: calc(var(--rows) * var(--tile-size)); filter: drop-shadow(0 30px 60px rgba(0,0,0,0.25)); -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.75) 18%, rgba(0,0,0,1) 38%, rgba(0,0,0,1) 100%); mask-image: linear-gradient(to top, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.75) 18%, rgba(0,0,0,1) 100%); animation: tiltBack var(--tilt-duration) cubic-bezier(.24,.8,.12,1) var(--tilt-delay) forwards; }
@keyframes tiltBack{ from { transform: translate(-50%,-50%) rotateX(var(--tilt-start)); } to { transform: translate(-50%,-50%) rotateX(var(--tilt-end)); } }
.grid{ display:grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); width:100%; height:100%; transform: translateZ(0.01px); backface-visibility: hidden; }
.tile{ background: linear-gradient(180deg, var(--tile), var(--tile-dim)); opacity: 0; transition: opacity 140ms ease, filter 140ms ease; box-shadow: inset 0 0 0 1px var(--grid-line), 0 0 0 rgba(0,0,0,0); will-change: opacity, filter; }
.tile.lit{ box-shadow: inset 0 0 0 1px var(--grid-line), 0 1px 0 rgba(255,255,255,0.12), 0 0 14px var(--glow); }
.brand{ position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; pointer-events:none; text-align:center; }
.brand-inner{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.brand img{ display:block; max-width:min(64vmin, 720px); width: clamp(200px, 45vmin, 640px); height:auto; opacity:0; transform: translateY(8px) scale(1.08); filter: blur(2px); transition: opacity 1200ms cubic-bezier(.2,.8,.2,1), transform 1200ms cubic-bezier(.2,.8,.2,1), filter 1200ms cubic-bezier(.2,.8,.2,1); }
.brand.show img{ opacity:1; transform: translateY(0) scale(1.00); filter: blur(0); }
.subtext{ margin:0; font-size: clamp(12px, 2.2vmin, 20px); letter-spacing: .28em; text-transform: uppercase; color:#000; opacity:0; transform: translateY(6px); filter: blur(0.8px); }
.brand.show .subtext{ animation: subFade 2400ms ease forwards; animation-delay: 1200ms; }
@keyframes subFade{ 0%{opacity:0; transform: translateY(6px); filter: blur(0.8px);} 50%{opacity:.45;} 100%{opacity:1; transform: translateY(0); filter: blur(0);} }
@media (prefers-reduced-motion: reduce){ .tile{ transition:none!important; } .brand img{ transition:none!important; opacity:1; transform:none; filter:none; } .subtext{ animation:none!important; opacity:1; transform:none; filter:none; } .grid-wrap{ animation:none!important; } }