/* -------------------------------------------------------------
   WAVIT STUDIO - Style & Design System
   Highly premium, immersive creative studio theme.
   ------------------------------------------------------------- */

@property --accent-cyan {
    syntax: "<color>";
    inherits: true;
    initial-value: #5ef3e2;
}

/* Continuous elegant color flow animation */
@keyframes color-flow {
    0% { --accent-cyan: #5ef3e2; }
    25% { --accent-cyan: #9f5eff; }
    50% { --accent-cyan: #ff5e9f; }
    75% { --accent-cyan: #FFE600; }
    100% { --accent-cyan: #5ef3e2; }
}

/* Hide scrollbar globally */
::-webkit-scrollbar {
    display: none !important;
}
* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

:root {
    --bg-dark: #07070a;
    --accent-gold: #e2b769;
    --accent-cyan: #5ef3e2; /* Base fallback */
    --accent-purple: #9f5eff;
    --text-white: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.6);
    --font-sans: 'Outfit', sans-serif;
    --font-serif: 'Butler', 'Cormorant Garamond', serif;
    --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* Apply the continuous color change */
    animation: color-flow 12s linear infinite;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: var(--font-sans);
    overflow-x: hidden;
    /* Vertical scroll handled by .main-scroller */
    height: 100vh;
    width: 100vw;
    user-select: none;
    cursor: none;
    /* Hide default cursor to use custom interactive one */
}

/* Custom Interactive Cursor */
.custom-cursor {
    width: 8px;
    height: 8px;
    background-color: var(--text-white);
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10000;
    transition: width 0.2s, height 0.2s, background-color 0.2s;
    mix-blend-mode: difference;
}

.custom-cursor-follower {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.08s ease-out, width 0.3s, height 0.3s, border-color 0.3s, background-color 0.3s;
    mix-blend-mode: difference;
}

/* When hiding the custom cursors we want a smooth fade-out,
   but an instant snap back when made visible again. By
   defining the transition only on this helper class, adding
   `.cursor-hidden` will fade out, while removing it will
   make the cursor appear immediately. */
.cursor-hidden {
    opacity: 0 !important;
    transition: opacity 0.6s ease !important; /* Fades out smoothly */
}

/* Hover state for links / buttons */
body.hovered-btn .custom-cursor {
    width: 12px;
    height: 12px;
    background-color: var(--accent-cyan);
}

body.hovered-btn .custom-cursor-follower {
    width: 60px;
    height: 60px;
    border-color: var(--accent-cyan);
    background-color: rgba(94, 243, 226, 0.05);
}

/* Close state */
body.hovered-close .custom-cursor {
    background-color: #ff5e5e;
}

body.hovered-close .custom-cursor-follower {
    border-color: #ff5e5e;
    background-color: rgba(255, 94, 94, 0.1);
}

/* -------------------------------------------------------------
   Hero & Layout Structure
   ------------------------------------------------------------- */
.section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: start;
    opacity: 1;
    pointer-events: auto;
}

/* Video/Image Background & Ambience */
.video-background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.video-background-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    filter: brightness(0.95) contrast(1.05);
    position: absolute;
    top: 0;
    left: 0;
}

.video-background-fallback {
    animation: slowZoomPan 40s ease-in-out infinite alternate;
    z-index: 1;
}

.video-background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* Assumes 16:9 ratio (100 / 1.777) */
  min-height: 100vh;
  min-width: 177.77vh; /* Assumes 16:9 ratio (100 * 1.777) */
  transform: translate(-50%, -50%);
  object-fit: cover; /* Additional instruction for supported browsers */
  z-index: 2;
}

/* Slow dynamic scaling effect to keep page looking active and alive */
@keyframes slowZoomPan {
    0% {
        transform: scale(1.02) translate(0px, 0px);
    }

    50% {
        transform: scale(1.08) translate(-10px, 5px);
    }

    100% {
        transform: scale(1.03) translate(10px, -5px);
    }
}

.ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vh;
    background: radial-gradient(circle, rgba(159, 94, 255, 0.12) 0%, rgba(94, 243, 226, 0.05) 40%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
    animation: floatGlow 15s ease-in-out infinite alternate;
}

@keyframes floatGlow {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 0.8;
    }

    100% {
        transform: translate(-45%, -48%) scale(1.2) rotate(180deg);
        opacity: 1.1;
    }
}

.overlay-black {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* 0.5 Opacity match Figma */
    z-index: 2;
    backdrop-filter: blur(4px);
    /* modern luxury touch */
}

/* Content Container */
.content-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    z-index: 3;
}

/* -------------------------------------------------------------
   Navigation Items
   ------------------------------------------------------------- */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 48px 114px;
    pointer-events: auto;
    mix-blend-mode: difference;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: 100%;
    max-width: 900px;
    display: flex;
    justify-content: space-between;
    padding: 48px 0;
    pointer-events: auto;
    mix-blend-mode: difference;
}

