/* ==========================================================================
   POLLEN.DESIGN 1:1 CLONE
   ========================================================================== */

:root {
    --primary-font: 'Oswald', sans-serif;
    --secondary-font: 'Inter', sans-serif;
    
    --White: #ffffff;
    --black: #1a1a1a;
    --grey: #f5f5f5;
    --Orange: #ff4500;
    --text-muted: #555555;
}

/* Dark Theme Overrides */
body.dark-theme {
    --White: #111111;
    --black: #f0f0f0;
    --grey: #222222;
    --text-muted: #aaaaaa;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--secondary-font);
    background-color: var(--White);
    color: var(--black);
    overflow-x: hidden;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* Racing Switch */
.right_controls { display: flex; align-items: center; gap: 24rem; }
.theme_toggle_wrap { display: flex; align-items: center; gap: 10rem; }
.theme_toggle_wrap .label_text {
    font-family: var(--secondary-font); font-size: 12rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: var(--black); transition: color 0.3s;
}
.racing_switch { position: relative; display: inline-block; width: 60rem; height: 30rem; }
.racing_switch input { opacity: 0; width: 0; height: 0; }
.racing_switch .slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--black); border-radius: 30rem;
    transition: 0.4s; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); border: 2px solid var(--black);
}
.racing_switch .slider:before {
    position: absolute; content: ""; height: 22rem; width: 22rem; left: 2rem; bottom: 2rem;
    background: repeating-linear-gradient(45deg, #eee, #eee 4px, #ccc 4px, #ccc 8px); 
    border-radius: 50%; transition: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.racing_switch input:checked + .slider { background-color: var(--black); border-color: var(--Orange); }
.racing_switch input:checked + .slider:before {
    transform: translateX(30rem);
    background: var(--Orange);
    box-shadow: inset 0 0 5px rgba(255,255,255,0.5), 0 0 10px var(--Orange);
}

html {
    scroll-behavior: smooth;
    background-color: var(--White);
    font-size: 1px; /* Pollen uses 1rem = 1px logic */
}

body {
    color: var(--black);
    font-family: var(--primary-font);
    font-size: 16rem;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    padding: 11rem 14rem 12rem;
    justify-content: center;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 6rem;
    text-align: center;
    font-family: var(--primary-font);
    font-size: 14rem;
    font-weight: 500;
    line-height: 100%;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.btn:hover { transform: scale(1.05); }
.btn.color_black { background: var(--black); color: var(--White); }
.btn.color_white { background: var(--White); color: var(--black); }
.btn.color_grey { background: var(--grey); color: var(--black); }
.btn.color_orange { background: var(--Orange); color: var(--black); }

/* ==========================================================================
   Main Header (Loader & Logo)
   ========================================================================== */
.main_header {
    padding-inline: 16rem;
    position: relative;
    z-index: 2;
    padding-top: 250rem;
    padding-bottom: 20rem;
    overflow: hidden;
    background-color: var(--White);
}

.main_header > .inner_wrapper {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    display: flex; flex-direction: column; justify-content: center;
    background-color: var(--White);
    z-index: 999;
}

.progress_bar {
    position: relative;
    width: calc(100vw - 32rem);
    height: 12rem;
    margin-left: 16rem;
    z-index: 1;
    background: var(--grey);
}
.progress_bar > .progress {
    width: 0%;
    height: 100%;
    background-color: var(--black);
    transition: width 0.15s ease-in-out;
}
.progress_bar > .info {
    position: absolute; top: -40rem; left: 0; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--secondary-font);
    font-size: 17rem;
    font-weight: 400;
    line-height: 130%;
}
.rotating_words { display: block; position: relative; width: 300rem; height: 20rem; overflow: hidden; }
.rotating_words .word { position: absolute; top: 0; left: 0; opacity: 0; transform: translateY(100%); transition: all 0.3s ease; }
.rotating_words .word.active { opacity: 1; transform: translateY(0); }

.logo_wrapper {
    position: relative;
    width: 100%;
    opacity: 1;
    transition: filter 0.15s ease-in-out;
}
.intro_phrases {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    font-family: var(--secondary-font);
    font-size: 17rem;
    margin-bottom: 20rem;
    opacity: 0; /* Hidden until loaded */
    transform: translateY(20rem);
    transition: all 1s ease;
}
.loaded .intro_phrases { opacity: 1; transform: translateY(0); }

.logo {
    display: flex; justify-content: space-between;
    width: 100%;
    margin-bottom: 16rem;
    font-size: 16vw;
    font-family: var(--primary-font);
    font-weight: 600;
    line-height: 0.8;
    overflow: hidden;
}
.logo .letter {
    transform: translateY(100%);
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.loaded .logo .letter { transform: translateY(0); }

/* ==========================================================================
   Navigation Overlay
   ========================================================================== */
.main_nav_wrap {
    position: fixed;
    top: 16rem; right: 16rem;
    display: flex; justify-content: flex-end; align-items: flex-start;
    z-index: 100;
}
.timezone_clock {
    margin-right: 30rem; margin-top: 4rem;
    font-family: var(--primary-font); font-size: 15rem;
}
.menu_toggle { position: relative; z-index: 101; }

.menu_wrapper {
    position: absolute; top: 0; right: 0;
    opacity: 0; pointer-events: none;
    transition: all 0.4s ease;
}
.menu_wrapper.open {
    opacity: 1; pointer-events: auto;
    display: flex; flex-direction: column; gap: 6rem;
    width: 416rem; margin-top: -12rem; margin-right: -12rem;
}
.menu_wrapper_inner {
    position: relative; width: 100%; padding: 12rem 12rem 24rem;
    border-radius: 8rem; background: var(--Orange);
}
.menu_wrapper .buttons {
    display: flex; justify-content: flex-end; align-items: center;
    padding-bottom: 32rem;
}
.menu {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 2rem; padding-bottom: 60rem;
}
.menu_item {
    color: var(--black); text-decoration: none;
    font-family: var(--primary-font); font-size: 36rem;
    font-weight: 500; line-height: 125%; letter-spacing: -0.72rem;
    transition: transform 0.2s;
}
.menu_item:hover { transform: translateX(10rem); }
.menu_item .badge {
    display: inline-flex; padding: 3rem 6rem 4rem; margin-left: 8rem;
    border-radius: 24rem; border: 1px solid var(--black);
    font-size: 11rem; font-weight: 600; vertical-align: middle;
}
.social_links { display: flex; flex-direction: column; gap: 12rem; }
.social_link { color: var(--black); font-size: 17rem; text-decoration: none; font-weight: 500; }

.contacts_card {
    position: relative; width: 100%; padding: 24rem 12rem;
    border-radius: 8rem; background: var(--grey);
}
.contacts_card .title { font-size: 16rem; margin-bottom: 10rem; }
.contacts_card .email { font-size: 36rem; letter-spacing: -0.72rem; margin-bottom: 40rem; }
.contacts_card .copyright { font-family: var(--secondary-font); font-size: 12rem; }

/* ==========================================================================
   Page Content
   ========================================================================== */
.page_content {
    display: none; /* Hidden during load */
    background: var(--White);
    position: relative; z-index: 3;
}
.loaded .page_content { display: block; }

.container { max-width: 100vw; padding: 0 16rem; }
.section { padding: 100rem 0; }

/* Text Section */
.text_section { padding-top: 150rem; }
.huge_text {
    font-size: clamp(30rem, 5vw, 60rem);
    line-height: 1.1; font-weight: 500;
    max-width: 1200rem; margin-bottom: 40rem; letter-spacing: -1px;
}
.huge_text i { font-family: var(--secondary-font); font-weight: 400; color: var(--Orange); }
.tags { display: flex; gap: 10rem; }

/* Gallery Section */
.section_header { margin-bottom: 60rem; display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--grey); padding-bottom: 20rem;}
.section_header h3 { font-size: 40rem; font-weight: 500; letter-spacing: -1px; }
.section_header p { font-family: var(--secondary-font); font-size: 18rem; color: #555; }

.grid_wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16rem; margin-bottom: 40rem;
}

.media_item { 
    position: relative; width: 100%; border-radius: 4rem; overflow: hidden; background: #000; 
    aspect-ratio: 4/5; display: flex; flex-direction: column; justify-content: flex-end;
}
.media_item picture {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}
.media_item picture img { 
    display: block; width: 100%; height: 100%; object-fit: cover; 
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.2s; 
    opacity: 0.8;
}
.media_item:hover picture img { transform: scale(1.08); opacity: 0.5; }

.overlay_gradient {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 80%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
    z-index: 2; pointer-events: none;
}

.item_index {
    position: absolute; top: 16rem; right: 16rem; z-index: 3;
    font-family: var(--secondary-font); font-size: 24rem; color: var(--White);
    mix-blend-mode: overlay; font-weight: 500;
}

.item_info {
    position: relative; z-index: 3; padding: 20rem;
    display: flex; flex-direction: column; gap: 16rem; color: var(--White);
}
.info_header { display: flex; flex-direction: column; gap: 6rem; }
.car_cat {
    font-size: 11rem; font-family: var(--secondary-font); color: var(--Orange);
    letter-spacing: 1px; text-transform: uppercase;
}
.info_text h4 {
    font-size: 24rem; font-weight: 500; font-family: var(--primary-font);
    line-height: 1.1; letter-spacing: -0.5px; margin: 0;
}

.info_footer {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid rgba(255,255,255,0.2); padding-top: 16rem;
}

.tech_badge {
    display: inline-flex; align-items: center; gap: 6rem;
    font-family: var(--secondary-font); font-size: 11rem;
    background: rgba(255,255,255,0.1); padding: 4rem 8rem; border-radius: 4rem;
    backdrop-filter: blur(4px); letter-spacing: 0.5px;
}
.pulse_dot {
    width: 6rem; height: 6rem; background: #30d158; border-radius: 50%;
    animation: pulse 2s infinite; box-shadow: 0 0 10px #30d158;
}

.item_action {
    color: var(--White); font-size: 13rem; text-decoration: none;
    font-weight: 600; text-transform: uppercase; display: flex; align-items: center; gap: 4rem;
    transition: color 0.3s;
}
.media_item:hover .item_action { color: var(--Orange); }

.hidden_car { display: none; }
.hidden_car.show { display: block; animation: fadeUp 0.8s ease forwards; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(40rem); }
    to { opacity: 1; transform: translateY(0); }
}

.load_more { display: flex; justify-content: center; margin-top: 40rem; }

/* Accordion */
.accordion_list { border-top: 1px solid var(--black); }
.accordion_item { border-bottom: 1px solid var(--black); }
.acc_head { padding: 40rem 0; font-size: 32rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: 20rem; }
.acc_head span { font-family: var(--secondary-font); color: var(--Orange); }
.acc_body { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; }
.acc_body p { padding-bottom: 40rem; font-size: 20rem; line-height: 1.5; color: var(--text-muted); max-width: 800rem;}

/* ==========================================================================
   Main Footer
   ========================================================================== */
.main_footer {
    background-color: var(--black);
    color: var(--White);
    padding: 80rem 16rem 16rem;
    margin-top: 50rem;
    border-radius: 16rem 16rem 0 0;
}
.main_footer .top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 100rem; }
.main_footer .menu { display: flex; flex-direction: column; gap: 10rem; }
.main_footer .link { color: var(--White); text-decoration: none; font-size: 20rem; opacity: 0.8; }
.main_footer .link:hover { opacity: 1; }
.main_footer .mail { font-size: 56rem; color: var(--Orange); text-decoration: none; letter-spacing: -1.68rem; }

.main_footer .logo_wrapper { margin-bottom: 50rem; }
.main_footer .logo { font-size: 16vw; color: var(--White); }

.main_footer .bottom { display: flex; justify-content: space-between; font-family: var(--secondary-font); font-size: 17rem; border-top: 1px solid #333; padding-top: 20rem;}

/* ==========================================================================
   Animations
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(40rem); transition: all 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 768px) {
    .grid_wrapper { grid-template-columns: 1fr; }
    .media_item picture img { height: 400rem; }
    .main_header > .inner_wrapper { display: none; } /* Hide loader on mobile for simplicity */
    .huge_text { font-size: 32rem; }
}