/* ==========================================================================
   SiBaRi — Buku Tamu Digital / Gateway Cinematic
   FULL FINAL CSS
   ========================================================================== */


/* ==========================================================================
   01. TOKENS
   ========================================================================== */

:root {
    --navy-950: #04111d;
    --navy-900: #071a2a;

    --cyan-300: #91e4ef;
    --cyan-500: #35bddd;
    --green-500: #22a578;

    --text-main: #f7fbff;
    --text-soft: rgba(231, 243, 250, 0.82);
    --text-muted: rgba(215, 232, 243, 0.64);

    --danger: #ff9ba3;

    --glass:
        linear-gradient(
            145deg,
            rgba(8, 27, 43, 0.87),
            rgba(8, 31, 49, 0.75)
        );

    --glass-border:
        rgba(196, 232, 244, 0.17);

    --shadow:
        0 32px 90px
        rgba(0, 0, 0, 0.38);

    --radius-xl: 34px;
    --radius-md: 16px;

    --ease:
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    --ease-cinematic:
        cubic-bezier(
            0.18,
            0.72,
            0.21,
            1
        );

    /*
     * Final cinematic:
     * sedikit lebih lambat agar bisa dinikmati.
     */
    --cinematic-duration:
        5350ms;

    --reduced-duration:
        650ms;

    --pointer-x: 0;
    --pointer-y: 0;

    --portal-angle:
        0deg;


    /* ----------------------------------------------------------------------
       FINAL GATE GEOMETRY
       ---------------------------------------------------------------------- */

    --gate-width:
        min(
            1080px,
            92vw
        );

    --portal-size:
        clamp(
            735px,
            59vw,
            835px
        );

    --pillar-width:
        clamp(
            205px,
            17.5vw,
            250px
        );
}


/* ==========================================================================
   02. RESET
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-width: 320px;
    min-height: 100%;
    margin: 0;
}

html {
    background:
        var(--navy-950);
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
select {
    color: inherit;
}

button {
    border: 0;
}

img,
svg,
canvas {
    display: block;
}

img {
    max-width: 100%;
}


/* ==========================================================================
   03. BODY
   ========================================================================== */

.gateway-page {
    min-height: 100svh;

    overflow-x: hidden;

    color:
        var(--text-main);

    background:
        var(--navy-950);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;
}


/* ==========================================================================
   04. MAIN STAGE
   ========================================================================== */

.gateway {
    position: relative;

    isolation: isolate;

    width: 100%;

    min-height:
        max(
            100svh,
            900px
        );

    display: grid;

    place-items: center;

    padding:
        34px
        18px;

    overflow: hidden;
}

.gateway::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 6;

    pointer-events: none;

    background:
        radial-gradient(
            circle
            at
            50%
            48%,
            rgba(10, 80, 108, 0.015) 0%,
            rgba(4, 18, 29, 0.045) 46%,
            rgba(1, 9, 16, 0.43) 100%
        );
}


/* ==========================================================================
   05. SKIP LINK
   ========================================================================== */

.gateway-skip-link {
    position: fixed;

    top: 12px;
    left: 12px;

    z-index: 1000;

    padding:
        10px
        14px;

    color: #071a2a;

    background: #ffffff;

    border-radius: 10px;

    font-size: 0.86rem;

    font-weight: 800;

    text-decoration: none;

    transform:
        translateY(-180%);

    transition:
        transform
        180ms
        ease;
}

.gateway-skip-link:focus {
    transform:
        translateY(0);
}


/* ==========================================================================
   06. CAMERA
   ========================================================================== */

.gateway-camera {
    position: absolute;

    inset: -3%;

    z-index: 1;

    overflow: hidden;

    transform-origin:
        50%
        50%;

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(1);

    will-change:
        transform;
}

.gateway-layer {
    position: absolute;

    user-select: none;

    pointer-events: none;

    -webkit-user-drag: none;
}

.gateway-world,
.gateway-fog-back-stage,
.gateway-fog-front-stage,
.gateway-foreground {
    position: absolute;

    inset: 0;
}


/* ==========================================================================
   07. BACKGROUND
   ========================================================================== */

.gateway-world {
    z-index: 1;

    transform:
        translate3d(
            calc(
                var(--pointer-x)
                *
                -2px
            ),
            calc(
                var(--pointer-y)
                *
                -1px
            ),
            0
        );

    transition:
        transform
        700ms
        var(--ease);
}

.gateway-background {
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform:
        scale(1.035);
}

.gateway-office {
    left: 50%;

    bottom: -1%;

    width:
        min(
            67vw,
            960px
        );

    height: auto;

    opacity: 0.66;

    transform:
        translateX(-50%);

    transform-origin:
        center bottom;
}


/* ==========================================================================
   08. BACK FOG
   ========================================================================== */

.gateway-fog-back-stage {
    z-index: 8;

    overflow: hidden;

    pointer-events: none;
}

.gateway-fog-back {
    left: -8%;

    bottom: -5%;

    width: 116%;

    height: auto;

    opacity: 0.52;

    /*
     * Sengaja dibuat cukup terlihat saat idle.
     */
    animation:
        fogBackIdle
        17s
        ease-in-out
        infinite
        alternate;

    will-change:
        transform,
        opacity;
}


/* ==========================================================================
   09. GATE ASSEMBLY
   ========================================================================== */

.gateway-gate-assembly {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 15;

    width:
        var(--gate-width);

    height:
        var(--portal-size);

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

    pointer-events: none;
}


/* ==========================================================================
   10. PORTAL
   ========================================================================== */

.gateway-portal {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 2;

    width:
        var(--portal-size);

    height:
        var(--portal-size);

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

    transform-origin:
        center;

    will-change:
        transform;
}

.gateway-portal-image {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transform-origin:
        center;

    pointer-events: none;

    user-select: none;
}


