@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Montserrat:wght@300;400;600&family=Noto+Sans+JP:wght@300;400;700&family=Pinyon+Script&family=Shippori+Mincho:wght@400;500;700&display=swap');

:root {
    --bg-color: #0d0d0d;
    --text-color: #e0e0e0;
    --accent-color: #ffffff;
    /* User hates yellow, switched to White */
    --accent-color-hover: #cccccc;
    --secondary-bg: rgba(20, 20, 20, 0.85);
    --border-color: #333;
    --font-heading: 'Shippori Mincho', serif;
    /* Changed from Cinzel to allow lowercase */
    --font-script: 'Pinyon Script', cursive;
    /* New Script Font */
    --font-body: 'Montserrat', 'Noto Sans JP', sans-serif;
    --overlay-color: rgba(0, 0, 0, 0.7);
}

/* Reset & Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.8;
    overflow-x: hidden;
    overflow-y: scroll;
    /* Force scrollbar to prevent layout shift */
}

/* Background Handling - Parallax */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #000;
    /* Removed default kabe image to prevent flash. Default is black. */
    background-image: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -2;
    filter: brightness(0.4) grayscale(0.5);
    /* No transition on image to allow snapping */
}

/* Standard pages (Link, BBS etc) */
body.page-standard::before {
    background-image: url('../images/kabe_1920x1200.jpg');
}

/* Page Specific Backgrounds */
/* Page Specific Backgrounds */
body.page-top::before {
    background-image: url('../images/IMG_1168.jpg');
    /* User Specified Real Photo */
    filter: brightness(0.5) contrast(1.1);
    /* Slightly dark for text pop */
}

/* Default fallback for standard pages that don't match specific classes below but are not Top */
/* We use a class 'page-standard' or just rely on specific overrides. 
   Since 'body::before' below is now None/Black, we need to add a rule for the "Standard/Kabe" background 
   if we want it to appear on pages like Link/BBS. 
   But wait, 'body::before' below will be changed to have NO image by default to prevent flash.
   So we need to selectively apply 'kabe'.
   
   Actually, let's make the DEFAULT black, and apply 'kabe' to a 'page-standard' class, 
   OR apply 'kabe' to 'body:not(.page-top):not(.page-introduction)...' (too complex).
   
   Better: Let's set the default to BLACK. 
   And for pages that SHOULD have 'kabe' (Link, BBS, etc), we need to add a class to them or let them be black?
   Original site had 'kabe'?
   Let's keep 'kabe' but make it transparent initially? No.
   
   Let's try: Default is BLACK.
   We add a new rule: `body:not([class*="page-"])::before` -> kabe?
   
   Or, we simply fix the flashing by removing the transition on background-image.
   The transition `transition: background-image 1s ease;` causes the "cross-fade" effect which shows the underlying/previous image if any.
   If we remove it, it snaps.
   
   AND we ensure the correct class is present on HTML.
   If 'body::before' has 'kabe', and 'body.page-introduction::before' has 'sora', 
   and both are defined.
   If HTML has 'page-introduction', the 'sora' rule wins.
   So 'kabe' should never paint. (CSS blocks painting until styles resolved).
   
   The "flashing" might be the 1s transition!
   If it transitions from "Default (Kabe)" to "Specific (Sora)" because the class was added by JS late?
   But I added the class to HTML.
   So it should start as Sora.
   But if `body` starts with `opacity: 0` and then `opacity: 1`.
   
   Wait, if `body::before` has `transition`, it transitions from *Initial State*?
   Initial state of `body::before`?
   If I load `introduction.html`, the class `page-introduction` is on body.
   So `body.page-introduction::before` matches. Value is `sora`.
   So it renders `sora`.
   
   Why does user see "unrelated photo"?
   Maybe "unrelated photo" IS `sora` but they expected something else?
   No, they said "Small Message background is same as TOP".
   TOP is `IMG_1168`. Standard is `kabe`.
   If Small Message shows `IMG_1168`, it has `page-top`.
   If Small Message shows `kabe`, it means `page-smallmessage` didn't match.
   
   I will FORCE `page-smallmessage` with `!important`.
   And I will REMOVE the transition.
*/

