/* Extracted styles from HTML/animation.html - navigation and video gallery styles */
/* Using original side-nav styles */
/* Hero color overrides (match Malerei) */
.portfolio-hero .hero-subtitle .subtitle-text { color: var(--accent-color) !important; font-weight: inherit; filter:none; letter-spacing: inherit; }
.portfolio-hero .hero-subtitle .subtitle-line { background: var(--secondary-color); opacity:.3; }
.portfolio-hero .hero-description { color:#f5f5f5 !important; font-weight:300; letter-spacing:.05em; text-shadow:0 0 4px rgba(255,255,255,0.25); }
/* Small arrow indicator for hover menus in the side nav */
.nav-hover-trigger { display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-arrow svg { width: 0.85rem; height: 0.85rem; display: block; fill: none; stroke: currentColor; stroke-width:1.2; opacity: 0.9; transition: transform .18s ease, opacity .18s ease; }
/* subtle motion on hover to indicate there's a submenu (slide a bit to the right) */
.nav-label:hover .nav-arrow svg { transform: translateX(4px); opacity: 1; }
/* Videos gallery styling inspired by Illustration's series-gallery */
.videos-section { padding-top: 3rem; padding-bottom: 4.5rem; position:relative; }
.videos-section:before { content:''; position:absolute; left:0; top:0; width:100%; height:1px; background:linear-gradient(90deg, transparent, var(--border-color), transparent); opacity:.5; }
.videos-section .section-container { max-width: 1180px; margin: 0 auto; }
.video-intro { margin-bottom: 1.25rem; }

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1.2rem, 2vw, 1.8rem); counter-reset: vid; }
.iframeContainer { position: relative; aspect-ratio: 16/9; background: radial-gradient(circle at 40% 35%, #1d1d1d, #101010); border:1px solid var(--border-color); border-radius: 10px; overflow:hidden; display:block; isolation:isolate; box-shadow:0 2px 4px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.02) inset; transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; }
.iframeContainer:before { counter-increment: vid; content: counter(vid, decimal-leading-zero); position:absolute; top:10px; left:12px; font-size: .65rem; letter-spacing:.18em; font-weight:600; background:rgba(255,255,255,0.08); padding:.3rem .5rem; border-radius:4px; backdrop-filter: blur(3px); color:#fff; z-index:3; }
.iframeContainer:hover { box-shadow:0 10px 26px -8px rgba(0,0,0,0.55), 0 0 0 1px var(--accent-color) inset; transform:translateY(-4px); border-color:var(--accent-color); }
.iframeContainer[data-state="thumb"] .thumb-img { filter:brightness(.9) saturate(.9); transition: transform 1.2s ease, filter .6s ease; }
.iframeContainer[data-state="thumb"]:hover .thumb-img { transform:scale(1.06); filter:brightness(1) saturate(1); }
.iframeContainer iframe { width:100%; height:100%; border:0; display:block; }
.iframeContainer .work-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:1rem .95rem .9rem; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 54%, rgba(0,0,0,0.85) 100%); z-index:2; pointer-events:none; }
.iframeContainer .video-title { font-size: .95rem; margin:0; font-weight:600; letter-spacing:.04em; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45); }
.iframeContainer .work-category { font-size:.6rem; letter-spacing:.18em; opacity:.85; margin-top:.3rem; font-weight:500; color:var(--accent-color); }
.iframeContainer .video-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; background:rgba(0,0,0,0.55); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:4; border:1px solid rgba(255,255,255,0.25); transition:background .25s ease, transform .25s ease, box-shadow .25s ease; }
.iframeContainer .video-play:hover { background:rgba(0,0,0,0.75); transform:translate(-50%,-50%) scale(1.08); box-shadow:0 0 0 4px rgba(255,255,255,0.1); }
.iframeContainer .video-play:focus-visible { outline:2px solid var(--accent-color); outline-offset:2px; }
.iframeContainer .video-play svg { width:30px; height:30px; fill:#fff; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.iframeContainer.loading:after { content:""; position:absolute; inset:0; background: repeating-linear-gradient( 45deg, rgba(255,255,255,0.04) 0 10px, rgba(255,255,255,0.07) 10px 20px ); animation: diag 3s linear infinite; }
@keyframes diag { 0%{ background-position:0 0;} 100%{ background-position:200px 200px;} }
.thumb-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.iframeContainer.playing .video-play { opacity:0; pointer-events:none; }
.iframeContainer.playing .work-overlay { background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.7) 100%); }

