/*==================================================
DIGDARSHAK STUDIOS
Apple Inspired Design System
Version 1.0
==================================================*/

/*==============================
GOOGLE FONT IMPORT
==============================*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@500;600;700&display=swap');

/*==============================
ROOT VARIABLES
==============================*/

:root{

    /* COLORS */

    --background:#050505;
    --surface:#111111;
    --surface-2:#181818;
    --surface-3:#222222;

    --glass:rgba(255,255,255,.05);
    --glass-2:rgba(255,255,255,.08);

    --border:rgba(255,255,255,.08);

    --white:#ffffff;
    --light:#f5f5f5;
    --grey:#b3b3b3;
    --grey-light:#d4d4d4;

    --accent:#D9D9D9;

    --success:#22c55e;
    --danger:#ef4444;
    --warning:#f59e0b;

    /* TYPOGRAPHY */

    --font-primary:"Inter",sans-serif;
    --font-display:"Playfair Display",serif;

    /* FONT SIZE */

    --display-xl:96px;
    --display-lg:72px;
    --display-md:56px;

    --heading-xl:48px;
    --heading-lg:40px;
    --heading-md:32px;

    --body-lg:20px;
    --body:18px;
    --body-sm:16px;

    --caption:14px;

    /* SPACING */

    --space-xs:8px;
    --space-sm:16px;
    --space-md:24px;
    --space-lg:32px;
    --space-xl:48px;
    --space-2xl:64px;
    --space-3xl:96px;
    --space-4xl:120px;
    --space-5xl:160px;

    /* RADIUS */

    --radius-sm:8px;
    --radius:14px;
    --radius-lg:22px;
    --radius-xl:36px;
    --radius-full:999px;

    /* SHADOWS */

    --shadow-sm:0 8px 24px rgba(0,0,0,.25);

    --shadow-md:0 15px 45px rgba(0,0,0,.35);

    --shadow-lg:0 25px 80px rgba(0,0,0,.45);

    --glass-shadow:
        0 12px 60px rgba(0,0,0,.35);

    /* TRANSITIONS */

    --transition-fast:.25s ease;

    --transition:.45s cubic-bezier(.22,.61,.36,1);

    --transition-slow:.8s cubic-bezier(.22,.61,.36,1);

}

/*==============================
RESET
==============================*/

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

*::before,
*::after{

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

    font-size:16px;

}

body{

    background:var(--background);

    color:var(--white);

    font-family:var(--font-primary);

    overflow-x:hidden;

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}

img{

    width:100%;

    display:block;

    object-fit:cover;

}

picture{

    display:block;

}

video{

    width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}

input,
textarea{

    border:none;

    outline:none;

    font-family:inherit;

}

ul{

    list-style:none;

}

section{

    position:relative;

    width:100%;

}

main{

    overflow:hidden;

}
/*==================================================
PART 1B
FOUNDATION
==================================================*/

/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--background);

}

::-webkit-scrollbar-thumb{

    background:rgba(255,255,255,.12);

    border-radius:999px;

    transition:var(--transition);

}

::-webkit-scrollbar-thumb:hover{

    background:rgba(255,255,255,.28);

}

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

::selection{

    background:var(--white);

    color:var(--background);

}

::-moz-selection{

    background:var(--white);

    color:var(--background);

}

/*==============================
GLOBAL BODY
==============================*/

body{

    min-height:100vh;

    line-height:1.65;

    letter-spacing:-.02em;

    background:
        radial-gradient(circle at top,#141414 0%,#090909 35%,#050505 100%);

}

/*==============================
CONTAINER
==============================*/

.container{

    width:min(92%,1400px);

    margin-inline:auto;

}

.container-lg{

    width:min(96%,1600px);

    margin-inline:auto;

}

.container-sm{

    width:min(90%,1100px);

    margin-inline:auto;

}

/*==============================
SECTION SPACING
==============================*/

section{

    padding:140px 0;

}

.section-sm{

    padding:90px 0;

}

.section-lg{

    padding:200px 0;

}

/*==============================
TYPOGRAPHY
==============================*/

h1{

    font-size:var(--display-xl);

    font-weight:800;

    line-height:.92;

    letter-spacing:-5px;

}

h2{

    font-size:var(--heading-xl);

    font-weight:700;

    line-height:1.05;

    letter-spacing:-2px;

}

h3{

    font-size:32px;

    font-weight:600;

    line-height:1.15;

}

h4{

    font-size:22px;

    font-weight:600;

}

p{

    font-size:var(--body);

    color:var(--grey);

    max-width:760px;

}

small{

    font-size:var(--caption);

}

/*==============================
LABELS
==============================*/

.section-label{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    font-size:13px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

    color:var(--grey-light);

}

.section-label::before{

    content:"";

    width:40px;

    height:1px;

    background:rgba(255,255,255,.35);

}

/*==============================
BUTTON SYSTEM
==============================*/

.btn-primary,
.btn-secondary,
.login-btn,
.verify-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:170px;

    height:56px;

    padding:0 32px;

    border-radius:999px;

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--white);

    color:#000;

}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 40px rgba(255,255,255,.18);

}

.btn-secondary{

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

    color:var(--white);

    backdrop-filter:blur(14px);

    background:rgba(255,255,255,.03);

}

.btn-secondary:hover{

    background:rgba(255,255,255,.08);

}

/*==============================
GLASS
==============================*/

.glass{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(22px);

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

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

    box-shadow:var(--glass-shadow);

}

/*==============================
CARDS
==============================*/

.card{

    background:var(--surface);

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

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

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    border-color:rgba(255,255,255,.12);

}

/*==============================
GRID
==============================*/

.grid{

    display:grid;

    gap:32px;

}

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

}

/*==============================
UTILITY
==============================*/

.text-center{

    text-align:center;

}

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hidden{

    display:none;

}

.relative{

    position:relative;

}

.absolute{

    position:absolute;

}

.w-100{

    width:100%;

}

.mt-xl{

    margin-top:120px;

}

.mb-xl{

    margin-bottom:120px;

}
/*==================================================
PART 2A
PRELOADER
PAGE TRANSITIONS
GLASS FOUNDATION
==================================================*/

/*==============================
PRELOADER
==============================*/

#loader{

    position:fixed;

    inset:0;

    z-index:99999;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:24px;

    background:#050505;

    transition:opacity .8s ease,
               visibility .8s ease;

}

#loader.hidden{

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

.loader-logo{

    width:90px;

}

.loader-logo img{

    width:100%;

    height:auto;

    object-fit:contain;

}

#loader h2{

    font-size:18px;

    font-weight:700;

    letter-spacing:10px;

    color:var(--white);

    text-transform:uppercase;

}

#loader p{

    font-size:14px;

    color:var(--grey);

    letter-spacing:3px;

    text-transform:uppercase;

}

.loader-line{

    width:180px;

    height:2px;

    border-radius:999px;

    overflow:hidden;

    background:rgba(255,255,255,.08);

    position:relative;

}