/* ==========================================================================
   11. PORTAL IDLE
   ========================================================================== */

.gateway-portal-aura {
    z-index: 1;

    opacity: 0.58;

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

    animation:
        portalAuraIdle
        6.4s
        ease-in-out
        infinite;

    will-change:
        transform,
        opacity;
}

.gateway-portal-core {
    z-index: 2;

    opacity: 0.70;

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

    animation:
        portalCoreIdle
        5s
        ease-in-out
        infinite;

    will-change:
        transform,
        opacity;
}

.gateway-portal-ring {
    z-index: 3;

    opacity: 0.94;

    /*
     * Rotation dikendalikan JS.
     * Tidak boleh mempunyai CSS rotate animation lain.
     */
    transform:
        translate(
            -50%,
            -50%
        )
        rotate(
            var(--portal-angle)
        );

    will-change:
        transform,
        filter,
        opacity;
}

.gateway-portal-energy-halo {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 0;

    width: 58%;

    aspect-ratio: 1;

    border-radius: 50%;

    opacity: 0.36;

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

    background:
        radial-gradient(
            circle,
            rgba(205, 252, 255, 0.20),
            rgba(72, 211, 232, 0.08) 42%,
            transparent 74%
        );

    animation:
        portalHaloIdle
        5.5s
        ease-in-out
        infinite;

    will-change:
        transform,
        opacity;
}


/* ==========================================================================
   12. PRESSURE WAVE
   ========================================================================== */

.gateway-pressure-wave {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 5;

    width: 47%;

    aspect-ratio: 1;

    border:
        1px
        solid
        rgba(
            148,
            239,
            250,
            0
        );

    border-radius: 50%;

    opacity: 0;

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

    will-change:
        transform,
        opacity,
        border-color;
}


/* ==========================================================================
   13. PILLARS
   ========================================================================== */

.gateway-pillar {
    position: absolute;

    /*
     * Pilar tidak terlalu tinggi.
     * Dasarnya sedikit tertanam di mist.
     */
    bottom: 4.5%;

    z-index: 5;

    width:
        var(--pillar-width);

    /*
     * Tidak ada X/Y movement.
     */
    transform: none;

    transform-origin:
        center bottom;

    filter:
        brightness(0.98)
        saturate(0.98);

    animation:
        pillarLightIdle
        7.2s
        ease-in-out
        infinite;

    will-change:
        filter;
}

.gateway-pillar--left {
    left:
        calc(
            50%
            -
            (
                var(--portal-size)
                /
                2
            )
            -
            (
                var(--pillar-width)
                *
                0.30
            )
        );
}

.gateway-pillar--right {
    right:
        calc(
            50%
            -
            (
                var(--portal-size)
                /
                2
            )
            -
            (
                var(--pillar-width)
                *
                0.30
            )
        );
}

.gateway-pillar-image {
    position: relative;

    z-index: 1;

    width: 100%;

    height: auto;

    object-fit: contain;
}


/* ==========================================================================
   14. RUNES
   ========================================================================== */

.gateway-rune-mask {
    position: absolute;

    inset: 0;

    z-index: 2;

    overflow: hidden;

    opacity: 0.26;

    clip-path:
        inset(
            0
            0
            0
            0
        );

    pointer-events: none;

    animation:
        runeIdle
        4.6s
        ease-in-out
        infinite;

    will-change:
        opacity,
        filter,
        clip-path;
}

.gateway-rune {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ==========================================================================
   15. FRONT FOG
   ========================================================================== */

.gateway-fog-front-stage {
    z-index: 25;

    overflow: hidden;

    pointer-events: none;
}

.gateway-fog-front {
    bottom: -12%;

    height: auto;

    opacity: 0.61;

    will-change:
        transform,
        opacity;
}

.gateway-fog-front--left {
    left: -20%;

    width:
        min(
            75vw,
            1120px
        );

    animation:
        fogFrontLeftIdle
        14s
        ease-in-out
        infinite
        alternate;
}

.gateway-fog-front--right {
    right: -19%;

    width:
        min(
            70vw,
            1040px
        );

    animation:
        fogFrontRightIdle
        16s
        ease-in-out
        infinite
        alternate;
}

.gateway-ground-mist {
    left: 50%;

    bottom: -2%;

    width: 114%;

    height: auto;

    opacity: 0.52;

    transform:
        translateX(-50%);

    animation:
        groundMistIdle
        10.5s
        ease-in-out
        infinite;

    will-change:
        transform,
        opacity;
}


/* ==========================================================================
   16. FOREGROUND VEGETATION
   ========================================================================== */

.gateway-foreground {
    z-index: 28;

    pointer-events: none;
}

.gateway-plant {
    bottom: -3%;

    height: auto;

    opacity: 0.90;

    transform-origin:
        center bottom;

    will-change:
        transform;
}

.gateway-plant--left {
    left: -1%;

    width:
        clamp(
            205px,
            26vw,
            450px
        );

    animation:
        plantLeftIdle
        8s
        ease-in-out
        infinite;
}

.gateway-plant--right {
    right: -1%;

    width:
        clamp(
            200px,
            25vw,
            425px
        );

    animation:
        plantRightIdle
        9s
        ease-in-out
        infinite;
}


/* ==========================================================================
   17. PARTICLE CANVAS
   ========================================================================== */

.gateway-particle-canvas {
    position: absolute;

    inset: 0;

    z-index: 33;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


/* ==========================================================================
   18. CINEMATIC SHADE
   ========================================================================== */

.gateway-cinematic-shade {
    position: absolute;

    inset: 0;

    z-index: 34;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle
            at
            50%
            50%,
            rgba(5, 25, 39, 0.01),
            rgba(3, 14, 24, 0.25) 58%,
            rgba(0, 5, 10, 0.60) 100%
        );

    will-change:
        opacity;
}


/* ==========================================================================
   19. CONTENT
   ========================================================================== */

.gateway-content {
    position: relative;

    z-index: 50;

    width:
        min(
            100%,
            520px
        );

    margin-inline: auto;

    transform-origin:
        center;

    will-change:
        transform,
        opacity;
}


/* ==========================================================================
   20. GUESTBOOK SHELL
   ========================================================================== */

.guestbook-shell {
    position: relative;

    width: 100%;

    padding:
        24px
        28px
        28px;

    overflow: hidden;

    border:
        1px
        solid
        var(--glass-border);

    border-radius:
        var(--radius-xl);

    background:
        var(--glass);

    box-shadow:
        var(--shadow),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.08
        );

    backdrop-filter:
        blur(17px)
        saturate(1.06);

    -webkit-backdrop-filter:
        blur(17px)
        saturate(1.06);
}

