/* --- Variables & Apple HIG Colors --- */
:root {
    --bg-color: #000000;

    /* Liquid Glass Variables */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --glass-highlight: inset 0 0 0 1px rgba(255, 255, 255, 0.1);

    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: rgba(235, 235, 245, 0.85);
    /* iOS System Gray 6 */

    /* System Colors */
    --accent-color: #0A84FF;
    /* iOS Blue */
    --accent-highlight: #5E5CE6;
    /* iOS Indigo */

    --font-main: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text", sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Display", sans-serif;

    --radius-xl: 32px;
    /* For Cards (Squircle-ish) */
    --radius-l: 22px;
    --header-height: 60px;
    --tab-bar-height: 84px;
}

/* --- Reset & Base --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
    /* Remove tap highlight on iOS */
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-main);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    /* padding-bottom removed for hamburger menu layout */
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

img {
    max-width: 100%;
    display: block;
}

/* --- Typography --- */
h1,
h2,
h3 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
    /* Tight tracking for headers */
}

p {
    letter-spacing: 0.01em;
    /* relaxed spacing for body */
}

/* --- Header & Logo --- */
header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-height);
    background: rgba(20, 20, 20, 0.6);
    /* Use darker glass for header */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid var(--glass-border);
}

.header-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center logo on mobile */
    position: relative;
}

.logo-box {
    width: 44px;
    height: 44px;
    transition: transform 0.3s ease;
}

.desktop-nav {
    display: none;
    /* Hidden on mobile */
}