.loader-line::after{

    content:"";

    position:absolute;

    left:-50%;

    width:50%;

    height:100%;

    background:white;

    animation:loaderMove 1.4s infinite ease;

}

/*==============================
PAGE FADE
==============================*/

body{

    opacity:0;

    animation:pageFade .9s ease forwards;

}

body.loaded{

    opacity:1;

}

html{

    scroll-padding-top:120px;

}

/*==============================
GLASS EFFECTS
==============================*/

.glass-light{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

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

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

}

.glass-dark{

    background:rgba(17,17,17,.75);

    backdrop-filter:blur(26px);

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

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

}

.glass-hover{

    transition:var(--transition);

}

.glass-hover:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.08);

    border-color:rgba(255,255,255,.15);

}

/*==============================
IMAGE UTILITIES
==============================*/

.image-cover{

    overflow:hidden;

    border-radius:22px;

}

.image-cover img{

    transition:transform .8s ease;

}

.image-cover:hover img{

    transform:scale(1.06);

}

/*==============================
SECTION REVEAL
==============================*/

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:all .9s cubic-bezier(.22,.61,.36,1);

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*==============================
FADE CLASSES
==============================*/

.fade-up{

    animation:fadeUp 1s ease forwards;

}

.fade-down{

    animation:fadeDown .9s ease forwards;

}

.fade-left{

    animation:fadeLeft .9s ease forwards;

}

.fade-right{

    animation:fadeRight .9s ease forwards;

}

.fade{

    animation:fade .8s ease forwards;

}

/*==============================
KEYFRAMES
==============================*/

@keyframes loaderMove{

    from{

        left:-50%;

    }

    to{

        left:100%;

    }

}

@keyframes pageFade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fade{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(60px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}
/*==================================================
PART 2B
HEADER
NAVIGATION
MOBILE MENU
==================================================*/

/*==============================
HEADER
==============================*/

.header{

    position:fixed;

    top:24px;

    left:0;

    width:100%;

    z-index:9000;

    transition:var(--transition);

    pointer-events:none;

}

.header .container{

    display:flex;

    justify-content:center;

}

/*==============================
NAVBAR
==============================*/

.navbar{

    width:min(1380px,95%);

    height:78px;

    padding:0 34px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    pointer-events:auto;

    border-radius:999px;

    background:rgba(14,14,14,.68);

    backdrop-filter:blur(26px);

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

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

    box-shadow:

        0 15px 60px rgba(0,0,0,.45);

    transition:var(--transition);

}

/*==============================
SCROLL STATE
==============================*/

.header.scrolled{

    top:14px;

}

.header.scrolled .navbar{

    height:68px;

    background:rgba(8,8,8,.85);

    border-color:rgba(255,255,255,.12);

    box-shadow:

        0 25px 70px rgba(0,0,0,.55);

}

/*==============================
LOGO
==============================*/

.logo{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}

.logo img{

    height:42px;

    width:auto;

    object-fit:contain;

}

.logo span{

    font-size:13px;

    font-weight:700;

    letter-spacing:4px;

    text-transform:uppercase;

}

/*==============================
NAV LINKS
==============================*/

.nav-links{

    display:flex;

    align-items:center;

    gap:38px;

}

.nav-links li{

    position:relative;

}

.nav-links a{

    position:relative;

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

    font-size:15px;

    font-weight:500;

    transition:var(--transition-fast);

}

.nav-links a:hover{

    color:white;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    border-radius:999px;

    background:white;

    transition:var(--transition);

}

.nav-links a:hover::after{

    width:100%;

}

/*==============================
RIGHT ACTIONS
==============================*/

.nav-actions{

    display:flex;

    align-items:center;

    gap:14px;

}

.verify-btn{

    min-width:110px;

    background:transparent;

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

    color:white;

}

.verify-btn:hover{

    background:rgba(255,255,255,.06);

}

.login-btn{

    background:white;

    color:black;

}

.login-btn:hover{

    transform:translateY(-2px);

}

/*==============================
MENU BUTTON
==============================*/

.menu-toggle{

    width:54px;

    height:54px;

    border-radius:50%;

    display:none;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:6px;

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

    background:rgba(255,255,255,.04);

}

.menu-toggle span{

    width:22px;

    height:2px;

    background:white;

    transition:.35s;

}

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

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:360px;

    max-width:100%;

    height:100vh;

    background:#0b0b0b;

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

    backdrop-filter:blur(26px);

    z-index:9500;

    transition:.6s cubic-bezier(.22,.61,.36,1);

    display:flex;

    justify-content:center;

    align-items:center;

}

.mobile-menu.active{

    right:0;

}

.mobile-menu ul{

    width:100%;

    padding:40px;

}

.mobile-menu li{

    margin:22px 0;

}

.mobile-menu a{

    display:block;

    font-size:22px;

    font-weight:500;

    color:white;

    transition:var(--transition);

}

.mobile-menu a:hover{

    padding-left:14px;

}

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

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(6px);

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:9400;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

/*==============================
ACTIVE LINK
==============================*/

.nav-links a.active{

    color:white;

}

.nav-links a.active::after{

    width:100%;

}

/*==============================
RESPONSIVE PREP
==============================*/

@media(max-width:1100px){

    .nav-links{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

}
/*==================================================
PART 3A
HERO SECTION
==================================================*/

/*==============================
HERO
==============================*/

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding-top:120px;

}

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

.hero-background{

    position:absolute;

    inset:0;

    z-index:1;

    overflow:hidden;

}

.hero-background img,
.hero-background video{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.08);

    filter:brightness(.48);

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to right,

            rgba(5,5,5,.92),

            rgba(5,5,5,.55),

            rgba(5,5,5,.20)

        );

}

.hero-gradient{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            to top,

            #050505 0%,

            transparent 35%

        );

}

/*==============================
WRAPPER
==============================*/

.hero-wrapper{

    position:relative;

    z-index:5;

    display:grid;

    grid-template-columns:1.3fr .7fr;

    gap:80px;

    align-items:center;

}

/*==============================
LEFT
==============================*/

.hero-left{

    max-width:760px;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:12px 20px;

    margin-bottom:28px;

    border-radius:999px;

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    background:rgba(255,255,255,.05);

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

    backdrop-filter:blur(16px);

}

.hero-tag::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:white;

}

.hero-left h1{

    max-width:760px;

    margin-bottom:30px;

    font-size:clamp(5rem,9vw,8rem);

    line-height:.9;

    letter-spacing:-6px;

    font-weight:800;

}

.hero-left p{

    font-size:21px;

    line-height:1.9;

    max-width:620px;

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

}

/*==============================
BUTTONS
==============================*/

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:50px;

    flex-wrap:wrap;

}

.hero-buttons .btn-primary{

    min-width:210px;

    height:62px;

    font-size:16px;

}

.hero-buttons .btn-secondary{

    min-width:210px;

    height:62px;

}

