/* =====================================================
   SCENE 1
   PREMIUM VERSION
   KAPITEL 1
   FOUNDATION
===================================================== */

.scene-1{

    position:relative;

    display:flex;

    align-items:center;

    min-height:100vh;

    overflow:hidden;

    isolation:isolate;

}

/* =====================================================
   ATMOSPHERE
===================================================== */

.scene-1::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:0;

    background:

        radial-gradient(
            circle at 70% 48%,
            rgba(80,184,228,.08) 0%,
            rgba(80,184,228,.035) 22%,
            transparent 62%
        ),

        radial-gradient(
            circle at 28% 18%,
            rgba(255,255,255,.025),
            transparent 42%
        ),

        linear-gradient(
            180deg,
            rgba(255,255,255,.01),
            transparent 22%,
            transparent 78%,
            rgba(0,0,0,.16)
        );

}

.scene-1::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:1;

    background:

        radial-gradient(

            circle at 50% 50%,

            transparent 0%,

            transparent 58%,

            rgba(0,0,0,.18) 100%

        );

}

/* =====================================================
   CONTENT
===================================================== */

.scene-1__content{

    position:relative;

    display:grid;

    grid-template-columns:430px 1fr;

    align-items:center;

    gap:150px;

    min-height:100vh;

    z-index:5;

}

/* =====================================================
   TEXT
===================================================== */

.scene-1__text{

    position:relative;

    z-index:30;

}

.scene-1__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:22px;

    color:var(--color-primary);

    font-size:13px;

    font-weight:700;

    letter-spacing:.30em;

    text-transform:uppercase;

    opacity:.95;

}

.scene-1__eyebrow::before{

    content:"";

    width:30px;

    height:1px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(80,184,228,.9)

        );

}

.scene-1__headline{

    margin:0 0 30px;

    color:var(--color-text);

    font-size:clamp(50px,4vw,70px);

    font-weight:800;

    line-height:1.02;

    letter-spacing:-.05em;

    text-wrap:balance;

}

.scene-1__description{

    max-width:430px;

    color:rgba(255,255,255,.72);

    font-size:18px;

    line-height:1.85;

}

/* =====================================================
   VISUAL
===================================================== */

.scene-1__visual{

    position:relative;

    width:100%;

    height:780px;

    isolation:isolate;

}

/* =====================================================
   BACKGROUND
===================================================== */

.scene-1__background{

    position:absolute;

    inset:0;

    pointer-events:none;

    z-index:0;

}

.scene-1__background-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(120px);

}

.scene-1__background-glow--1{

    left:50%;

    top:50%;

    width:620px;

    height:620px;

    transform:translate(-50%,-50%);

    background:

        radial-gradient(

            circle,

            rgba(80,184,228,.14),

            rgba(80,184,228,.04) 48%,

            transparent 76%

        );

}

.scene-1__background-glow--2{

    right:8%;

    top:14%;

    width:320px;

    height:320px;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.04),

            transparent 72%

        );

}

.scene-1__background-grid{

    position:absolute;

    inset:0;

    opacity:.025;

    background-image:

        linear-gradient(

            rgba(255,255,255,.12) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.12) 1px,

            transparent 1px

        );

    background-size:52px 52px;

    mask-image:

        radial-gradient(

            circle,

            black 25%,

            transparent 92%

        );

}

/* =====================================================
   SVG
===================================================== */

.scene-1__svg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    overflow:visible;

    pointer-events:none;

    z-index:10;

}
/* =====================================================
   KAPITEL 2
   NETWORK CORE
===================================================== */

.scene-1__center{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:320px;
    height:320px;

    display:flex;
    align-items:center;
    justify-content:center;

    isolation:isolate;

    z-index:30;

}

/* =====================================================
   FLOOR LIGHT
===================================================== */

.scene-1__floor-light{

    position:absolute;

    left:50%;
    bottom:2px;

    width:500px;
    height:180px;

    transform:
        translateX(-50%)
        perspective(1000px)
        rotateX(82deg);

    border-radius:50%;

    background:

        radial-gradient(

            ellipse,

            rgba(80,184,228,.20) 0%,

            rgba(80,184,228,.10) 34%,

            rgba(80,184,228,.04) 58%,

            transparent 82%

        );

    filter:blur(34px);

    opacity:.85;

    pointer-events:none;

}