/* Fix for Homepage Scroll Issue: Collapse the unused .container */
body.page-top .container {
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

body.page-introduction::before {
    background-image: url('../images/introduction_bg.bmp');
    /* Use the raw BMP which is correct */
    filter: brightness(0.5) sepia(0.2);
    /* Ensure cover is applied */
    background-size: cover !important;
    background-position: center;
    background-repeat: no-repeat;
}

body.page-members::before {
    background-image: url('../images/Clip0001.bmp');
    /* Members: Abstract/Distinct */
    filter: brightness(0.4) contrast(1.1);
}

body.page-history::before {
    background-image: url('../images/aki.bmp');
    /* History: Nostalgic Aki */
    filter: brightness(0.4) sepia(0.4);
}

body.page-movies::before {
    background-image: url('../images/P1020423.JPG');
    /* Movies: Scene */
}

body.page-works::before {
    background-image: url('../images/kuren.bmp');
    /* Works: Crane/Construction feel */
    filter: brightness(0.3) contrast(1.2);
}

body.page-smallmessage::before {
    background-image: url('../images/sora.bmp') !important;
    /* Small Message: Sora (Sky) */
    filter: brightness(0.4) sepia(0.3);
}

body.page-tapnow::before {
    background-image: url('../images/denki.bmp');
    /* TapNow: Energetic */
}

/* Overlay for text readability */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    z-index: -1;
    pointer-events: none;
}

a {
    color: var(--text-color);
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
    color: var(--accent-color);
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Layout Transformation */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: 1000px;
    /* Reduced from 1200px to prevent being too wide */
    margin: 0 auto;
    padding: 120px 20px 20px 20px;
    position: relative;
    z-index: 1;
}

/* Header / Sidebar Refined (Kobe Bridge Style Copy) */
.sidebar {
    width: auto !important;
    height: 80px !important;
    /* Standard Height */
    background-color: #000 !important;
    /* Solid Black like reference */
    border: none !important;
    padding: 0 50px !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000 !important;
    /* Highest */
    z-index: 10000 !important;
    /* Highest */
    visibility: visible !important;
}

body.loaded .sidebar {
    visibility: visible !important;
}

/* Header Logo Image Wrapper */
.site-logo-wrapper {
    width: 250px;
    /* Adjust as needed */
    height: 100%;
    display: flex;
    align-items: center;
    border: none !important;
    padding: 0;
    margin: 0;
    background: transparent !important;
}

.site-logo-img {
    max-height: 50px;
    /* Fit in header */
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
    /* Make it pop against black */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
}

/* Clear old text based styles if any remain */
.sidebar>div:first-child {
    /* font-size: 0 !important; Removed to allow fallback text if JS fails */
    background: transparent !important;
    border: none !important;
}

.sidebar>div:first-child::before,
.sidebar>div:first-child::after {
    display: none !important;
}

/* Nav Container */
.main-nav {
    display: flex;
    align-items: center;
    height: 100%;
}

/* Nav List Horizontal */
.nav-list {
    display: flex !important;
    gap: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center !important;
    list-style: none !important;
    /* Fix for bullets appearing */
}

/* Nav Item Styling */
.nav-item {
    margin: 0 !important;
    position: relative;
    /* For sub-menu positioning */
    flex-shrink: 0;
    list-style: none !important;
    /* Double safety */
}

/* Link Styling */
.nav-item>a {
    display: block;
    /* Make block to ensure hit area and stability */
    color: #fff;
    text-transform: none;
    font-size: 13px;
    letter-spacing: 1px;
    padding: 30px 0 !important;
    /* Full height hit area */
    transition: color 0.3s ease, text-shadow 0.3s ease;
    /* Only transition paint properties */
    font-weight: 400;
    /* Ensure weight doesn't change */
    text-decoration: none;
}