/*==============================
RIGHT
==============================*/

.hero-right{

    display:flex;

    justify-content:flex-end;

}

/*==============================
FEATURE CARD
==============================*/

.hero-card{

    width:380px;

    padding:36px;

    border-radius:28px;

    background:

        rgba(255,255,255,.05);

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

    backdrop-filter:blur(24px);

    box-shadow:

        0 25px 70px rgba(0,0,0,.45);

}

.hero-card span{

    display:inline-block;

    margin-bottom:14px;

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

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

}

.hero-card h3{

    font-size:34px;

    margin-bottom:18px;

}

.hero-card p{

    font-size:16px;

    line-height:1.8;

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

}

.hero-card a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:28px;

    font-weight:600;

    transition:var(--transition);

}

.hero-card a:hover{

    transform:translateX(6px);

}

/*==============================
SCROLL INDICATOR
==============================*/

.scroll-indicator{

    position:absolute;

    left:50%;

    bottom:40px;

    transform:translateX(-50%);

    z-index:10;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

}

.scroll-indicator span{

    font-size:12px;

    letter-spacing:4px;

    text-transform:uppercase;

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

}

.mouse{

    width:28px;

    height:48px;

    border-radius:999px;

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

    display:flex;

    justify-content:center;

    padding-top:8px;

}

.mouse span{

    width:4px;

    height:8px;

    border-radius:999px;

    background:white;

    animation:scrollMouse 1.8s infinite;

}

/*==============================
FLOATING EFFECT
==============================*/

.hero-card{

    animation:heroFloat 6s ease-in-out infinite;

}

/*==============================
KEYFRAMES
==============================*/

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes scrollMouse{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(18px);

        opacity:0;

    }

}
/*==================================================
PART 3B1
MANIFESTO
FEATURED FILM
==================================================*/

/*==============================
MANIFESTO
==============================*/

.manifesto{

    background:linear-gradient(
        180deg,
        #050505 0%,
        #0a0a0a 100%
    );

    text-align:center;

}

.manifesto .container{

    max-width:1000px;

}

.manifesto h2{

    margin:24px auto;

    font-size:clamp(3rem,5vw,4.5rem);

    line-height:1.08;

    letter-spacing:-2px;

    max-width:900px;

}

.manifesto p{

    margin:0 auto;

    max-width:760px;

    font-size:20px;

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

    line-height:1.9;

}

/* Decorative line */

.manifesto::before{

    content:"";

    position:absolute;

    left:50%;

    top:70px;

    transform:translateX(-50%);

    width:80px;

    height:2px;

    background:rgba(255,255,255,.18);

}

/*==============================
FEATURED FILM
==============================*/

.featured-production{

    background:#090909;

}

.featured-production .section-heading{

    margin-bottom:70px;

}

.featured-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

/*==============================
POSTER
==============================*/

.featured-image{

    overflow:hidden;

    border-radius:26px;

    position:relative;

    background:#111;

    box-shadow:
        0 30px 80px rgba(0,0,0,.45);

}

.featured-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .9s ease;

}

.featured-image:hover img{

    transform:scale(1.05);

}

.featured-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.55),

        transparent 55%

    );

}

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

.featured-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.featured-content h3{

    font-size:52px;

    margin-bottom:28px;

    line-height:1.05;

}

.featured-content p{

    margin-bottom:40px;

    font-size:19px;

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

    line-height:1.9;

}

.featured-actions{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

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

.featured-production span{

    display:inline-block;

    margin-bottom:18px;

    font-size:13px;

    letter-spacing:4px;

    text-transform:uppercase;

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

}

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

.featured-grid:hover .featured-image{

    transform:translateY(-6px);

    transition:var(--transition);

}

.featured-grid:hover .featured-content h3{

    color:#ffffff;

}

/*==============================
CINEMATIC BACKDROP
==============================*/

.featured-production::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(circle at top right,

    rgba(255,255,255,.03),

    transparent 45%);

}
/*==================================================
PART 3B2
CURRENT PRODUCTIONS
==================================================*/

/*==============================
SECTION
==============================*/

.current-productions{

    background:#050505;

    position:relative;

    overflow:hidden;

}

.current-productions::before{

    content:"";

    position:absolute;

    top:-300px;

    right:-250px;

    width:700px;

    height:700px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,255,255,.035),
    transparent 72%);

    pointer-events:none;

}

/*==============================
SECTION HEADING
==============================*/

.current-productions .section-heading{

    margin-bottom:80px;

}

.current-productions .section-heading p{

    margin-top:22px;

}

/*==============================
GRID
==============================*/

.productions-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:34px;

}

/*==============================
CARD
==============================*/

.production-card{

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:#111;

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

    transition:all .55s cubic-bezier(.22,.61,.36,1);

    cursor:pointer;

}

.production-card:hover{

    transform:translateY(-12px);

    border-color:rgba(255,255,255,.15);

    box-shadow:

        0 30px 80px rgba(0,0,0,.45);

}

/*==============================
IMAGE
==============================*/

.card-image{

    position:relative;

    height:520px;

    overflow:hidden;

}

.card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform 1s ease;

}

.production-card:hover .card-image img{

    transform:scale(1.08);

}

.card-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(0,0,0,.95),

        rgba(0,0,0,.25),

        transparent

    );

}

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

.card-content{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    padding:36px;

    z-index:2;

}

.film-category{

    display:inline-flex;

    padding:8px 16px;

    margin-bottom:18px;

    border-radius:999px;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

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

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.card-content h3{

    margin-bottom:18px;

    font-size:34px;

}

.card-content p{

    margin-bottom:28px;

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

    line-height:1.8;

}

.card-content a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:white;

    font-weight:600;

    transition:.35s;

}

.card-content a:hover{

    transform:translateX(8px);

}

/*==============================
NUMBER
==============================*/

.production-card::before{

    content:"";

    position:absolute;

    top:30px;

    right:30px;

    width:54px;

    height:54px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

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

}

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

.production-card:hover .film-category{

    background:white;

    color:black;

}

.production-card:hover h3{

    transform:translateX(6px);

    transition:.4s;

}

/*==============================
VIEW ALL BUTTON
==============================*/

.productions-footer{

    display:flex;

    justify-content:center;

    margin-top:80px;

}

.productions-footer .btn-primary{

    min-width:240px;

}

/*==============================
GLASS SHINE
==============================*/

.production-card::after{

    content:"";

    position:absolute;

    top:-100%;

    left:-60%;

    width:40%;

    height:220%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.08),

        transparent

    );

    transform:rotate(25deg);

    transition:1s;

}

.production-card:hover::after{

    left:150%;

}

/*==============================
RESPONSIVE PREP
==============================*/

@media(max-width:1100px){

    .productions-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:700px){

    .productions-grid{

        grid-template-columns:1fr;

    }

}
/*==================================================
PART 4A
GALLERY
TIMELINE
==================================================*/

/*==============================
GALLERY PREVIEW
==============================*/

