/* roboto-200 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/roboto-v50-latin-200.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-v50-latin-regular.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
    font-display: swap;
    /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto-v50-latin-700.woff2') format('woff2');
    /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.hero {
  height: 100vh;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2rem;
  position: relative;
  overflow: hidden;
}

.hero__canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero__content {
  max-width: 1100px;
  width: 100%;
  position: relative;
  z-index: 1;
  transform: translateY(23%);
}

.hero__text-box {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2rem;
    padding: 3rem 4rem;
    box-shadow: 
        0 8px 32px 0 rgba(0, 0, 0, 0.4),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
    position: relative;
}

.hero__text-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="300" height="300" filter="url(%23noise)" opacity="0.03"/></svg>');
    border-radius: 2rem;
    pointer-events: none;
    opacity: 0.6;
}

.hero__text-wrapper {
    position: relative;
}

.hero__portrait {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 200%;
  width: auto;
  z-index: 1;
  pointer-events: none;
  
  /* Kombinierter Gradient: von unten nach oben UND von links nach rechts */
  mask-image: 
    linear-gradient(to top, 
      transparent 0%,
      rgba(0, 0, 0, 0.3) 20%,
      rgba(0, 0, 0, 0.6) 35%,
      rgba(0, 0, 0, 1) 50%
    ),
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.7) 10%,
      rgba(0, 0, 0, 0.9) 17%,
      rgba(0, 0, 0, 1) 25%
    );
  mask-composite: intersect;
  
  -webkit-mask-image: 
    linear-gradient(to top, 
      transparent 0%,
      rgba(0, 0, 0, 0.3) 20%,
      rgba(0, 0, 0, 0.6) 35%,
      rgba(0, 0, 0, 1) 50%
    ),
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.7) 10%,
      rgba(0, 0, 0, 0.9) 17%,
      rgba(0, 0, 0, 1) 25%
    );
  -webkit-mask-composite: source-in;
}

.hero__subtitle-wrapper {
    margin-top: 0.5rem;
    position: relative;
    z-index: 2;
}

/* Container-fill-text Styles */
.container-fill-text {
    --container-fill-text-captured-length: initial;
    display: flex;
    container-type: inline-size;
    max-width: unset;
    line-height: 1.1;
    font-weight: 900;
    color: #fff;
    position: relative;
    z-index: 2;
}

.container-fill-text__reference {
    visibility: hidden;
}

.container-fill-text__container {
    --container-fill-text-captured-length: 100cqi;
    --container-fill-text-available-space: var(--container-fill-text-captured-length);
    flex-grow: 1;
    container-type: inline-size;
}

.container-fill-text__display {
    --container-fill-text-captured-length: 100cqi;
    --container-fill-text-ratio: tan(atan2(var(--container-fill-text-available-space),
                var(--container-fill-text-available-space) - var(--container-fill-text-captured-length)));
    display: block;
    inline-size: var(--container-fill-text-available-space);
    font-size: 3rem;
    font-size: clamp(3rem,
            1em * var(--container-fill-text-ratio),
            var(--container-fill-text-max-font-size, infinity * 1px));
    white-space: nowrap;
}

@property --container-fill-text-captured-length {
    syntax: '<length>';
    initial-value: 0px;
    inherits: true;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    margin: auto;
}