/* 451 Atölye — premium chrome, width, reveal helpers */

:root {
  --site-content-max: 1360px;
  --site-shell-max: 1600px;
  --site-form-max: 920px;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 22px 50px -32px rgba(22, 62, 58, 0.38);
  --site-header-height: 72px;
  --site-header-height-scrolled: 58px;
}

/* —— Wider shells —— */
.container {
  max-width: var(--site-content-max, 1320px);
}

.container-header,
.site-footer .footer-inner,
.footer-inner,
.footer-grid {
  max-width: var(--site-shell-max, 1480px);
}

/* Home already uses a wide editorial shell; keep it expansive */
.home-inner {
  max-width: max(1680px, var(--site-shell-max, 1480px));
}

.dashboard-main-area .dashboard-content,
.dashboard-main-area > .admin-list-stack,
.dashboard-main-area > .dashboard-panel-grid,
.dashboard-page-content,
.dashboard-main-area .dashboard-panel-grid,
.dashboard-main-area .join-applications-admin-page,
.dashboard-main-area .admin-list-stack {
  max-width: var(--site-shell-max, 1480px);
  width: 100%;
  margin-inline: auto;
}

.dashboard-main-area {
  padding-inline: clamp(1rem, 2.2vw, 1.75rem);
}

.dashboard-content {
  padding: 2rem clamp(1.25rem, 2.5vw, 2.5rem) !important;
}

.join-page {
  max-width: min(var(--site-form-max, 920px), 100%) !important;
}

/* —— Header polish —— */
.site-header {
  transition: background 0.35s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
    backdrop-filter 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.45);
}

.site-header .header-link {
  position: relative;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color 0.22s ease;
}

.site-header .header-link::after {
  content: "";
  position: absolute;
  left: 0.65rem;
  right: 0.65rem;
  bottom: 0.35rem;
  height: 1.5px;
  border-radius: 99px;
  background: var(--water-soft, #d7ebe7);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}

.site-header .header-link:hover::after,
.site-header .header-link.is-active::after {
  transform: scaleX(1);
}

.site-header .header-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

.brand:focus-visible,
.site-header .header-link:focus-visible,
.mobile-nav-toggle:focus-visible {
  outline: 2px solid rgba(215, 235, 231, 0.7);
  outline-offset: 3px;
}

/* Mobile drawer stagger hooks */
.header-nav.is-open .header-link,
.header-nav.is-open .header-nav-cta {
  opacity: 0;
  transform: translateY(10px);
}

.header-nav.is-open.nav-entered .header-link,
.header-nav.is-open.nav-entered .header-nav-cta {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.35s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}

/* —— Reveal / enter —— */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.7s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: opacity, transform;
}

[data-reveal].is-revealed,
.js-reduced-motion [data-reveal],
html.reduced-motion [data-reveal] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
}

[data-reveal-stagger].is-revealed > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.55s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)),
    transform 0.55s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1));
}

[data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0.02s; }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 0.14s; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 0.2s; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 0.26s; }
[data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 0.32s; }

.page-enter {
  animation: premium-rise 0.65s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes premium-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ambient mist (decorative) */
.premium-mist {
  position: absolute;
  inset: -10% -5% auto;
  height: min(28rem, 55vh);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 50% at 20% 40%, rgba(47, 122, 114, 0.16), transparent 70%),
    radial-gradient(ellipse 45% 40% at 85% 20%, rgba(196, 106, 66, 0.08), transparent 65%);
  animation: mist-drift 18s ease-in-out infinite alternate;
}

@keyframes mist-drift {
  from { transform: translate3d(-1.5%, 0, 0) scale(1); }
  to { transform: translate3d(1.5%, 1%, 0) scale(1.04); }
}

/* Dashboard light polish */
html[data-theme="light"] .dashboard-layout {
  background: var(--site-page-bg, #f4f8f7) !important;
}

html[data-theme="light"] .dashboard-topbar {
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--site-rule, rgba(26, 44, 42, 0.1));
}

html[data-theme="light"] .dashboard-sidebar {
  box-shadow: 8px 0 30px -24px rgba(22, 62, 58, 0.35);
}

html[data-theme="light"] .exon-table-wrapper,
html[data-theme="light"] .dashboard-panel,
html[data-theme="light"] .admin-list-stack .exon-table-wrapper {
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

/* Studio shell width */
.studio-site .studio-shell,
.studio-site .studio-main,
.studio-site .studio-header-inner {
  max-width: var(--site-shell-max, 1480px);
}

.studio-site .studio-narrow {
  max-width: var(--site-content-max, 1320px);
}

@media (prefers-reduced-motion: reduce) {
  .premium-mist,
  .page-enter,
  [data-reveal],
  [data-reveal-stagger] > *,
  .cta::after,
  .btn-451-primary::after {
    animation: none !important;
    transition: none !important;
  }

  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
}