.gallery-preview{

    position:relative;

    background:#090909;

    overflow:hidden;

}

.gallery-preview::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(circle at bottom left,

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

        transparent 45%);

}

.gallery-preview .section-heading{

    margin-bottom:80px;

}

.gallery-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    grid-template-rows:280px 280px;

    gap:22px;

}

.gallery-grid img{

    width:100%;

    height:100%;

    object-fit:cover;

    border-radius:24px;

    transition:

        transform .8s ease,

        filter .5s ease,

        box-shadow .5s ease;

    cursor:pointer;

}

.gallery-grid img:first-child{

    grid-row:span 2;

}

.gallery-grid img:hover{

    transform:scale(1.04);

    filter:brightness(1.08);

    box-shadow:

        0 30px 80px rgba(0,0,0,.45);

}

.gallery-button{

    margin-top:70px;

    display:flex;

    justify-content:center;

}

/*==============================
TIMELINE
==============================*/

.timeline-section{

    position:relative;

    background:#050505;

}

.timeline-section .section-heading{

    text-align:center;

    margin-bottom:90px;

}

.timeline{

    position:relative;

    max-width:1050px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:2px;

    height:100%;

    background:

        linear-gradient(

            transparent,

            rgba(255,255,255,.18),

            transparent

        );

}

.timeline-item{

    position:relative;

    width:46%;

    padding:34px;

    margin-bottom:80px;

    background:rgba(255,255,255,.04);

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

    border-radius:24px;

    backdrop-filter:blur(18px);

    transition:var(--transition);

}

.timeline-item:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.06);

}

.timeline-item:nth-child(odd){

    margin-right:auto;

}

.timeline-item:nth-child(even){

    margin-left:auto;

}

.timeline-item::before{

    content:"";

    position:absolute;

    top:40px;

    width:18px;

    height:18px;

    border-radius:50%;

    background:white;

    box-shadow:

        0 0 20px rgba(255,255,255,.45);

}

.timeline-item:nth-child(odd)::before{

    right:-53px;

}

.timeline-item:nth-child(even)::before{

    left:-53px;

}

.timeline-item h3{

    font-size:42px;

    margin-bottom:10px;

}

.timeline-item h4{

    margin-bottom:18px;

    color:white;

}

.timeline-item p{

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

    line-height:1.8;

}

/*==============================
RESPONSIVE PREP
==============================*/

@media(max-width:900px){

    .gallery-grid{

        grid-template-columns:1fr 1fr;

        grid-template-rows:260px 260px 260px;

    }

    .gallery-grid img:first-child{

        grid-column:span 2;

        grid-row:span 1;

    }

    .timeline::before{

        left:18px;

    }

    .timeline-item{

        width:100%;

        margin-left:40px !important;

        margin-right:0 !important;

    }

    .timeline-item::before{

        left:-32px !important;

        right:auto !important;

    }

}

@media(max-width:640px){

    .gallery-grid{

        grid-template-columns:1fr;

        grid-template-rows:auto;

    }

    .gallery-grid img:first-child{

        grid-column:auto;

    }

}
/*==================================================
PART 4B
FOUNDER
SERVICES
PORTALS
CTA
==================================================*/

/*==============================
FOUNDER
==============================*/

.founder-section{

    position:relative;

    background:#080808;

    overflow:hidden;

}

.founder-section::before{

    content:"";

    position:absolute;

    right:-300px;

    top:-250px;

    width:700px;

    height:700px;

    border-radius:50%;

    background:

        radial-gradient(circle,
        rgba(255,255,255,.03),
        transparent 70%);

}

.founder-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.founder-left h2{

    font-size:clamp(3rem,5vw,4.8rem);

    line-height:1;

    letter-spacing:-3px;

    margin-top:20px;

}

.founder-right{

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

    padding-left:60px;

}

.founder-right p{

    font-size:20px;

    line-height:2;

    margin-bottom:30px;

}

/*==============================
SERVICES
==============================*/

.services{

    background:#050505;

}

.services-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    margin-top:70px;

}

.services article{

    padding:40px;

    border-radius:26px;

    background:#111111;

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

    transition:var(--transition);

}

.services article:hover{

    transform:translateY(-10px);

    border-color:rgba(255,255,255,.14);

}

.services article i{

    font-size:46px;

    margin-bottom:30px;

    display:block;

    color:white;

}

.services article h3{

    margin-bottom:18px;

    font-size:28px;

}

.services article p{

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

    line-height:1.8;

}

/*==============================
PORTALS
==============================*/

.portal-section{

    background:#090909;

}

.portal-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:70px;

}

.portal-card{

    position:relative;

    overflow:hidden;

    padding:42px;

    border-radius:28px;

    background:

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

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

    backdrop-filter:blur(20px);

    transition:all .45s ease;

}

.portal-card:hover{

    transform:translateY(-10px);

    background:rgba(255,255,255,.08);

}

.portal-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.05),

            transparent

        );

    opacity:0;

    transition:.4s;

}

.portal-card:hover::before{

    opacity:1;

}

.portal-card i{

    font-size:44px;

    margin-bottom:28px;

    display:block;

}

.portal-card h3{

    margin-bottom:16px;

    font-size:28px;

}

.portal-card p{

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

    line-height:1.8;

}

/*==============================
CTA
==============================*/

.cta-section{

    text-align:center;

    background:

        linear-gradient(

            180deg,

            #090909,

            #050505

        );

}

.cta-section span{

    display:block;

    margin-bottom:20px;

    font-size:13px;

    letter-spacing:5px;

    text-transform:uppercase;

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

}

.cta-section h2{

    font-size:clamp(3.2rem,5vw,5.5rem);

    max-width:900px;

    margin:auto;

    line-height:1;

    letter-spacing:-4px;

}

.cta-section p{

    margin:35px auto 55px;

    max-width:700px;

    font-size:20px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:1200px){

    .services-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .portal-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:900px){

    .founder-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .founder-right{

        border:none;

        padding-left:0;

    }

}

@media(max-width:640px){

    .services-grid{

        grid-template-columns:1fr;

    }

    .portal-grid{

        grid-template-columns:1fr;

    }

}
/*==================================================
PART 5A
NEWSLETTER
FOOTER
SOCIALS
==================================================*/

/*==============================
NEWSLETTER
==============================*/

.newsletter{

    position:relative;

    background:#070707;

    overflow:hidden;

}

.newsletter::before{

    content:"";

    position:absolute;

    left:50%;

    top:-300px;

    transform:translateX(-50%);

    width:900px;

    height:900px;

    border-radius:50%;

    background:

    radial-gradient(circle,

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

    transparent 72%);

    pointer-events:none;

}

.newsletter-content{

    position:relative;

    z-index:2;

    max-width:850px;

    margin:auto;

    text-align:center;

}

.newsletter-content span{

    display:block;

    margin-bottom:18px;

    font-size:13px;

    letter-spacing:5px;

    text-transform:uppercase;

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

}

