@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display&family=Press+Start+2P&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Gugi&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oxanium:wght@200..800&family=Playfair+Display&family=Press+Start+2P&display=swap");

*,
*::after,
*::before {
  margin: 0;
  padding: 0;

  box-sizing: border-box;
}

@property --crt-position {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

:root {
  --bg-color: #121010;
}

@layer base, crt;

@layer base {
  body {
    background: var(--bg-color);
    display: grid;
    place-items: center;
    min-height: 100vh;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

    color: #eee;
  }

  main {
    position: relative;
    display: grid;
    place-items: center;
  }

  /* Hidden hook for #switch:checked ~ .container CRT rules */
  #switch {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
    appearance: none;
  }
}

@layer crt {
  .container {
    background: var(--bg-color);

    font-size: clamp(1rem, 2vw, 2rem);
    letter-spacing: 0.125rem;

    display: grid;
    place-items: center;
    gap: clamp(10px, 2.5vw, 22px);
    padding: clamp(12px, 3vw, 2rem);

    width: 92vw;
    max-width: 800px;
    max-height: 92vh;
    aspect-ratio: 4 / 3;

    position: relative;
    border: 3px solid rgb(14, 201, 14);

    overflow: hidden;

    animation: textflicker 0.4s infinite alternate;
  }

  #switch:checked ~ .container::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: linear-gradient(
      0deg,
      transparent,
      rgba(255 255 255 / 0.4) 30px,
      transparent 60px
    );
    background-size: 100% var(--crt-position);
    background-repeat: no-repeat;
    z-index: 2;

    filter: blur(10px) hue-rotate(90deg);

    pointer-events: none;

    animation: move 16s linear 4s infinite reverse;
  }

  .container::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.25) 50%
      ),
      linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.06),
        rgba(0, 255, 0, 0.02),
        rgba(0, 0, 255, 0.06)
      );
    background-size: 100% 5px, 3px 100%;
    z-index: 2;
    pointer-events: none;
  }

  #switch:checked ~ .container::after {
    animation: flicker 0.15s infinite;
  }

  .screen {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: none;
    background: #222;
    overflow: hidden;
    border-radius: 14px;
    /* Barrel falloff + soft phosphor bloom */
    box-shadow:
      inset 0 0 55px rgba(0, 0, 0, 0.42),
      inset 0 0 100px rgba(0, 0, 0, 0.28),
      inset 0 0 22px rgba(190, 215, 255, 0.075);
  }
  
  .screen .content {
    transform: scale(0.98, 0.99);  /* subtle squeeze */
  }

  .screen::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 14px;

    background: radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.03),
      transparent 70%
    );

    z-index: 1;
  }

  .screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 14px;

    background-image: repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.03),
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px,
      transparent 3px
    );

    z-index: 2;
  }

  .crt-jitter-layer {
    position: relative;
    width: 100%;
    height: 100%;
    animation: crtJitter 6s steps(14, end) infinite;
  }

  .crt-overlays {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: 14px;
    background-image:
      radial-gradient(
        ellipse 82% 76% at 50% 50%,
        transparent 38%,
        rgba(0, 0, 0, 0.48) 100%
      ),
      repeating-linear-gradient(
        90deg,
        rgba(220, 70, 90, 0.07) 0px,
        transparent 1px,
        rgba(70, 210, 110, 0.055) 2px,
        transparent 3px,
        rgba(85, 130, 255, 0.065) 4px,
        transparent 6px
      ),
      repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.04) 0px,
        rgba(255, 255, 255, 0.04) 1px,
        rgba(0, 0, 0, 0.055) 1px,
        rgba(0, 0, 0, 0.055) 2px
      );
    background-size:
      100% 100%,
      100% 100%,
      100% 4px;
    background-position:
      center,
      center,
      0 0;
    animation: interlaceBreath 3.2s ease-in-out infinite alternate;
  }

  @keyframes interlaceBreath {
    from {
      opacity: 0.94;
      filter: brightness(1);
    }
    to {
      opacity: 1;
      filter: brightness(1.018);
    }
  }

  @keyframes crtJitter {
    0%,
    100% {
      transform: translate3d(0, 0, 0) scale(1);
    }
    11% {
      transform: translate3d(0.35px, -0.2px, 0) ;
    }
    23% {
      transform: translate3d(-0.25px, 0.15px, 0) scale(1.002,0.998);
    }
    37% {
      transform: translate3d(0.15px, 0.3px, 0);
    }
    51% {
      transform: translate3d(-0.2px, -0.15px, 0) scale(0.998,1.002);
    }
    64% {
      transform: translate3d(0.25px, 0.1px, 0);
    }
    78% {
      transform: translate3d(-0.1px, 0.25px, 0) scale(1.001,0.999);
    }
    91% {
      transform: translate3d(0.2px, -0.1px, 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .crt-overlays {
      animation: none;
    }

    .crt-jitter-layer {
      animation: none !important;
    }
  }

  #switch ~ .container > .screen {
    animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    animation-fill-mode: forwards;
  }

  #switch:checked ~ .container > .screen {
    animation: turn-on 4s linear;
    animation-fill-mode: forwards;
  }

  /* content container fills screen */
  .content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  /* top wrapper centers logo/title */
  .top-wrapper {
    flex: 1;
    display: flex;
    justify-content: center; /* vertical centering inside wrapper */
    align-items: center;     /* horizontal centering */
  }

  /* top block spacing */
  .top-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* space between logo and title */
  }

  .description {
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
  }

  .title {
    font-family: "Oxanium", sans-serif;
    font-weight: 200;
    font-size: clamp(1.6rem, 5vw, 3rem);
    line-height: 1.15;
  }

  .sub-title {
    font-family: "Oxanium", sans-serif;
    font-weight: 300;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    line-height: 1.2;
    opacity: 0.88;
  }

  .title span {
    font-family: system-ui, sans-serif;
  }


  /* logo size */
  .brand-logo.hbl-logo {
    width: min(92%, 750px); /* slightly smaller for proper scaling */
    height: auto;
    animation: textflicker 0.4s infinite alternate;
  }

  /* footer text */
  .alternate-text {
    font-family: "Press Start 2P", monospace;
    font-size: clamp(0.55rem, 2vw, 1rem); /* much more readable */
    opacity: 0.7;
    text-align: center;
    margin: 0;
    padding-bottom: 12px; /* space from CRT border */
  }

  .overlay {
    color: #00ff00;
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 60px;
    visibility: hidden;
    pointer-events: none;
  }

  #switch:checked ~ .container .overlay {
    animation: overlay-anim 5s linear;
    animation-fill-mode: forwards;
  }

  .contact-dock {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    align-items: center;
    font-family: "Press Start 2P", monospace;
    font-size: clamp(0.55rem, 1.2vw, 0.75rem);
    letter-spacing: 0.12em;
    opacity: 0.65;
    text-transform: uppercase;
  }

  .contact-dock a {
    color: #7CFFB2;
    text-decoration: none;
    transition: opacity 120ms ease, text-shadow 120ms ease;
  }

  .contact-dock a:hover {
    opacity: 1;
    text-shadow:
      0 0 6px rgba(124, 255, 178, 0.7),
      0 0 12px rgba(124, 255, 178, 0.3);
  }

  .signal {
    display: inline-block;
    line-height: 1;
    transform: translateY(-2px);
    color: #ffaa00;
    animation: pulse-orange 1.4s infinite ease-in-out;
    text-shadow: 
      0 0 4px rgba(255, 170, 0, 0.6),   /* subtle inner glow */
      0 0 10px rgba(255, 170, 0, 0.4),  /* medium glow */
      0 0 16px rgba(255, 170, 0, 0.25); /* outer soft halo */
  }

  @keyframes overlay-anim {
    0% {
      visibility: hidden;
    }
    20% {
      visibility: hidden;
    }
    21% {
      visibility: visible;
    }
    100% {
      visibility: hidden;
    }
  }

  @keyframes move {
    0% {
      opacity: 0;
      --crt-position: 100%;
    }
    28% {
      opacity: 0;
      --crt-position: 100%;
    }
    30% {
      opacity: 1;
    }
    58% {
      opacity: 1;
    }
    60% {
      opacity: 0;
      --crt-position: 0%;
    }
    100% {
      opacity: 0;
      --crt-position: 0%;
    }
  }

  @keyframes flicker {
    0% {
      opacity: 0.27861;
    }
    5% {
      opacity: 0.34769;
    }
    10% {
      opacity: 0.23604;
    }
    15% {
      opacity: 0.90626;
    }
    20% {
      opacity: 0.18128;
    }
    25% {
      opacity: 0.83891;
    }
    30% {
      opacity: 0.65583;
    }
    35% {
      opacity: 0.67807;
    }
    40% {
      opacity: 0.26559;
    }
    45% {
      opacity: 0.84693;
    }
    50% {
      opacity: 0.96019;
    }
    55% {
      opacity: 0.08594;
    }
    60% {
      opacity: 0.20313;
    }
    65% {
      opacity: 0.71988;
    }
    70% {
      opacity: 0.53455;
    }
    75% {
      opacity: 0.37288;
    }
    80% {
      opacity: 0.71428;
    }
    85% {
      opacity: 0.70419;
    }
    90% {
      opacity: 0.7003;
    }
    95% {
      opacity: 0.36108;
    }
    100% {
      opacity: 0.24387;
    }
  }

  @keyframes textflicker {
    from {
      text-shadow: 1px 0 0 #ea36af, -2px 0 0 #75fa69;
      filter: blur(0.6px) drop-shadow(1px 0 0 #ea36af) drop-shadow(-2px 0 0 #75fa69);
    }
    to {
      text-shadow: 2px 0.5px 2px #ea36af, -1px -0.5px 2px #75fa69;
      filter: blur(0.6px) drop-shadow(2px 0.5px 2px #ea36af) drop-shadow(-1px -0.5px 2px #75fa69);
    }
  }

  @keyframes turn-on {
    0% {
      transform: scale(1, 0.8) translate3d(0, 0, 0);
      -webkit-filter: brightness(30);
      filter: brightness(30);
      opacity: 1;
    }
    3.5% {
      transform: scale(1, 0.8) translate3d(0, 100%, 0);
    }

    3.6% {
      transform: scale(1, 0.8) translate3d(0, -100%, 0);
      opacity: 1;
    }

    9% {
      transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
      -webkit-filter: brightness(30);
      filter: brightness(30);
      opacity: 0;
    }

    11% {
      transform: scale(1, 1) translate3d(0, 0, 0);
      -webkit-filter: contrast(0) brightness(0);
      filter: contrast(0) brightness(0);
      opacity: 0;
    }

    100% {
      transform: scale(1, 1) translate3d(0, 0, 0);
      -webkit-filter: contrast(1) brightness(1.2) saturate(1.3);
      filter: contrast(1) brightness(1.2) saturate(1.3);
      opacity: 1;
    }
  }

  @keyframes turn-off {
    0% {
      transform: scale(1, 1.3) translate3d(0, 0, 0);
      -webkit-filter: brightness(1);
      filter: brightness(1);
      opacity: 1;
    }
    60% {
      transform: scale(1.3, 0.001) translate3d(0, 0, 0);
      -webkit-filter: brightness(10);
      filter: brightness(10);
    }
    100% {
      animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
      transform: scale(0, 0.0001) translate3d(0, 0, 0);
      -webkit-filter: brightness(50);
      filter: brightness(50);
    }
  }

  @keyframes pulse-orange {
    0%, 100% {
      opacity: 0.8;
      text-shadow:
        0 0 2px rgba(255, 170, 0, 0.5),
        0 0 8px rgba(255, 170, 0, 0.35),
        0 0 14px rgba(255, 170, 0, 0.2);
    }
    50% {
      opacity: 1;
      text-shadow:
        0 0 6px rgba(255, 170, 0, 0.7),
        0 0 12px rgba(255, 170, 0, 0.5),
        0 0 20px rgba(255, 170, 0, 0.35);
    }
  }
}