.guestbook-shell::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border-radius: inherit;

    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.05),
            transparent 28%,
            transparent 72%,
            rgba(81, 202, 219, 0.035)
        );
}

.guestbook-shell__glow {
    position: absolute;

    left: 50%;
    top: -155px;

    z-index: -1;

    width: 430px;
    height: 290px;

    border-radius: 50%;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(62, 204, 224, 0.13),
            transparent 68%
        );
}


/* ==========================================================================
   21. HEADER / LOGO
   ========================================================================== */

.guestbook-header {
    position: relative;

    z-index: 2;

    display: grid;

    justify-items: center;

    gap: 7px;

    margin-bottom: 19px;

    text-align: center;
}


/*
 * Logo tanpa badge / kotak / frame.
 */
.guestbook-logo-wrap {
    width: auto;
    height: auto;

    display: grid;

    place-items: center;

    margin:
        0
        auto
        1px;

    padding: 0;

    border: 0;

    background: transparent;

    box-shadow: none;

    overflow: visible;
}


/*
 * Final:
 * diperbesar agar branding lebih terbaca.
 */
.guestbook-logo {
    width: 78px;
    height: 78px;

    display: block;

    margin:
        0
        auto;

    object-fit: contain;

    object-position: center;
}

.guestbook-heading {
    min-width: 0;
}

.guestbook-heading__welcome {
    margin:
        0
        0
        3px;

    color:
        var(--cyan-300);

    font-size: 0.72rem;

    font-weight: 850;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}

.guestbook-heading__title {
    margin: 0;

    color: #ffffff;

    font-size:
        clamp(
            1.65rem,
            4vw,
            2.05rem
        );

    font-weight: 800;

    line-height: 1.08;

    letter-spacing: -0.035em;
}

.guestbook-heading__description {
    max-width: 410px;

    margin:
        7px
        auto
        0;

    color:
        var(--text-soft);

    font-size: 0.86rem;

    line-height: 1.52;
}


/* ==========================================================================
   22. FORM
   ========================================================================== */

.guestbook-form {
    position: relative;

    z-index: 2;

    display: grid;

    gap: 13px;
}

.form-field {
    min-width: 0;
}

.form-label {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    margin-bottom: 5px;

    color:
        rgba(
            248,
            252,
            255,
            0.93
        );

    font-size: 0.79rem;

    font-weight: 730;

    line-height: 1.4;
}

.form-label__required {
    color: #79deeb;
}

.form-label__optional {
    padding:
        2px
        7px;

    border:
        1px
        solid
        rgba(
            173,
            219,
            233,
            0.13
        );

    border-radius: 999px;

    color:
        var(--text-muted);

    font-size: 0.60rem;

    font-weight: 700;

    letter-spacing: 0.05em;

    text-transform: uppercase;
}

.form-control-wrap {
    position: relative;
}

.form-control {
    width: 100%;

    min-height: 46px;

    padding:
        10px
        14px;

    outline: none;

    border:
        1px
        solid
        rgba(
            173,
            215,
            231,
            0.15
        );

    border-radius:
        var(--radius-md);

    color: #f7fbff;

    background:
        rgba(
            4,
            18,
            29,
            0.50
        );

    font-size: 0.87rem;

    line-height: 1.4;

    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.form-control::placeholder {
    color:
        rgba(
            202,
            224,
            235,
            0.42
        );
}

.form-control:hover {
    border-color:
        rgba(
            136,
            222,
            235,
            0.28
        );
}

.form-control:focus {
    border-color:
        rgba(
            96,
            220,
            235,
            0.70
        );

    background:
        rgba(
            5,
            25,
            40,
            0.68
        );

    box-shadow:
        0
        0
        0
        3px
        rgba(
            55,
            184,
            213,
            0.11
        );
}

.form-control[aria-invalid="true"] {
    border-color:
        rgba(
            255,
            111,
            123,
            0.72
        );

    background:
        rgba(
            70,
            20,
            27,
            0.28
        );

    box-shadow:
        0
        0
        0
        3px
        rgba(
            191,
            48,
            63,
            0.16
        );
}

.form-control--select {
    appearance: none;

    -webkit-appearance: none;

    padding-right: 46px;

    cursor: pointer;
}

.form-control--select option {
    color: #132739;

    background: #ffffff;
}

.form-select-indicator {
    position: absolute;

    top: 50%;
    right: 15px;

    width: 20px;
    height: 20px;

    color:
        rgba(
            196,
            235,
            243,
            0.72
        );

    transform:
        translateY(-50%);

    pointer-events: none;
}

.form-select-indicator svg {
    width: 100%;
    height: 100%;
}

.form-message {
    margin:
        4px
        2px
        0;

    font-size: 0.70rem;

    line-height: 1.4;
}

.form-message:empty {
    display: none;
}

.form-message--error {
    color:
        var(--danger);
}


/* ==========================================================================
   23. PRIVACY
   ========================================================================== */

.guestbook-privacy {
    display: grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        );

    align-items: center;

    gap: 11px;

    padding:
        11px
        12px;

    border:
        1px
        solid
        rgba(
            125,
            210,
            224,
            0.11
        );

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(25, 123, 151, 0.08),
            rgba(18, 98, 83, 0.06)
        );
}