/* =====================================================
   OUTER GLOW
===================================================== */

.scene-1__halo{

    position:absolute;

    width:285px;
    height:285px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(80,184,228,.24) 0%,

            rgba(80,184,228,.10) 36%,

            rgba(80,184,228,.03) 62%,

            transparent 80%

        );

    filter:blur(42px);

    opacity:.95;

}

/* =====================================================
   OUTER RING
===================================================== */

.scene-1__ring{

    position:absolute;

    width:190px;
    height:190px;

    border-radius:50%;

    border:1px solid rgba(80,184,228,.18);

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.025),

            transparent 74%

        );

    box-shadow:

        inset 0 0 22px rgba(80,184,228,.06),

        inset 0 1px 0 rgba(255,255,255,.06),

        0 0 30px rgba(80,184,228,.10);

}

/* =====================================================
   CORE
===================================================== */

.scene-1__core{

    position:absolute;

    width:112px;
    height:112px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.08);

    background:

        radial-gradient(

            circle at 34% 30%,

            rgba(255,255,255,.28),

            rgba(255,255,255,.12) 18%,

            rgba(80,184,228,.22) 46%,

            rgba(80,184,228,.08) 72%,

            rgba(80,184,228,.02) 100%

        );

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.16),

        inset 0 -14px 28px rgba(0,0,0,.26),

        0 0 40px rgba(80,184,228,.18),

        0 22px 60px rgba(0,0,0,.34);

}

/* =====================================================
   INNER GLOW
===================================================== */

.scene-1__center-glow{

    position:absolute;

    width:165px;
    height:165px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(80,184,228,.42),

            rgba(80,184,228,.16) 44%,

            transparent 76%

        );

    filter:blur(24px);

    opacity:.92;

}

/* =====================================================
   CENTER TEXT
===================================================== */

.scene-1__center-text{

    position:relative;

    z-index:10;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#ffffff;

    font-size:54px;

    font-weight:800;

    letter-spacing:-.05em;

    line-height:1;

    white-space:nowrap;

    text-shadow:

        0 0 18px rgba(80,184,228,.14),

        0 6px 18px rgba(0,0,0,.30);

}

/* =====================================================
   RENDERING
===================================================== */

.scene-1__center,
.scene-1__center *,
.scene-1__ring,
.scene-1__core,
.scene-1__halo,
.scene-1__center-glow{

    backface-visibility:hidden;

    transform-style:preserve-3d;

    will-change:transform,opacity;

}
/* =====================================================
   KAPITEL 3
   LABELS
===================================================== */

.scene-1__labels{

    position:absolute;

    inset:0;

    z-index:20;

}

/* =====================================================
   LABEL
===================================================== */

.industry{

    position:absolute;

    display:flex;

    align-items:center;

    gap:14px;

    padding:0;

    background:none;

    border:none;

    box-shadow:none;

    opacity:.88;

    transition:

        transform .45s cubic-bezier(.22,1,.36,1),

        opacity .35s,

        filter .35s;

}

.industry::before,
.industry::after{

    display:none;

}

/* =====================================================
   NODE
===================================================== */

.industry__node{

    position:relative;

    width:8px;

    height:8px;

    flex:0 0 auto;

    border-radius:50%;

    background:#92E2FF;

    box-shadow:

        0 0 10px rgba(146,226,255,.80),

        0 0 22px rgba(146,226,255,.28);

}

.industry__node::before{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:22px;

    height:22px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(146,226,255,.18),

            transparent 72%

        );

}

.industry__node::after{

    content:"";

    position:absolute;

    left:50%;

    top:50%;

    width:4px;

    height:4px;

    transform:translate(-50%,-50%);

    border-radius:50%;

    background:#ffffff;

}

/* =====================================================
   TEXT
===================================================== */

.industry__text{

    color:rgba(255,255,255,.90);

    font-size:17px;

    font-weight:500;

    letter-spacing:.015em;

    line-height:1;

    white-space:nowrap;

    text-shadow:

        0 2px 10px rgba(0,0,0,.28);

}

/* =====================================================
   COMPANY
===================================================== */

.industry--company{

    z-index:50;

}

.industry--company .industry__text{

    font-size:19px;

    font-weight:600;

    color:#ffffff;

}

