/* Dark theme – The Arcane Archive */
/* Self-hosted fonts: place WOFF2 files in media/fonts/ (see media/fonts/README.txt)
   Fonts are licensed under the SIL Open Font License (OFL-1.1), see media/fonts/OFL-1.1.txt */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Cinzel Regular'), local('Cinzel-Regular'), url('media/fonts/Cinzel-Regular.woff2') format('woff2'), url('media/fonts/Cinzel-Regular.woff') format('woff');
  unicode-range: U+000-5FF;
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Cinzel Bold'), local('Cinzel-Bold'), url('media/fonts/Cinzel-Bold.woff2') format('woff2'), url('media/fonts/Cinzel-Bold.woff') format('woff');
  unicode-range: U+000-5FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Montserrat Light'), local('Montserrat-Light'), url('media/fonts/Montserrat-Light.woff2') format('woff2'), url('media/fonts/Montserrat-Light.woff') format('woff');
  unicode-range: U+000-5FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Montserrat'), local('Montserrat-Regular'), url('media/fonts/Montserrat-Regular.woff2') format('woff2'), url('media/fonts/Montserrat-Regular.woff') format('woff');
  unicode-range: U+000-5FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url('media/fonts/Montserrat-Bold.woff2') format('woff2'), url('media/fonts/Montserrat-Bold.woff') format('woff');
  unicode-range: U+000-5FF;
}

:root {
  --bg: #050505; /* Deep Black */
  --surface: #0F172A; /* Marble Dark */
  --text: #E2E8F0; /* Text Grey */
  --muted: rgba(226,232,240,0.75);
  --divine-gold: #C5A059;
  --mystic-cyan: #00FFFF;
  --overlay-bg: rgba(5,5,5,0.85);
  --radius: 10px;
  --container: 1100px;
  --footer-height: 72px;
  --bg-gradient: radial-gradient(800px 400px at 10% 10%, rgba(197,160,89,0.03), transparent 10%), linear-gradient(180deg,var(--bg), #000000);
  /* Header measurements for anchor offsets */
  --header-height: 68px; /* matches .header-stripe default height */
  --header-offset-gap: 12px; /* extra spacing when scrolling to anchors */
}

/* Ensure anchored headings and targets are visible under the fixed header */
html {
  scroll-padding-top: calc(var(--header-height) + var(--header-offset-gap));
  scrollbar-gutter: stable;
}
/* Apply a scroll-margin so elements with IDs (anchors) are offset correctly */
[id] { scroll-margin-top: calc(var(--header-height) + var(--header-offset-gap)); }

/* Header Overlay */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0; width: 100%;
  background: linear-gradient(180deg, var(--bg), rgba(0,0,0,0.95));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  z-index: 1000;
  box-shadow: 0 6px 30px rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
}
.header-inner { padding:12px 20px; position:relative; z-index:1001; display:flex; align-items:center; justify-content:space-between; }

/* Dark transparent stripe directly under the header navigation (behind menu items) */
.header-stripe {
  position:absolute; left:0; right:0; top:0; height:68px; /* increased by ~20% */
  background: linear-gradient(180deg, rgba(0,0,0,0.82), rgba(0,0,0,0.65));
  backdrop-filter: blur(6px);
  border-top: 1px solid rgba(255,255,255,0.02);
  z-index:10; box-shadow: 0 6px 20px rgba(0,0,0,0.6) inset; pointer-events:none;
}
@media (max-width:900px) {
  .header-stripe { height:53px; } /* increased by ~20% */
  /* adjust header height variable for small screens */
  :root { --header-height: 53px; }
}

* { box-sizing: border-box; }
html,body { height:100%; max-width:100%; overflow-x:hidden; }
body { font-family: 'Montserrat', Arial, Helvetica, sans-serif; margin:0; padding-top: var(--header-height); color:var(--text); background:var(--bg-gradient); -webkit-font-smoothing:antialiased; }
.home { padding-bottom: var(--footer-height); }

@supports not (scrollbar-gutter: stable) {
  body { overflow-y: scroll; }
}

/* Visual styles during font load: ensure no invisible text (prevent FOIT) */
.fonts-loading body { -webkit-font-smoothing:antialiased; }
.fonts-loaded body { -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  margin:0;
  color: var(--divine-gold);
  background: linear-gradient(180deg, var(--divine-gold), rgba(197,160,89,0.85));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 10px 30px rgba(0,0,0,0.12);
  -webkit-font-smoothing:antialiased;
}