@media (max-width: 700px) {
    .video-grid { grid-template-columns: 1fr; }
    .iframeContainer { aspect-ratio: 16/9; }
}
/* Caption below each video card */
.video-caption { padding: 0.9rem 0 1.6rem; color: var(--text-light); font-family: var(--font-secondary); position:relative; }
.video-caption:before { content:""; position:absolute; top:0; left:0; width:52px; height:2px; background:var(--accent-color); opacity:.85; }
.video-caption .caption-title { font-weight: 600; color: var(--text-primary); margin: 0 0 0.25rem; }
.video-caption .caption-meta { font-size: 0.85rem; color: var(--muted-color); margin-bottom: 0.5rem; }
.video-caption .caption-desc { font-size: 0.95rem; line-height: 1.45; color: var(--text-light); margin: 0; }

/* Header styles borrowed from Illustration's series-title / series-meta */
.video-header { display:flex; flex-direction:column; gap:0.8rem; margin-bottom:1.6rem; }
.video-title-main { font-family: var(--font-secondary); font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 400; letter-spacing: .02em; color: var(--text-primary); margin:0; position:relative; padding-bottom:.5rem; }
.video-title-main:after { content: ''; position:absolute; left:0; bottom:0; width:72px; height:2px; background:var(--accent-color); }
.video-meta { max-width: 760px; font-family: var(--font-secondary); color: var(--text-light); margin:0; line-height:1.55; }
@media (min-width: 900px){
    .video-header { flex-direction:row; align-items:flex-end; justify-content:space-between; }
    .video-meta { max-width:520px; font-size:.95rem; }
}

/* New stacked video entry layout */
.animation-entries{display:block;margin:0;padding:0}
.video-entry{display:block;margin:48px 0;border:none}
.video-text{max-width:900px;margin:0 0 12px;padding:0 12px}
 /* Keep small size for generic h4 inside .video-text, but ensure
     h4.video-title-main uses the large header style we removed above */
.video-text h4:not(.video-title-main){margin:0 0 6px;font-size:1.1rem}
.video-text .video-title-main{margin:0 0 6px;font-size:clamp(1.6rem, 3.2vw, 2.4rem);}
.video-text p{margin:0;color:#444}
.video-media{width:100%;display:block;padding:0;margin:0}
 /* Force iframeContainer to use full available width (override other CSS) */
.animation-entries .video-media .iframeContainer{width:100% !important; max-width:100% !important; aspect-ratio:16/9}
.video-media .local-loop-video{width:100%;height:100%;display:block;object-fit:cover}

@media (max-width:780px){
    .video-text{padding:0 8px}
    .video-media .iframeContainer{aspect-ratio:16/9}
    .iframeContainer .video-play{width:48px;height:48px}
    .iframeContainer .video-play svg{width:22px;height:22px}
}

/* Mobile overlay nav */
.mobile-nav { display:none; position:fixed; inset:0; align-items:center; justify-content:center; background:rgba(0,0,0,.92); z-index:1100; }
.mobile-nav.mobile-open { display:flex; }
.mobile-nav-inner { display:flex; flex-direction:column; gap:1rem; padding:1rem 2rem; width:100%; max-width:420px; }
.mobile-nav-link { color:#fff; font-size:1.05rem; text-decoration:none; padding:.75rem 1rem; background:rgba(255,255,255,0.05); border-radius:6px; text-align:center; }
.mobile-nav-link:hover { background:rgba(255,255,255,0.1); }
.menu-toggle .menu-line { background:#000 !important; mix-blend-mode:normal !important; transition:background .3s ease; }
@media (max-width:700px){
    .menu-toggle { position:fixed !important; top:2rem !important; right:2rem !important; width:40px; height:40px; display:flex !important; align-items:center; justify-content:center; z-index:1300 !important; }
    .side-nav { display:none !important; pointer-events:none !important; }
    .mobile-nav-inner { padding-top:4.5rem; }
}

/* Restore OS cursor for interactive elements on this page (override global cursor:none) */
body { cursor: auto !important; }
* { cursor: auto !important; }
a, button, .nav-link, .work-item { cursor: pointer !important; }