#nav-3d {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: max-content;
}

.nav-item {
    background: none;
    border: none;
    outline: none;
    color: var(--text-white);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.15em;
    cursor: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    position: relative;
    transition: var(--transition-fast);
}

.nav-item .bracket {
    opacity: 0;
    transform: scale(0.8);
    transition: var(--transition-fast);
    font-weight: 200;
    font-size: 12px;
    color: var(--accent-cyan);
}

.nav-item .bracket:first-child {
    margin-right: 6px;
    transform: translateX(10px) scale(0.8);
}

.nav-item .bracket:last-child {
    margin-left: 6px;
    transform: translateX(-10px) scale(0.8);
}

.nav-item .nav-text {
    transition: var(--transition-fast);
    position: relative;
}

.nav-item .nav-text::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--accent-cyan);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover effects for navigation */
.nav-item:hover {
    color: var(--text-white);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.nav-item:hover .bracket {
    opacity: 1;
    transform: translateX(0) scale(1.1);
}

.nav-item:hover .nav-text {
    letter-spacing: 0.18em;
}

.nav-item:hover .nav-text::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* -------------------------------------------------------------
   Center Title (STUDIO WAVIT)
   ------------------------------------------------------------- */
.center-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    /* Matches Figma gap: -8px to 10px beautifully */
    flex-grow: 1;
}

.studio-label {
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 100;
    color: var(--text-white);
    letter-spacing: 0.79em;
    text-indent: 0.79em;
    opacity: 0; /* Keep hidden until animation starts */
    /* Delay the label fade-in so WAVIT appears first */
    animation: fadeInText 2s ease 1s forwards;
}

.main-title {
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 120px;
    line-height: .7;
    color: var(--text-white);
    display: flex;
    flex-direction: row;
    position: relative;
    user-select: none;
    /* Chain entrance animation first, then start floating */
    animation: title-entrance 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards, floatTitle 6s ease-in-out infinite alternate 2.5s;
}