/* Reusable metallic utility */
.metallic-gold {
  background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, var(--divine-gold), rgba(197,160,89,0.9) 70%, rgba(120,90,50,0.95) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--divine-gold);
  text-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 10px 30px rgba(0,0,0,0.12);
  -webkit-font-smoothing: antialiased;
}

.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 20px; }
img, video { max-width:100%; }

/* Header (fixed & visible)
   Styles for .site-header and .header-inner are declared in the Header Overlay section above */
.brand { display:flex; align-items:center; gap:12px; color:var(--text); text-decoration:none; }
.brand-logo-picture, .hero-logo-picture { display:inline-flex; line-height:0; }
.brand-name {
  font-family: 'Cinzel', 'Poppins', serif;
  font-weight:800;
  letter-spacing:0.02em;
  /* use same metallic gold styling as main headline */
  background: linear-gradient(180deg, var(--divine-gold), rgba(197,160,89,0.9));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--divine-gold);
  text-shadow: 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.12);
  font-size:0.98rem;
}

#brand-logo { width:44px; height:44px; border-radius:8px; box-shadow:0 6px 18px rgba(2,6,12,0.6); }

/* Large hero logo above the main headline (doubled size) */
#hero-logo { width:440px; height:auto; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,0.65); display:block; margin:0 auto 10px; }

/* Slightly smaller on medium screens */
@media (max-width:1200px) {
  #hero-logo { width:360px; }
}
.main-nav a { color:var(--muted); margin-left:18px; text-decoration:none; font-weight:600; position:relative; transition: color 180ms ease; }
.main-nav a:hover { color:var(--text); }

/* Active nav link */
.main-nav a.active { color: var(--divine-gold); }
.main-nav a.active::after { content: ""; position:absolute; left:0; right:0; bottom:-8px; height:4px; background: linear-gradient(90deg, rgba(197,160,89,0.95), rgba(197,160,89,0.6)); border-radius:4px; box-shadow: 0 8px 28px rgba(197,160,89,0.12); }

/* Social Media Icons in Header */
.header-social { display:flex; align-items:center; gap:14px; margin-right:20px; }
.header-social a { color:var(--muted); text-decoration:none; display:flex; align-items:center; justify-content:center; transition: color 180ms ease, transform 120ms ease; }
.header-social a:hover { color:var(--divine-gold); transform: translateY(-2px); }
.header-social svg { fill:currentColor; }

.footer-social { display:none; align-items:center; justify-content:center; gap:16px; width:100%; }
.footer-social a { color:var(--muted); text-decoration:none; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:8px; background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); transition: color 180ms ease, transform 120ms ease, border-color 180ms ease; }
.footer-social a:hover { color:var(--divine-gold); transform: translateY(-2px); border-color:rgba(197,160,89,0.35); }
.footer-social svg { fill:currentColor; }


/* Hero (Fullscreen, playdead-like) */
.hero-full { position:relative; min-height:calc(100vh - var(--header-height)); display:flex; align-items:center; justify-content:center; color:var(--text); overflow:hidden; }
.hero-media { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:0; background:transparent; }
.hero-media .hero-placeholder { max-width:1100px; width:100%; opacity:0.08; filter:grayscale(20%); }
.hero-content { position:relative; z-index:10; padding:120px 20px; text-align:center; max-width:980px; display:flex; align-items:center; justify-content:center; }
.hero-panel { background: linear-gradient(rgba(0,0,0,0.82), rgba(0,0,0,0.68)); padding:30px 40px; border-radius:16px; display:inline-block; backdrop-filter: blur(6px); box-shadow: 0 18px 60px rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.02); }
.hero-brand { display:flex; align-items:center; gap:12px; justify-content:center; text-decoration:none; }
.hero-text { margin-top:18px; }
.hero h1 { font-size:4.2rem; margin:0 0 8px 0; letter-spacing: -0.02em; text-shadow: 0 6px 22px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.02); }
.tagline { color: rgba(238,244,248,0.95); margin:0 0 22px 0; font-size:1.125rem; text-shadow: 0 3px 14px rgba(0,0,0,0.5); }
.btn { display:inline-block; padding:12px 20px; border-radius:8px; border:1px solid transparent; cursor:pointer; font-weight:700; text-decoration:none; }
.btn-primary { background: linear-gradient(180deg, rgba(197,160,89,0.98), rgba(197,160,89,0.85)); color:var(--text); border-color: rgba(0,0,0,0.2); box-shadow: 0 8px 30px rgba(197,160,89,0.08); transition: transform 180ms ease, box-shadow 180ms ease; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(197,160,89,0.12); }
.btn-ghost { background:transparent; color:var(--divine-gold); border:1px solid rgba(197,160,89,0.15); box-shadow: 0 4px 18px rgba(197,160,89,0.06); transition: box-shadow 200ms ease, transform 120ms ease, color 120ms ease; }
.btn-ghost:hover { box-shadow: 0 8px 30px rgba(197,160,89,0.12); transform: translateY(-2px); color:var(--text); }
.logo-preview { display:none; }

