/* ===== Variables ===== */
:root {
  --bg: #faf9f6;
  --bg-alt: #f2f0ea;
  --text: #1a1a1a;
  --text-muted: #6b6b6b;
  --accent: #7B4FE0;
  --dim-bg: #7C7C7C;
  --border: #e2dfd6;
  --header-h: 76px;
  --grid-gap: 24px;
  --max-width: 1440px;
  --transition: 0.55s cubic-bezier(.25,.8,.25,1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Helvetica Neue", Arial, sans-serif;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 56px;
  --space-xl: 96px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  scroll-behavior: smooth;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ===== Header ===== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: rgba(250, 249, 246, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
}

.logo {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 25px;
  letter-spacing: 0.02em;
  color: var(--text);
  transition: color 0.3s ease, opacity 0.3s ease;
}
.logo img {
  height: 40px;
  width: auto;
  display: block;
}
.logo:hover {
  color: var(--accent);
  opacity: 0.85;
}

.nav-social-wrap {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-item {
  position: relative;
}

.nav-link {
  position: relative;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 14px 2px;
  color: var(--text);
  transition: color var(--transition);
  cursor: pointer;
  display: inline-block;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.65s var(--ease-out-expo), color 0.4s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent);
  transition: color 0.4s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}
.nav-link:not(:hover):not(.active)::after {
  transform-origin: right;
  transition: transform 0.5s var(--ease-out-quart), color 0.4s ease;
}

/* dropdown for Others */
.nav-item.has-dropdown .dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  min-width: 160px;
  padding: 8px 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity var(--transition), transform var(--transition);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown a {
  display: block;
  padding: 10px 18px;
  font-size: 13px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text);
  transition: color var(--transition), background var(--transition);
}
.dropdown a:hover {
  color: var(--accent);
  background: var(--bg-alt);
}

.social-links {
  display: flex;
  align-items: center;
  gap: 2px;
}

.social-links a {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  transition: color var(--transition), transform var(--transition);
}
.social-links a:hover {
  color: var(--accent);
  transform: translateY(-2px);
}
.social-links svg { width: 18px; height: 18px; fill: currentColor; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--text);
  display: block;
}

/* ===== Hero (landing page) ===== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  opacity: 0;
  animation: hero-reveal 2s var(--ease-out-expo) forwards;
}
@keyframes hero-reveal {
  from { transform: scale(1.08); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.hero img.hero-logo {
  position: absolute;
  top: 50%;
  left: 30%;
  width: auto;
  height: auto;
  max-width: min(350px, 20vw);
  transform: translate(-50%, -50%);
  object-fit: contain;
  opacity: 0;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45));
  animation: hero-logo-reveal 1.4s var(--ease-out-expo) 0.4s forwards;
}
@keyframes hero-logo-reveal {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(8px); }
  to { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
.scroll-cue {
  position: absolute;
  bottom: 24px;
  right: 32px;
  color: #fff;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: bob 1.8s infinite ease-in-out;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ===== Section / Page layout ===== */
.page-wrap {
  padding-top: var(--header-h);
}
.section-title {
  max-width: var(--max-width);
  margin: var(--space-xl) auto var(--space-md);
  padding: 0 32px;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.section-title h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: 0;
  margin: 0;
  color: var(--text);
}
.section-title p {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  position: relative;
  padding-left: var(--space-sm);
  border-left: 1px solid var(--border);
}

/* ===== Justified gallery (fluid, edge-to-edge, order-exact) =====
   Width fills the viewport (minus an ~80px margin) at every screen size.
   Because OS display scaling and browser zoom both report the same
   logical CSS width to the page, two screens at the same effective
   width already render identically here -- no fixed canvas needed.
   Consistency instead comes from the row-packing math always stretching
   exactly to fill, and from small explicit row-break groupings always
   staying together (see FORCE_SINGLE_ROW_MAX in main.js). */
.gallery-grid {
  width: 100%;
  margin: 0 auto;
  padding: 0 80px 80px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 10px;
}

@media (max-width: 600px) {
  .gallery-grid {
    padding: 0 24px 60px;
  }
  .section-title {
    flex-direction: column;
    gap: 4px;
    padding: 0 24px;
  }
}

/* marks a forced row boundary for the JS packing algorithm; not part of layout itself */
.row-break {
  display: none;
}

.gallery-grid--featured {
  display: block;
  padding-bottom: 10px;
  max-width: 60%;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .gallery-grid--featured { max-width: 100%; }
}

.art-item.art-item--full {
  height: auto;
}
.art-item.art-item--full video,
.art-item.art-item--full img {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
}
.art-item.demo-reel-wrap {
  position: relative;
  padding-top: 56.25%;
}
.art-item.demo-reel-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.art-item {
  position: relative;
  overflow: hidden;
  background: var(--bg-alt);
  cursor: pointer;
  display: block;
  opacity: 1;
  transform: none;
  height: clamp(220px, 34vw, 400px);
  flex-grow: 1;
}
@media (max-width: 480px) {
  .art-item { height: auto; flex-grow: 0; width: 100%; }
  .art-item img, .art-item video { width: 100%; height: auto; }
  .hero { height: auto; }
  .hero img:not(.hero-logo) { width: 100%; height: auto; }
}