.nav-item>a:hover {
    color: var(--accent-color);
    /* Reduced shadow to prevent 'vibrating' look */
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Navigation Menu Dropdown Logic */
.sub-menu {
    position: absolute;
    top: 100%;
    /* Below header */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10, 10, 10, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 4px 4px;
    padding: 10px 0;
    min-width: 160px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    /* Hidden by default */
    transition: all 0.2s ease-in-out;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    z-index: 10000;
    /* Above header */
    display: block;
    /* Ensure format */
}

.nav-item:hover .sub-menu {
    opacity: 1;
    visibility: visible;
}

.sub-menu li a {
    display: block;
    padding: 8px 20px;
    font-size: 14px;
    color: #ccc;
    font-family: var(--font-body);
    text-transform: none;
    letter-spacing: 0;
    text-align: left;
}

.sub-menu li a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent-color);
}

.nav-item.has-sub>a::after {
    content: "\25BE";
    /* Fixed corrupted character to small down triangle */
    margin-left: 5px;
    font-size: 14px;
    /* Increased from 10px */
    color: #eee;
    /* Increased from #666 to be visible */
    vertical-align: middle;
    /* Ensure alignment */
}

/* Clear the old CSS forcing inline block on children */
.sidebar>div:nth-child(3),
.sidebar>.menu-item {
    display: none;
    /* Hide originals, JS will rebuild */
}

/* Message Section - Compact & Subtle */
.message-section {
    position: relative;
    width: 100%;
    min-height: auto;
    /* Allow shrink */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    background: rgba(0, 0, 0, 0.8);
    /* Dark backing */
    padding: 60px 20px;
    /* Reduced padding */
    margin-top: -5vh;
    /* Pull up a bit */
}

.poetic-message {
    font-family: "Shippori Mincho", serif;
    font-size: 13px;
    /* Small refined text */
    line-height: 2.5;
    color: #ccc;
    text-align: center;
    max-width: 800px;
    letter-spacing: 0.15em;
    text-shadow: none;
    opacity: 1;
    margin: 0 auto 20px auto;
    padding: 0;
    background: transparent;
    animation: fadeUp 2s ease-out forwards 1s;
}

.copyright-footer {
    font-family: var(--font-body);
    font-size: 9px;
    color: #555;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 20px;
}

/* Main Content Styling */
.main {
    background-color: var(--secondary-bg) !important;
    padding: 60px !important;
    border-radius: 4px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

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

h1 {
    font-family: var(--font-heading);
    font-size: 36px !important;
    font-weight: 700;
    color: var(--accent-color) !important;
    border-bottom: 2px solid var(--accent-color) !important;
    padding-bottom: 15px !important;
    margin-bottom: 40px !important;
    text-align: center;
    letter-spacing: 3px;
    text-transform: none;
    /* Changed from uppercase to none */
}

/* Typography Enhancements */
p,
.desc {
    font-size: 16px;
    line-height: 2;
    margin-bottom: 30px;
    color: #ccc;
    text-align: justify;
}

.spec,
.staff,
.comment,
.footer-msg {
    border-color: var(--accent-color) !important;
    color: #aaa !important;
    font-size: 13px !important;
}

/* Image Enhancements */
img {
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    transition: transform 0.4s ease, filter 0.4s ease;
    border: none !important;
    /* Remove old borders */
}

img:hover {
    transform: scale(1.02);
    filter: brightness(1.2);
}

/* Grid for Galleries */
div[style*="display:flex"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px !important;
}

/* Specific overrides for main image which was flex */
.main>div[style*="margin-bottom:20px"] {
    display: block !important;
    text-align: center;
}

.main>div[style*="margin-bottom:20px"]>img {
    max-width: 100% !important;
    width: auto;
    max-height: 600px;
    margin-bottom: 30px;
}

/* Member Grid */
.member-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 40px !important;
}

.member-box {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 4px;
    transition: background 0.3s ease, transform 0.3s ease !important;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.member-box:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-color);
}