.guestbook-privacy__icon-wrap {
    width: 38px;
    height: 38px;

    display: grid;

    place-items: center;

    padding: 5px;

    border-radius: 12px;

    background:
        rgba(
            134,
            224,
            232,
            0.08
        );
}

.guestbook-privacy__icon {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.guestbook-privacy__title {
    margin:
        0
        0
        2px;

    color:
        rgba(
            247,
            252,
            255,
            0.95
        );

    font-size: 0.74rem;

    font-weight: 780;
}

.guestbook-privacy__text {
    margin: 0;

    color:
        var(--text-muted);

    font-size: 0.67rem;

    line-height: 1.45;
}


/* ==========================================================================
   24. ACTION
   ========================================================================== */

.guestbook-actions {
    display: grid;

    gap: 7px;

    margin-top: 1px;
}

.guestbook-submit {
    position: relative;

    isolation: isolate;

    width: 100%;

    min-height: 51px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding:
        12px
        20px;

    overflow: hidden;

    color: #ffffff;

    border:
        1px
        solid
        rgba(
            124,
            226,
            237,
            0.22
        );

    border-radius: 17px;

    background:
        linear-gradient(
            120deg,
            #0c527a 0%,
            #147a9b 48%,
            #16835b 100%
        );

    box-shadow:
        0
        16px
        34px
        rgba(
            0,
            44,
            70,
            0.30
        ),
        inset
        0
        1px
        0
        rgba(
            255,
            255,
            255,
            0.16
        );

    font-size: 0.90rem;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 170ms ease,
        box-shadow 170ms ease,
        filter 170ms ease;
}

.guestbook-submit:hover:not(:disabled) {
    transform:
        translateY(-2px);

    filter:
        brightness(1.06);

    box-shadow:
        0
        20px
        42px
        rgba(
            0,
            54,
            85,
            0.34
        );
}

.guestbook-submit:focus-visible {
    outline:
        3px
        solid
        rgba(
            136,
            232,
            243,
            0.30
        );

    outline-offset: 3px;
}

.guestbook-submit:disabled {
    cursor: wait;
}

.guestbook-submit__spinner {
    display: none;

    width: 17px;
    height: 17px;

    border:
        2px
        solid
        rgba(
            255,
            255,
            255,
            0.32
        );

    border-top-color: #ffffff;

    border-radius: 50%;

    animation:
        buttonSpin
        720ms
        linear
        infinite;
}

.guestbook-actions__note {
    margin: 0;

    color:
        var(--text-muted);

    font-size: 0.65rem;

    text-align: center;
}


/* ==========================================================================
   25. PROCESSING
   ========================================================================== */

.guestbook-processing {
    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns:
        auto
        minmax(
            0,
            1fr
        );

    align-items: start;

    gap: 11px;

    max-height: 0;

    margin: 0;

    padding:
        0
        14px;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(-4px);

    border:
        1px
        solid
        transparent;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(7, 34, 54, 0.94),
            rgba(8, 54, 72, 0.87)
        );

    box-shadow:
        0
        12px
        28px
        rgba(
            0,
            0,
            0,
            0.20
        );

    pointer-events: none;

    transition:
        max-height 200ms var(--ease),
        padding 180ms var(--ease),
        opacity 150ms ease,
        visibility 150ms ease,
        transform 180ms var(--ease),
        border-color 150ms ease;
}

.guestbook-processing::after {
    content: "";

    position: absolute;

    left: 14px;
    right: 14px;
    bottom: 8px;

    height: 4px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(56, 194, 222, 0.08),
            rgba(56, 194, 222, 0.82),
            rgba(116, 233, 207, 0.95),
            rgba(56, 194, 222, 0.82),
            rgba(56, 194, 222, 0.08)
        );

    background-size:
        200%
        100%;

    animation:
        processingBar
        1.25s
        linear
        infinite;
}

.guestbook-processing__pulse {
    position: relative;

    width: 11px;
    height: 11px;

    margin-top: 4px;

    border-radius: 50%;

    background: #72e1ed;

    box-shadow:
        0
        0
        0
        5px
        rgba(
            114,
            225,
            237,
            0.09
        ),
        0
        0
        17px
        rgba(
            114,
            225,
            237,
            0.30
        );
}

.guestbook-processing__pulse::after {
    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px
        solid
        rgba(
            114,
            225,
            237,
            0.42
        );

    border-radius: 50%;

    animation:
        processingPulse
        1.2s
        ease-out
        infinite;
}

.guestbook-processing__content {
    display: grid;

    gap: 2px;

    padding-bottom: 9px;
}

.guestbook-processing__title {
    color:
        rgba(
            250,
            253,
            255,
            0.96
        );

    font-size: 0.74rem;

    font-weight: 800;
}

.guestbook-processing__text {
    color:
        rgba(
            220,
            236,
            245,
            0.76
        );

    font-size: 0.67rem;

    line-height: 1.4;
}


/* ==========================================================================
   26. SUBMITTING STATE
   ========================================================================== */

.gateway:is(
    .is-submitting,
    [data-gateway-state="submitting"]
)
.guestbook-processing {
    max-height: 105px;

    padding:
        12px
        14px
        14px;

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0);

    border-color:
        rgba(
            123,
            225,
            236,
            0.16
        );
}

.gateway:is(
    .is-submitting,
    [data-gateway-state="submitting"]
)
.guestbook-submit {
    background:
        linear-gradient(
            120deg,
            rgba(17, 88, 135, 0.97),
            rgba(19, 129, 153, 0.97) 55%,
            rgba(24, 145, 122, 0.97)
        );
}