/* Elegant Entrance Animation for WAVIT text */
@keyframes title-entrance {
    0% { opacity: 0; transform: translateY(60px) scale(0.85); filter: blur(20px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Precision tracking adjustments from Figma variables (ts1, ts2) */
.main-title .letter-w {
    letter-spacing: -0.20em;
    /* Figma: -10% */
    animation: moveW 4s ease-in-out infinite alternate;
}

.main-title .letter-a {
    letter-spacing: -0.16em;
    animation: moveA 4s ease-in-out infinite alternate;
}

.main-title .letter-v {
    letter-spacing: -0.25em;
    /* Figma: -27% */
    animation: moveV 4s ease-in-out infinite alternate;
}

.main-title .letter-i, .main-title .letter-t {
    letter-spacing: 0;
    animation: moveY 4s ease-in-out infinite alternate;
}

@keyframes fadeInText {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

@keyframes floatTitle {
    0% {
        transform: translateY(0px) rotate(0deg);
        filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
    }

    100% {
        transform: translateY(-8px) rotate(0.5deg);
        filter: drop-shadow(0 15px 30px rgba(159, 94, 255, 0.15));
    }
}

/* -------------------------------------------------------------
   SPA Pages Container & Panel
   ------------------------------------------------------------- */
.page-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-container.active {
    pointer-events: auto;
}

/* Glassmorphism Slide-up Panel */
.content-panel {
    width: 90%;
    max-width: 1200px;
    height: 80vh;
    background: rgba(10, 11, 16, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    backdrop-filter: blur(25px) saturate(160%);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
    padding: 60px;
    transform: translateY(120vh) scale(0.95);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
    overflow-y: auto;
}

.page-container.active .content-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.panel-inner {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease 0.4s;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.page-container.active .panel-inner {
    opacity: 1;
    transform: translateY(0);
}

.close-btn {
    position: absolute;
    top: 40px;
    right: 5%;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: none;
    z-index: 200;
    opacity: 0;
    transform: scale(0.7);
    transition: var(--transition-smooth);
}

.page-container.active .close-btn {
    opacity: 1;
    transform: scale(1);
}

.close-btn:hover {
    background: rgba(255, 94, 94, 0.15);
    border-color: rgba(255, 94, 94, 0.4);
    transform: rotate(90deg) scale(1.05);
}

.close-line {
    position: absolute;
    width: 20px;
    height: 1px;
    background-color: var(--text-white);
    transition: var(--transition-fast);
}

.close-btn:hover .close-line {
    background-color: #ff5e5e;
}

.close-line.line-1 {
    transform: rotate(45deg);
}

.close-line.line-2 {
    transform: rotate(-45deg);
}

/* Category header style inside panel */
.panel-header {
    margin-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 24px;
}

.category-tag {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.3em;
    color: var(--accent-cyan);
    text-transform: uppercase;
}

.panel-title {
    font-family: var(--font-serif);
    font-size: 48px;
    font-weight: 500;
    margin-top: 8px;
    letter-spacing: 0.02em;
}

/* Scrollbar styling for content panels */
.content-panel::-webkit-scrollbar {
    width: 6px;
}

.content-panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
}

.content-panel::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.content-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(94, 243, 226, 0.4);
}

/* -------------------------------------------------------------
   Interactive Showcase Grids
   ------------------------------------------------------------- */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.work-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: none;
    transition: var(--transition-smooth);
    aspect-ratio: 16 / 10;
}

.card-image-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.work-card:hover .card-image-wrapper img {
    transform: scale(1.08);
}

.work-card:nth-child(1) .card-image-wrapper img {
    filter: hue-rotate(0deg) saturate(1.2) contrast(1.1);
}

.work-card:nth-child(2) .card-image-wrapper img {
    filter: hue-rotate(45deg) saturate(1.4) brightness(0.9);
}

.work-card:nth-child(3) .card-image-wrapper img {
    filter: hue-rotate(90deg) saturate(1.1) contrast(1.2);
}

.work-card:nth-child(4) .card-image-wrapper img {
    filter: hue-rotate(135deg) saturate(1.5) brightness(0.95);
}

.work-card:nth-child(5) .card-image-wrapper img {
    filter: hue-rotate(180deg) saturate(1.3) contrast(1.1);
}

.work-card:nth-child(6) .card-image-wrapper img {
    filter: hue-rotate(225deg) saturate(1.6) brightness(0.85);
}

.work-card:nth-child(7) .card-image-wrapper img {
    filter: hue-rotate(270deg) saturate(1.2) contrast(1.3);
}

.work-card:nth-child(8) .card-image-wrapper img {
    filter: hue-rotate(315deg) saturate(1.4) brightness(0.9);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(7, 7, 10, 0.95) 0%, rgba(7, 7, 10, 0.4) 60%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    opacity: 0.9;
    transition: var(--transition-smooth);
}

.card-category {
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--accent-cyan);
    text-transform: uppercase;
    margin-bottom: 6px;
    transform: translateY(10px);
    opacity: 0;
    transition: var(--transition-smooth);
}

.card-title {
    font-family: var(--font-sans);
    font-size: 18px;
    font-weight: 500;
    color: var(--text-white);
    transform: translateY(10px);
    transition: var(--transition-smooth) 0.05s;
}

.card-description {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 8px;
    line-height: 1.5;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: var(--transition-smooth) 0.1s;
}

/* Hover Reveal for Cards */
.work-card:hover {
    border-color: rgba(94, 243, 226, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(94, 243, 226, 0.05);
    transform: translateY(-5px);
}

.work-card:hover .card-category {
    transform: translateY(0);
    opacity: 1;
}

.work-card:hover .card-title {
    transform: translateY(0);
}

.work-card:hover .card-description {
    max-height: 80px;
    opacity: 1;
    transform: translateY(0);
}

/* -------------------------------------------------------------
   3D Graphics Showcase (Interactive Mesh/Grid effect)
   ------------------------------------------------------------- */
.canvas-showcase-container {
    position: relative;
    width: 100%;
    height: 45vh;
    border-radius: 12px;
    overflow: hidden;
    background: #090a0f;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}

.interactive-mesh-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
}

.canvas-instructions {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    z-index: 5;
    pointer-events: none;
    text-transform: uppercase;
}

/* -------------------------------------------------------------
   Contact Form Styles
   ------------------------------------------------------------- */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-info h3 {
    font-family: var(--font-serif);
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 20px;
}

.contact-info p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 30px;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label {
    font-size: 9px;
    letter-spacing: 0.15em;
    color: var(--accent-cyan);
    text-transform: uppercase;
}

.detail-val {
    font-size: 15px;
    color: var(--text-white);
    font-weight: 300;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.input-group {
    position: relative;
    width: 100%;
}

.input-field {
    width: 100%;
    padding: 12px 0;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-white);
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 300;
    outline: none;
    transition: var(--transition-fast);
}

.input-label {
    position: absolute;
    top: 12px;
    left: 0;
    font-size: 12px;
    color: var(--text-muted);
    pointer-events: none;
    transition: var(--transition-fast);
}

.input-field:focus~.input-label,
.input-field:valid~.input-label {
    top: -12px;
    font-size: 9px;
    color: var(--accent-cyan);
    letter-spacing: 0.1em;
}

.input-field:focus {
    border-bottom-color: var(--accent-cyan);
}

.submit-btn {
    align-self: flex-start;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    color: var(--text-white);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    padding: 14px 36px;
    cursor: none;
    transition: var(--transition-fast);
    outline: none;
    text-transform: uppercase;
}

.submit-btn:hover {
    background: var(--text-white);
    color: var(--bg-dark);
    border-color: var(--text-white);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.1);
}

/* -------------------------------------------------------------
   Responsive Design for Mobile and Tablets
   ------------------------------------------------------------- */
@media (max-width: 1024px) {
    .top-nav {
        padding: 32px 40px;
    }

    .main-title {
        font-size: 80px;
    }

    .content-panel {
        padding: 40px;
    }
}

@media (pointer: coarse) {
    body {
        cursor: default !important;
    }

    .custom-cursor,
    .custom-cursor-follower,
    .cursor-tooltip {
        display: none !important;
    }
}

@media (max-width: 768px) {
    body {
        cursor: default;
    }

    .custom-cursor,
    .custom-cursor-follower,
    .cursor-tooltip {
        display: none !important;
    }

    .top-nav {
        flex-direction: column;
        gap: 16px;
        padding: 24px 20px;
    }

    .bottom-nav {
        flex-direction: column;
        gap: 16px;
        padding: 24px 20px;
    }

    .main-title {
        font-size: 56px;
    }

    .content-panel {
        padding: 30px 20px;
        height: 85vh;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .panel-title {
        font-size: 32px;
    }

    #nav-3d {
        position: static;
        margin: 0;
    }
}

@keyframes moveW {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-15px);
    }
}