.member-name {
    color: var(--accent-color);
    font-family: var(--font-heading);
    font-size: 16px;
    margin-top: 15px;
}

/* Hero Landing Section */
#hero-landing {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    /* Better mobile support */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    background: transparent;
    padding-top: 80px;
    pointer-events: none;
    overflow: hidden;
    /* Ensure triangle doesn't cause scroll */
}

/* Background Geometry (Triangle) */
.hero-bg-element {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60vw;
    /* Very large */
    height: 60vw;
    transform: translate(-50%, -50%);
    opacity: 0.2;
    /* Subtle */
    z-index: 0;
    /* Behind text */
    pointer-events: none;
}

.triangle-svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: rgba(255, 255, 255, 0.6);
    /* Increased opacity */
    /* Thin white line */
    stroke-width: 0.8;
    /* Increased from 0.15 for better mobile visibility */
    /* Adjusted: slightly thicker than 0.05 */
    animation: floatRotate 60s linear infinite;
    /* Very slow rotation */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.2));
}

@keyframes floatRotate {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

.hero-content {
    text-align: center;
    animation: fadeUp 1.5s ease-out forwards;
    pointer-events: auto;
    padding-bottom: 20px;
    /* Add padding to ensure separation from bottom elements */
}

/* Hero Title - MASSIVE & WHITE */
/* Hero Title - Sophisticated & Elegant */
.hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 11vw;
    font-weight: 400;
    /* Regular weight for Cormorant is quite thin/elegant */
    font-style: italic;
    /* Adds that "fashion/cinematic" flair */
    color: #fff;
    text-transform: none;
    letter-spacing: 0.02em;
    margin: 0;
    padding: 0;
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
    opacity: 0;
    animation: revealText 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.5s;
    line-height: 1;
    border-bottom: none !important;
    /* Force remove default border */
    position: relative;
    padding-bottom: 0px;
    margin-bottom: 50px;
    /* Increased space to 50px */
    display: inline-block;
}

.hero-title::after {
    content: '';
    position: absolute;
    bottom: -30px;
    /* Moved lower to -30px (Center of 60px gap) */
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    transform: scaleY(0.6);
    /* Thin but visible (approx 0.6px) */
    transform-origin: bottom;
}

/* Subtitle - Small & Grey */
/* Subtitle - Sophisticated Lowercase */
.hero-subtitle {
    font-family: 'Pinyon Script', cursive;
    /* Elegant Cursive Font */
    font-size: 24px;
    /* Larger because script fonts are smaller visually */
    font-weight: 400;
    color: #e0e0e0;
    /* Slightly brighter */
    letter-spacing: 0.1em;
    /* Cursive needs less spacing to connect */
    text-transform: lowercase;
    opacity: 0;
    animation: revealText 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards 1s;
    margin-top: 10px;
    /* Add a little gap from the line */
}

/* Scroll Indicator */
.scroll-indicator {
    /* New Vertical Scroll Style */
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-bottom: 10px;
    /* Moves it lower (closer to edge) */
    z-index: 50;
    width: auto;
    height: auto;
    overflow: visible;
}

.scroll-indicator span {
    writing-mode: horizontal-tb;
    /* Horizontal */
    font-size: 10px;
    letter-spacing: 0.2em;
    color: #fff;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    margin-bottom: 5px;
    opacity: 0.8;
}