.industry--company .industry__node{

    width:10px;

    height:10px;

    background:#B7EDFF;

    box-shadow:

        0 0 16px rgba(183,237,255,.90),

        0 0 34px rgba(183,237,255,.40);

}

/* =====================================================
   CONNECTED
===================================================== */

.industry.is-connected{

    opacity:1;

}

.industry.is-connected .industry__node{

    transform:scale(1.35);

    background:#A9EAFF;

    box-shadow:

        0 0 18px rgba(169,234,255,.95),

        0 0 38px rgba(169,234,255,.42);

}

.industry.is-connected .industry__text{

    color:#ffffff;

}

/* =====================================================
   HOVER
===================================================== */

.industry:hover{

    transform:translateY(-2px);

    opacity:1;

}

.industry:hover .industry__node{

    transform:scale(1.18);

}

/* =====================================================
   POSITIONEN
===================================================== */

.industry--company{

    left:50%;

    top:8%;

    transform:translateX(-50%);

}

.industry--hotel{

    right:12%;

    top:24%;

}

.industry--doctor{

    right:9%;

    top:60%;

}

.industry--industry{

    left:11%;

    top:25%;

}

.industry--car{

    left:14%;

    top:62%;

}

.industry--it{

    left:50%;

    bottom:8%;

    transform:translateX(-50%);

}

/* =====================================================
   PERFORMANCE
===================================================== */

.industry,

.industry__node,

.industry__text{

    backface-visibility:hidden;

    transform-style:preserve-3d;

}

.industry__node{

    transform-origin:center;

    will-change:

        transform,

        opacity,

        box-shadow;

}

.industry__text{

    will-change:

        transform,

        opacity;

}
/* =====================================================
   KAPITEL 4
   RESPONSIVE
===================================================== */

@media (max-width:1200px){

    .scene-1__content{

        grid-template-columns:1fr;

        gap:80px;

        justify-items:center;

        text-align:center;

        padding:120px 0;

    }

    .scene-1__text{

        max-width:700px;

    }

    .scene-1__description{

        margin:0 auto;

    }

    .scene-1__eyebrow{

        justify-content:center;

    }

    .scene-1__visual{

        width:100%;

        max-width:760px;

        height:700px;

    }

}

/* =====================================================
   TABLET
===================================================== */

@media (max-width:992px){

    .scene-1{

        min-height:auto;

        padding:120px 0;

    }

    .scene-1__content{

        gap:70px;

    }

    .scene-1__headline{

        font-size:clamp(42px,7vw,60px);

    }

    .scene-1__description{

        font-size:17px;

        line-height:1.8;

    }

    .scene-1__visual{

        height:620px;

    }

    .scene-1__center{

        width:280px;

        height:280px;

    }

    .scene-1__halo{

        width:250px;

        height:250px;

    }

    .scene-1__ring{

        width:170px;

        height:170px;

    }

    .scene-1__core{

        width:100px;

        height:100px;

    }

    .scene-1__center-text{

        font-size:46px;

    }

    .scene-1__floor-light{

        width:420px;

        height:150px;

    }

}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width:768px){

    .scene-1{

        padding:90px 0;

    }

    .scene-1__content{

        gap:60px;

    }

    .scene-1__headline{

        font-size:40px;

    }

    .scene-1__description{

        font-size:16px;

    }

    .scene-1__visual{

        height:520px;

    }

    .scene-1__center{

        width:240px;

        height:240px;

    }

    .scene-1__halo{

        width:220px;

        height:220px;

    }

    .scene-1__ring{

        width:150px;

        height:150px;

    }

    .scene-1__core{

        width:88px;

        height:88px;

    }

    .scene-1__center-glow{

        width:135px;

        height:135px;

    }

    .scene-1__center-text{

        font-size:38px;

    }

    .industry__text{

        font-size:15px;

    }

    .industry--company .industry__text{

        font-size:17px;

    }

}

/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width:480px){

    .scene-1__headline{

        font-size:34px;

    }

    .scene-1__description{

        font-size:15px;

    }

    .scene-1__visual{

        height:430px;

    }

    .scene-1__center{

        width:200px;

        height:200px;

    }

    .scene-1__ring{

        width:130px;

        height:130px;

    }

    .scene-1__core{

        width:76px;

        height:76px;

    }

    .scene-1__center-text{

        font-size:32px;

    }

    .industry{

        gap:8px;

    }

    .industry__text{

        font-size:14px;

    }

}