.newsletter-content h2{

    margin-bottom:30px;

    font-size:clamp(3rem,5vw,5rem);

    line-height:1.05;

    letter-spacing:-3px;

}

.newsletter-form{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

    margin-top:50px;

}

.newsletter-form input{

    width:420px;

    max-width:100%;

    height:64px;

    padding:0 28px;

    background:rgba(255,255,255,.05);

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

    border-radius:999px;

    color:white;

    font-size:16px;

    transition:var(--transition);

}

.newsletter-form input:focus{

    border-color:white;

    background:rgba(255,255,255,.08);

}

.newsletter-form button{

    min-width:190px;

    height:64px;

    border-radius:999px;

    background:white;

    color:black;

    font-size:16px;

    font-weight:600;

    transition:var(--transition);

}

.newsletter-form button:hover{

    transform:translateY(-4px);

    box-shadow:

    0 15px 45px rgba(255,255,255,.16);

}

/*==============================
FOOTER
==============================*/

.footer{

    background:#050505;

    border-top:1px solid rgba(255,255,255,.06);

    padding:120px 0 40px;

}

.footer-grid{

    display:grid;

    grid-template-columns:

    2fr

    1fr

    1fr

    1fr;

    gap:60px;

    margin-bottom:80px;

}

/*==============================
BRAND
==============================*/

.footer-brand img{

    width:75px;

    margin-bottom:24px;

}

.footer-brand h3{

    margin-bottom:16px;

    font-size:30px;

}

.footer-brand p{

    margin-bottom:28px;

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

}

/*==============================
SOCIAL
==============================*/

.social-links{

    display:flex;

    gap:14px;

}

.social-links a{

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(255,255,255,.05);

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

    transition:var(--transition);

}

.social-links a:hover{

    background:white;

    color:black;

    transform:translateY(-6px);

}

.social-links i{

    font-size:22px;

}

/*==============================
LINKS
==============================*/

.footer h4{

    margin-bottom:24px;

    font-size:18px;

}

.footer ul{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.footer li{

    list-style:none;

}

.footer a{

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

    transition:var(--transition);

}

.footer a:hover{

    color:white;

    padding-left:8px;

}

/*==============================
BOTTOM
==============================*/

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

    padding-top:35px;

    border-top:1px solid rgba(255,255,255,.06);

}

.footer-bottom p{

    font-size:15px;

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

}

/*==============================
FOOTER REVEAL
==============================*/

.footer-grid>div{

    transition:var(--transition);

}

.footer-grid>div:hover{

    transform:translateY(-6px);

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:1100px){

.footer-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:700px){

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom{

justify-content:center;

text-align:center;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

.newsletter-form button{

width:100%;

}

}
/*==================================================
PART 5B
PORTAL MODAL
FORMS
INPUTS
==================================================*/

/*==============================
PORTAL MODAL
==============================*/

.portal-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.72);

    backdrop-filter:blur(14px);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:all .45s ease;

    z-index:9999;

}

.portal-modal.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}

/*==============================
MODAL BOX
==============================*/

.portal-box{

    width:min(760px,92%);

    padding:60px;

    border-radius:32px;

    background:#111111;

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

    box-shadow:

        0 35px 100px rgba(0,0,0,.45);

    position:relative;

}

.portal-box span{

    display:block;

    margin-bottom:12px;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:13px;

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

}

.portal-box h2{

    margin-bottom:45px;

    font-size:48px;

}

/*==============================
CLOSE
==============================*/

.close-modal{

    position:absolute;

    top:22px;

    right:22px;

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.05);

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

    transition:var(--transition);

}

.close-modal:hover{

    transform:rotate(90deg);

    background:white;

    color:black;

}

.close-modal i{

    font-size:22px;

}

/*==============================
PORTALS
==============================*/

.portal-options{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:22px;

}

.portal-options a{

    padding:34px;

    border-radius:24px;

    background:rgba(255,255,255,.04);

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

    transition:var(--transition);

    display:flex;

    flex-direction:column;

    gap:18px;

}

.portal-options a:hover{

    transform:translateY(-8px);

    background:rgba(255,255,255,.08);

}

.portal-options i{

    font-size:38px;

}

.portal-options strong{

    font-size:24px;

}

.portal-options p{

    font-size:15px;

    line-height:1.7;

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

}

/*==============================
FORMS
==============================*/

form{

    width:100%;

}

input,
textarea,
select{

    width:100%;

    background:#161616;

    color:white;

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

    border-radius:18px;

    padding:18px 22px;

    font-size:16px;

    transition:var(--transition);

}

textarea{

    resize:vertical;

    min-height:180px;

}

input:focus,
textarea:focus,
select:focus{

    border-color:white;

    background:#1b1b1b;

}

input::placeholder,
textarea::placeholder{

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

}

/*==============================
SEARCH
==============================*/

.search-box{

    position:relative;

}

.search-box input{

    padding-left:58px;

}

.search-box i{

    position:absolute;

    left:22px;

    top:50%;

    transform:translateY(-50%);

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

}

/*==============================
VERIFY SEARCH
==============================*/

.verify-search{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:40px;

}

.verify-search input{

    flex:1;

    min-width:250px;

}

.verify-search button{

    min-width:180px;

    border-radius:18px;

    background:white;

    color:black;

    font-weight:600;

    transition:var(--transition);

}

.verify-search button:hover{

    transform:translateY(-4px);

}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:768px){

.portal-box{

padding:35px;

}

.portal-options{

grid-template-columns:1fr;

}

.portal-box h2{

font-size:34px;

}

}
/*==================================================
PART 6A
APPLE MICRO INTERACTIONS
DIGDARSHAK STUDIOS
==================================================*/

/*==============================
GLOBAL TRANSITIONS
==============================*/

a,
button,
img,
.card,
.portal-card,
.production-card,
.services article,
.timeline-item,
.hero-card,
input,
textarea{

    transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    opacity .45s ease,
    background .45s ease,
    color .45s ease,
    border-color .45s ease,
    box-shadow .45s ease;

}

/*==============================
LINK UNDERLINE
==============================*/

.link-hover{

    position:relative;

    display:inline-block;

}

.link-hover::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-5px;

    width:0;

    height:2px;

    background:white;

    transition:.35s;

}

.link-hover:hover::after{

    width:100%;

}

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

.btn-primary,
.btn-secondary,
.login-btn,
.verify-btn{

    position:relative;

    overflow:hidden;

}

.btn-primary:hover{

    transform:translateY(-4px) scale(1.02);

}

.btn-secondary:hover{

    transform:translateY(-4px);

}

/*==============================
APPLE RIPPLE
==============================*/

.btn-primary::before,
.btn-secondary::before{

    content:"";

    position:absolute;

    width:0;

    height:0;

    left:50%;

    top:50%;

    border-radius:50%;

    background:

        rgba(255,255,255,.18);

    transform:

        translate(-50%,-50%);

    transition:.65s;

}