.scroll-indicator .line {
    width: 1px;
    transform: scaleX(0.5);
    /* Visually thinner (0.5px) */
    height: 60px;
    background: #fff;
    opacity: 0.7;
    /* Slightly more subtle */
    animation: scrollPath 2.5s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

@keyframes revealText {
    0% {
        opacity: 0;
        transform: translateY(20px);
        filter: blur(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes scrollPath {
    0% {
        transform: scaleY(0);
        transform-origin: top;
    }

    50% {
        transform: scaleY(1);
        transform-origin: top;
    }

    51% {
        transform: scaleY(1);
        transform-origin: bottom;
    }

    100% {
        transform: scaleY(0);
        transform-origin: bottom;
    }
}


/* Responsive adjustments & Mobile Menu */
@media (max-width: 768px) {
    .container {
        padding: 10px;
        padding-top: 80px;
        /* Space for fixed header */
        justify-content: flex-start;
    }

    .sidebar {
        height: 60px !important;
        padding: 0 20px !important;
        flex-direction: row !important;
        /* Keep logo and burger in row */
        justify-content: space-between !important;
        align-items: center !important;
        background: #000 !important;
    }

    .site-logo-wrapper {
        width: 180px;
        /* Smaller logo space */
    }

    /* Hide Desktop Nav */
    .main-nav {
        display: none;
    }

    /* Show Nav when Open (Added via JS) */
    .sidebar.nav-open .main-nav {
        display: flex;
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        background: rgba(0, 0, 0, 0.95);
        flex-direction: column;
        justify-content: flex-start;
        padding-top: 40px;
        overflow-y: auto;
        border-top: 1px solid #333;
        animation: fadeIn 0.3s ease;
    }

    .nav-list {
        flex-direction: column !important;
        width: 100%;
        gap: 0 !important;
        margin: 0 !important;
    }

    .nav-item {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-item>a {
        padding: 20px 0 !important;
        font-size: 16px !important; /* Fixed size to prevent enlargement on touch */
    }

    .nav-item>a:focus, 
    .nav-item>a:active {
        font-size: 16px !important; /* Ensure state change doesn't resize */
    }

    /* Hamburger Icon */
    .hamburger {
        display: block !important;
        /* Visible on mobile */
        width: 30px;
        height: 24px;
        position: relative;
        cursor: pointer;
        z-index: 10001;
    }

    .hamburger span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: #fff;
        border-radius: 2px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out;
    }

    .hamburger span:nth-child(1) {
        top: 0px;
    }

    .hamburger span:nth-child(2) {
        top: 10px;
    }

    .hamburger span:nth-child(3) {
        top: 20px;
    }

    /* Hamburger Open State */
    .sidebar.nav-open .hamburger span:nth-child(1) {
        top: 10px;
        transform: rotate(135deg);
    }

    .sidebar.nav-open .hamburger span:nth-child(2) {
        opacity: 0;
        left: -60px;
    }

    .sidebar.nav-open .hamburger span:nth-child(3) {
        top: 10px;
        transform: rotate(-135deg);
    }

    .main {
        padding: 20px !important;
        margin-top: 20px;
    }

    .hero-title {
        font-size: 40px;
        white-space: normal;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        /* Ensure it takes full width for center align or use block to center text within */
        width: 100%;
    }

    .hero-title::after {
        left: 50% !important;
        transform: translateX(-50%) scaleY(0.6) !important;
        width: 80% !important;
        /* Make line slightly shorter than full screen width */
    }

    .hero-subtitle {
        font-size: 12px;
        margin-left: 0 !important;
        /* Reset margin */
        text-align: center !important;
        display: block !important;
        width: 100%;
    }

    h1 {
        font-size: 24px !important;
    }
}

/* Force Text Case */
.movie-title-large,
.movie-title-small {
    text-transform: none !important;
}

/* Works Gallery Thumbnails - Global Override */
/* User requested smaller photos under the main one */
.works-gallery-thumbs img,
div[style*="gap:10px"] img {
    height: 60px !important;
    /* Force smaller height */
    width: auto !important;
}

/* Desktop Hide Hamburger */
.hamburger {
    display: none;
}




/* Message In Hero - Top Visibility */
/* Message Section (Below Hero) */
#message-section {
    position: relative;
    width: 100%;
    padding: 120px 20px;
    background-color: #0b0b0b;
    /* Deep black/grey */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.poetic-message-content {
    font-family: 'Shippori Mincho', serif;
    font-size: 15px;
    line-height: 3;
    color: #ccc;
    text-align: center;
    letter-spacing: 0.2em;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 1s ease-out forwards;
    animation-delay: 1s;
}

/* Digest Section */
#digest-section {
    position: relative;
    width: 100%;
    background-color: #0d0d0d;
    padding: 0 0 100px 0;
    z-index: 20;
    display: flex;
    justify-content: center;
}

.digest-container {
    width: 100%;
    max-width: 1000px;
    padding: 0 40px;
}

.digest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    padding: 60px 0;
    border-bottom: 1px solid #1a1a1a;
}

.digest-item.featured {
    border-bottom: 1px solid #333;
    /* Slightly more visible separator */
    padding-bottom: 80px;
}

.digest-text {
    flex: 1;
}

.digest-label {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    color: #888;
    letter-spacing: 3px;
    margin-bottom: 20px;
    position: relative;
    padding-left: 40px;
}

.digest-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 30px;
    height: 1px;
    background: #555;
}

.movie-title-large {
    font-family: 'Shippori Mincho', serif;
    font-size: 28px;
    color: #fff;
    letter-spacing: 0.1em;
    text-transform: none !important;
    /* Removed lowercase force */
}

/* ... */
.movie-title-small {
    font-family: 'Shippori Mincho', serif;
    font-size: 18px;
    color: #ddd;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    display: block;
    text-transform: none !important;
}

.digest-title {
    font-family: 'Cormorant Garamond', serif;
    /* Elegant font as requested */
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 20px;
    letter-spacing: 2px;
    color: #fff;
    font-style: italic;
    /* Adds to the elegance */
}

.digest-desc {
    font-family: 'Shippori Mincho', serif;
    font-size: 13px;
    color: #aaa;
    line-height: 2.2;
    margin-bottom: 40px;
    text-align: left;
    /* Override default justify */
}

.digest-link {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 11px;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 30px;
    letter-spacing: 2px;
    transition: all 0.3s ease;
}

.digest-link:hover {
    background: #fff;
    color: #000;
}

.digest-img {
    flex: 1;
    max-width: 500px;
    position: relative;
    overflow: hidden;
}

.digest-img img {
    width: 100%;
    height: auto;
    filter: grayscale(100%) contrast(1.1);
    transition: transform 0.6s ease, filter 0.6s ease;
    box-shadow: none !important;
    /* Override global img shadow */
}

.digest-item:hover .digest-img img {
    transform: scale(1.05);
    filter: grayscale(0%) contrast(1.1);
}

@media (max-width: 768px) {
    .digest-item {
        flex-direction: column-reverse;
        gap: 30px;
        text-align: center;
    }

    .digest-text {
        text-align: center;
    }

    .digest-desc {
        text-align: center;
    }

    .digest-label {
        display: inline-block;
        padding-left: 0;
        margin-bottom: 20px;
    }

    .digest-label::before {
        display: none;
    }
}

/* Info Section (News & Socials) */
.info-section {
    position: relative;
    width: 100%;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 20;
    background: #080808;
    /* Deep black/grey */
    padding: 80px 20px;
}

.section-title {
    font-family: 'Cinzel', serif;
    font-size: 24px;
    color: #fff;
    border-bottom: 2px solid #333;
    padding-bottom: 10px;
    margin-bottom: 0;
    /* Removed margin to center item between borders */
    letter-spacing: 0.2em;
    text-align: center;
    /* Center horizontally */
}

.news-container {
    width: 100%;
    max-width: 600px;
    margin-bottom: 60px;
}

.news-item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center content horizontally */
    border-bottom: 1px solid #333;
    padding: 20px 0;
    /* Slightly increased padding */
    font-family: var(--font-body);
}

