/* =============================================
   CO LAB GMUNDEN – COMING SOON
   ============================================= */

/* --- Fonts ---
   PP Editorial New and PP Fraktion Mono are custom typefaces.
   Replace the src paths below with the actual font files once available.
   For now, we use @font-face declarations with fallbacks.
   ------------------------------------------------- */
@font-face {
  font-family: 'PP Fraktion Mono';
  src: url('assets/fonts/PPFraktionMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: #000;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Hero Section --- */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

/* Background image */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-img {
  display: none;
}

.hero__bg-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Logo SVG --- */
.hero__logo {
  position: absolute;
  z-index: 2;
  mix-blend-mode: difference;
}

.hero__logo svg {
  display: block;
  height: 100%;
  width: auto;
}

.hero__logo svg path {
  fill: #fff;
}

.hero__logo--co {
  top: 40px;
  left: 50px;
  height: 68px;
}

.hero__logo--lab {
  bottom: 30px;
  right: 40px;
  height: 100px;
}

/* --- Instagram icon --- */
.hero__instagram {
  position: absolute;
  z-index: 2;
  bottom: 36px;
  left: 50px;
  width: 28px;
  height: 28px;
  display: block;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.hero__instagram:hover {
  opacity: 1;
}

.hero__instagram svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* --- Central content area --- */
.hero__content {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Decorative frame – full rectangle with cropped corners */
.hero__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* tweakable frame settings */
  --frame-gap: 40px;
  --frame-thickness: 2px;
  --frame-color: rgba(255, 255, 255, 0.8);
}

.hero__frame::before {
  content: '';
  position: absolute;
  inset: 0;

  background:
    /* top */
    linear-gradient(to right,
      transparent 0,
      transparent var(--frame-gap),
      var(--frame-color) var(--frame-gap),
      var(--frame-color) calc(100% - var(--frame-gap)),
      transparent calc(100% - var(--frame-gap)),
      transparent 100%
    ) top / 100% var(--frame-thickness) no-repeat,

    /* bottom */
    linear-gradient(to right,
      transparent 0,
      transparent var(--frame-gap),
      var(--frame-color) var(--frame-gap),
      var(--frame-color) calc(100% - var(--frame-gap)),
      transparent calc(100% - var(--frame-gap)),
      transparent 100%
    ) bottom / 100% var(--frame-thickness) no-repeat,

    /* left */
    linear-gradient(to bottom,
      transparent 0,
      transparent var(--frame-gap),
      var(--frame-color) var(--frame-gap),
      var(--frame-color) calc(100% - var(--frame-gap)),
      transparent calc(100% - var(--frame-gap)),
      transparent 100%
    ) left / var(--frame-thickness) 100% no-repeat,

    /* right */
    linear-gradient(to bottom,
      transparent 0,
      transparent var(--frame-gap),
      var(--frame-color) var(--frame-gap),
      var(--frame-color) calc(100% - var(--frame-gap)),
      transparent calc(100% - var(--frame-gap)),
      transparent 100%
    ) right / var(--frame-thickness) 100% no-repeat;
}

/* --- Text inside the frame --- */
.hero__text {
  position: relative;
  padding: 50px 60px;
  min-width: 380px;
}

.hero__tagline {
  font-family: 'PP Fraktion Mono', 'Courier New', 'Courier', monospace;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.hero__coming-soon {
  font-family: 'PP Fraktion Mono', 'Courier New', 'Courier', monospace;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  margin-top: 1.5em;
}

/* =============================================
   RESPONSIVE – MOBILE
   ============================================= */
@media (max-width: 768px) {
  .hero__logo--co {
    top: 24px;
    left: 16px;
    height: 50px;
  }

  .hero__logo--lab {
    bottom: 20px;
    right: 16px;
    height: 74px;
  }

  .hero__content {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
  }

  .hero__text {
    padding: 40px 40px;
    min-width: 0;
  }

  .hero__frame {
    --frame-gap: 28px;
    --frame-thickness: 2px;
  }

  .hero__tagline {
    font-size: 16px;
    line-height: 1.3;
  }

  .hero__coming-soon {
    font-size: 16px;
  }


  .hero__instagram {
    bottom: 24px;
    left: 16px;
    width: 24px;
    height: 24px;
  }
}

/* Very small screens */
@media (max-width: 390px) {
  .hero__logo--co {
    top: 20px;
    left: 12px;
    height: 42px;
  }

  .hero__logo--lab {
    bottom: 16px;
    right: 12px;
    height: 62px;
  }

  .hero__text {
    padding: 30px 30px;
  }

  .hero__frame {
    --frame-gap: 24px;
    --frame-thickness: 2px;
  }
}