/* Reveal (opacity/transform) and live-resize (width/height) transitions are
   combined in one rule -- declaring them in separate rules at different
   specificities would have the higher-specificity rule's `transition`
   shorthand silently wipe out the other's, since `transition` resets every
   sub-property rather than merging across rules. */
body.js-anim .art-item {
  opacity: 0;
  transform: translateY(18px);
  transition-property: opacity, transform, width, height;
  transition-duration: 0.9s, 0.9s, 0.18s, 0.18s;
  transition-timing-function: var(--ease-out-quart), var(--ease-out-quart), ease-out, ease-out;
  transition-delay: calc(var(--i, 0) * 80ms), calc(var(--i, 0) * 80ms), 0s, 0s;
}
body.js-anim.is-resizing .art-item {
  transition-duration: 0.9s, 0.9s, 0s, 0s;
}
body.js-anim .art-item.in-view {
  opacity: 1;
  transform: translateY(0);
}
.art-item img,
.art-item video,
.lightbox-overlay img,
.lightbox-overlay video {
  -webkit-user-drag: none;
  user-select: none;
}
.art-item img,
.art-item video {
  height: 100%;
  width: auto;
  display: block;
  transition: opacity var(--transition), transform var(--transition);
}
.gallery-grid.justified .art-item {
  flex-grow: 0;
}
.gallery-grid.justified .art-item img,
.gallery-grid.justified .art-item video {
  width: 100%;
}
.art-item:hover img,
.art-item:hover video {
  opacity: 0.55;
  transform: scale(1.03);
}
.art-item .art-label {
  position: absolute;
  left: 0; bottom: 0; right: 0;
  padding: 14px 16px;
  font-size: 13px;
  letter-spacing: 0.3px;
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition);
}
.art-item:hover .art-label {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Others sub-tabs ===== */
.subtabs {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--border);
}
.subtab {
  padding: 12px 4px 16px;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: relative;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.25s ease;
}
.subtab.active {
  color: var(--text);
}
.subtab:hover { color: var(--text); }

.subtab-indicator {
  position: absolute;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
  transition: left 0.6s var(--ease-out-expo), width 0.6s var(--ease-out-expo);
}

.subtab-panel { display: none; margin-top: 50px; }
.subtab-panel.active { display: block; }

/* ===== Lightbox ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  backdrop-filter: blur(0px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-out-quart), background-color 0.55s var(--ease-out-quart), backdrop-filter 0.55s var(--ease-out-quart);
  z-index: 2000;
  cursor: zoom-out;
}
.lightbox-overlay.open {
  background: rgba(124, 124, 124, 0.92);
  backdrop-filter: blur(4px);
  opacity: 1;
  pointer-events: auto;
}
.lightbox-overlay img,
.lightbox-overlay video {
  max-width: 88vw;
  max-height: 88vh;
  transform: scale(0.9);
  transition: transform 0.65s var(--ease-out-expo);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.lightbox-overlay.open img,
.lightbox-overlay.open video {
  transform: scale(1);
}
.lightbox-overlay video { display: none; }
.lightbox-overlay.show-video img { display: none; }
.lightbox-overlay.show-video video { display: block; }

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: white;
  font-size: 30px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, background-color 0.25s ease, transform 0.25s ease;
}
.lightbox-overlay.open .lightbox-nav {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-nav:hover {
  background: transparent;
  color: var(--accent);
}
.lightbox-prev {
  left: 24px;
  transform: translateY(-50%);
}
.lightbox-prev:hover {
  transform: translateY(-50%) translateX(-3px);
}
.lightbox-next {
  right: 24px;
  transform: translateY(-50%);
}
.lightbox-next:hover {
  transform: translateY(-50%) translateX(3px);
}

@media (max-width: 700px) {
  .lightbox-nav {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* ===== About page ===== */
.about-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-xl) 32px var(--space-xl);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-lg);
}
.about-wrap img {
  border-radius: 2px;
  aspect-ratio: 1;
  object-fit: cover;
  width: 100%;
}
.about-wrap h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 4vw, 44px);
  margin: 0 0 var(--space-sm);
  letter-spacing: 0;
  text-transform: none;
}
.about-wrap p {
  max-width: 60ch;
  line-height: 1.75;
  color: var(--text-muted);
  font-size: 15px;
}
.contact-list {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
}
.contact-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color var(--transition);
}
.contact-list a svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.contact-list a:hover {
  color: var(--accent);
}

@media (max-width: 700px) {
  .about-wrap { grid-template-columns: 1fr; }
}

/* ===== Footer ===== */
.site-footer {
  text-align: center;
  padding: 32px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}

/* ===== Mobile nav ===== */
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .nav-social-wrap {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 16px 32px 24px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
  }
  .nav-social-wrap.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .main-nav {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }
  .nav-item { width: 100%; }
  .nav-item.has-dropdown .dropdown {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    display: none;
    border: none;
    box-shadow: none;
    padding-left: 12px;
  }
  .nav-item.has-dropdown.open .dropdown { display: block; }
  .social-links { margin-top: 16px; }
}