/* Home page: keep footer visible without scrolling */
.home .hero-full {
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
}
.home .hero-content {
  padding: 30px 20px 20px 20px;
}
.home .hero-panel {
  padding: 25px 35px;
}
.home .hero h1 {
  font-size: 3.5rem;
}

.home-overview {
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(0,0,0,0));
  border-top: 1px solid rgba(255,255,255,0.03);
}
.home-overview-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: start;
}
.eyebrow {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-overview h2 {
  margin-bottom: 12px;
  line-height: 1.18;
}
.home-overview-copy p:last-child {
  color: var(--muted);
  line-height: 1.7;
  margin-bottom: 0;
}
.home-focus-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.home-focus-list article {
  min-height: 100%;
  padding: 18px;
  border: 1px solid rgba(197,160,89,0.16);
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
}
.home-focus-list h3 {
  margin-bottom: 8px;
  line-height: 1.25;
}
.home-focus-list p {
  color: var(--muted);
  line-height: 1.65;
}
.home-focus-list a {
  color: var(--divine-gold);
  font-weight: 700;
  text-decoration: none;
}
.home-focus-list a:hover {
  color: var(--text);
}

/* Sections */
.section { padding:48px 0; }
main.container.section:not(.content-area) { padding-left:20px; padding-right:20px; }
.section.alt { background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent); }
.section h2 { margin:0 0 8px 0; }
.section-lead { color:var(--muted); margin:0 0 20px 0; }

.page-hero.projects-hero { padding:22px 0 14px; }
.projects-main.section { padding-top:18px; padding-bottom:36px; }
.projects-section.section { padding:0; }
.projects-section h2 { margin-bottom:4px; }
.projects-section .section-lead { margin-bottom:12px; }
.projects-section .projects-grid { gap:12px; }
.projects-section .card-media { display:flex; justify-content:center; background:#000; }
.projects-section .card-media video { width:auto; max-width:100%; height:min(619px, calc(100vh - 255px)); }

/* Projects Grid */
.projects-grid { display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card { background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border-radius:12px; overflow:hidden; box-shadow: 0 8px 30px rgba(2,6,12,0.6); display:flex; flex-direction:column; }
.card-media img { width:100%; height:317px; object-fit:cover; display:block; }
.card-media video { width:100%; aspect-ratio:16 / 9; height:auto; object-fit:contain; display:block; background:#000; }
.media-preview-video { opacity:1; }
.media-preview-video.is-loading { opacity:0; }
.card-body { padding:14px; }
.card-body h3 { margin:0 0 6px 0; }
.card-body p { margin:0; color:var(--muted); font-size:0.95rem; }
.card-link { color:inherit; text-decoration:none; display:flex; flex-direction:column; height:100%; }

/* Project detail pages */
.project-page { max-width:100%; overflow-wrap:break-word; }
.project-hero { text-align:center; }
.project-hero-media { margin-bottom:24px; }
.project-hero-media picture, .carousel-slide picture { display:block; width:100%; }
.project-hero-media img { width:min(760px, 100%) !important; height:auto; border-radius:10px; }
.project-page h1 { max-width:900px; margin:0 auto 10px; font-size:2.4rem; line-height:1.15; text-align:center; }
.project-hero .tagline, .project-hero .meta { max-width:100%; margin-left:auto; margin-right:auto; overflow-wrap:break-word; }
.project-page h2 { margin-bottom:12px; }
.project-page p, .project-page li { line-height:1.65; }
.project-page section { margin-top:34px; }
.project-features ul { padding-left:1.2rem; }
.project-features li { margin-bottom:12px; }
.project-cta p:last-child { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }

/* Media carousel */
.project-video { margin-top:16px; }
.project-video video {
  width:100%;
  max-width:900px;
  max-height:460px;
  display:block;
  margin:0 auto;
  border-radius:12px;
  background:#000;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
}
.media-carousel { position:relative; margin-top:16px; }
.carousel-viewport {
  overflow:hidden;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.2));
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  cursor: grab;
  touch-action: pan-y;
}
.carousel-viewport:active { cursor: grabbing; }
.carousel-track { display:flex; transition: transform 420ms ease; will-change: transform; }
.carousel-slide {
  min-width:100%;
  margin:0;
  padding:18px 16px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.carousel-slide img {
  width:100%;
  max-width:900px;
  max-height:460px;
  object-fit:contain;
  border-radius:12px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6);
}
.carousel-slide figcaption { color:var(--muted); font-size:0.95rem; }
.carousel-btn {
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  background: rgba(5,5,5,0.7);
  color:var(--text);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
  font-weight:700;
  letter-spacing:0.02em;
  transition: transform 160ms ease, box-shadow 160ms ease, color 160ms ease;
}
.carousel-btn:hover { transform: translateY(-50%) scale(1.03); box-shadow: 0 10px 30px rgba(0,0,0,0.5); color:var(--divine-gold); }
.carousel-btn.prev { left:14px; }
.carousel-btn.next { right:14px; }
.carousel-dots { display:flex; justify-content:center; gap:8px; margin-top:12px; }
.carousel-dot {
  width:10px;
  height:10px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.12);
  cursor:pointer;
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}
.carousel-dot.active { background: var(--divine-gold); border-color: rgba(197,160,89,0.8); transform: scale(1.15); }

