/* Wasem Works — light / dark theme */

:root {
  --ww-theme-duration: 0.9s;
  --ww-theme-ease: cubic-bezier(0.45, 0, 0.55, 1);
}

/* One shared clock: tokens interpolate on html, every surface follows */
@property --ww-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}
@property --ww-text {
  syntax: "<color>";
  inherits: true;
  initial-value: #000000;
}
@property --ww-muted {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 0, 0, 0.3);
}
@property --ww-muted-soft {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 0, 0, 0.33);
}
@property --ww-placeholder {
  syntax: "<color>";
  inherits: true;
  initial-value: #d9d9d9;
}
@property --ww-surface {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 0, 0, 0.05);
}
@property --ww-surface-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 0, 0, 0.06);
}
@property --ww-surface-active {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 0, 0, 0.1);
}
@property --ww-control-dot {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 0, 0, 0.18);
}
@property --ww-control-dot-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 0, 0, 0.4);
}
@property --ww-control-dot-active {
  syntax: "<color>";
  inherits: true;
  initial-value: #000000;
}
@property --ww-pill {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}
@property --ww-border {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(0, 0, 0, 0.15);
}
@property --ww-btn-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #000000;
}
@property --ww-btn-text {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}
@property --ww-intro-fg {
  syntax: "<color>";
  inherits: true;
  initial-value: #d8d8d8;
}

:root,
html[data-theme="light"] {
  --ww-bg: #ffffff;
  --ww-text: #000000;
  --ww-muted: rgba(0, 0, 0, 0.3);
  --ww-muted-soft: rgba(0, 0, 0, 0.33);
  --ww-placeholder: #d9d9d9;
  --ww-surface: rgba(0, 0, 0, 0.05);
  --ww-surface-hover: rgba(0, 0, 0, 0.06);
  --ww-surface-active: rgba(0, 0, 0, 0.1);
  --ww-control-dot: rgba(0, 0, 0, 0.18);
  --ww-control-dot-hover: rgba(0, 0, 0, 0.4);
  --ww-control-dot-active: #000000;
  --ww-pill: #ffffff;
  --ww-pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.06);
  --ww-border: rgba(0, 0, 0, 0.15);
  --ww-btn-bg: #000000;
  --ww-btn-text: #ffffff;
  --ww-intro-fg: #d8d8d8;
  color-scheme: light;
}

html[data-theme="dark"] {
  /* Cursor Dark */
  --ww-bg: #141414;
  --ww-text: #f0f0f0;
  --ww-muted: rgba(240, 240, 240, 0.36);
  --ww-muted-soft: rgba(240, 240, 240, 0.45);
  --ww-placeholder: #262626;
  --ww-surface: rgba(240, 240, 240, 0.067);
  --ww-surface-hover: rgba(240, 240, 240, 0.11);
  --ww-surface-active: rgba(240, 240, 240, 0.18);
  --ww-control-dot: rgba(240, 240, 240, 0.28);
  --ww-control-dot-hover: rgba(240, 240, 240, 0.55);
  --ww-control-dot-active: #f0f0f0;
  --ww-pill: #181818;
  --ww-pill-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
  --ww-border: rgba(240, 240, 240, 0.075);
  --ww-btn-bg: #f0f0f0;
  --ww-btn-text: #141414;
  --ww-intro-fg: #3a3a3a;
  color-scheme: dark;
}

html {
  background-color: var(--ww-bg);
  color: var(--ww-text);
  transition:
    --ww-bg var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-text var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-muted var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-muted-soft var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-placeholder var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-surface var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-surface-hover var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-surface-active var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-control-dot var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-control-dot-hover var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-control-dot-active var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-pill var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-border var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-btn-bg var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-btn-text var(--ww-theme-duration) var(--ww-theme-ease),
    --ww-intro-fg var(--ww-theme-duration) var(--ww-theme-ease);
}

body,
.page {
  background-color: var(--ww-bg);
  color: var(--ww-text);
}

.page {
  background-color: var(--ww-bg) !important;
}

/* Frosted glass only at rest. During the blend it samples a half-changed
   page and reads as the top of the screen flipping first. Opaque tokens only. */
