html {
  overflow-anchor: none;
}

.vimeo-embed {
    max-width: 1000px;
    margin: auto;
    padding: 0 20px;
}

.vimeo-embed iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
}

.section-transition p {
    font-size: 2.1rem;       /* smaller than main page heading */
    font-family: 'Parsley', sans-serif;
    font-weight: 600;        /* moderate weight */
    color: darkseagreen;          /* lighter cadetblue variant */
    letter-spacing: 0.03em;
    line-height: 1.4em;
    text-align: center;
}

/* Pico-8 Showcase */
.pico-showcase {
  margin: auto;
  margin-bottom: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* 3D Model */
.pico-model {
  width: 320px;
  height: 420px;
  background: transparent;
}

/* PLAY Button */
.pico-play-button {
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-decoration: none;
  color: white;
  border: 1px solid white;
  padding: 10px 22px;
  transition: background 0.2s ease, color 0.2s ease;
}

.pico-play-button:hover {
  background: white;
  color: black;
}

/* ================================================= */
/* CGI CAROUSEL                                      */
/* ================================================= */

/* CONTAINER */
.cgi-carousel {
    max-width: 75vw;
    max-height: auto;
    margin: 10px auto;
    position: relative;
    overflow: hidden;
    padding-bottom: 50px;
}

/* SLIDER TRACK */
.cgi-track {
    display: flex;
    transition: transform 0.8s ease-in-out;
    width: 100%;
}

/* Each slide */
.cgi-slide {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
}


/* VIDEO BOX */
.cgi-preview {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
}

/* Thumbnail / preview video */
.cgi-preview video,
.cgi-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.25s ease;
}

/* INFO OVERLAY */
.cgi-info {
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(0,0,0,0.55);
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.cgi-info h2 {
    font-family: 'Parsley', sans-serif;
    color: darkseagreen;
    font-size: 3rem;
    letter-spacing: 4px;
}

.cgi-info p {
    font-family: 'Plex', sans-serif;
    font-size: 1.2rem;
    width: 70%;
    opacity: 0.9;
}

/* Hover behavior */
.cgi-preview:hover video,
.cgi-preview:hover img {
    opacity: 0.3;
}

.cgi-preview:hover .cgi-info {
    opacity: 1;
}

/* Active (iframe playing) */
.cgi-preview.playing .cgi-info {
    opacity: 0;
    pointer-events: none;
}

/* Vimeo / iframe */
.cgi-preview iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 10px;
}

.cgi-iframe-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.cgi-iframe-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* DOTS */
.cgi-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    gap: 14px;
    z-index: 10;
}

.cgi-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #444;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.cgi-dot.active {
    background: darkseagreen;
    transform: scale(1.2);
}

@media (orientation: portrait), (max-width: 600px) {

    /* Section transition text (wie Film) */
    .section-transition p {
        font-size: 1.4rem;
        padding: 0 8%;
        line-height: 1.35em;
        text-align: center;
    }

    /* CGI Preview Box */
    .cgi-preview {
        height: 260px;      /* statt 400px */
        border-radius: 10px;
    }

    /* Info Overlay Text */
    .cgi-info h2 {
        font-size: 1.5rem;  /* statt 3rem */
        letter-spacing: 2px;
    }

    .cgi-info p {
        font-size: 0.75rem; /* wie Film */
        width: 90%;
        opacity: 0.9;
    }

    /* Dots etwas kleiner */
    .cgi-dot {
        width: 12px;
        height: 12px;
    }
}