.news-date {
    font-size: 11px;
    color: #888;
    margin-right: 20px;
    letter-spacing: 1px;
}

.news-text {
    font-size: 13px;
    color: #ddd;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.social-btn {
    display: inline-block;
    padding: 10px 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-btn:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.copyright-footer {
    font-family: var(--font-body);
    /* Ensure standard font */
    font-size: 10px;
    color: #666;
    margin-top: 20px;
    text-transform: none !important;
    /* Force mixed case as requested */
    letter-spacing: 1px;
}


/* INJECTED MISSING KEYFRAMES AND STYLES */

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

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




/* Fix for Introduction Background Image Sizing */
body.page-introduction::before {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 100%;
}

/* Movies Page Styles */
.movies-grid-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    max-width: 1000px;
    margin: 0 auto;
}

/* Feature Movie (Top Large) */
.feature-movie {
    position: relative;
    width: 100%;
    margin-bottom: 40px;
}

/* Body Fade In Logic */
body {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

body.loaded {
    opacity: 1 !important;
}

.feature-movie-thumb {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.feature-movie-thumb img {
    width: 100%;
    height: auto;
    filter: brightness(0.8) contrast(1.1);
    transition: transform 0.6s ease, filter 0.6s ease;
}

.feature-movie-thumb:hover img {
    transform: scale(1.03);
    filter: brightness(1) contrast(1.2);
}

.play-icon-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    transition: all 0.3s ease;
    opacity: 0.8;
}

.play-icon-large::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 18px solid #fff;
    margin-left: 5px;
}

