<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>brunodcsilva_</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    html, body {
      height: 100svh;
      width: 100vw;
      overflow: hidden;
      background-color: #000;
      color: #ffffff;
      font-family: 'Roboto Mono', monospace;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      position: relative;
    }

    body.off .text,
    body.off .cursor {
      display: none;
    }

    .text {
      font-size: 5vw;
      white-space: nowrap;
      animation: flickerText 1.5s infinite alternate;
      line-height: 1;
      opacity: 0;
      transition: opacity 1s ease;
    }
    body.on .text { opacity: 1; }

    .cursor {
      display: inline-block;
      width: 0.35em;
      height: 1em;
      margin-left: 0.2em;
      animation: blink 1.2s infinite;
      vertical-align: middle;
    }

    @keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0;} }
    @keyframes flickerText {
      0% { opacity: 1; }
      20% { opacity: 0.95; }
      40% { opacity: 1; }
      60% { opacity: 0.98; }
      80% { opacity: 1; }
      100% { opacity: 0.97; }
    }

    .scanlines {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: repeating-linear-gradient(
        transparent, transparent 3px,
        rgba(255, 255, 255, 0.1) 3px,
        rgba(255, 255, 255, 0.1) 5px
      );
      pointer-events: none;
      z-index: 1;
      animation: flickerScreen 0.1s infinite alternate;
    }
    @keyframes flickerScreen { 0%{opacity:0.1;} 100%{opacity:0.2;} }

    /* CRT Power On Animation */
    .crt-on { animation: crtOn 1s forwards; }
    @keyframes crtOn {
      0% { transform: scaleY(0.05) scaleX(0); opacity: 0; filter: brightness(500%); }
      50% { transform: scaleY(0.05) scaleX(1); opacity: 1; }
      100% { transform: scaleY(1) scaleX(1); opacity: 1; filter: brightness(100%); }
    }

    /* CRT Power Off Animation */
    .crt-off { animation: crtOff 0.8s forwards; }
    @keyframes crtOff {
      0% { transform: scaleY(1) scaleX(1); opacity: 1; filter: brightness(100%); }
      50% { transform: scaleY(0.05) scaleX(1); opacity: 1; filter: brightness(500%); }
      100% { transform: scaleY(0.05) scaleX(0); opacity: 0; }
    }

    /* Modes */
    body.white { background-color: #121212; color: #ffffff; }
    body.white .text { color: #ffffff; text-shadow: 0 0 15px #fff; }
    body.white .cursor { background-color: #fff; box-shadow: 0 0 20px #fff; }
    body.white .selector::after { background: #fff; box-shadow: 0 0 10px #fff; }

    body.green { background-color: #001400; color: #00ff00; }
    body.green .text { color: #00ff00; text-shadow: 0 0 16px #00ff00; }
    body.green .cursor { background-color: #00ff00; box-shadow: 0 0 20px #00ff00; }
    body.green .selector::after { background: #00ff00; box-shadow: 0 0 10px #00ff00; }

    body.amber { background-color: #140a00; color: #ffbf00; }
    body.amber .text { color: #ffbf00; text-shadow: 0 0 16px #ffbf00; }
    body.amber .cursor { background-color: #ffbf00; box-shadow: 0 0 20px #ffbf00; }
    body.amber .selector::after { background: #ffbf00; box-shadow: 0 0 10px #ffbf00; }

    /* Control Panels */
    .controls {
      position: absolute;
      bottom: 2rem;
      display: flex;
      align-items: center;
      gap: 2rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 1s ease;
      z-index: 2;
    }
    body.on .controls {
      opacity: 1;
      pointer-events: auto;
    }

    .startup {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      pointer-events: auto;
      z-index: 2;
    }
    body.on .startup {
      display: none;
    }

    /* Power Button */
    .power-btn {
      width: 60px; height: 60px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #444, #111);
      border: 3px solid #222;
      box-shadow: inset -4px -4px 8px rgba(0,0,0,0.8),
                  inset 3px 3px 6px rgba(255,255,255,0.1),
                  0 4px 6px rgba(0,0,0,0.9);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .power-btn:active {
      transform: translateY(2px);
      box-shadow: inset 3px 3px 6px rgba(0,0,0,0.9),
                  inset -3px -3px 6px rgba(255,255,255,0.05);
    }
    .power-btn::after {
      content: "⏻";
      font-size: 2rem;
      color: #eee;
      text-shadow: 0 0 4px #fff;
    }

    /* LED Indicator */
    .led {
      width: 14px; height: 14px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #330000, #111);
      box-shadow: inset -1px -1px 3px rgba(0,0,0,0.8);
      transition: all 0.3s ease;
    }
    body.on .led {
      background: radial-gradient(circle at 30% 30%, #00ff00, #004400);
      box-shadow: 0 0 6px #00ff00, 0 0 12px #00ff00;
    }

    /* Selector Knob */
    .selector {
      width: 60px; height: 60px;
      border-radius: 50%;
      background: conic-gradient(#333 0deg 10deg, #222 10deg 20deg, #333 20deg 30deg, #222 30deg 40deg);
      border: 3px solid #111;
      box-shadow: inset -4px -4px 10px rgba(0,0,0,0.9),
                  inset 3px 3px 8px rgba(255,255,255,0.05),
                  0 3px 8px rgba(0,0,0,0.9);
      cursor: pointer;
      position: relative;
      transition: transform 0.3s ease;
    }
    .selector::after {
      content: "";
      position: absolute;
      top: 8px; left: 50%;
      transform: translateX(-50%);
      width: 6px; height: 16px;
      border-radius: 2px;
      background: #666;
      box-shadow: 0 0 4px #000;
      transition: background 0.3s, box-shadow 0.3s;
    }

    @media (max-width: 768px) {
      .text { font-size: 8vw; }
      .cursor { width: 0.3em; height: 0.9em; }
      .controls { gap: 1.2rem; }
    }
  </style>
</head>
<body class="off">
  <div class="scanlines"></div>
  <div class="text">bruno dc silva<span class="cursor"></span></div>

  <!-- Startup Power Button (centered at start) -->
  <div class="startup">
    <div class="power-btn" onclick="togglePower()"></div>
  </div>

  <!-- Full Controls (shown only when powered on) -->
  <div class="controls">
    <div class="power-btn" onclick="togglePower()"></div>
    <div class="led"></div>
    <div class="selector" onclick="toggleRetro()"></div>
  </div>

  <script>
    const modes = ["white", "green", "amber"];
    let current = 0;
    let rotation = 0;
    let powered = false;

    function togglePower() {
      const textEl = document.querySelector('.text');
      if (!powered) {
        powered = true;
        textEl.classList.remove('crt-off');
        textEl.classList.add('crt-on');
        document.body.classList.remove("off");
        document.body.classList.add("on", modes[current]);
      } else {
        powered = false;
        textEl.classList.remove('crt-on');
        textEl.classList.add('crt-off');
        textEl.addEventListener('animationend', () => {
          document.body.classList.remove("on", ...modes);
          document.body.classList.add("off");
          current = 0;
          rotation = 0;
          document.querySelector('.selector').style.transform = 'rotate(0deg)';
        }, { once: true });
      }
    }

    function toggleRetro() {
      if (!powered) return;
      document.body.classList.remove(modes[current]);
      current = (current + 1) % modes.length;
      document.body.classList.add(modes[current]);
      rotation += 120;
      document.querySelector('.selector').style.transform = `rotate(${rotation}deg)`;
    }
  </script>
</body>
</html>