@media (max-width:700px) {
  .carousel-slide { padding:14px 10px 18px; }
  .carousel-btn { padding:6px 10px; font-size:0.85rem; }
}

/* Contact Form & Small Utilities */
.contact-form { max-width:640px; }
.form-row { display:flex; gap:12px; flex-wrap:wrap; }
.form-row label { flex:1; display:block; }
label { display:block; color:var(--text); }
input, textarea { width:100%; padding:10px 12px; margin-top:8px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:rgba(255,255,255,0.02); color:var(--text); }
.form-actions { margin-top:12px; display:flex; gap:8px; align-items:center; }
.form-note { color:var(--muted); font-size:0.9rem; }

.third-party-widget { max-width:640px; }
.third-party-consent {
  border:1px solid rgba(255,255,255,0.06);
  border-radius:12px;
  padding:18px 20px;
  background:rgba(255,255,255,0.02);
  color:var(--muted);
}
.third-party-consent p { margin:0 0 12px; }
.third-party-consent p:last-child { margin-bottom:0; }
.third-party-actions { margin-top:12px; }

/* Brevo (Sib) form integration */
.sib-form {
  text-align:left;
  background: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(5,5,5,0.98));
  border-radius:12px;
  padding:20px;
  max-width:640px;
  border:1px solid rgba(255,255,255,0.05);
  box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
.sib-form-container { display:flex; flex-direction:column; gap:12px; }
.sib-container--large { background:transparent; border:none; border-radius:0; max-width:none; }
.sib-form #sib-container { background:#050505 !important; border-color: rgba(255,255,255,0.08) !important; color:var(--text); }
.sib-form-container { background:transparent; }
.sib-form-title {
  font-family:'Cinzel','Cormorant Garamond',serif;
  font-size:1.6rem;
  margin:0 0 8px 0;
  color:var(--divine-gold);
}
.sib-form .sib-form-block { padding:0; }
.sib-form .sib-text-form-block p { margin:0 0 12px 0; color:var(--muted); }
.sib-form .entry__label { display:block; margin-bottom:8px; font-weight:700; color:var(--text); }
.sib-form .entry__field .input {
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(5,5,5,0.95) !important;
  color:var(--text);
}
.sib-form .entry__field .input::placeholder { color: rgba(226,232,240,0.6); }
.sib-form .entry__specification { color:var(--muted); font-size:0.85rem; margin-top:6px; }
.sib-form-message-panel {
  font-family:'Montserrat', Arial, Helvetica, sans-serif;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  padding:12px 14px;
  max-width:none;
  background:#0b0b0b;
  color:var(--text);
}
.sib-form-message-panel__text { display:flex; gap:10px; align-items:center; }
.sib-form-message-panel__text svg { width:20px; height:20px; fill:currentColor; }
.sib-form .sib-form-block__button { width:100%; text-align:center; }
.sib-form .sib-form-block__button.btn.seal { margin-top:4px; }
.sib-form a { color:var(--divine-gold); }