.btn-primary:hover::before,
.btn-secondary:hover::before{

    width:340px;

    height:340px;

}

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

img{

    transition:

        transform .9s ease,

        filter .5s ease;

}

.image-hover{

    overflow:hidden;

    border-radius:26px;

}

.image-hover:hover img{

    transform:scale(1.08);

}

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

.card:hover,
.portal-card:hover,
.production-card:hover{

    transform:

        translateY(-10px);

}

/*==============================
GLASS SHINE
==============================*/

.glass-shine{

    position:relative;

    overflow:hidden;

}

.glass-shine::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-60%;

    width:40%;

    height:240%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

    transform:rotate(24deg);

    transition:1s;

}

.glass-shine:hover::after{

    left:170%;

}

/*==============================
SOFT GLOW
==============================*/

.glow:hover{

    box-shadow:

        0 0 0 1px rgba(255,255,255,.08),

        0 20px 60px rgba(255,255,255,.08);

}

/*==============================
FLOAT
==============================*/

.float{

    animation:floatAnimation 6s ease-in-out infinite;

}

@keyframes floatAnimation{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0);

}

}

/*==============================
ROTATE
==============================*/

.rotate-hover:hover{

    transform:rotate(4deg);

}

/*==============================
SCALE
==============================*/

.scale-hover:hover{

    transform:scale(1.04);

}

/*==============================
ICONS
==============================*/

.social-links a:hover i{

    transform:scale(1.15);

}

/*==============================
PORTAL
==============================*/

.portal-card i{

    transition:.45s;

}

.portal-card:hover i{

    transform:

        translateY(-5px)

        scale(1.1);

}

/*==============================
TIMELINE
==============================*/

.timeline-item:hover::before{

    transform:scale(1.35);

}

/*==============================
PRODUCTION TITLE
==============================*/

.production-card h3{

    transition:.45s;

}

.production-card:hover h3{

    letter-spacing:.5px;

}

/*==============================
HERO BUTTONS
==============================*/

.hero-buttons a{

    box-shadow:

        0 10px 30px rgba(0,0,0,.15);

}

.hero-buttons a:hover{

    box-shadow:

        0 18px 60px rgba(0,0,0,.3);

}

/*==============================
NEWSLETTER
==============================*/

.newsletter-form input:hover{

    border-color:

        rgba(255,255,255,.18);

}

/*==============================
SCROLLBAR
==============================*/

::-webkit-scrollbar-thumb:hover{

    background:white;

}

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

h1,
h2,
h3{

    transition:.45s;

}

/*==============================
SECTION FADE
==============================*/

section{

    transition:

        opacity .6s ease,

        transform .6s ease;

}

/*==============================
APPLE DEPTH
==============================*/

.depth{

    transition:.5s;

}

.depth:hover{

    transform:

        perspective(1200px)

        rotateX(4deg)

        translateY(-8px);

}
/*==================================================
PART 6B
APPLE MOTION SYSTEM
SCROLL EFFECTS
==================================================*/

/*==============================
SCROLL PROGRESS BAR
==============================*/

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:white;

    z-index:10000;

    transform-origin:left;

    transition:width .15s linear;

}

/*==============================
BACK TO TOP
==============================*/

.back-to-top{

    position:fixed;

    right:35px;

    bottom:35px;

    width:58px;

    height:58px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

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

    color:white;

    opacity:0;

    visibility:hidden;

    transform:translateY(25px);

    transition:all .45s ease;

    z-index:999;

}

.back-to-top.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.back-to-top:hover{

    background:white;

    color:black;

    transform:translateY(-6px);

}

/*==============================
GSAP HELPERS
==============================*/

.gsap-fade{

    opacity:0;

}

.gsap-up{

    opacity:0;

    transform:translateY(70px);

}

.gsap-left{

    opacity:0;

    transform:translateX(-80px);

}

.gsap-right{

    opacity:0;

    transform:translateX(80px);

}

.gsap-scale{

    opacity:0;

    transform:scale(.92);

}

.gsap-blur{

    opacity:0;

    filter:blur(14px);

}

.gsap-rotate{

    opacity:0;

    transform:rotate(-6deg);

}

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

.text-reveal{

    overflow:hidden;

}

.text-reveal span{

    display:block;

    transform:translateY(120%);

}

/*==============================
IMAGE PARALLAX
==============================*/

.parallax{

    overflow:hidden;

}

.parallax img{

    transform:scale(1.12);

    will-change:transform;

}

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

.hover-lift{

    transition:transform .45s ease;

}

.hover-lift:hover{

    transform:translateY(-10px);

}

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

.hover-glow{

    transition:box-shadow .45s ease;

}

.hover-glow:hover{

    box-shadow:

        0 20px 70px rgba(255,255,255,.10);

}

/*==============================
IMAGE FADE
==============================*/

.image-fade{

    overflow:hidden;

}

.image-fade img{

    transition:

        transform .8s ease,

        filter .5s ease,

        opacity .5s ease;

}

.image-fade:hover img{

    transform:scale(1.06);

    filter:brightness(1.08);

}

/*==============================
BUTTON PRESS
==============================*/

button:active,

.btn-primary:active,

.btn-secondary:active{

    transform:scale(.97);

}

/*==============================
LOADER FADE
==============================*/

.loader-hide{

    opacity:0;

    visibility:hidden;

}

/*==============================
PAGE TRANSITION
==============================*/

.page-enter{

    animation:pageEnter .9s cubic-bezier(.22,.61,.36,1);

}

@keyframes pageEnter{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/*==============================
STAGGER DELAYS
==============================*/

.delay-1{animation-delay:.1s;}
.delay-2{animation-delay:.2s;}
.delay-3{animation-delay:.3s;}
.delay-4{animation-delay:.4s;}
.delay-5{animation-delay:.5s;}
.delay-6{animation-delay:.6s;}

/*==============================
SECTION DIVIDER
==============================*/

.section-divider{

    width:100%;

    height:1px;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

}

/*==============================
FOCUS STATES
==============================*/

a:focus-visible,

button:focus-visible,

input:focus-visible,

textarea:focus-visible{

    outline:2px solid rgba(255,255,255,.5);

    outline-offset:4px;

    border-radius:10px;

}

/*==============================
REDUCED MOTION
==============================*/

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}
/*==================================================
PART 7A-1
DESKTOP RESPONSIVE
1920 • 1600 • 1440 • 1366 • 1280 • 1200
==================================================*/

/*==============================
1920px+
==============================*/

@media (min-width:1921px){

:root{

--display-xl:110px;
--display-lg:88px;
--heading-xl:58px;

}

.container{

max-width:1650px;

}

.hero{

min-height:110vh;

}

.hero-wrapper{

gap:120px;

}

.hero-left{

max-width:860px;

}

.hero-card{

width:430px;

padding:46px;

}

.gallery-grid{

grid-template-rows:340px 340px;

}

}