.gateway:is(
    .is-submitting,
    [data-gateway-state="submitting"]
)
.guestbook-submit__spinner {
    display: block;
}

.gateway:is(
    .is-submitting,
    [data-gateway-state="submitting"]
)
.guestbook-form {
    pointer-events: none;
}


/* ==========================================================================
   27. ERROR STATUS
   ========================================================================== */

.gateway-status {
    position: fixed;

    left: 50%;

    bottom:
        max(
            16px,
            env(
                safe-area-inset-bottom
            )
        );

    z-index: 180;

    width:
        min(
            calc(
                100vw
                -
                32px
            ),
            520px
        );

    padding:
        11px
        14px;

    transform:
        translateX(-50%);

    border:
        1px
        solid
        rgba(
            255,
            163,
            172,
            0.18
        );

    border-radius: 14px;

    color:
        rgba(
            255,
            235,
            238,
            0.96
        );

    background:
        rgba(
            47,
            12,
            20,
            0.93
        );

    box-shadow:
        0
        16px
        44px
        rgba(
            0,
            0,
            0,
            0.28
        );

    font-size: 0.75rem;

    line-height: 1.45;

    text-align: center;
}

.gateway-status:empty {
    display: none;
}

.gateway[data-gateway-state="submitting"]
.gateway-status,

.gateway[data-gateway-state="portal-opening"]
.gateway-status,

.gateway[data-gateway-state="whiteout"]
.gateway-status,

.gateway[data-gateway-state="reduced-transition"]
.gateway-status {
    display: none;
}


/* ==========================================================================
   28. TRANSITION
   ========================================================================== */

.gateway-transition {
    position: fixed;

    inset: 0;

    z-index: 500;

    overflow: hidden;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}

.gateway-transition__bloom {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 28vmin;

    aspect-ratio: 1;

    border-radius: 50%;

    opacity: 0;

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

    background:
        radial-gradient(
            circle,
            #ffffff 0%,
            rgba(248, 255, 255, 0.99) 18%,
            rgba(221, 251, 255, 0.94) 31%,
            rgba(167, 239, 247, 0.68) 48%,
            rgba(112, 210, 229, 0.20) 64%,
            transparent 78%
        );

    will-change:
        transform,
        opacity;
}

.gateway-transition__white {
    position: absolute;

    inset: 0;

    opacity: 0;

    background: #ffffff;

    will-change:
        opacity;
}


/* ==========================================================================
   29. IDLE KEYFRAMES
   ========================================================================== */

@keyframes portalAuraIdle {
    0%,
    100% {
        opacity: 0.54;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.99);
    }

    50% {
        opacity: 0.66;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.025);
    }
}


@keyframes portalCoreIdle {
    0%,
    100% {
        opacity: 0.66;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.985);
    }

    50% {
        opacity: 0.79;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.015);
    }
}


@keyframes portalHaloIdle {
    0%,
    100% {
        opacity: 0.30;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.84);
    }

    50% {
        opacity: 0.45;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.02);
    }
}


@keyframes pillarLightIdle {
    0%,
    100% {
        filter:
            brightness(0.97)
            saturate(0.97);
    }

    50% {
        filter:
            brightness(1.025)
            saturate(1.02);
    }
}


@keyframes runeIdle {
    0%,
    100% {
        opacity: 0.20;

        filter:
            brightness(0.80)
            drop-shadow(
                0
                0
                4px
                rgba(
                    65,
                    222,
                    235,
                    0.16
                )
            );
    }

    50% {
        opacity: 0.35;

        filter:
            brightness(1.08)
            drop-shadow(
                0
                0
                11px
                rgba(
                    65,
                    222,
                    235,
                    0.32
                )
            );
    }
}


/*
 * Fog belakang.
 * Pergerakan cukup jauh agar mata menangkap drift.
 */
@keyframes fogBackIdle {
    0% {
        opacity: 0.44;

        transform:
            translate3d(
                -32px,
                4px,
                0
            )
            scale(1.01);
    }

    50% {
        opacity: 0.56;

        transform:
            translate3d(
                7px,
                -9px,
                0
            )
            scale(1.035);
    }

    100% {
        opacity: 0.48;

        transform:
            translate3d(
                39px,
                2px,
                0
            )
            scale(1.02);
    }
}


/*
 * Kabut depan kiri bergerak ke kanan.
 */
@keyframes fogFrontLeftIdle {
    0% {
        opacity: 0.53;

        transform:
            translate3d(
                -52px,
                3px,
                0
            )
            scale(1.01);
    }

    50% {
        opacity: 0.66;

        transform:
            translate3d(
                5px,
                -10px,
                0
            )
            scale(1.045);
    }

    100% {
        opacity: 0.56;

        transform:
            translate3d(
                66px,
                5px,
                0
            )
            scale(1.02);
    }
}


/*
 * Kabut depan kanan bergerak berlawanan.
 */
@keyframes fogFrontRightIdle {
    0% {
        opacity: 0.57;

        transform:
            translate3d(
                58px,
                3px,
                0
            )
            scale(1.02);
    }

    50% {
        opacity: 0.66;

        transform:
            translate3d(
                2px,
                -9px,
                0
            )
            scale(1.045);
    }

    100% {
        opacity: 0.54;

        transform:
            translate3d(
                -68px,
                4px,
                0
            )
            scale(1.01);
    }
}


@keyframes groundMistIdle {
    0%,
    100% {
        opacity: 0.43;

        transform:
            translateX(-50%)
            translateY(6px)
            scaleX(1.01)
            scaleY(0.98);
    }

    50% {
        opacity: 0.58;

        transform:
            translateX(-50%)
            translateY(-10px)
            scaleX(1.075)
            scaleY(1.04);
    }
}