@keyframes moveA {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-5px);
    }
}

@keyframes moveV {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(5px);
    }
}

@keyframes moveY {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(15px);
    }
}

/* -------------------------------------------------------------
   Main Scroll Snapping Container
   ------------------------------------------------------------- */
.main-scroller {
    height: 100vh;
    width: 100vw;
    overflow-y: hidden;
}

.main-scroller::-webkit-scrollbar {
    display: none;
}

/* -------------------------------------------------------------
   Motion Graphics Section — Figma Section 02 Layout
   Background: #FBFAFB, absolute-positioned decorative SVGs,
   3 video containers stacked vertically on the right side.
   The dual overlapping videos effect is preserved inside vc1.
   ------------------------------------------------------------- */

.mg-section {
    background-color: #FBFAFB;
    position: relative;
    overflow: hidden;
    /* Use 1440x900 reference frame — scale with vw/vh ratios */
    width: 100%;
    height: 100vh;
    /* Reset flex from .section so children use absolute layout */
    display: block;
}

/* ---- Page Number "02" — top-left (Figma: x=55, y=89) ---- */
.mg-page-number {
    position: absolute;
    top: calc(89 / 900 * 100%);
    left: calc(55 / 1440 * 100%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    z-index: 10;
}

.mg-number-deco {
    width: 42.91px;
    min-width: 42.91px;
    height: auto;
    display: block;
    opacity: 1;
    flex-shrink: 0;
}

.mg-number-text {
    font-family: 'Nanum Square', 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 54px;
    line-height: 1;
    color: #000000;
    letter-spacing: -0.01em;
    /* stroke via text-shadow simulation */
    -webkit-text-stroke: 0.5px #9A9A9A;
    paint-order: stroke fill;
}

.mg-num-grey {
    color: #9A9A9A;
    -webkit-text-stroke: 0.5px #9A9A9A;
}

/* ---- Star deco — top-right (Figma: x=883, y=-55) ---- */
.mg-star-deco {
    position: absolute;
    top: calc(-55 / 900 * 100%);
    left: calc(883 / 1440 * 100%);
    width: calc(579 / 1440 * 100%);
    height: auto;
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
    overflow: visible;
}

/* Outer star (dashed outline) — spins clockwise, slow */
#star-outer {
    transform-box: fill-box;
    transform-origin: center center;
    animation: spinCW 40s linear infinite;
}

/* Inner star (solid fill) — spins counter-clockwise, faster */
#star-inner {
    transform-box: fill-box;
    transform-origin: center center;
    animation: spinCCW 32s linear infinite;
}