/* Reveal (scroll-fade) */
.reveal { opacity:0; transform:translateY(12px); transition: opacity 700ms ease, transform 700ms ease; will-change: opacity, transform; }
.reveal.revealed { opacity:1; transform:translateY(0); }

/* Anchor highlight when jumping to an element */
@keyframes anchorGlow {
  0% { box-shadow: 0 0 0 10px rgba(197,160,89,0.14); }
  50% { box-shadow: 0 0 24px 18px rgba(197,160,89,0.10); }
  100% { box-shadow: 0 0 0 0 rgba(197,160,89,0); }
}
.anchor-highlight {
  animation: anchorGlow 1000ms ease forwards;
  border-radius:8px; /* subtle rounding for the glow */
}

/* Keywords */
.keywords { display:flex; gap:12px; justify-content:center; margin-top:12px; }
.keyword { padding:8px 12px; border-radius:999px; background: rgba(197,160,89,0.06); color:var(--divine-gold); font-weight:700; letter-spacing:0.02em; }

/* Seal / Subscribe Button */
.btn.seal { border-radius:999px; padding:12px 22px; background:transparent; border:2px solid var(--divine-gold); box-shadow: 0 8px 30px rgba(197,160,89,0.06); transition: transform 160ms ease, box-shadow 160ms ease; }
.btn.seal.pressed { transform: translateY(2px) scale(0.995); box-shadow: 0 4px 12px rgba(0,0,0,0.5); }

/* Overlay */
#video-overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--overlay-bg); z-index:1000; padding:20px; }
#video-overlay.hidden { display:none; }
/* .overlay-inner kann nun fixed positioniert werden, und animiert Größe/Position */
.overlay-inner { position:relative; max-width:1200px; width:100%; max-height:90vh; transition: all 220ms ease; border-radius:var(--radius); overflow:hidden; background:#000; box-shadow: 0 20px 60px rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; }
#demo-video { width:100%; height:auto; display:block; background:#000; }
#close-button { position:absolute; top:8px; right:8px; background:rgba(255,255,255,0.06); color:var(--text); border-radius:50%; border:0; width:40px; height:40px; cursor:pointer; font-size:16px; z-index:10; }

/* Page hero for legal/info pages */
.page-hero { padding: calc(var(--header-height) + 32px) 0 40px; border-bottom:1px solid rgba(255,255,255,0.02); text-align:center; position:relative; z-index:5; }
.page-hero h1 { margin:0; scroll-margin-top: calc(var(--header-height) + var(--header-offset-gap)); }
.content-area { background: rgba(255,255,255,0.01); padding:32px; border-radius:12px; margin-top:20px; max-width:900px; margin-left:auto; margin-right:auto; color: #dfe9ef; line-height:1.75; font-size:1.03rem; }

/* Shine / Shimmer for gold text */
@keyframes shine {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}
.metallic-gold {
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.06) 100%), linear-gradient(180deg, var(--divine-gold), rgba(197,160,89,0.9) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--divine-gold);
  background-size: 200% 100%, 100% 100%;
  transition: background-position 0.5s ease, transform 220ms ease;
}
.metallic-gold:hover {
  animation: shine 1.6s linear;
}

/* small adjustments for hero video */
.hero-bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:1; filter: contrast(1.08) saturate(1.06); transform: scale(1.02); }
.hero-media { overflow:hidden; }
.hero-media .hero-placeholder { display:none; }
@media (max-width:700px) {
  .home .hero-bg-video { display:block; }
}

/* Footer */
.site-footer {
  position:relative;
  border-top:1px solid rgba(255,255,255,0.02);
  padding:18px 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.92));
  backdrop-filter: blur(6px);
  z-index:900;
}
.home .site-footer {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
}
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; flex-wrap:wrap; }
.footer-seal { display:flex; align-items:center; flex-shrink:0; }
.footer-seal img { height:32px; width:82px; object-fit:contain; }
.footer-links { display:flex; align-items:center; justify-content:center; gap:8px 16px; flex:1 1 520px; flex-wrap:wrap; white-space:normal; min-width:0; }
.footer-links a { color:var(--muted); margin-left:0; text-decoration:none; display:inline-flex; align-items:center; min-height:32px; position:relative; z-index:1; }
.footer-links a:hover { color:var(--text); }
.footer-copyright { color:var(--muted); text-align:center; pointer-events:none; position:relative; z-index:0; }

