/* =========================================
        Objektiv Mk1 – Trial (All Weights)
        ========================================= */
        body {
            margin: 0;
        }

        @font-face {
            font-family: 'Objektiv Mk1';
            src: url('../assets/fonts/ObjektivMk1_Trial_Th.ttf') format('truetype');
            font-weight: 100;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Objektiv Mk1';
            src: url('../assets/fonts/ObjektivMk1_Trial_Hair.ttf') format('truetype');
            font-weight: 200;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Objektiv Mk1';
            src: url('../assets/fonts/ObjektivMk1_Trial_Lt.ttf') format('truetype');
            font-weight: 300;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Objektiv Mk1';
            src: url('../assets/fonts/ObjektivMk1_Trial_Rg.ttf') format('truetype');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Objektiv Mk1';
            src: url('../assets/fonts/ObjektivMk1_Trial_Md.ttf') format('truetype');
            font-weight: 500;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Objektiv Mk1';
            src: url('../assets/fonts/ObjektivMk1_Trial_SBd.ttf') format('truetype');
            font-weight: 600;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Objektiv Mk1';
            src: url('../assets/fonts/ObjektivMk1_Trial_Bd.ttf') format('truetype');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Objektiv Mk1';
            src: url('../assets/fonts/ObjektivMk1_Trial_XBd.ttf') format('truetype');
            font-weight: 800;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Objektiv Mk1';
            src: url('../assets/fonts/ObjektivMk1_Trial_Blk.ttf') format('truetype');
            font-weight: 900;
            font-style: normal;
            font-display: swap;
        }

        /* Italics (optional but included) */

        @font-face {
            font-family: 'Objektiv Mk1';
            src: url('../assets/fonts/ObjektivMk1_Trial_It.ttf') format('truetype');
            font-weight: 400;
            font-style: italic;
            font-display: swap;
        }

        @font-face {
            font-family: 'Objektiv Mk1';
            src: url('../assets/fonts/ObjektivMk1_Trial_BdIt.ttf') format('truetype');
            font-weight: 700;
            font-style: italic;
            font-display: swap;
        }

        @font-face {
            font-family: 'Objektiv Mk1';
            src: url('../assets/fonts/ObjektivMk1_Trial_BlkIt.ttf') format('truetype');
            font-weight: 900;
            font-style: italic;
            font-display: swap;
        }

body {
    font-family: 'Objektiv Mk1', system-ui, sans-serif;
    background-color: #ffffff;
    color: #003666;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

        /* UI Elements Styling */
        .plank-slick {
            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0.05) 100%);
            position: relative;
        }

        .plank-slick::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: rgba(255, 255, 255, 0.4);
            pointer-events: none;
        }

        .plank-active {
            transform: translateY(6px);
            box-shadow: 0 4px 0px rgba(0, 0, 0, 0.12) !important;
        }

        .glossy-effect {
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.3), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
        }

        /* Animations */
        .animate-float-slow {
            animation: float 12s ease-in-out infinite;
        }

        .animate-float-fast {
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            50% {
                transform: translateY(-30px) rotate(3deg);
            }
        }

        .scrolled-nav {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        .pedagogy-tab.active {
            background-color: white;
            border-color: #ff7f00;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
            transform: scale(1.05) translateX(-15px);
            opacity: 1;
            filter: grayscale(0);
        }

        html {
            scroll-behavior: smooth;
        }

        /* Liquid Ribbon Styling */
        .ribbon-wrapper {
            position: absolute;
            left: 0;
            width: 100%;
            z-index: 30;
            pointer-events: none;
        }

        .ribbon-bottom {
            bottom: -1px;
        }

        .ribbon-top {
            top: -1px;
            transform: scaleY(-1);
        }

        .ribbon-container {
            height: 120px;
            width: 100%;
            display: block;
        }

        @media (min-width: 768px) {
            .ribbon-container {
                height: 220px;
            }
        }

        .liquid-layer-1 {
            opacity: 0.15;
        }

        .liquid-layer-2 {
            opacity: 0.35;
        }

        section {
            position: relative;
        }

        @media (prefers-reduced-motion: reduce) {
            svg animate {
                display: none;
            }
        }

        /* 1. Define the morphing keyframes */
        @keyframes morph {
            0% {
                border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            }

            34% {
                border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
            }

            67% {
                border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
            }

            100% {
                border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
            }
        }

.blob {
    width: 500px;
    height: 500px;
    background: #ffa852;
    /* Your brand orange */
            overflow: hidden;
            border: 8px solid white;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);

            /* 2. Apply the animation */
            animation: morph 8s ease-in-out infinite;
        }

        .blob img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

.blob-fluid {
    width: 100%;
    height: 100%;
    max-width: 520px;
    max-height: 520px;
}

        @keyframes mascotFlyAcross {

            0% {
                transform: translate(0, 0) rotate(-8deg);
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            50% {
                transform: translate(40vw, -30vh) rotate(6deg);
            }

            100% {
                transform: translate(75vw, -65vh) rotate(-4deg);
                opacity: 0;
            }
        }

        .animate-mascot-fly {
            animation: mascotFlyAcross 10s linear infinite;
        }

        @keyframes fakeCurve {
            0% {
                transform: translate(0, 0) rotate(-2deg);
            }

            25% {
                transform: translate(12px, -10px) rotate(0deg);
            }

            50% {
                transform: translate(24px, 0px) rotate(2deg);
            }

            75% {
                transform: translate(12px, 10px) rotate(0deg);
            }

            100% {
                transform: translate(0, 0) rotate(-2deg);
            }
        }

        .animate-fake-curve {
            animation: fakeCurve 6s ease-in-out infinite;
        }

        @keyframes mascotRotate {
            0% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(-10deg);
            }

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

            75% {
                transform: rotate(10deg);
            }

            100% {
                transform: rotate(0deg);
            }
        }

        .animate-mascot-rotate {
            animation: mascotRotate 5s ease-in-out infinite;
            transform-origin: bottom center;
        }


        @keyframes floatY {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        .animate-float-y {
            animation: floatY 4s ease-in-out infinite;
        }

        @keyframes floatX {

            0%,
            100% {
                transform: translateX(0);
            }

            50% {
                transform: translateX(-8px);
            }
        }

        .animate-float-x {
            animation: floatX 4s ease-in-out infinite;
        }

        @keyframes floatDiag {

            0%,
            100% {
                transform: translate(0, 0);
            }

            50% {
                transform: translate(6px, -6px);
            }
        }

        .animate-float-diag {
            animation: floatDiag 5s ease-in-out infinite;
        }

.hero-scene {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hero-mask {
    position: relative;
}

.hero-blob {
    position: absolute;
    inset: 0;
    background: #b1e6ff;
    border: 8px solid white;
    animation: morph 8s ease-in-out infinite;
}

.hero-mascot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center center;
    z-index: 2;

    animation:
      smoothPortal 4.5s cubic-bezier(.16,1,.3,1) forwards,
      idleFloat 4s ease-in-out 4.5s infinite;

    will-change: transform;
}

@keyframes smoothPortal {

    0% {
        transform: translate(-90%, -20%) scale(0.4);
    }

    30% {
        transform: translate(-65%, -40%) scale(0.7);
    }

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

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

@keyframes idleFloat {
  0%,100% {
    transform: translate(-50%, -55%) scale(1.6);
  }
  50% {
    transform: translate(-50%, -65%) scale(1.63);
  }
}