/* Dark-default theme control and the opt-in liquid-glass light theme. */
.section:not(.section--work) {
  content-visibility: auto;
  contain-intrinsic-size: 820px;
}

.site-header { backdrop-filter: blur(15px); }
.glass-card { backdrop-filter: blur(10px); }

.theme-toggle {
  position: relative;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
  color: #dce5ef;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.theme-toggle:hover {
  border-color: rgba(183, 154, 255, .46);
  background: rgba(183, 154, 255, .1);
  transform: translateY(-2px);
}

.theme-toggle__icon {
  position: absolute;
  display: grid;
  place-items: center;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .75, .2, 1);
}

.theme-toggle__icon svg { width: 15px; height: 15px; stroke-width: 1.8; }
.theme-toggle__icon--sun { opacity: 0; transform: rotate(-60deg) scale(.45); }
.theme-toggle__icon--moon { opacity: 1; transform: rotate(0) scale(1); }

html[data-theme="light"] {
  color-scheme: light;
  --bg: #e7eef7;
  --surface: rgba(255, 255, 255, .76);
  --surface-2: rgba(255, 255, 255, .68);
  --ink: #0c1725;
  --muted: #46586d;
  --line: rgba(43, 64, 91, .19);
  --violet: #7c5ce4;
  --blue: #397fc2;
  --mint: #168c7f;
  --coral: #e7836f;
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 10% 12%, rgba(182, 218, 255, .8), transparent 29rem),
    radial-gradient(circle at 88% 25%, rgba(214, 194, 255, .63), transparent 32rem),
    radial-gradient(circle at 48% 82%, rgba(170, 235, 225, .42), transparent 36rem),
    linear-gradient(135deg, #f8fbff 0%, #e8eff8 44%, #f6f2ff 100%);
  color: var(--ink);
}

html[data-theme="light"] body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 8%, rgba(255, 255, 255, .62) 26%, transparent 43%),
    radial-gradient(ellipse at 72% 8%, rgba(255, 255, 255, .86), transparent 26%);
  content: "";
  pointer-events: none;
}

html[data-theme="light"] .theme-toggle {
  border-color: rgba(91, 109, 136, .16);
  background: rgba(255, 255, 255, .58);
  color: #7c5ce4;
  box-shadow: inset 0 1px rgba(255, 255, 255, .92), 0 8px 22px rgba(72, 91, 118, .12);
}

html[data-theme="light"] .theme-toggle__icon--sun { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="light"] .theme-toggle__icon--moon { opacity: 0; transform: rotate(60deg) scale(.45); }

html[data-theme="light"] .site-header {
  border-color: rgba(255, 255, 255, .88);
  background: linear-gradient(135deg, rgba(255, 255, 255, .84), rgba(231, 241, 252, .68));
  box-shadow: 0 18px 50px rgba(68, 86, 112, .16), inset 0 1px rgba(255, 255, 255, .96), inset 0 -1px rgba(106, 128, 158, .08);
  backdrop-filter: blur(18px) saturate(1.35);
}

