:root {
    --bg-image: url('assets/paper_texture.jpg');
    --dm_bg-image: url('assets/paper_texture_darkmode.png');
    --transition-speed: 0.7s;
    --nav-highlight-color: #ffbea4;
    --button-highlight-color: #fff1a4;
    --highlighter-blend: multiply;
}

.dark-mode {
    --nav-highlight-color: #0b5a38;
    --button-highlight-color: #007da3;
    --highlighter-blend: screen;
}

@font-face {
  font-family: myFont; 
  src: url(assets/NanumPenScript-Regular.ttf);
}

body {
    margin: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transition: background-image var(--transition-speed) ease;
    overflow-x: hidden; 

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

body.dark-mode {
    background-image: var(--dm_bg-image);
}

.page-canvas {
    width: 1500px;
    min-height: 100vh; 
    position: relative; 
}

.menu-container {
    position: relative;
    width: 100%;
    height: 900px; 
    margin: 0 auto;
}
/*===================================================================*/
/*===================================================================*/
/* --- THEME ASSET SWAPPING --- */
/* Hide dark assets by default */
.dark-asset { 
    display: none !important; 
}

body.dark-mode .light-asset { 
    display: none !important; 
}
body.dark-mode .dark-asset { 
    display: block !important; 
}

/* ----------------------------------------------------------------------------------------------------------------------------*/
/* Specifically about MENU */
.nav-menu {
    position: absolute;
    top: 370px;
    left: 100px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.nav-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;

    position: relative;
    display: inline-block;
    z-index: 1;
}

.nav-btn img {
    width: clamp(180px, 25vw, 350px);
    height: auto;
    display: block;
    transition: opacity var(--transition-speed) ease;
    image-rendering: webkit-optimize-high-quality;
}

.nav-btn::before {
  content: "";
  position: absolute;
  bottom: 5px; left: 0;
  width: 0; height: 80%;
  background: var(--nav-highlight-color);
  z-index: -1;
  transition: width 0.4s cubic-bezier(.52,.34,.32,.99);
  border-radius: 20% 80% 15% 85% / 95% 20% 80% 15%; 
  filter: url(#marker-texture); 
  mix-blend-mode: var(--highlighter-blend);    
  opacity: 0.8;
  box-shadow: inset -2px 0 5px rgba(212, 175, 55, 0.3);
  clip-path: polygon(
    2% 5%, 98% 1%, 99% 95%, 4% 98%, 1% 50% 
  );
}

.nav-btn:hover::before {
  width: 100%;
  clip-path: polygon(0% 2%, 100% 0%, 98% 100%, 2% 96%, 0% 45%);
}
/* ----------------------------------------------------------------------------------------------------------------------------*/
/*===================================================================*/
/*===================================================================*/
/* This class represents the format of the LOGO BUTTONS */
.buttons {
  position: relative;
  display: inline-block;
  z-index: 1;
}

.buttons::before {
  content: "";
  position: absolute;
  bottom: 10px; left: 0;
  width: 0; height: 80%;
  background: var(--button-highlight-color);
  z-index: -1;
  transition: width 0.4s cubic-bezier(.52,.34,.32,.99); 
  border-radius: 20% 80% 15% 85% / 95% 20% 80% 15%; 
  filter: url(#marker-texture); 
  mix-blend-mode: var(--highlighter-blend);    
  opacity: 0.8;
  box-shadow: inset -2px 0 5px rgba(212, 175, 55, 0.3);
  clip-path: polygon(
    2% 5%, 98% 1%, 99% 95%, 4% 98%, 1% 50% /* Slight irregularities */
  );
}

.buttons:hover::before {
  width: 100%;
  clip-path: polygon(0% 2%, 100% 0%, 98% 100%, 2% 96%, 0% 45%);
}

.buttons img {
    width: clamp(60px, 10vw, 130px);
    height: auto;
    transition: opacity var(--transition-speed) ease;
    image-rendering: webkit-optimize-high-quality;
}
/*
.buttons:hover img {
    rotate: 5deg;
}*/
/*===================================================================*/
/*===================================================================*/
/* This class represents the format of the LOGOS SKETCHES */
.logos img {
    width: clamp(100px, 12vw, 200px);
    height: auto;
    transition: opacity var(--transition-speed) ease;
    image-rendering: webkit-optimize-high-quality;
}
/*===================================================================*/
/*===================================================================*/
/* This class represents the format of the TEXT SKETCHES */
.sketchText img {
    width: 210px;
    height: auto;
    transition: opacity var(--transition-speed) ease;
    image-rendering: webkit-optimize-high-quality;
}
/*===================================================================*/
/*===================================================================*/
/* This class represents the format of the TEXT PARAGRAPHS */
.text img {
    width: 450pt;
    height: auto;
    transition: opacity var(--transition-speed) ease;
    image-rendering: webkit-optimize-high-quality;
}
/*===================================================================*/
/*===================================================================*/
.text-layout {
    display: flex;
}

.text-layout img {
    width: 64%;
    position: relative;
    top: 14px;
    height: auto;
    transition: opacity var(--transition-speed) ease;
    image-rendering: webkit-optimize-high-quality;
}
/* ----------------------------------------------------------------------------------------------------------------------------*/
/* --- SECTION LAYOUT --- */
.content-section {
    height: 700px; 
    width: 100%;
    max-width: 1600px; 
    margin: 0 auto;
    padding: 60px 6.2%;
    position: relative;
    border-top: 1px solid rgba(0,0,0,0.05); 
}

body.dark-mode .content-section {
    border-top: 1px solid rgba(255,255,255,0.05);
}

.section-header {
    margin-bottom: 50px;
}

.section-title {
    width: 350px; 
    height: auto;
    image-rendering: webkit-optimize-high-quality;
}
/*===================================================================*/
/*===================================================================*/
/* For the Project Slider Section */
/* Container for the whole project area */
.projects-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    height: 100%;
    scrollbar-width: none;
}

.projects-slider::-webkit-scrollbar {
    display: none; 
}

.project-slide {
    flex: 0 0 100%; 
    height: 580px;
    scroll-snap-align: start;
    display: flex;
    align-items: center; 
}

.slide-content {
    position: relative; 
    display: inline-block;
    top: -6px;
    left: 40px;
}

.slide-content img{
    width: 950pt;
    height: auto;
    transition: opacity var(--transition-speed) ease;
    image-rendering: webkit-optimize-high-quality;
}

.top-overlay-btn {
    position: absolute;
    z-index: 50; 
    cursor: pointer;
}

.top-overlay-btn img {
    width: 157px; 
    height: auto;
    transition: transform 0.2s ease;
}

/* ===================================================================*/
/* ===================================================================*/
/* --- TURNTABLE STYLES --- */
.turntable-container {
    position: relative;
    width: 300px;
    height: auto;
}

.turntable-base {
    width: 100%;
    height: auto;
    display: block;
}

.vinyl-disc {
    position: absolute;
    top: 1%; 
    left: 1%; 
    width: 255px; 
    height: auto;
    transform-origin: center center; 
}

.audio-controls {
    display: flex;
    gap: 30px;
    margin-top: 30px;
    align-items: center;
}

.control-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s;
}

.control-btn:active {
    transform: scale(0.95);
}

.play-btn img { width: 50px;}
.next-btn img { width: 50px;}

/* --- THE SPIN ANIMATION --- */
@keyframes spinVinyl {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.is-spinning .vinyl-disc {
    animation: spinVinyl 4s linear infinite;
}

@media screen and (max-width: 1500px) {
    body {
        display: block; 
        overflow-x: hidden;
    }

    .page-canvas {
        transform: scale(calc(100vw / 1500));
        transform-origin: top center;
        
        left: 50%;
        margin-left: -750px; 
        position: absolute;
    }
}

/* ── Animation Section ─────────────────────────────────────────── */
 
.animation-video-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
 
.animation-video {
    width: 860px;         
    max-width: 90%;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.18);
    display: block;
}
 
body.dark-mode .animation-video {
    box-shadow: 4px 4px 0px rgba(255,255,255,0.08);
}