@keyframes spinCW {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spinCCW {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* ---- X shape deco — left side (Figma: x=-96, y=392) ---- */
.mg-x-deco {
    position: absolute;
    top: calc(392 / 900 * 100%);
    left: calc(-96 / 1440 * 100%);
    width: calc(191 / 1440 * 100%);
    height: auto;
    pointer-events: none;
    z-index: 2;
}

/* ---- Small deco — far right (Figma: x=1342, y=540) ---- */
.mg-small-deco {
    position: absolute;
    top: calc(540 / 900 * 100%);
    left: calc(1342 / 1440 * 100%);
    width: calc(35.52 / 1440 * 100%);
    height: auto;
    pointer-events: none;
    z-index: 2;
}

/* ---- Video Containers Group (Figma: x=361, y=208, w=759) ---- */
/* Layout:
   vc1: full width, h=198 (y=0)
   vc2: left half (~372px), h=198 (y=212)
   vc3: right half (~372px), h=198 (y=212, x=387)
*/
.mg-video-containers.floating-layout {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    isolation: isolate;
}

.mg-floating-item {
    position: absolute;
    pointer-events: auto;
    will-change: transform;
}

/* Scattered positions and different scales for organic weight */
.mg-floating-item.item-1 {
    left: calc(180 / 1440 * 100%);
    top: calc(240 / 900 * 100%);
    width: calc(480 / 1440 * 100%);
    z-index: 6;
}

.mg-floating-item.item-2 {
    left: calc(840 / 1440 * 100%);
    top: calc(160 / 900 * 100%);
    width: calc(340 / 1440 * 100%);
    z-index: 8;
}

.mg-floating-item.item-3 {
    left: calc(480 / 1440 * 100%);
    top: calc(520 / 900 * 100%);
    width: calc(410 / 1440 * 100%);
    z-index: 7;
}

.mg-floating-item.item-4 {
    left: calc(950 / 1440 * 100%);
    top: calc(580 / 900 * 100%);
    width: calc(360 / 1440 * 100%);
    z-index: 9;
}

.mg-video-rect {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.mg-video-rect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 1;
    pointer-events: none;
    animation: hideYoutubeFlash 1.5s ease-in-out forwards;
}

@keyframes hideYoutubeFlash {
    0%, 60% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

.mg-video-rect::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 2;
    border-radius: 4px;
    background-image: 
        linear-gradient(to right, #9A9A9A 50%, transparent 50%), 
        linear-gradient(to bottom, #9A9A9A 50%, transparent 50%), 
        linear-gradient(to right, #9A9A9A 50%, transparent 50%), 
        linear-gradient(to bottom, #9A9A9A 50%, transparent 50%);
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-size: 16px 1px, 1px 16px, 16px 1px, 1px 16px;
    background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
    animation: mgMarchingAnts 1s linear infinite;
}

@keyframes mgMarchingAnts {
    0% { background-position: 0 0, 100% 0, 100% 100%, 0 100%; }
    100% { background-position: 16px 0, 100% 16px, calc(100% - 16px) 100%, 0 calc(100% - 16px); }
}

.mg-video-rect iframe {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    transform: scale(1.01);
}

#interaction-3d iframe {
    pointer-events: none;
}

.js-parallax {
    will-change: transform;
}

/* ---- Bottom wave frame deco (Figma: x=313, y=748.5) ---- */
.mg-frame-deco {
    position: absolute;
    left: calc(313 / 1440 * 100%);
    top: calc(738.5 / 900 * 100%);
    width: calc(1330 / 1440 * 100%);
    height: auto;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
}

#motion-graphics .panel-title {
    position: relative;
    z-index: 1;
}

.test-orange-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #ff8800;
    z-index: 1;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(255, 136, 0, 0.4);
}

/* -------------------------------------------------------------
   Motion Graphics — Full-screen sandwich videos
   bg-video: z=0 (behind all content)
   fg-video: z=20 (in front of all content, max is z=10)
   ------------------------------------------------------------- */
#alpha-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 4; /* Layered in front of decorative SVGs (z-index 1-3) but behind video cards */
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.5s ease-in-out;
}

/* ---- Minimalist Smash Shape Burst Animation ---- */
.mg-shape-burst {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 250px;
}

.mg-burst-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.mg-burst-circle.shockwave-1 {
    animation: blastRing 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mg-burst-circle.shockwave-2 {
    animation: blastRing 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.05s;
}

.mg-burst-star {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 1;
    animation: burstCore 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mg-burst-sparks {
    position: absolute;
    width: 150%;
    height: 150%;
    animation: sparkExpand 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes blastRing {
    0% { transform: scale(0.1); opacity: 1; }
    100% { transform: scale(2.0); opacity: 0; }
}

@keyframes burstCore {
    0% { transform: scale(0) rotate(-45deg); opacity: 1; }
    30% { transform: scale(2.5) rotate(45deg); opacity: 1; }
    100% { transform: scale(1.5) rotate(135deg); opacity: 0; }
}

@keyframes sparkExpand {
    0% { transform: scale(0.2); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Subtle Screen Shake for Impact */
.impact-shake {
    animation: smashShake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes smashShake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10% { transform: translate(-4px, 4px) rotate(-0.5deg); }
    30% { transform: translate(4px, -4px) rotate(0.5deg); }
    50% { transform: translate(-4px, -4px) rotate(-0.5deg); }
    70% { transform: translate(4px, 4px) rotate(0.5deg); }
    90% { transform: translate(-2px, 2px) rotate(0deg); }
}

/* ---- Minimalist Video Trail Effect ---- */
.mg-video-trail {
    position: absolute;
    pointer-events: none;
    z-index: 4;
    border: 0.5px solid #9A9A9A;
    border-radius: 4px;
    animation: trailFade 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes trailFade {
    0% { opacity: 0.5; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.97); }
}

/* -------------------------------------------------------------
   Cover Flow View Toggle Button & Mode
   ------------------------------------------------------------- */
#view-toggle-btn {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    color: #000000;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    padding: 36px 14px;
    text-transform: uppercase;
    cursor: none;
    transition: var(--transition-fast);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    backdrop-filter: blur(5px);
}

#view-toggle-btn:hover {
    background: #000000;
    color: #ffffff;
    border-color: #000000;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-50%) translateX(15px);
}

.mg-video-containers {
    perspective: 1200px;
}

.mg-floating-item.cover-flow-active {
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* -------------------------------------------------------------
   Carousel Video Counter
   ------------------------------------------------------------- */
.carousel-counter {
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #000000;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.counter-num-box {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 18px;
    width: 24px;
    text-align: center;
    vertical-align: middle;
}
.counter-divider {
    vertical-align: middle;
    margin: 0 4px;
    letter-spacing: 0.1em;
}
#total-vid-count {
    vertical-align: middle;
    letter-spacing: 0.1em;
}
#current-vid-idx {
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.carousel-counter.hidden {
    opacity: 0;
}

.cursor-tooltip {
    position: fixed;
    z-index: 10001;
    background: #000000;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform-origin: top left;
    mix-blend-mode: normal;
    animation: tooltip-dangle-out 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.cursor-tooltip.visible {
    animation: tooltip-dangle-in 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes tooltip-dangle-in {
    0% { opacity: 0; transform: scale(0) rotate(-45deg); }
    50% { opacity: 1; transform: scale(1.1) rotate(15deg); }
    75% { transform: scale(0.95) rotate(-5deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes tooltip-dangle-out {
    0% { opacity: 1; transform: scale(1) rotate(0deg); }
    100% { opacity: 0; transform: scale(0) rotate(-45deg); }
}

/* Custom Next Cursor and Click Feedback Effects */

/* Update the custom-cursor transition to prevent JS fighting */
.custom-cursor {
    left: 0;
    top: 0;
    transition: width 0.2s, height 0.2s, background-color 0.2s, border-radius 0.2s ease;
    /* Removed 'transform' from transition to completely eliminate lag */
}

.custom-cursor-follower {
    left: 0;
    top: 0;
}

/* Base custom cursor style in 'Next' state */
.custom-cursor.next-cursor-active {
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: none;
    color: var(--text-white);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border-radius: 50%;
    mix-blend-mode: difference;
}

/* Make follower visible and stylized when "Next" cursor is active */
.next-cursor-active ~ .custom-cursor-follower,
.next-cursor-active + .custom-cursor-follower {
    opacity: 1;
    width: 60px;
    height: 60px;
    border-color: var(--text-white);
    background-color: rgba(255, 255, 255, 0.05);
    transform: translate(-50%, -50%) scale(1);
}

/* Click feedback: Arrow shoots right, wraps around to the left (movement only) */
@keyframes arrow-shoot {
    0% { 
        transform: translate(-50%, -50%); 
        opacity: 1; 
    }
    40% { 
        transform: translate(calc(-50% + 25px), -50%); 
        opacity: 0; 
    }
    50% { 
        transform: translate(calc(-50% - 25px), -50%); 
        opacity: 0; 
    }
    100% { 
        transform: translate(-50%, -50%); 
        opacity: 1; 
    }
}

.custom-cursor.clicked {
    animation: arrow-shoot 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Elegant Click Feedback: Quick tactile snap inward, smooth outward bloom (No Glow) */
@keyframes follower-shrink-glow {
    0% { 
        transform: translate(-50%, -50%) scale(1); 
        border-color: var(--text-white); 
        border-width: 1px;
        background-color: rgba(255, 255, 255, 0.05);
        box-shadow: none;
    }
    15% { 
        /* Quick tactile snap inward, border changes to dynamic point color */
        transform: translate(-50%, -50%) scale(0.85); 
        border-color: var(--accent-cyan); 
        border-width: 2px;
        background-color: rgba(255, 255, 255, 0.05);
        box-shadow: none; /* Glow removed */
    }
    35% { 
        /* Elegant outward bloom (ripple) with dynamic point color border */
        transform: translate(-50%, -50%) scale(1.1); 
        border-color: var(--accent-cyan);
        border-width: 1px;
        background-color: rgba(255, 255, 255, 0.02);
        box-shadow: none; /* Glow removed */
    }
    100% { 
        /* Smoothly settle back to default white */
        transform: translate(-50%, -50%) scale(1); 
        border-color: var(--text-white); 
        border-width: 1px;
        background-color: rgba(255, 255, 255, 0.05);
        box-shadow: none;
    }
}

.custom-cursor-follower.clicked {
    /* Set higher priority to override standard tracking transform smoothly */
    animation: follower-shrink-glow 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Cute spam-click speech bubble attached to the trailing follower circle */
.custom-cursor-follower.calm-down::before {
    content: 'calm down TT';
    position: absolute;
    left: 55px; /* Shift right to clear the larger follower circle width */
    top: -5px;
    background: var(--text-white);
    color: var(--bg-dark);
    padding: 6px 12px;
    border-radius: 12px;
    border-bottom-left-radius: 2px; /* Speech bubble tail anchor */
    font-size: 11px;
    font-family: var(--font-sans);
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform-origin: bottom left;
    /* Handles both smooth pop-in and fade-out sequentially over 1.5 seconds */
    animation: bubble-lifecycle 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Combined In/Out Animation for the speech bubble */
@keyframes bubble-lifecycle {
    0% { transform: scale(0) translateY(10px); opacity: 0; }
    15% { transform: scale(1) translateY(0); opacity: 1; }    /* Smooth Pop In */
    85% { transform: scale(1) translateY(0); opacity: 1; }    /* Stay visible */
    100% { transform: scale(0) translateY(-10px); opacity: 0; } /* Elegant Fade Out */
}

/* Hide UI elements during the initial loading screen */
body.is-loading .custom-cursor,
body.is-loading .custom-cursor-follower,
body.is-loading .top-nav,
body.is-loading .bottom-nav {
    opacity: 0 !important;
    pointer-events: none !important;
}

body.is-loading {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Smooth fade-in for navigation bars when revealed */
.top-nav, .bottom-nav {
    transition: opacity 1.5s ease;
}

/* Horizontal Scroll Layout Setup */
body {
    overflow-x: hidden;
    /* body height will be calculated and set dynamically via JS */
}

#horizontal-track {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    flex-direction: row;
    will-change: transform;
}

.section {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    position: relative;
    overflow: hidden; /* Prevents inner content from breaking the layout */
}

.custom-cursor-follower.show-copy-bubble::before {
    content: 'click to copy.!';
    position: absolute;
    left: 55px;
    top: -5px;
    background: var(--accent-cyan);
    color: var(--bg-dark);
    padding: 6px 12px;
    border-radius: 12px;
    border-bottom-left-radius: 2px;
    font-size: 11px;
    font-family: var(--font-sans);
    font-weight: bold;
    white-space: nowrap !important;
    width: max-content;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform-origin: bottom left;
    animation: bubble-pop-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bubble-pop-in {
    0% { transform: scale(0) translateY(10px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}


/* Change copy bubble text on successful click */
.custom-cursor-follower.show-copy-bubble.copied-success::before {
    content: 'DONE.!' !important;
}

/* Remove blend mode and set solid colors for the spam-click bubble */
.custom-cursor-follower.calm-down {
    mix-blend-mode: normal !important;
}

.custom-cursor-follower.calm-down::before {
    background: #ffffff !important;
    color: #000000 !important;
}

/* Remove animating dashed border from Section 03 Carousel */
.mg-video-rect.graphics-no-border::after {
    display: none !important;
}

/* -------------------------------------------------------------
   Section 05: Entire Works Video Grid & Overlay
   ------------------------------------------------------------- */
/* 브라우저 기본 스크롤바 완벽 숨김 및 스크롤 차단 */
#works-scroll-container::-webkit-scrollbar {
    display: none;
}
#works-scroll-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: hidden !important;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 5%;
}

.video-card {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: var(--transition-smooth);
}

.video-card:hover {
    border-color: rgba(94, 243, 226, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(94, 243, 226, 0.05);
    transform: translateY(-5px);
}

/* iframe 위를 덮어 커서 이벤트를 가로채는 투명 오버레이 */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: none;
    background: rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}

.video-overlay:hover {
    background: rgba(0, 0, 0, 0); /* 마우스를 올리면 투명해져 영상이 선명하게 보임 */
}

/* -------------------------------------------------------------
   Section 05: Grid to Single View (Expanded Mode) & Cursor Reset
   ------------------------------------------------------------- */
/* 단일 뷰 활성화 시 그리드 해제 */
#youtube-grid.single-view {
    display: block; 
}

/* 단일 뷰 모드에서는 기본적으로 모든 카드를 숨김 (인라인 스타일 무시) */
#youtube-grid.single-view .video-card:not(.expanded) {
    display: none !important; 
}

/* 선택된(expanded) 비디오 카드만 전체 너비로 노출 */
#youtube-grid.single-view .video-card.expanded {
    display: block; 
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    border-color: var(--accent-cyan);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(94, 243, 226, 0.1);
}

/* 선택된 비디오 카드가 확대된 상태에서는 호버 효과를 완전히 삭제 */
#youtube-grid.single-view .video-card.expanded:hover {
    transform: none !important;     /* 위로 가라앉거나 들리는 움직임 제거 */
    border-color: var(--accent-cyan) !important; /* 확대되었을 때의 테두리 색상 그대로 고정 */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(94, 243, 226, 0.1) !important; /* 확대되었을 때의 고급스러운 그림자 그대로 고정 */
}

/* 확대된 상태에서는 오버레이를 지워 유튜브 플레이어를 직접 조작할 수 있게 함 */
#youtube-grid.single-view .video-card.expanded .video-overlay {
    display: none; 
}

/* 인라인으로 적용된 pointer-events: none 무력화 (클릭 활성화) */
#youtube-grid.single-view .video-card.expanded iframe {
    pointer-events: auto !important; 
}

/* ---- System Cursor Restore (영상 확대 시 적용) ---- */
body.video-expanded-mode {
    cursor: auto !important; /* 기본 시스템 커서 활성화 */
}

/* 커스텀 커서 강제 숨김 */
body.video-expanded-mode .custom-cursor,
body.video-expanded-mode .custom-cursor-follower {
    display: none !important; 
}

/* 네비게이션 버튼 등에도 포인터(손가락) 커서가 정상적으로 나오게 처리 */
body.video-expanded-mode .nav-item, 
body.video-expanded-mode .magnetic-btn,
body.video-expanded-mode button {
    cursor: pointer !important; 
}

/* --- Touch Device Interactions --- */
.touch-nav-buttons {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(34vw * 1.5 + 120px);
    max-width: 90%;
    justify-content: space-between;
    bottom: auto;
    z-index: 200;
    pointer-events: none;
}
/* Clean & Chic Architectural Navigation Buttons (Dark Sections Default) */
.touch-nav-btn {
    pointer-events: auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: var(--font-sans);
    font-size: 20px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.touch-nav-btn:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.2);
}

.btn-click-effect {
    transform: scale(0.8) !important;
    transition: transform 0.15s ease-out !important;
}

.mute-toggle-btn {
    position: absolute;
    bottom: calc(12% + 40px); /* Positioned exactly above the carousel counter */
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    cursor: pointer;
}

/* Clean & Minimalistic Grid Entrance Transition */
@keyframes minimalReveal {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.video-card {
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.video-card.reveal-animate {
    animation: minimalReveal 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Clean & Chic Architectural Navigation Buttons (Light Section Override - Section 2) */
.mg-section .touch-nav-btn {
    border-color: rgba(0, 0, 0, 0.15);
    color: #000000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.mg-section .touch-nav-btn:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Media Controls Container Group Positioning */
.media-controls-container {
    position: absolute;
    bottom: calc(12% + 40px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 101;
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

/* Flawless Visual Synchronization for Play/Pause and Mute Buttons */
.media-controls-container .submit-btn {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
    fill: currentColor;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.media-controls-container .submit-btn:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* Media Controls Color Synchronization for Light Background (Section 2) */
.mg-section .media-controls-container .submit-btn {
    border-color: rgba(0, 0, 0, 0.15);
    color: #000000 !important;
}

.mg-section .media-controls-container .submit-btn:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 1. Reset scale hack, logic handled natively in JS now */
#interaction-3d .card-3d {
    transform: none;
}

/* 2. Hide ONLY Pagination Controls and Indicator during Expanded Mode (Section 5) */
body.video-expanded-mode #page-indicator,
body.video-expanded-mode .scroll-btn.up-btn,
body.video-expanded-mode .scroll-btn.down-btn {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease;
}

/* 3. Smooth Transition when expanding/collapsing a video card in Section 5 */
.video-card {
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                height 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 0.4s ease;
    will-change: transform, opacity, width, height;
}

.video-card.expanded {
    z-index: 100;
    border-radius: 0;
}

/* Unified Absolute Alignment for ALL Prev/Next Buttons (Section 2 & 3) */
.touch-nav-buttons {
    width: calc(100vw - 160px) !important;
    max-width: 1600px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;
}

/* --- Section 5: Expanded Mode Overrides --- */

/* 1. Lock background scrolling when a video is expanded */
body.video-expanded-mode {
    overflow: hidden !important;
    touch-action: none !important; /* Prevent mobile pull-to-refresh or accidental scrolling */
}

/* 2. Re-enable pointer events for the expanded YouTube iframe */
#youtube-grid .video-card.expanded iframe {
    pointer-events: auto !important;
    z-index: 10 !important; /* Ensure iframe is on top and clickable */
}

/* 3. Disable pointer events on the overlay so clicks pass through to the YouTube player */
#youtube-grid .video-card.expanded .video-overlay {
    pointer-events: none !important;
}

/* --- Section 4: Live 2D Light Theme Custom Adjustments --- */
#live2d-section, .section-4-container-id { /* Replace with actual Section 4 ID/Class if needed */
    background: #ffffff !important;
    color: #000000 !important;
}

#live2d-section .touch-nav-btn {
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

#live2d-section .touch-nav-btn:hover {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

#live2d-section .media-controls-container .submit-btn {
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #000000 !important;
}

#live2d-section .media-controls-container .submit-btn:hover {
    background: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure iframe fade transitions are enabled */
#interaction-3d iframe,
#live2d-section iframe {
    transition: opacity 0.4s ease !important;
    opacity: 1;
}