html[data-theme="light"] .site-header:hover { background: rgba(255, 255, 255, .76); }
html[data-theme="light"] .brand__mark { background: #172233; color: #f8fbff; }
html[data-theme="light"] .site-nav { color: #46566a; }
html[data-theme="light"] .button--light { border-color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .78); color: #152131; }
html[data-theme="light"] .button--dark { background: linear-gradient(135deg, #172337, #6e57c7); color: #fff; }

html[data-theme="light"] .sequence__canvas { filter: brightness(1.08) saturate(.82); }
html[data-theme="light"] .sequence__veil {
  background:
    linear-gradient(90deg, rgba(245, 249, 255, .88) 0%, rgba(237, 244, 252, .68) 43%, rgba(225, 236, 248, .28) 100%),
    linear-gradient(0deg, rgba(228, 238, 249, .52), transparent 42%, rgba(246, 250, 255, .42));
}

html[data-theme="light"] .sequence__copy {
  padding: clamp(20px, 2.5vw, 30px);
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(235, 244, 253, .56));
  box-shadow: 0 24px 65px rgba(62, 80, 106, .12), inset 0 1px rgba(255, 255, 255, .75);
  backdrop-filter: blur(12px) saturate(1.2);
}

html[data-theme="light"] .sequence__copy h1,
html[data-theme="light"] .sequence__copy h2 { color: #0b1624; filter: none; text-shadow: 0 2px 12px rgba(255, 255, 255, .72); }
html[data-theme="light"] .hero-subtitle,
html[data-theme="light"] .text-link { color: #26384e; }

html[data-theme="light"] .section:not(.section--contact),
html[data-theme="light"] .section--contact {
  border-color: rgba(255, 255, 255, .72);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(230, 240, 251, .62)),
    radial-gradient(circle at 86% 8%, rgba(255, 255, 255, .9), transparent 28%);
  box-shadow: 0 32px 90px rgba(63, 82, 111, .13), inset 0 1px rgba(255, 255, 255, .98), inset 0 -1px rgba(86, 110, 143, .07);
  backdrop-filter: blur(16px) saturate(1.28);
}

html[data-theme="light"] .section:not(.section--contact)::before {
  border-color: rgba(117, 91, 217, .1);
  box-shadow: 0 0 0 32px rgba(116, 91, 218, .025), 0 0 0 64px rgba(64, 132, 199, .018);
}

html[data-theme="light"] .glass-card {
  border-color: rgba(255, 255, 255, .86);
  background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(229, 240, 251, .58));
  box-shadow: 0 20px 54px rgba(63, 82, 111, .11), inset 0 1px rgba(255, 255, 255, .96), inset 0 -1px rgba(75, 102, 137, .07);
  backdrop-filter: blur(12px) saturate(1.25);
}

html[data-theme="light"] .glass-card::before {
  background: linear-gradient(115deg, rgba(255, 255, 255, .8), transparent 28%, transparent 70%, rgba(126, 98, 231, .05));
}

html[data-theme="light"] .glass-card:hover {
  border-color: rgba(255, 255, 255, .96);
  box-shadow: 0 28px 70px rgba(74, 90, 125, .16), 0 0 0 1px rgba(120, 92, 223, .07);
}

html[data-theme="light"] .service-card,
html[data-theme="light"] .tool,
html[data-theme="light"] .process-card,
html[data-theme="light"] .quote-card { color: var(--ink); }
html[data-theme="light"] .service-card p,
html[data-theme="light"] .process-card p,
html[data-theme="light"] .quote-card p { color: var(--muted); }
html[data-theme="light"] .section-note,
html[data-theme="light"] .contact-intro,
html[data-theme="light"] .contact-form label,
html[data-theme="light"] .review-form label,
html[data-theme="light"] .review-rating legend { color: #4a5c72; }
html[data-theme="light"] .tools-row { border-color: rgba(255, 255, 255, .8); }
html[data-theme="light"] .tool { border-color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .64); color: #3f5269; }
html[data-theme="light"] .tool__logo { background: rgba(255, 255, 255, .68); box-shadow: inset 0 1px #fff, 0 9px 22px rgba(61, 83, 111, .11); }

html[data-theme="light"] .section--about.about-editorial {
  background:
    radial-gradient(circle at 22% 30%, rgba(157, 204, 255, .48), transparent 34%),
    radial-gradient(circle at 74% 20%, rgba(213, 193, 255, .54), transparent 31%),
    linear-gradient(135deg, rgba(248, 252, 255, .82), rgba(231, 240, 250, .58)) !important;
}
html[data-theme="light"] .about-editorial__visual {
  background-image:
    linear-gradient(90deg, transparent 70%, rgba(238, 245, 252, .45) 86%, #eef5fc 100%),
    url("./assets/about-editorial-art.png");
}
html[data-theme="light"] .about-editorial__hello,
html[data-theme="light"] .about-editorial__bio { color: #3d4f66; }
html[data-theme="light"] .about-editorial__content h2,
html[data-theme="light"] .about-editorial__content h2 span { color: #111b29; }
html[data-theme="light"] .about-editorial__button,
html[data-theme="light"] .about-editorial__skills span { border-color: rgba(72, 92, 121, .17); background: rgba(255, 255, 255, .46); color: #223043; }

html[data-theme="light"] .section--work.work-stack-section {
  background:
    radial-gradient(circle at 12% 8%, rgba(202, 222, 255, .56), transparent 35%),
    linear-gradient(145deg, rgba(255, 255, 255, .62), rgba(230, 239, 249, .38));
}

html[data-theme="light"] .work-stack__card { border-color: rgba(255, 255, 255, .76); box-shadow: 0 35px 80px rgba(52, 73, 101, .18), inset 0 1px #fff; }
html[data-theme="light"] .work-stack__visual { background: linear-gradient(145deg, #edf4fb, #dce8f4); }
html[data-theme="light"] .work-stack__content { background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(225, 236, 248, .96)); }
html[data-theme="light"] .work-stack__content h3,
html[data-theme="light"] .work-stack__details dd { color: #152131; }
html[data-theme="light"] .work-stack__content > p { color: #43566d; }
html[data-theme="light"] .work-stack__meta,
html[data-theme="light"] .work-stack__details dt { color: #4c6077; }
html[data-theme="light"] .work-stack__details { border-color: rgba(58, 78, 105, .11); }
html[data-theme="light"] .work-stack__tags span { border-color: rgba(var(--accent-rgb), .24); background: rgba(var(--accent-rgb), .12); color: #42566d; }
html[data-theme="light"] .work-stack__start { border-color: rgba(62, 83, 111, .15); background: rgba(255, 255, 255, .45); color: #192536; }

html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form select,
html[data-theme="light"] .contact-form textarea,
html[data-theme="light"] .review-form input,
html[data-theme="light"] .review-form textarea {
  border-color: rgba(82, 103, 132, .14);
  background: rgba(255, 255, 255, .76);
  color: #172336;
  box-shadow: inset 0 1px rgba(255, 255, 255, .9);
}

html[data-theme="light"] .contact-form input:focus,
html[data-theme="light"] .contact-form select:focus,
html[data-theme="light"] .contact-form textarea:focus,
html[data-theme="light"] .review-form input:focus,
html[data-theme="light"] .review-form textarea:focus { border-color: rgba(113, 82, 218, .48); background: rgba(255, 255, 255, .72); }
html[data-theme="light"] .contact-form input::placeholder,
html[data-theme="light"] .contact-form textarea::placeholder,
html[data-theme="light"] .review-form input::placeholder,
html[data-theme="light"] .review-form textarea::placeholder { color: #64758a; opacity: 1; }
html[data-theme="light"] .contact-form option { background: #f3f7fc; }
html[data-theme="light"] .review-rating__stars label { border-color: rgba(73, 95, 125, .18); background: rgba(255, 255, 255, .7); color: #75859a; }
html[data-theme="light"] .review-rating__stars label:hover,
html[data-theme="light"] .review-rating__stars label:hover ~ label,
html[data-theme="light"] .review-rating__stars input:checked ~ label { color: #7659d8; background: rgba(125, 91, 224, .1); }
html[data-theme="light"] .review-form__count { background: rgba(241, 246, 252, .84); color: #77869a; }

html[data-theme="light"] .contact-rail {
  border-color: rgba(255, 255, 255, .82);
  background: linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(224, 236, 249, .7));
  box-shadow: 0 22px 50px rgba(52, 74, 103, .17), inset 0 1px #fff;
  backdrop-filter: blur(14px) saturate(1.25);
}
html[data-theme="light"] .contact-rail__link { border-color: rgba(84, 104, 132, .17); background: rgba(255, 255, 255, .7); color: #172437; }
html[data-theme="light"] .site-footer { border-color: rgba(66, 88, 117, .16); color: #4e6076; }
html[data-theme="light"] .site-footer a,
html[data-theme="light"] .site-footer strong { color: #1d2a3c; }

html::view-transition-old(root),
html::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html::view-transition-new(root) { animation: liquid-theme-reveal .78s cubic-bezier(.2, .74, .2, 1) both; }

@keyframes liquid-theme-reveal {
  from { clip-path: circle(0 at var(--theme-x, 92%) var(--theme-y, 5%)); }
  to { clip-path: circle(150% at var(--theme-x, 92%) var(--theme-y, 5%)); }
}

@media (max-width: 520px) {
  .theme-toggle { width: 31px; height: 31px; flex-basis: 31px; }
  .site-header { width: calc(100% - 24px); gap: 8px; padding: 8px 10px; }
  .site-header .brand small,
  .site-header .button--small { display: none; }
  .site-header .menu-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    padding: 0;
  }
  html[data-theme="light"] .sequence__copy { padding: 18px; border-radius: 22px; }
}

@media (max-width: 850px) {
  .glass-card,
  html[data-theme="light"] .glass-card,
  html[data-theme="light"] .section:not(.section--contact),
  html[data-theme="light"] .section--contact { backdrop-filter: none; }
  .site-header,
  html[data-theme="light"] .site-header,
  html[data-theme="light"] .sequence__copy,
  html[data-theme="light"] .contact-rail { backdrop-filter: blur(9px) saturate(1.15); }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-card,
  .site-header,
  html[data-theme="light"] .sequence__copy,
  html[data-theme="light"] .section,
  html[data-theme="light"] .contact-rail { backdrop-filter: none; }
}

@media (max-width: 1199px) {
  .site-header .theme-toggle { margin-left: auto; }
  .site-header .button--small { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle__icon { transition: none; }
  html::view-transition-new(root) { animation: none; }
}