.feature-movie-thumb:hover .play-icon-large {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
    background: rgba(0, 0, 0, 0.6);
    border-color: #fff;
}

.feature-movie-info {
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.movie-title-large {
    font-family: 'Shippori Mincho', serif;
    font-size: 28px;
    color: #fff;
    letter-spacing: 0.1em;
}

.movie-duration {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #888;
    margin-left: 15px;
}

.movie-details-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: color 0.3s ease;
    position: relative;
    padding-right: 15px;
}

.movie-details-link::after {
    content: '\2192';
    /* Fixed corrupted character to right arrow */
    position: absolute;
    right: 0;
    transition: transform 0.3s ease;
}

.movie-details-link:hover {
    color: #fff;
}

.movie-details-link:hover::after {
    transform: translateX(5px);
}

/* Secondary Features Grid */
.secondary-movies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.movie-card {
    position: relative;
}

.movie-card-thumb {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.movie-card-thumb img {
    width: 100%;
    height: auto;
    filter: brightness(0.7) contrast(1.1);
    transition: transform 0.5s ease, filter 0.5s ease;
}

.movie-card-thumb:hover img {
    transform: scale(1.05);
    filter: brightness(1) contrast(1.1);
}

.play-icon-small {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8);
    opacity: 0.7;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.movie-card-thumb:hover .play-icon-small {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
    color: #fff;
}

.movie-card-info {
    text-align: left;
}

.movie-title-small {
    font-family: 'Shippori Mincho', serif;
    font-size: 18px;
    color: #ddd;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    display: block;
}

.movie-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #777;
    font-family: 'Montserrat', sans-serif;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
}

/* Responsive adjustments for movies */
@media (max-width: 768px) {
    .feature-movie-info {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .secondary-movies-grid {
        grid-template-columns: 1fr;
    }
}

/* Page Specific - Introduction */
.page-introduction .main {
    font-family: 'Shippori Mincho', serif;
    /* Elegant Japanese font */
    font-size: 15px;
    /* Slightly larger */
    line-height: 2.4;
    /* More breathing room */
    letter-spacing: 0.05em;
    /* Relaxed spacing */
    color: #e0e0e0;
}

.page-introduction .main h1 {
    font-family: 'Cormorant Garamond', serif;
    /* Elegant heading */
    font-size: 32px;
    font-weight: 300;
    letter-spacing: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 40px;
    font-style: italic;
}

/* =========================================
   History & Works List Page Revamp (Vertical Timeline)
   ========================================= */

.history-section,
.works-list-section,
.main {
    max-width: 900px;
    margin: 0 auto 80px auto;
    padding: 0 20px;
}

.history-header {
    font-size: 32px;
    color: #fff;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-family: 'Cinzel', serif;
    letter-spacing: 0.1em;
    position: relative;
    text-align: left;
}

.history-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60px;
    height: 3px;
    background: #fff;
}