@keyframes plantLeftIdle {
    0%,
    100% {
        transform:
            rotate(-0.35deg);
    }

    50% {
        transform:
            rotate(0.55deg);
    }
}


@keyframes plantRightIdle {
    0%,
    100% {
        transform:
            rotate(0.35deg);
    }

    50% {
        transform:
            rotate(-0.50deg);
    }
}


@keyframes buttonSpin {
    to {
        transform:
            rotate(360deg);
    }
}


@keyframes processingPulse {
    from {
        opacity: 0.75;

        transform:
            scale(0.7);
    }

    to {
        opacity: 0;

        transform:
            scale(1.55);
    }
}


@keyframes processingBar {
    from {
        background-position:
            200%
            0;
    }

    to {
        background-position:
            -200%
            0;
    }
}


/* ==========================================================================
   30. CINEMATIC TRIGGERS
   ========================================================================== */

.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
) {
    pointer-events: none;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-content {
    animation:
        contentDeparture
        var(--cinematic-duration)
        var(--ease)
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-cinematic-shade {
    animation:
        cinematicShade
        var(--cinematic-duration)
        linear
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-camera {
    animation:
        cameraJourney
        var(--cinematic-duration)
        var(--ease-cinematic)
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-portal {
    animation:
        portalJourney
        var(--cinematic-duration)
        var(--ease-cinematic)
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-portal-aura {
    animation:
        auraCinematic
        var(--cinematic-duration)
        var(--ease-cinematic)
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-portal-core {
    animation:
        coreCinematic
        var(--cinematic-duration)
        var(--ease-cinematic)
        both;
}


/*
 * Tidak mengubah transform ring.
 * Rotation JS tetap kontinu.
 */
.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-portal-ring {
    animation:
        ringEnergyCinematic
        var(--cinematic-duration)
        linear
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-portal-energy-halo {
    animation:
        haloCinematic
        var(--cinematic-duration)
        var(--ease-cinematic)
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-pressure-wave {
    animation:
        pressureWave
        var(--cinematic-duration)
        var(--ease)
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-rune-mask--left {
    animation:
        runeRevealLeft
        var(--cinematic-duration)
        var(--ease)
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-rune-mask--right {
    animation:
        runeRevealRight
        var(--cinematic-duration)
        var(--ease)
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-fog-back {
    animation:
        fogBackCinematic
        var(--cinematic-duration)
        var(--ease-cinematic)
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-fog-front--left {
    animation:
        fogLeftCinematic
        var(--cinematic-duration)
        var(--ease-cinematic)
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-fog-front--right {
    animation:
        fogRightCinematic
        var(--cinematic-duration)
        var(--ease-cinematic)
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-ground-mist {
    animation:
        groundMistCinematic
        var(--cinematic-duration)
        var(--ease-cinematic)
        both;
}


/*
 * Pilar tetap pada koordinat yang sama.
 * Cinematic hanya mengubah pencahayaan.
 */
.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-pillar {
    animation:
        pillarCinematic
        var(--cinematic-duration)
        var(--ease-cinematic)
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-transition {
    visibility: visible;

    animation:
        transitionClock
        var(--cinematic-duration)
        linear
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-transition__bloom {
    animation:
        bloomCinematic
        var(--cinematic-duration)
        var(--ease-cinematic)
        both;
}


.gateway:is(
    .is-portal-opening,
    [data-gateway-state="portal-opening"]
)
.gateway-transition__white {
    animation:
        whiteCinematic
        var(--cinematic-duration)
        linear
        both;
}


/* ==========================================================================
   31. CINEMATIC KEYFRAMES
   ========================================================================== */

@keyframes contentDeparture {
    0% {
        opacity: 1;

        transform:
            scale(1);
    }

    8% {
        opacity: 0.93;
    }

    17%,
    100% {
        opacity: 0;

        transform:
            scale(0.965);
    }
}


@keyframes cinematicShade {
    0% {
        opacity: 0;
    }

    15% {
        opacity: 0.30;
    }

    50% {
        opacity: 0.35;
    }

    72% {
        opacity: 0.24;
    }

    87% {
        opacity: 0.05;
    }

    100% {
        opacity: 0;
    }
}


@keyframes cameraJourney {
    0%,
    39% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    51% {
        transform:
            translate3d(
                0,
                0.3%,
                0
            )
            scale(1.038);
    }

    63% {
        transform:
            translate3d(
                0,
                0.7%,
                0
            )
            scale(1.095);
    }

    75% {
        transform:
            translate3d(
                0,
                1.3%,
                0
            )
            scale(1.19);
    }

    87% {
        transform:
            translate3d(
                0,
                2%,
                0
            )
            scale(1.35);
    }

    100% {
        transform:
            translate3d(
                0,
                3%,
                0
            )
            scale(1.63);
    }
}


@keyframes portalJourney {
    0%,
    29% {
        transform:
            translate(
                -50%,
                -50%
            )
            scale(1);
    }

    51% {
        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.038);
    }

    70% {
        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.085);
    }

    86% {
        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.165);
    }

    100% {
        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.26);
    }
}


@keyframes auraCinematic {
    0% {
        opacity: 0.58;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1);
    }

    25% {
        opacity: 0.70;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.04);
    }

    52% {
        opacity: 0.92;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.14);
    }

    74% {
        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.30);
    }

    100% {
        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.58);
    }
}


@keyframes coreCinematic {
    0% {
        opacity: 0.70;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1);
    }

    31% {
        opacity: 0.84;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.03);
    }

    57% {
        opacity: 0.96;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.10);
    }

    77% {
        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.30);
    }

    100% {
        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.80);
    }
}


@keyframes ringEnergyCinematic {
    0% {
        opacity: 0.94;

        filter:
            brightness(1)
            saturate(1);
    }

    48% {
        opacity: 1;

        filter:
            brightness(1.10)
            saturate(1.08);
    }

    77% {
        filter:
            brightness(1.22)
            saturate(1.10);
    }

    100% {
        opacity: 0.98;

        filter:
            brightness(1.36)
            saturate(1.04);
    }
}


@keyframes haloCinematic {
    0% {
        opacity: 0.36;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.88);
    }

    36% {
        opacity: 0.60;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.10);
    }

    61% {
        opacity: 0.84;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.42);
    }

    83% {
        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(2);
    }

    100% {
        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(2.60);
    }
}