/* --- Hero Section --- */
.hero {
    height: 50vh;
    min-height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero img {
    width: 60%;
    max-width: 300px;
    filter: drop-shadow(0 0 40px rgba(94, 92, 230, 0.3));
    /* Soft glow */
    opacity: 0;
    animation: fadeInScale 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --- Greeting New Year 2026 Special Styles --- */
.greeting-text {
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.5;
    text-align: center;
    color: transparent;
    /* Make text transparent so background shows through */

    /* 
       Layered Backgrounds:
       1. The Gold Gradient (Tracked by JS variables)
       2. The fallback White color
    */
    background-image:
        radial-gradient(circle 120px at var(--cursor-x, 50%) var(--cursor-y, 50%),
            #FFD700 0%,
            #FDB931 30%,
            transparent 70%),
        linear-gradient(#fff, #fff);
    /* Base White Text */

    background-size: 100% 100%, 100% 100%;
    background-position: 0 0, 0 0;
    background-repeat: no-repeat;

    /* Standard standard */
    background-clip: text;
    -webkit-background-clip: text;
    /* Safari/Chrome requirement */
    -webkit-text-fill-color: transparent;
    /* CRITICAL for Safari/Webkit to actually show the background */

    position: relative;
    z-index: 50;
    /* Ensure it is above confetti or other layers */
    margin-bottom: 40px;
    padding: 0 20px;
    display: inline-block;
    /* Ensure bounds are tight to text if possible, but H1 is block usually. Inline-block might help with wrapping. */
    width: 100%;
    /* Keep full width layout */
}

.greeting-text span {
    display: block;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 400;
    margin-top: 10px;
    letter-spacing: 0.1em;
    opacity: 0.8;
    color: var(--text-primary);
    /* Keep subtitle normal white */
    /* If you want the subtitle to ALSO have the effect, remove this color override. 
       But usually subtitle is smaller, maybe keep it simple. 
       The user asked for "headings text", let's assume the main japanese text.
       However, technically the span is inside the h1. 
       If I set color: white on span, it covers the background-clip. 
    */
}


/* --- News Ticker (Fast Retailing Style Marquee) --- */
.news-ticker {
    margin: 0 0 40px 0;
    background: #000;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    overflow: hidden;
    height: 50px;
    display: flex;
    align-items: center;
    position: relative;
}

.ticker-container {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    /* Remove padding to allow full width flow */
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
    position: relative;
    /* Masking for fade effect on edges (optional, removed for raw FR style) */
}

.ticker-label {
    /* Fast Retailing usually has label outside or integrated. Keeping it distinct. */
    font-family: "Google Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FFE81F;
    background: #000;
    padding: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 2;
    /* Sit on top of scrolling text */
    border-right: 1px solid #222;
    transition: background-color 0.2s ease;
}

.ticker-label:hover {
    background: #1a1a1a;
    cursor: pointer;
}

.ticker-list-wrapper {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.ticker-track {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
    will-change: transform;
}

.ticker-list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    height: 100%;
    margin-right: 60px;
    /* Space between items */
    font-family: "Google Sans", "Zen Maru Gothic", sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: #dddddd;
}

.ticker-date {
    font-family: "Google Sans", sans-serif;
    color: #888;
    margin-right: 12px;
    font-size: 12px;
    font-weight: 700;
}

/* Pause animation on hover / active (tap on mobile) */
.ticker-track:hover {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Responsive design for Mobile screens */
@media screen and (max-width: 768px) {
    .news-ticker {
        height: 44px;
        margin-bottom: 24px;
    }
    .ticker-label {
        font-size: 12px;
        padding: 0 12px;
    }
    .ticker-item {
        margin-right: 40px;
        font-size: 13px;
    }
    .ticker-date {
        font-size: 11px;
        margin-right: 8px;
    }
}

@media screen and (max-width: 480px) {
    .ticker-label {
        font-size: 11px;
        padding: 0 8px;
    }
    .ticker-item {
        margin-right: 30px;
    }
}

/* --- Main Content & Departments --- */
.container {
    padding: 0 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.departments-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Increased gap for better separation */
}

.dept-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-highlight), var(--glass-shadow);
    border-radius: var(--radius-xl);
    overflow: hidden;
    position: relative;
    /* Spring Physics Transition */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;

    /* Spotlight Effect Foundation */
    --x: 50%;
    --y: 50%;

    /* 3D Tilt Setup */
    transform-style: preserve-3d;
    transform: perspective(1000px);
}

/* Scroll Reveal Utilities */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays (can be set via inline style or classes) */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

/* Spotlight Gradient Overlay */
.dept-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(600px circle at var(--x) var(--y),
            rgba(255, 255, 255, 0.06),
            transparent 40%);
    z-index: 2;
    opacity: 0;
    /* Hidden by default until JS enables it or hover */
    transition: opacity 0.3s;
}

.dept-card:hover::before {
    opacity: 1;
}

.dept-card:hover {
    transform: scale(1.02);
    box-shadow: var(--glass-highlight), 0 20px 40px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.dept-card:active {
    transform: scale(0.98);
}

.dept-image-wrapper {
    height: 200px;
    overflow: hidden;
    position: relative;
}

.dept-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.dept-card:hover .dept-image {
    transform: scale(1.05);
    /* Slight zoom on hover/focus */
}


.dept-content {
    padding: 24px;
}

.dept-name {
    font-size: 24px;
    /* Slightly larger */
    margin-top: 24px;
    /* Space from image */
    margin-bottom: 12px;
    padding: 0 24px;
    /* Horizontal whitespace */
    color: var(--text-primary);
}

.dept-desc {
    font-size: 15px;
    /* Better readability */
    color: var(--text-secondary);
    line-height: 1.8;
    padding: 0 24px 32px 24px;
    /* Horizontal + Bottom whitespace */
    opacity: 0.9;
}

/* --- Hamburger Menu (Mobile) --- */
.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1001;
    /* Above overlay */
    padding: 10px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-btn .bar {
    width: 24px;
    height: 2px;
    background-color: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    align-self: flex-end;
    /* Right align bars */
}

/* X Animation State */
.hamburger-btn.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-btn.is-active .bar:nth-child(2) {
    transform: translateY(0) rotate(-45deg);
    /* Merged logic: 2 bars approach */
}

/* If we only have 2 bars in HTML, we need to adjust logic. 
   I wrote 2 bars in HTML. Let's adjust CSS for 2 lines.
   Actually, standard hamburger has 3. But I put 2 in HTML for a modern abstract look (or I can add one).
   Let's stick to 2 bars for a sleek "Tetra" look? No, standard 3 or 2 is fine. 
   Let's assume 2 bars transforming into X.
*/

.hamburger-btn .bar:nth-child(1) {
    width: 24px;
}

.hamburger-btn .bar:nth-child(2) {
    width: 16px;
    /* Staggered look */
}

.hamburger-btn.is-active .bar:nth-child(1) {
    transform: translateY(4px) rotate(45deg);
    width: 24px;
}

.hamburger-btn.is-active .bar:nth-child(2) {
    transform: translateY(-4px) rotate(-45deg);
    width: 24px;
    /* Make same width for X */
}

/* Mobile Nav Overlay */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    /* Dim background */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    display: none;
    /* Changed to display: none to prevent layout issues */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-nav-overlay.is-active {
    display: block;
    opacity: 1;
}

.mobile-nav-content {
    position: absolute;
    top: var(--header-height);
    right: 0;
    width: 100%;
    height: calc(100vh - var(--header-height));
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    display: flex;
    flex-direction: column;
    padding: 40px 20px;
    transform: translateY(-20px);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mobile-nav-overlay.is-active .mobile-nav-content {
    transform: translateY(0);
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: auto;
    /* Push socials to bottom */
}

.mobile-link {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Staggered animation for links */
.mobile-nav-overlay.is-active .mobile-link:nth-child(1) {
    transition-delay: 0.1s;
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-overlay.is-active .mobile-link:nth-child(2) {
    transition-delay: 0.15s;
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-overlay.is-active .mobile-link:nth-child(3) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-overlay.is-active .mobile-link:nth-child(4) {
    transition-delay: 0.25s;
    opacity: 1;
    transform: translateY(0);
}

.mobile-socials {
    display: flex;
    gap: 30px;
    justify-content: center;
    padding-top: 40px;
    border-top: 1px solid var(--glass-border);
    opacity: 0;
    transition: opacity 0.5s ease 0.4s;
}

.mobile-nav-overlay.is-active .mobile-socials {
    opacity: 1;
}

.mobile-socials img {
    width: 28px;
    opacity: 0.8;
}

/* --- Footer --- */
footer {
    padding: 40px 20px 20px;
    text-align: center;
    background-color: var(--bg-color);
}

.social-links {
    margin-bottom: 24px;
    display: flex;
    justify-content: center;
    gap: 30px;
}

.social-links img {
    width: 24px;
    opacity: 0.6;
}

.copyright {
    font-size: 11px;
    color: #444;
}

/* --- Desktop / Large Screen Overrides --- */
@media screen and (min-width: 900px) {


    /* Hide Hamburger on Desktop */
    .hamburger-btn,
    .mobile-nav-overlay {
        display: none !important;
    }

    /* Header Nav Visible */
    .desktop-nav {
        display: flex;
        gap: 40px;
    }

    .header-inner {
        justify-content: space-between;
    }

    .nav-link {
        font-size: 15px;
        font-weight: 600;
        color: var(--text-secondary);
        padding: 8px 16px;
        border-radius: 20px;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .nav-link.current {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .nav-link:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--text-primary);
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    /* Grid Layout */
    .departments-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .dept-image-wrapper {
        height: 280px;
    }

    .dept-card:active {
        transform: scale(1);
        /* Disable touch shrink on desktop */
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    }


}

/* --- Sub-Page Styles (Programming/Graphics) --- */
.page-hero {
    padding: 100px 0 60px;
    margin-bottom: 60px;
    border-bottom: 0.5px solid var(--border-color);
}

.page-title {
    font-size: 42px;
    /* Mobile first size */
    margin-bottom: 16px;
    color: var(--text-primary);
    line-height: 1.1;
}

.page-desc {
    font-size: 16px;
    color: var(--text-secondary);
    max-width: 100%;
}

/* Tech Stack Chips */
.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.tech-tag {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--text-primary);
    transition: background 0.2s;
}

.tech-tag:hover {
    background: var(--accent-color);
    color: #fff;
}

/* Works Grid */
.works-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 80px;
}

.work-card {
    display: block;
    background-color: var(--card-bg);
    border-radius: var(--radius-l);
    overflow: hidden;
    transition: transform 0.3s;
    cursor: pointer;
}

.work-card:active {
    transform: scale(0.97);
}

.work-card:focus {
    outline: 3px solid var(--accent-color);
    outline-offset: 6px;
}

.work-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: #222;
}

.work-content {
    padding: 20px;
}

.work-title {
    font-size: 20px;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.work-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.work-links {
    display: flex;
    gap: 16px;
}

.work-link-item {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
}

/* Section Head (replaces h2.section-head from old css) */
.section-head {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.section-head::before {
    content: '';
    display: block;
    width: 6px;
    height: 28px;
    background-color: var(--accent-color);
    margin-right: 12px;
    border-radius: 4px;
}

/* --- News Page Styles --- */
.news-archive-section {
    max-width: 800px;
    margin: 0 auto 80px;
}

.news-archive-list {
    list-style: none;
    border-top: 1px solid var(--glass-border);
}

.news-archive-item {
    border-bottom: 1px solid var(--glass-border);
}

.news-link {
    display: flex;
    flex-direction: column;
    /* Stack on mobile */
    padding: 20px 0;
    color: var(--text-primary);
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
}

.news-date {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.news-label {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: 8px;
    width: fit-content;
}

.news-label.notice {
    background: #FF9500;
    color: #fff;
}

.news-label.info {
    background: #0A84FF;
    color: #fff;
}

.news-label.event {
    background: #30D158;
    color: #fff;
}

.news-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
}

.news-arrow {
    display: none;
    margin-left: auto;
    color: var(--accent-color);
}

.news-link:active {
    opacity: 0.7;
    transform: scale(0.98);
}

@media screen and (min-width: 768px) {
    .news-link {
        display: grid;
        grid-template-rows: auto auto;
        grid-template-columns: max-content max-content 1fr auto;
        grid-template-areas:
            "date label . arrow"
            "title title title arrow";
        column-gap: 16px;
        row-gap: 8px;
        padding: 24px 10px;
        align-items: center;
    }

    .news-date {
        grid-area: date;
        margin-bottom: 0;
        margin-right: 0;
        min-width: 0;
        font-size: 15px;
    }

    .news-label {
        grid-area: label;
        margin-bottom: 0;
        margin-right: 0;
    }

    .news-title {
        grid-area: title;
        margin-bottom: 0;
        font-size: 18px;
        line-height: 1.5;
        padding-left: 0;
    }

    .news-arrow {
        grid-area: arrow;
        display: block;
        opacity: 0;
        transform: translateX(-10px);
        transition: all 0.3s;
        font-size: 20px;
    }

    .news-link:hover .news-arrow {
        opacity: 1;
        transform: translateX(0);
    }

    .news-link:hover {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 12px;
    }
}


/* Desktop Overrides for Sub-pages */
@media screen and (min-width: 900px) {
    .page-title {
        font-size: 72px;
    }

    .page-desc {
        font-size: 18px;
        max-width: 600px;
    }

    .works-grid {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 40px;
    }

    .work-card:hover {
        transform: translateY(-5px);
    }
}

/* --- New Year's Greeting Page Styles --- */
.greeting-hero {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: radial-gradient(circle at center, rgba(16, 16, 16, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

.greeting-text {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 32px;
    letter-spacing: 0.1em;
    line-height: 2;
    color: var(--text-primary);
}

.greeting-text span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-top: 16px;
    letter-spacing: 0.2em;
}

@media screen and (min-width: 768px) {
    .greeting-text {
        font-size: 48px;
    }
}

/* Masonry Gallery (Centered Flex Layout) */
.masonry-gallery {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Flex Item Styling */
.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease;

    /* Responsive Flex Basis */
    flex: 0 1 350px;
    /* Base width ~350px, can shrink */
    min-width: 280px;
    /* Prevent becoming too narrow */
    max-width: 100%;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    /* Fill the container */
    object-fit: cover;
    /* Crop if necessary to maintain uniformity if we enforce height, otherwise intrinsic */
    /* Let's enforce a slight aspect ratio to make them uniform if user wants neatness */
    aspect-ratio: 4/3;
    border-radius: 12px;
    display: block;
}

.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Future Activities Section (Text + Image alternating) */
.future-activities {
    max-width: 1000px;
    margin: 80px auto;
    padding: 0 20px;
}

.activity-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 80px;
}

@media screen and (min-width: 768px) {
    .activity-block {
        flex-direction: row;
        align-items: center;
    }

    .activity-block:nth-child(even) {
        flex-direction: row-reverse;
    }
}

.activity-content {
    flex: 1;
}

.activity-image {
    flex: 1;
    border-radius: var(--radius-l);
    overflow: hidden;
}

.activity-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-title {
    font-size: 24px;
    margin-bottom: 16px;
    color: var(--text-primary);
    font-family: var(--font-display);
}

.activity-desc {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* --- New Year Confetti Animation --- */
.confetti-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
    /* Behind text if text is z-index 2 */
}

.greeting-text {
    position: relative;
    z-index: 10;
}

.confetti {
    position: absolute;
    top: -10%;
    width: 10px;
    height: 10px;
    background-color: #ffd700;
    opacity: 0.8;
    /* border-radius removed */
    animation-name: confettiFall, confettiSway;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running;
}

@keyframes confettiFall {
    0% {
        top: -10%;
    }

    100% {
        top: 100%;
    }
}

@keyframes confettiSway {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    25% {
        transform: translateX(15px) rotate(45deg);
    }

    50% {
        transform: translateX(-15px) rotate(90deg);
    }

    75% {
        transform: translateX(10px) rotate(135deg);
    }
}