.hist-row,
.works-row {
    display: flex;
    flex-direction: row;
    border-left: 1px solid #444;
    padding: 20px 0 20px 30px;
    margin-left: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.hist-row:hover,
.works-row:hover {
    background: rgba(255, 255, 255, 0.02);
    border-left-color: #888;
}

/* Dot on timeline */
.hist-row::before,
.works-row::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 28px;
    width: 9px;
    height: 9px;
    background: #000;
    border: 1px solid #666;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 2;
}

.hist-row:hover::before,
.works-row:hover::before {
    border-color: #fff;
    background: #444;
    transform: scale(1.3);
}

.hist-date,
.works-date {
    width: 100px;
    min-width: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    color: #777;
    font-size: 15px;
    letter-spacing: 0.05em;
    margin-right: 30px;
    padding-top: 3px;
    transition: color 0.3s ease;
}

.hist-row:hover .hist-date,
.works-row:hover .works-date {
    color: #ddd;
}

.hist-text,
.works-title {
    flex: 1;
    color: #ccc;
    font-size: 14px;
    line-height: 2;
    font-family: var(--font-body);
    letter-spacing: 0.05em;
}

.works-title a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
    display: block;
}

.works-title a:hover {
    color: #fff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

/* Mobile Responsiveness for History & Works */
@media (max-width: 768px) {

    .hist-row,
    .works-row {
        flex-direction: column;
        padding-left: 20px;
        margin-left: 10px;
    }

    .hist-date,
    .works-date {
        width: 100%;
        margin-bottom: 8px;
        color: #aaa;
        font-size: 13px;
        margin-right: 0;
    }

    .hist-text,
    .works-title {
        padding-left: 0;
        font-size: 13px;
    }

    .hist-row::before,
    .works-row::before {
        top: 22px;
    }
}

/* =========================================
/* =========================================
   Works Detail Page Gallery Layout - Reverted to Stacked
   ========================================= */
.works-gallery-container {
    display: block;
    /* Standard flow */
    margin-bottom: 30px;
}

/* Main Image - Large & Centered */
/* Main Image - Large & Centered */
.works-gallery-container>img:first-child {
    width: 100% !important;
    /* Force fit container width */
    max-width: 100% !important;
    /* Force override inline max-width:600px on mobile */
    /* On desktop, if container is wider, we might want to cap it. But strict constraint is better than overflow. */
    /* To keep the "optimally 600px" look on desktop, we can use a max-width on the CONTAINER or rely on the image's own size if we didn't force width:100%. */
    /* Let's try: width: 100%; max-width: 600px !important; behaves as: grow to 100% of parent, but stop at 600px. */
    /* The problem was the inline style `max-width:600px; width:auto`. On mobile, width:auto = natural size (e.g. 600). Viewport 375. Overflow! */
    /* So we MUST override width to be 100% or auto? We want width:100% of parent. */

    max-width: 600px !important;
    /* Retain intended max size */

    height: auto !important;
    border: 1px solid #333;
    display: block;
    margin: 0 auto 20px auto;
    box-sizing: border-box;
    object-fit: contain;
    /* Ensure aspect ratio */
}

/* Specific fix for mobile to ensure no overflow */
@media (max-width: 768px) {
    .works-gallery-container>img:first-child {
        max-width: 100% !important;
        /* On mobile, max is the screen width, not 600px */
        width: 100% !important;
    }
}

/* Thumbnails Container */
.works-gallery-container>div {
    display: flex !important;
    /* Override global grid rule */
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    justify-content: flex-start !important;
    /* Pack to left */
    grid-template-columns: none !important;
    /* Reset grid just in case */
}

/* Thumbnails Sizing */
.works-gallery-container>div>img {
    height: 60px !important;
    /* Force small height */
    width: auto !important;
    border: 1px solid #333;
    cursor: pointer;
    transition: transform 0.2s;
}

.works-gallery-container>div>img:hover {
    transform: scale(1.1);
    border-color: #fff;
}