/* Shared gradient theme for public pages and workspaces. */

:root {
  --cin-ease: cubic-bezier(.22, 1, .36, 1);
  --cin-ink: #352268;
  --cin-soft: #efebff;
  --cin-border: #cfc7ed;
  --cin-glow: rgba(112, 70, 225, .12);
  --cin-heading: linear-gradient(
    110deg, #233c93 5%, #702aab 55%, #ad2767 100%
  );
  --cin-panel: linear-gradient(
    135deg, #ffffff 0%, #f3efff 65%, #fff0f5 100%
  );
  --cin-page:
    radial-gradient(ellipse at 8% 8%, #ded6ff 0, transparent 48%),
    radial-gradient(ellipse at 95% 40%, #f9dcea 0, transparent 45%),
    linear-gradient(145deg, #f7f8ff, #f0edfc 60%, #fff4f7);
}

.dark,
.dark-zone {
  --cin-ink: #e4d9ff;
  --cin-soft: #28213e;
  --cin-border: #4b3b70;
  --cin-glow: rgba(167, 97, 255, .2);
  --cin-heading: linear-gradient(
    105deg, #e9f0ff 5%, #c5b1ff 48%, #ffb9d8 100%
  );
  --cin-panel: linear-gradient(
    135deg, #16223d 0%, #211d3d 65%, #301d36 100%
  );
  --cin-page:
    radial-gradient(ellipse at 8% 8%, #302458 0, transparent 48%),
    radial-gradient(ellipse at 95% 40%, #41213c 0, transparent 45%),
    linear-gradient(145deg, #0b1328, #17162d 60%, #22162b);
}

body,
.bg-bg {
  background-image: var(--cin-page);
  background-color: var(--bg);
}

body {
  isolation: isolate;
}

.dark-zone {
  background-image: var(--cin-page);
}

.bg-surface {
  background-image: var(--cin-panel);
}

.bg-surface-2 {
  background-image: linear-gradient(
    120deg, var(--cin-soft), var(--surface-2)
  );
}

section.section-y {
  background-image: radial-gradient(
    ellipse at 100% 0, var(--cin-glow), transparent 60%
  );
}

section.section-y:nth-of-type(even) {
  background-image: radial-gradient(
    ellipse at 0 70%, var(--cin-glow), transparent 65%
  );
}

[data-site-header],
header.bg-surface,
aside.bg-surface {
  background-image: var(--cin-panel);
  border-color: var(--cin-border);
}

:is(h1.display, h1.display-sm, .h-section) {
  color: var(--cin-ink);
  background-image: var(--cin-heading);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: .07em;
}

.eyebrow {
  color: var(--cin-ink);
  letter-spacing: .12em;
}

:is(a, button).bg-accent {
  background: linear-gradient(
    110deg, #3157cb, #7037ba 58%, #a62971
  );
  color: #fff;
  box-shadow: 0 6px 20px var(--cin-glow);
  border-color: transparent;
}

[role="progressbar"] > .bg-accent {
  background: linear-gradient(90deg, #416bec, #a15ade, #e985be);
}

nav [aria-current="page"] {
  background-image: linear-gradient(
    110deg, var(--cin-soft), var(--surface-2)
  );
  box-shadow: inset 3px 0 #9666df;
}

:is(a, button, input, textarea, select, summary) {
  transition:
    background-color .28s ease,
    border-color .28s ease,
    box-shadow .4s var(--cin-ease),
    translate .4s var(--cin-ease),
    color .28s ease;
}

:is(a, button):focus-visible {
  outline: 3px solid #ae83ee;
  outline-offset: 4px;
}

:is(input, textarea, select):focus {
  box-shadow: 0 0 0 4px var(--cin-glow);
  border-color: #9166d0;
}

.cin-card {
  transition:
    translate .6s var(--cin-ease),
    box-shadow .6s var(--cin-ease),
    border-color .3s ease;
}

.crop-frame {
  box-shadow: 0 20px 65px var(--cin-glow);
  border: 1px solid var(--cin-border);
}

.crop-frame img {
  transition: scale 1.2s var(--cin-ease);
}

@media (hover: hover) and (pointer: fine) {
  .cin-card:hover {
    translate: 0 -5px;
    box-shadow: 0 18px 45px var(--cin-glow);
    border-color: #9f78d6;
  }

  .crop-frame:hover img {
    scale: 1.035;
  }

  :is(a, button).bg-accent:hover {
    translate: 0 -2px;
    box-shadow: 0 10px 28px rgba(112, 55, 186, .32);
  }

  nav a:hover {
    translate: 2px 0;
  }
}

:is(a, button):active {
  translate: 0 1px;
}

@keyframes cin-enter {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.animate-fade-up {
  animation: cin-enter .9s var(--cin-ease) both;
}

.animate-pop,
dialog[open] {
  animation: cin-enter .4s var(--cin-ease) both;
}

dialog::backdrop {
  background: rgba(13, 12, 35, .65);
  backdrop-filter: blur(5px);
}

details[open] > :not(summary) {
  animation: cin-enter .45s var(--cin-ease) both;
}

.cin-aura {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.cin-aura::before,
.cin-aura::after {
  content: "";
  position: absolute;
  width: 65vw;
  height: 70vh;
  border-radius: 50%;
  background: radial-gradient(
    ellipse, rgba(139, 91, 238, .17), transparent 68%
  );
  animation: cin-drift 18s ease-in-out infinite alternate;
}

.cin-aura::before {
  left: -20vw;
  top: 5vh;
}

.cin-aura::after {
  right: -20vw;
  bottom: -20vh;
  background: radial-gradient(
    ellipse, rgba(233, 97, 166, .13), transparent 68%
  );
  animation-delay: -9s;
}

@keyframes cin-drift {
  to {
    transform: translate3d(12vw, 8vh, 0) scale(1.12);
  }
}

.cin-motion-toggle {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 45;
  border: 1px solid var(--cin-border);
  border-radius: 99px;
  background: var(--surface);
  color: var(--fg);
  padding: 7px 12px;
  font-size: 11px;
  box-shadow: 0 3px 15px var(--cin-glow);
}

@media (max-width: 767px) {
  .cin-motion-toggle {
    bottom: 80px;
  }

  .cin-aura::before,
  .cin-aura::after {
    width: 95vw;
  }

  .cin-card:hover {
    translate: none;
  }
}

html.cin-paused *,
html.cin-paused *::before,
html.cin-paused *::after {
  animation: none !important;
}

html.cin-paused .animate-fade-up,
html.cin-paused [data-reveal] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .cin-aura {
    display: none;
  }

  html.js [data-reveal] {
    opacity: 1 !important;
  }

  .cin-card:hover,
  :is(a, button):hover {
    translate: none;
  }

  .crop-frame:hover img {
    scale: 1;
  }
}

@media print {
  .cin-aura,
  .cin-motion-toggle {
    display: none;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
  }

  h1,
  .h-section {
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
  }
  
}