/* =========================================
PRODUCT MANUFACTURING WEBSITE
SPLASH SCREEN STYLES
========================================= */

:root {
--primary: #F62440;
--secondary: #FFFAF3;


--white: #FFFFFF;
--text-dark: #202020;
--text-muted: #777777;

--primary-light: #FFE5E9;
--border-color: rgba(246, 36, 64, 0.12);

--shadow: 0 25px 60px rgba(246, 36, 64, 0.12);


}

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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html,
body {
width: 100%;
min-height: 100%;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: var(--secondary);
color: var(--text-dark);
overflow: hidden;
}

/* =========================================
SPLASH SCREEN
========================================= */

.splash-screen {
position: relative;
width: 100%;
min-height: 100vh;


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

overflow: hidden;

background:
    radial-gradient(
        circle at top left,
        rgba(246, 36, 64, 0.10),
        transparent 35%
    ),
    radial-gradient(
        circle at bottom right,
        rgba(246, 36, 64, 0.08),
        transparent 40%
    ),
    var(--secondary);

transition:
    opacity 0.7s ease,
    transform 0.7s ease;


}

/* =========================================
EXIT ANIMATION
========================================= */

.splash-screen.splash-exit {
opacity: 0;
transform: scale(1.02);
}

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

.background-shape {
position: absolute;


border-radius: 50%;

background: rgba(246, 36, 64, 0.06);

pointer-events: none;


}

.shape-one {
width: 450px;
height: 450px;


top: -180px;
left: -150px;

animation: floatShapeOne 8s ease-in-out infinite;


}

.shape-two {
width: 350px;
height: 350px;


bottom: -150px;
right: -100px;

animation: floatShapeTwo 10s ease-in-out infinite;


}

.shape-three {
width: 150px;
height: 150px;


top: 20%;
right: 12%;

border: 1px solid rgba(246, 36, 64, 0.12);
background: transparent;

animation: rotateShape 18s linear infinite;


}

@keyframes floatShapeOne {


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

50% {
    transform: translate(30px, 25px);
}


}

@keyframes floatShapeTwo {


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

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


}

@keyframes rotateShape {


from {
    transform: rotate(0deg);
}

to {
    transform: rotate(360deg);
}


}

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

.splash-content {
position: relative;
z-index: 2;


width: min(90%, 700px);

display: flex;
flex-direction: column;
align-items: center;

text-align: center;

animation: contentReveal 1s ease forwards;


}

@keyframes contentReveal {


from {
    opacity: 0;
    transform: translateY(25px);
}

to {
    opacity: 1;
    transform: translateY(0);
}


}

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

.logo-wrapper {
    margin-bottom: 32px;
}


.logo-container {
    width: 130px;
    height: 130px;

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

    animation: logoFloat 4s ease-in-out infinite;
}


.company-logo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


@keyframes logoFloat {

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

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

}

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

.splash-heading {
max-width: 650px;
}

.welcome-text {
display: inline-block;


margin-bottom: 16px;

padding: 8px 16px;

border-radius: 50px;

background: var(--primary-light);

color: var(--primary);

font-size: 11px;
font-weight: 700;

letter-spacing: 2px;


}

.splash-heading h1 {
font-size: clamp(24px, 4vw, 42px);


font-weight: 800;

line-height: 1.05;

letter-spacing: -2px;

color: var(--text-dark);


}

.splash-heading h1 span {
display: block;


color: var(--primary);


}

.splash-heading p {
max-width: 520px;


margin: 22px auto 0;

color: var(--text-muted);

font-size: 16px;

line-height: 1.7;


}

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

.loading-section {
width: min(100%, 420px);


margin-top: 55px;


}

.loading-text {
display: flex;
align-items: center;
justify-content: space-between;


gap: 20px;

margin-bottom: 12px;

color: var(--text-dark);

font-size: 13px;

font-weight: 600;


}

.loading-percentage {
color: var(--primary);


font-weight: 800;


}

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

.progress-track {
position: relative;


width: 100%;
height: 8px;

overflow: hidden;

border-radius: 50px;

background: rgba(246, 36, 64, 0.10);


}

.progress-bar {
width: 0%;
height: 100%;


border-radius: inherit;

background: var(--primary);

transition: width 0.08s linear;

box-shadow: 0 0 15px rgba(246, 36, 64, 0.45);


}

/* =========================================
LOADING DOTS
========================================= */

.loading-dots {
display: flex;
justify-content: center;


gap: 8px;

margin-top: 22px;


}

.loading-dots span {
width: 7px;
height: 7px;


border-radius: 50%;

background: var(--primary);

animation: loadingDot 1.2s infinite ease-in-out;


}

.loading-dots span:nth-child(2) {
animation-delay: 0.15s;
}

.loading-dots span:nth-child(3) {
animation-delay: 0.30s;
}

@keyframes loadingDot {


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

50% {
    opacity: 1;
    transform: translateY(-7px);
}


}

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

.splash-footer {
position: absolute;


z-index: 2;

bottom: 28px;

left: 50%;

transform: translateX(-50%);

width: 100%;

text-align: center;


}

.splash-footer p {
color: var(--text-muted);


font-size: 12px;

letter-spacing: 1px;


}

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

@media (max-width: 768px) {


.shape-one {
    width: 300px;
    height: 300px;

    top: -100px;
    left: -130px;
}


.shape-two {
    width: 250px;
    height: 250px;

    bottom: -100px;
    right: -100px;
}


.shape-three {
    width: 100px;
    height: 100px;

    top: 15%;
    right: 5%;
}


.logo-placeholder {
    width: 90px;
    height: 90px;

    border-radius: 26px;
}


.splash-heading h1 {
    letter-spacing: -1px;
}


.splash-heading p {
    font-size: 14px;

    padding: 0 10px;
}


.loading-section {
    margin-top: 40px;
}


}

@media (max-width: 480px) {


.splash-content {
    width: min(90%, 420px);
}


.logo-wrapper {
    margin-bottom: 24px;
}


.welcome-text {
    font-size: 10px;

    padding: 7px 13px;

    letter-spacing: 1.5px;
}


.splash-heading p {
    line-height: 1.6;
}


.loading-text {
    font-size: 11px;

    gap: 10px;
}


.progress-track {
    height: 6px;
}


}