@keyframes runeRevealLeft {
    0%,
    4% {
        clip-path:
            inset(
                100%
                0
                0
                0
            );

        opacity: 0;
    }

    12% {
        clip-path:
            inset(
                76%
                0
                0
                0
            );

        opacity: 0.52;
    }

    21% {
        clip-path:
            inset(
                42%
                0
                0
                0
            );

        opacity: 0.78;
    }

    31% {
        clip-path:
            inset(
                0
                0
                0
                0
            );

        opacity: 1;

        filter:
            brightness(1.32)
            drop-shadow(
                0
                0
                15px
                rgba(
                    78,
                    235,
                    245,
                    0.50
                )
            );
    }

    100% {
        clip-path:
            inset(0);

        opacity: 0.66;
    }
}


@keyframes runeRevealRight {
    0%,
    5% {
        clip-path:
            inset(
                100%
                0
                0
                0
            );

        opacity: 0;
    }

    13% {
        clip-path:
            inset(
                76%
                0
                0
                0
            );

        opacity: 0.52;
    }

    22% {
        clip-path:
            inset(
                42%
                0
                0
                0
            );

        opacity: 0.78;
    }

    32% {
        clip-path:
            inset(
                0
                0
                0
                0
            );

        opacity: 1;

        filter:
            brightness(1.32)
            drop-shadow(
                0
                0
                15px
                rgba(
                    78,
                    235,
                    245,
                    0.50
                )
            );
    }

    100% {
        clip-path:
            inset(0);

        opacity: 0.66;
    }
}


@keyframes pressureWave {
    0%,
    32% {
        opacity: 0;

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

        border-color:
            rgba(
                148,
                239,
                250,
                0
            );
    }

    37% {
        opacity: 0.42;

        border-color:
            rgba(
                148,
                239,
                250,
                0.36
            );
    }

    44% {
        opacity: 0.58;

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

        border-color:
            rgba(
                148,
                239,
                250,
                0.42
            );
    }

    54%,
    100% {
        opacity: 0;

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

        border-color:
            rgba(
                148,
                239,
                250,
                0
            );
    }
}


@keyframes fogBackCinematic {
    0%,
    29% {
        opacity: 0.52;

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1.02);
    }

    51% {
        opacity: 0.34;

        transform:
            translate3d(
                0,
                -15px,
                0
            )
            scale(1.07);
    }

    71% {
        opacity: 0.16;

        transform:
            translate3d(
                0,
                -32px,
                0
            )
            scale(1.13);
    }

    100% {
        opacity: 0.02;

        transform:
            translate3d(
                0,
                -58px,
                0
            )
            scale(1.20);
    }
}


@keyframes fogLeftCinematic {
    0%,
    29% {
        opacity: 0.61;

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    53% {
        opacity: 0.37;

        transform:
            translate3d(
                -9%,
                1%,
                0
            )
            scale(1.07);
    }

    75% {
        opacity: 0.14;

        transform:
            translate3d(
                -22%,
                3%,
                0
            )
            scale(1.15);
    }

    100% {
        opacity: 0;

        transform:
            translate3d(
                -36%,
                7%,
                0
            )
            scale(1.30);
    }
}


@keyframes fogRightCinematic {
    0%,
    29% {
        opacity: 0.61;

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    53% {
        opacity: 0.37;

        transform:
            translate3d(
                9%,
                1%,
                0
            )
            scale(1.07);
    }

    75% {
        opacity: 0.14;

        transform:
            translate3d(
                22%,
                3%,
                0
            )
            scale(1.15);
    }

    100% {
        opacity: 0;

        transform:
            translate3d(
                36%,
                7%,
                0
            )
            scale(1.30);
    }
}


@keyframes groundMistCinematic {
    0%,
    29% {
        opacity: 0.52;

        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }

    56% {
        opacity: 0.25;

        transform:
            translateX(-50%)
            translateY(20px)
            scale(1.11);
    }

    79% {
        opacity: 0.07;

        transform:
            translateX(-50%)
            translateY(36px)
            scale(1.19);
    }

    100% {
        opacity: 0;

        transform:
            translateX(-50%)
            translateY(54px)
            scale(1.26);
    }
}


@keyframes pillarCinematic {
    0% {
        filter:
            brightness(1)
            saturate(1);
    }

    35% {
        filter:
            brightness(1.07)
            saturate(1.05);
    }

    66% {
        filter:
            brightness(1.14)
            saturate(1.09);
    }

    100% {
        filter:
            brightness(1.23)
            saturate(1.04);
    }
}


@keyframes transitionClock {
    0%,
    71% {
        opacity: 0;
    }

    82% {
        opacity: 0.18;
    }

    92% {
        opacity: 0.80;
    }

    98%,
    100% {
        opacity: 1;
    }
}


@keyframes bloomCinematic {
    0%,
    71% {
        opacity: 0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.10);
    }

    76% {
        opacity: 0.22;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.36);
    }

    82% {
        opacity: 0.62;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.45);
    }

    88% {
        opacity: 0.90;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(3.7);
    }

    94% {
        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(6.5);
    }

    100% {
        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(10);
    }
}


