:root{
    --bg: #000000;        /* BLACK BACKGROUND */
    --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: 62deg;
  }

  html,body{ height:100%; }
  body{
    margin:0;
    background: var(--bg);
    color:#000; /* default brand color */
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    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);
  }

  .grid-wrap{
    position:absolute; left:50%; top:56%;
    transform: translate(-50%,-50%) rotateX(var(--tilt));
    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) 38%, rgba(0,0,0,1) 100%);
  }
  .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;
    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 h1{
    margin:0;
    font-weight:800;
    letter-spacing: .12em;
    font-size: clamp(28px, 8.5vmin, 96px);
    line-height:1;
    color:#000;             /* default black */
    opacity:0;
    transform: translateY(8px) scale(1.08);
    filter: blur(2px);
    white-space: nowrap;
  }
  .brand.show h1{
    animation: brandIn 1200ms cubic-bezier(.2,.8,.2,1) forwards;
  }
  @keyframes brandIn{
    0%   { opacity:0; transform: translateY(8px) scale(1.08); filter: blur(2px); }
    60%  { opacity:1; transform: translateY(0)   scale(1.00); filter: blur(0.2px); }
    100% { opacity:1; transform: translateY(0)   scale(1.00); filter: blur(0); }
  }

  /* RED letters */
  .hl{ color:#ff2b2b; display:inline-block; }

  /* Wrapper around MED for the glow overlay */
  .hlwrap{ position:relative; display:inline-block; }
  /* Heartbeat glow: a blurred clone layered on top via ::after */
  .brand.heartbeat .hlwrap::after{
    content: attr(data-text);             /* "MED" */
    position:absolute; inset:0;
    font: inherit; letter-spacing: inherit;
    color:#ff2b2b;
    filter: blur(8px);
    opacity:0;
    transform: scale(1);
    transform-origin: 50% 50%;
    animation: hb 3s ease-in-out infinite;
    pointer-events:none;
  }
  /* subtle supporting text-shadow on the actual red letters */
  .brand.heartbeat .hl{ text-shadow: 0 0 6px rgba(255,43,43,0.5); }

  @keyframes hb{
    /* double-beat then rest */
    0%   { opacity:0;   transform: scale(1.00); }
    8%   { opacity:.95; transform: scale(1.06); }
    16%  { opacity:.30; transform: scale(1.00); }
    24%  { opacity:.85; transform: scale(1.04); }
    32%  { opacity:.25; transform: scale(1.00); }
    100% { opacity:0;   transform: scale(1.00); }
  }

  .subtext{
    margin:0;
    font-size: clamp(12px, 2.2vmin, 20px);
    letter-spacing: .28em;
    text-transform: uppercase;
    color:#000;     /* black */
    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); }
  }

  /* Respect reduced motion (remove this block to force heartbeat on) */
  @media (prefers-reduced-motion: reduce){
    .tile{ transition: none !important; }
    .brand h1{ animation: none !important; opacity:1; transform:none; filter:none; }
    .subtext{ animation: none !important; opacity:1; transform:none; filter:none; }
    .brand.heartbeat .hlwrap::after{ animation: none !important; opacity:0 !important; }
    .brand.heartbeat .hl{ text-shadow: none !important; }
  }

  noscript .brand h1,
  noscript .subtext{
    opacity:1 !important; transform:none !important; filter:none !important;
  }