/*==============================
1600px
==============================*/

@media (max-width:1600px){

.container{

width:min(92%,1380px);

}

.hero-wrapper{

gap:70px;

}

.hero-left h1{

font-size:clamp(5rem,7vw,7rem);

}

.hero-card{

width:360px;

}

}

/*==============================
1440px
==============================*/

@media (max-width:1440px){

.hero{

padding-top:140px;

}

.hero-wrapper{

grid-template-columns:1.2fr .8fr;

gap:60px;

}

.hero-left h1{

letter-spacing:-4px;

}

.section-heading{

margin-bottom:70px;

}

.footer-grid{

gap:50px;

}

}

/*==============================
1366px
==============================*/

@media (max-width:1366px){

:root{

--display-xl:82px;

--heading-xl:46px;

}

.navbar{

padding:0 26px;

}

.nav-links{

gap:28px;

}

.hero-card{

width:340px;

padding:30px;

}

.featured-grid{

gap:50px;

}

.services-grid{

gap:24px;

}

.portal-grid{

gap:24px;

}

}

/*==============================
1280px
==============================*/

@media (max-width:1280px){

.hero-wrapper{

grid-template-columns:1fr .9fr;

}

.hero-left{

max-width:680px;

}

.hero-left p{

font-size:19px;

}

.card-image{

height:450px;

}

.timeline-item{

padding:28px;

}

.gallery-grid{

gap:18px;

}

}

/*==============================
1200px
==============================*/

@media (max-width:1200px){

section{

padding:110px 0;

}

.container{

width:92%;

}

.hero-wrapper{

gap:50px;

}

.hero-card{

width:100%;

}

.featured-content h3{

font-size:42px;

}

.services article{

padding:34px;

}

.portal-card{

padding:34px;

}

.newsletter-content h2{

font-size:56px;

}

}
/*==================================================
PART 7A-2
DESKTOP → LAPTOP
1100px
1050px
992px
==================================================*/

/*==============================
1100px
==============================*/