@keyframes whiteCinematic {
    0%,
    80% {
        opacity: 0;
    }

    85% {
        opacity: 0.11;
    }

    90% {
        opacity: 0.42;
    }

    94% {
        opacity: 0.70;
    }

    97% {
        opacity: 0.94;
    }

    99%,
    100% {
        opacity: 1;
    }
}


/* ==========================================================================
   32. REDUCED MOTION
   ========================================================================== */

.gateway:is(
    .is-reduced-transition,
    [data-gateway-state="reduced-transition"]
)
.gateway-transition {
    visibility: visible;

    animation:
        reducedTransition
        var(--reduced-duration)
        ease
        both;
}

.gateway:is(
    .is-reduced-transition,
    [data-gateway-state="reduced-transition"]
)
.gateway-transition__bloom {
    animation:
        reducedBloom
        var(--reduced-duration)
        ease
        both;
}

.gateway:is(
    .is-reduced-transition,
    [data-gateway-state="reduced-transition"]
)
.gateway-transition__white {
    animation:
        reducedWhite
        var(--reduced-duration)
        ease
        both;
}

.gateway:is(
    .is-reduced-transition,
    [data-gateway-state="reduced-transition"]
)
.gateway-content {
    animation:
        reducedContent
        470ms
        ease
        both;
}


@keyframes reducedTransition {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes reducedBloom {
    from {
        opacity: 0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.15);
    }

    to {
        opacity: 0.92;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(5);
    }
}


@keyframes reducedWhite {
    0%,
    35% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


@keyframes reducedContent {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


/* ==========================================================================
   33. RESPONSIVE <= 1100
   ========================================================================== */

@media (max-width: 1100px) {

    :root {
        --gate-width:
            96vw;

        --portal-size:
            clamp(
                660px,
                78vw,
                790px
            );

        --pillar-width:
            clamp(
                200px,
                22vw,
                240px
            );
    }

    .gateway-content {
        width:
            min(
                100%,
                510px
            );
    }
}


/* ==========================================================================
   34. TABLET
   ========================================================================== */

@media (max-width: 820px) {

    :root {
        --portal-size:
            clamp(
                620px,
                104vw,
                750px
            );

        --pillar-width:
            clamp(
                185px,
                30vw,
                228px
            );
    }

    .gateway {
        min-height:
            max(
                100svh,
                920px
            );

        padding:
            26px
            14px;
    }

    .gateway-pillar {
        bottom: 6%;
    }

    .gateway-pillar--left {
        left:
            calc(
                50%
                -
                (
                    var(--portal-size)
                    /
                    2
                )
                -
                (
                    var(--pillar-width)
                    *
                    0.22
                )
            );
    }

    .gateway-pillar--right {
        right:
            calc(
                50%
                -
                (
                    var(--portal-size)
                    /
                    2
                )
                -
                (
                    var(--pillar-width)
                    *
                    0.22
                )
            );
    }

    .gateway-content {
        width:
            min(
                100%,
                500px
            );
    }
}


/* ==========================================================================
   35. MOBILE
   ========================================================================== */

@media (max-width: 600px) {

    :root {
        --portal-size:
            142vw;

        --pillar-width:
            41vw;
    }

    .gateway {
        min-height:
            max(
                100svh,
                950px
            );

        padding:
            20px
            11px
            34px;
    }

    .gateway-pillar {
        bottom: 7%;
    }

    .gateway-pillar--left {
        left:
            calc(
                50%
                -
                (
                    var(--portal-size)
                    /
                    2
                )
                -
                (
                    var(--pillar-width)
                    *
                    0.02
                )
            );
    }

    .gateway-pillar--right {
        right:
            calc(
                50%
                -
                (
                    var(--portal-size)
                    /
                    2
                )
                -
                (
                    var(--pillar-width)
                    *
                    0.02
                )
            );
    }

    .gateway-content {
        width: 100%;
    }

    .guestbook-shell {
        padding:
            20px
            17px
            23px;

        border-radius: 26px;
    }

    .guestbook-logo {
        width: 68px;
        height: 68px;
    }

    .guestbook-heading__title {
        font-size: 1.60rem;
    }

    .guestbook-heading__description {
        font-size: 0.83rem;
    }

    /*
     * Mencegah auto-zoom iOS.
     */
    .form-control {
        min-height: 48px;

        font-size: 16px;
    }

    .gateway-fog-front--left {
        left: -48%;

        width: 126vw;
    }

    .gateway-fog-front--right {
        right: -46%;

        width: 116vw;
    }

    .gateway-plant--left,
    .gateway-plant--right {
        width: 37vw;

        opacity: 0.76;
    }
}


/* ==========================================================================
   36. SMALL MOBILE
   ========================================================================== */

@media (max-width: 390px) {

    .guestbook-shell {
        padding:
            19px
            14px
            22px;

        border-radius: 23px;
    }

    .guestbook-heading__title {
        font-size: 1.50rem;
    }

    .guestbook-logo {
        width: 62px;
        height: 62px;
    }
}


/* ==========================================================================
   37. TOUCH
   ========================================================================== */

@media (hover: none) {

    .guestbook-submit:hover:not(:disabled) {
        transform: none;

        filter: none;
    }
}


/* ==========================================================================
   38. REDUCED MOTION SYSTEM
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .gateway-portal-aura,
    .gateway-portal-core,
    .gateway-portal-energy-halo,
    .gateway-fog-back,
    .gateway-fog-front,
    .gateway-ground-mist,
    .gateway-pillar,
    .gateway-rune-mask,
    .gateway-plant {
        animation: none;
    }

    .gateway-particle-canvas {
        display: none;
    }

    .gateway-world {
        transform: none;

        transition: none;
    }
}


/* ==========================================================================
   39. BACKDROP FALLBACK
   ========================================================================== */

@supports not (
    backdrop-filter:
        blur(1px)
) {

    .guestbook-shell {
        background:
            rgba(
                6,
                26,
                42,
                0.96
            );
    }
}