/* =====================================================================
   HAMBURGER BUTTON
   ===================================================================== */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 1100;
  margin-left: 12px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 280ms ease, opacity 200ms ease, width 200ms ease;
  transform-origin: center;
}
/* Animated X when open */
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   MOBILE NAV DRAWER
   ===================================================================== */
@media (max-width:900px) {
  .nav-toggle { display: flex; }

  .main-nav {
    /* hidden off-screen by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5,5,5,0.97);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 320ms cubic-bezier(0.4,0,0.2,1);
    pointer-events: none;
  }
  .main-nav.open {
    transform: translateX(0);
    pointer-events: auto;
  }
  .main-nav a {
    margin: 0;
    width: min(320px, calc(100vw - 48px));
    padding: 14px 18px;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    color: var(--text);
    text-align: center;
    background: rgba(0,0,0,0.94);
    border: 1px solid rgba(197,160,89,0.24);
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.55);
  }
  .main-nav a.active { color: var(--divine-gold); }
  .main-nav a:hover { color: var(--divine-gold); }
}

/* =====================================================================
   Responsive tweaks
   ===================================================================== */
@media (max-width:900px) {
  :root { --footer-height: 120px; }
  .home { padding-bottom:0; }
  .home .site-footer { position:static; }
  .home .hero-full { min-height: calc(100svh - var(--header-height)); }
  .home .hero-content { padding:48px 16px; }
  .home .hero-panel { width:100%; max-width:340px; padding:22px 18px; }
  .hero-inner { flex-direction:column-reverse; align-items:center; text-align:center; }
  .hero-right { width:220px; }
  .header-inner { padding:12px 16px; }
  /* scale hero logo on smaller screens */
  #hero-logo { width:260px; }
  .site-footer { padding:16px 0 20px; }
  .footer-inner { flex-direction:column; align-items:center; gap:10px; text-align:center; }
  .footer-seal { margin-bottom:8px; }
  .footer-social { display:flex; order:1; }
  .footer-links { order:2; }
  .footer-copyright { order:3; }
  .footer-links { width:100%; max-width:360px; flex:none; flex-wrap:wrap; justify-content:center; gap:4px 14px; line-height:1.35; white-space:normal; }
  .footer-links a { min-height:38px; padding:4px 2px; }
  .footer-copyright { width:100%; margin-top:2px; font-size:0.9rem; line-height:1.4; }

  /* Hero text */
  .hero h1 { font-size:2.4rem; }
  .home .hero h1 { font-size:2rem; }
  .home-overview-inner, .home-focus-list { grid-template-columns: 1fr; }
  .home-overview { padding-top:36px; }
  .tagline { font-size:1rem; }
  .hero-panel { padding:20px 18px; }

  /* Sections */
  .section { padding:32px 0; }
  main.container.section:not(.content-area) { padding-left:16px; padding-right:16px; }
  .content-area { padding:20px 16px; }

  .project-page h1 { font-size:clamp(1.45rem, 6vw, 2.05rem); line-height:1.16; }
  .project-hero .tagline { max-width:26ch; }
  .project-hero .meta { max-width:28ch; font-size:0.95rem; line-height:1.45; }
  .project-page h2 { font-size:1.45rem; line-height:1.2; }
  .project-page section { margin-top:28px; }
  .project-hero-media { margin-bottom:18px; }
  .project-cta p:last-child { flex-direction:column; align-items:stretch; }
  .project-cta .btn { text-align:center; }

  /* Buttons: stack vertically on very small screens */
  .hero-cta { display:flex; flex-direction:column; gap:10px; align-items:center; }

  /* Social icons: hide on very small screens to save space */
  .header-social { display:none; }
}

@media (max-width:480px) {
  .hero h1 { font-size:1.9rem; }
  .home .hero h1 { font-size:1.7rem; }
  #hero-logo { width:200px; }
  .btn { padding:11px 16px; font-size:0.92rem; }
  .brand-name { font-size:0.9rem; }
  #brand-logo { width:40px; height:40px; }
  .project-page h1 { font-size:1.45rem; overflow-wrap:anywhere; }
  .project-page p, .project-page li { line-height:1.55; }
  .footer-links { font-size:0.92rem; gap:6px 12px; }
  .footer-links a:nth-child(n+3) { flex-basis:100%; justify-content:center; }
  .keywords { flex-wrap:wrap; justify-content:center; }
  .projects-grid { grid-template-columns: 1fr; }
  .card-media img { height:220px; }
  .projects-section .card-media video { width:100%; height:auto; }
}