@media (max-width:1100px){

.header{

top:18px;

}

.navbar{

height:72px;

padding:0 22px;

}

.hero{

padding-top:150px;

min-height:auto;

}

.hero-wrapper{

grid-template-columns:1fr;

gap:70px;

text-align:center;

}

.hero-left{

max-width:760px;

margin:auto;

}

.hero-left p{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-right{

justify-content:center;

}

.hero-card{

max-width:420px;

}

.featured-grid{

grid-template-columns:1fr;

gap:60px;

}

.featured-content{

text-align:center;

align-items:center;

}

.featured-actions{

justify-content:center;

}

.gallery-grid{

grid-template-columns:1fr 1fr;

grid-template-rows:260px 260px 260px;

}

.gallery-grid img:first-child{

grid-column:span 2;

grid-row:auto;

}

.footer-grid{

grid-template-columns:repeat(2,1fr);

}

}

/*==============================
1050px
==============================*/

@media (max-width:1050px){

:root{

--display-xl:72px;

--heading-xl:42px;

}

.hero-left h1{

letter-spacing:-3px;

}

.hero-left p{

font-size:18px;

}

.services-grid{

grid-template-columns:repeat(2,1fr);

}

.portal-grid{

grid-template-columns:repeat(2,1fr);

}

.productions-grid{

grid-template-columns:repeat(2,1fr);

}

.card-image{

height:420px;

}

.timeline-item h3{

font-size:34px;

}

.newsletter-content h2{

font-size:48px;

}

}

/*==============================
992px
==============================*/

@media (max-width:992px){

section{

padding:95px 0;

}

.container{

width:94%;

}

.nav-actions{

display:none;

}

.menu-toggle{

display:flex;

}

.hero-left h1{

font-size:64px;

line-height:1;

}

.hero-tag{

margin:auto auto 25px;

}

.hero-card{

padding:32px;

}

.featured-content h3{

font-size:38px;

}

.gallery-grid{

gap:16px;

}

.timeline{

padding-left:40px;

}

.timeline::before{

left:15px;

}

.timeline-item{

width:100%;

margin-left:30px !important;

margin-right:0 !important;

}

.timeline-item::before{

left:-28px !important;

right:auto !important;

}

.footer{

padding:90px 0 30px;

}

.footer-bottom{

text-align:center;

justify-content:center;

}

}
/*==================================================
PART 7B
TABLET RESPONSIVE
900 • 820 • 768
==================================================*/

/*==============================
900px
==============================*/

@media (max-width:900px){

:root{

--display-xl:60px;
--heading-xl:38px;
--heading-lg:34px;

}

section{

padding:90px 0;

}

.hero{

padding-top:140px;

}

.hero-wrapper{

gap:55px;

}

.hero-left{

max-width:100%;

}

.hero-left h1{

font-size:60px;

letter-spacing:-2px;

}

.hero-left p{

font-size:18px;

max-width:620px;

}

.hero-buttons{

gap:14px;

}

.hero-card{

max-width:480px;

width:100%;

}

.hero-card h3{

font-size:30px;

}

.featured-grid{

gap:50px;

}

.featured-content{

text-align:center;

}

.featured-content h3{

font-size:38px;

}

.gallery-grid{

grid-template-columns:1fr;

grid-template-rows:auto;

}

.gallery-grid img{

height:320px;

}

.gallery-grid img:first-child{

grid-column:auto;

grid-row:auto;

}

}

/*==============================
820px
==============================*/

@media (max-width:820px){

.navbar{

height:68px;

padding:0 20px;

}

.logo img{

height:34px;

}

.hero-left h1{

font-size:54px;

}

.hero-left p{

font-size:17px;

}

.services-grid{

grid-template-columns:1fr;

}

.portal-grid{

grid-template-columns:1fr;

}

.productions-grid{

grid-template-columns:1fr;

}

.production-card{

max-width:600px;

margin:auto;

}

.card-image{

height:520px;

}

.timeline{

padding-left:25px;

}

.timeline-item{

padding:24px;

}

.timeline-item h3{

font-size:30px;

}

.newsletter-content h2{

font-size:42px;

}

.footer-grid{

grid-template-columns:1fr;

gap:45px;

text-align:center;

}

.social-links{

justify-content:center;

}

}

/*==============================
768px
==============================*/

@media (max-width:768px){

:root{

--display-xl:50px;
--heading-xl:34px;
--heading-lg:30px;
--body:17px;

}

section{

padding:80px 0;

}

.container{

width:92%;

}

.hero{

padding-top:130px;

}

.hero-left h1{

font-size:48px;

line-height:1.05;

}

.hero-tag{

font-size:12px;

padding:10px 18px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{

width:100%;
max-width:320px;

}

.hero-card{

padding:28px;

border-radius:24px;

}

.featured-content h3{

font-size:34px;

}

.manifesto h2{

font-size:40px;

}

.manifesto p{

font-size:18px;

}

.timeline-item{

margin-left:18px !important;

}

.timeline-item::before{

left:-22px !important;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input,
.newsletter-form button{

width:100%;

}

.portal-box{

padding:32px;

}

.portal-options{

grid-template-columns:1fr;

}

.footer{

padding-top:80px;

}

.footer-bottom{

flex-direction:column;

gap:12px;

}

}
/*==================================================
PART 8A
MOBILE RESPONSIVE
640 • 576 • 480 • 430 • 414 • 390 • 375 • 360 • 320
==================================================*/

/*==============================
640px
==============================*/

@media (max-width:640px){

:root{

--display-xl:46px;
--heading-xl:32px;
--heading-lg:28px;
--body:16px;

}

.container{

width:92%;

}

section{

padding:72px 0;

}

.header{

top:12px;

}

.navbar{

height:64px;

padding:0 18px;

border-radius:20px;

}

.logo img{

height:30px;

}

.hero{

padding-top:115px;

}

.hero-left h1{

font-size:44px;

line-height:1.05;

letter-spacing:-2px;

}

.hero-left p{

font-size:16px;

line-height:1.8;

}

.hero-card{

padding:24px;

}

.hero-card h3{

font-size:28px;

}

.featured-content h3{

font-size:30px;

}

.card-image{

height:420px;

}

.timeline-item{

padding:22px;

}

.timeline-item h3{

font-size:28px;

}

}

/*==============================
576px
==============================*/

@media (max-width:576px){

.hero-left h1{

font-size:40px;

}

.manifesto h2{

font-size:34px;

}

.featured-content h3{

font-size:28px;

}

.newsletter-content h2{

font-size:34px;

}

.footer-brand h3{

font-size:24px;

}

.services article,
.portal-card{

padding:26px;

}

.card-image{

height:380px;

}

}

/*==============================
480px
==============================*/

@media (max-width:480px){

.hero-left h1{

font-size:36px;

}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{

height:54px;

font-size:15px;

}

.hero-card{

border-radius:20px;

}

.card-content{

padding:26px;

}

.card-content h3{

font-size:28px;

}

.production-card{

border-radius:20px;

}

.timeline-item{

padding:20px;

}

.portal-box{

padding:24px;

border-radius:22px;

}

}

/*==============================
430px
==============================*/

@media (max-width:430px){

.hero{

padding-top:105px;

}

.hero-left h1{

font-size:34px;

}

.hero-left p{

font-size:15px;

}

.hero-tag{

font-size:11px;

letter-spacing:2px;

}

.featured-content h3{

font-size:26px;

}

.manifesto h2{

font-size:30px;

}

.newsletter-content h2{

font-size:30px;

}

}

/*==============================
414px
==============================*/

@media (max-width:414px){

.navbar{

padding:0 16px;

}

.logo img{

height:28px;

}

.hero-card{

padding:22px;

}

.card-image{

height:340px;

}

.footer{

padding-top:60px;

}

}

/*==============================
390px
==============================*/

@media (max-width:390px){

.hero-left h1{

font-size:32px;

}

.hero-card h3{

font-size:24px;

}

.card-content h3{

font-size:24px;

}

.timeline-item h3{

font-size:24px;

}

}

/*==============================
375px
==============================*/

@media (max-width:375px){

.hero-left h1{

font-size:30px;

}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{

max-width:100%;

}

.hero-card{

padding:20px;

}

.newsletter-form input{

padding:0 20px;

}

}

/*==============================
360px
==============================*/

@media (max-width:360px){

:root{

--body:15px;

}

.hero-left h1{

font-size:28px;

}

.hero-tag{

padding:8px 14px;

}

.card-content{

padding:20px;

}

.services article{

padding:22px;

}

.portal-card{

padding:22px;

}

}

/*==============================
320px
==============================*/

@media (max-width:320px){

.hero-left h1{

font-size:24px;

}

.hero-left p{

font-size:14px;

}

.hero-card{

padding:18px;

}

.hero-card h3{

font-size:22px;

}

.newsletter-content h2{

font-size:24px;

}

.footer-brand h3{

font-size:20px;

}

.portal-box{

padding:18px;

}

}
/*==================================================
PART 8B
FINAL POLISH
ACCESSIBILITY
PERFORMANCE
LANDSCAPE
PRINT
DIGDARSHAK STUDIOS V1
==================================================*/

/*==============================
HIGH DPI IMAGES
==============================*/

img{

    image-rendering:auto;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

}

/*==============================
VIDEO
==============================*/

video{

    display:block;

    width:100%;

    height:auto;

}

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

svg{

    display:block;

    max-width:100%;

}

/*==============================
ACCESSIBILITY
==============================*/

:focus-visible{

    outline:2px solid rgba(255,255,255,.55);

    outline-offset:5px;

}

button:focus-visible,
a:focus-visible{

    border-radius:10px;

}

/*==============================
DISABLE IMAGE DRAG
==============================*/

img{

    user-select:none;

    -webkit-user-drag:none;

}

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

body{

    text-size-adjust:100%;

    -webkit-text-size-adjust:100%;

}

/*==============================
SELECTION
==============================*/

::selection{

    background:white;

    color:black;

}

/*==============================
LANDSCAPE PHONE
==============================*/

@media (max-height:550px) and (orientation:landscape){

.hero{

min-height:auto;

padding:120px 0 80px;

}

.hero-wrapper{

grid-template-columns:1fr 1fr;

gap:40px;

}

.scroll-indicator{

display:none;

}

}

/*==============================
REDUCED MOTION
==============================*/

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

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

/*==============================
PRINT
==============================*/

@media print{

.header,
.footer,
.newsletter,
.portal-modal,
.back-to-top,
.scroll-progress{

display:none !important;

}

body{

background:white;

color:black;

}

section{

padding:20px 0;

break-inside:avoid;

}

img{

max-width:100%;

}

}

/*==============================
HELPER CLASSES
==============================*/

.no-select{

user-select:none;

}

.pointer{

cursor:pointer;

}

.round{

border-radius:999px;

}

.shadow{

box-shadow:0 20px 60px rgba(0,0,0,.3);

}

.hidden{

display:none !important;

}

.visible{

display:block !important;

}

.flex-center{

display:flex;

justify-content:center;

align-items:center;

}

.text-white{

color:white;

}

.text-grey{

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

}

.bg-dark{

background:#050505;

}

.glass{

background:rgba(255,255,255,.05);

backdrop-filter:blur(20px);

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

}

/*==============================
LOADING STATE
==============================*/

.loading{

pointer-events:none;

opacity:.65;

}

/*==============================
SCROLL SNAP (OPTIONAL)
==============================*/

.snap{

scroll-snap-type:y proximity;

}

.snap-section{

scroll-snap-align:start;

}

/*==============================
FINAL TRANSITIONS
==============================*/

*{

transition-property:

background-color,

color,

border-color,

transform,

opacity,

box-shadow,

filter;

}

/*==============================
END OF FILE
DIGDARSHAK STUDIOS
VERSION 1.0
==================================================*/