html.ww-theme-blending .site-header,
html.ww-theme-blending .site-nav,
html.ww-theme-blending .grid-dots,
html.ww-theme-blending .project-switch,
html.ww-theme-blending .theme-toggle,
html.ww-theme-blending .inquiry,
html.ww-theme-blending .inquiry__submit,
html.ww-theme-blending .field__input,
html.ww-theme-blending .field__textarea,
html.ww-theme-blending .pill-choice span,
html.ww-theme-blending .status-pill {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.ww-theme-blending .site-header {
  background-color: var(--ww-bg) !important;
}

html.ww-theme-blending .site-nav__link,
html.ww-theme-blending .grid-dots__btn,
html.ww-theme-blending .project-switch__btn,
html.ww-theme-blending .pill-choice span,
html.ww-theme-blending .inquiry__submit,
html.ww-theme-blending .field__input,
html.ww-theme-blending .field__textarea {
  transition: none !important;
}

/* ——— Theme toggle ——— */

.theme-toggle {
  width: 28px;
  height: 28px;
  border-radius: 980px;
  background-color: var(--ww-surface);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  border: none;
  color: var(--ww-text);
  position: relative;
  overflow: hidden;
  transition-property: transform, background-color, opacity;
  transition-duration: 0.35s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
  background-color: var(--ww-surface-hover);
}

.theme-toggle:active {
  transform: scale(0.94);
  background-color: var(--ww-surface-active);
}

.theme-toggle__icon {
  width: 14px;
  height: 14px;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  pointer-events: none;
  offset-position: 0 0;
  /* Arc sized for the 28×28 pill; 50% lands on the geometric center */
  offset-path: path("M 8.56 18.66 Q 14 9.34 19.44 18.66");
  offset-anchor: center;
  offset-rotate: 0deg;
}

.theme-toggle__sun {
  offset-distance: 50%;
  opacity: 1;
}

.theme-toggle__moon {
  offset-distance: 0%;
  opacity: 0;
}

/* ——— Nav color tokens (structure in layout.css) ——— */

.site-nav {
  background-color: var(--ww-surface);
}

.site-nav__link {
  color: var(--ww-text);
}

.site-nav__link:hover {
  background-color: var(--ww-surface-hover);
}

.site-nav__link:active {
  background-color: var(--ww-surface-active);
}

.site-nav__link.is-current {
  background-color: var(--ww-pill);
  box-shadow: var(--ww-pill-shadow);
  color: var(--ww-text);
}

.site-nav__link.is-current:hover {
  background-color: var(--ww-pill);
}

/* ——— Grid dots ——— */

.grid-dots {
  background-color: var(--ww-surface);
}

.grid-dots__btn {
  background-color: var(--ww-control-dot);
}

.grid-dots__btn:hover {
  background-color: var(--ww-control-dot-hover);
}

.grid-dots__btn.is-active,
.grid-dots__btn.is-active:hover {
  background-color: var(--ww-control-dot-active);
}

.gallery-snap__dot {
  background-color: var(--ww-control-dot);
}

.gallery-snap__dot.is-active {
  background-color: var(--ww-control-dot-active);
}

.project-switch {
  background-color: var(--ww-surface);
}

.project-switch__btn {
  color: var(--ww-text);
}

.project-switch__btn:hover {
  background-color: var(--ww-surface-hover);
}

.project-switch__btn:active {
  background-color: var(--ww-surface-active);
}

.project-switch__btn.is-disabled {
  color: var(--ww-muted);
}

/* ——— Inquiry ——— */

.inquiry {
  color: var(--ww-text);
  background-color: var(--ww-surface);
}

.inquiry__capacity,
.inquiry__thanks,
.field__label,
.field__label .req {
  color: var(--ww-muted);
}

.field__input,
.field__textarea {
  color: var(--ww-text);
  background-color: var(--ww-pill);
  box-shadow: var(--ww-pill-shadow);
}

.pill-choice span {
  color: var(--ww-text);
  background-color: var(--ww-surface-active);
  box-shadow: none;
}

.pill-choice:hover span,
.pill-choice:active span {
  background-color: var(--ww-surface-active);
}

.field__input:focus,
.field__textarea:focus,
.pill-choice input:checked + span,
.inquiry__submit {
  background-color: var(--ww-pill);
  box-shadow: var(--ww-pill-shadow);
  color: var(--ww-text);
}

.pill-choice:hover input:checked + span {
  background-color: var(--ww-pill);
}

/* ——— Media frames ——— */

.home-feed__item,
.work-card__media,
.info-portrait,
.project-gallery__item {
  background-color: var(--ww-placeholder);
}

.project-gallery__item--type-cycle,
.home-feed__item--type-cycle {
  background-color: transparent;
}

.work-card__title,
.info-copy,
.project-meta__copy {
  color: var(--ww-text);
}

.info-copy,
.project-meta__copy {
  background-color: var(--ww-surface);
}

.work-card__meta,
.page-intro,
.project-meta__nav {
  color: var(--ww-muted);
}

.ww-brand {
  color: var(--ww-text);
}

/* Full-page dissolve blend (View Transitions) */
@supports (view-transition-name: none) {
  html {
    view-transition-name: root;
  }

  ::view-transition-group(root) {
    animation-duration: 0.95s;
    animation-timing-function: var(--ww-theme-ease);
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.95s;
    animation-timing-function: var(--ww-theme-ease);
    mix-blend-mode: normal;
  }

  ::view-transition-old(root) {
    animation-name: ww-theme-fade-out;
  }

  ::view-transition-new(root) {
    animation-name: ww-theme-fade-in;
  }

  @keyframes ww-theme-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes ww-theme-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* Fallback veil dissolve when View Transitions are unavailable */
.ww-theme-veil {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  background: var(--ww-bg);
  opacity: 0;
  transition: opacity 0.48s var(--ww-theme-ease);
}

.ww-theme-veil.is-cover {
  opacity: 1;
}

.ww-theme-veil.is-reveal {
  opacity: 0;
  transition-duration: 0.52s;
}

/* Avoid muddy mid-tones under the dissolve */
html.ww-theme-switching {
  transition: none !important;
}

html.ww-theme-switching *:not(.theme-toggle):not(.theme-toggle__icon) {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    transition: none !important;
  }

  .slot-col__track {
    animation: none !important;
  }

  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}