/* [project]/src/components/calendar/calendar.css [app-client] (css) */
.cal-page {
  --cal-accent: var(--color-cyan-bright);
  --cal-glow: var(--color-cyan);
  isolation: isolate;
  position: relative;
}

.cal-page > header {
  position: relative;
}

.cal-mark {
  color: var(--cal-accent);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--cal-glow) 15%, transparent));
}

.cal-intro {
  align-items: center;
  gap: 2rem;
  margin-bottom: 2.5rem;
  display: grid;
}

.cal-pass {
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--color-magenta) 35%, transparent);
  background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--color-magenta) 15%, transparent), transparent 75%), var(--bg-surface);
  border-radius: 1rem;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  padding: 1.5rem;
  display: flex;
  position: relative;
}

.cal-pass-buy {
  transition: transform var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.cal-pass-shell:hover .cal-pass-buy {
  border-color: color-mix(in srgb, var(--color-magenta) 60%, transparent);
  box-shadow: var(--glow-cherry-sm);
  transform: translateY(-2px);
}

.cal-discord {
  border: 1px solid color-mix(in srgb, var(--color-violet) 35%, transparent);
  background: color-mix(in srgb, var(--color-violet) 10%, transparent);
  width: 100%;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: left;
  border-radius: .75rem;
  flex-direction: column;
  gap: .5rem;
  padding: .75rem .9rem;
  display: flex;
}

.cal-sound {
  border: 1px solid var(--color-edge);
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-mist-faint);
  background: color-mix(in srgb, var(--color-violet) 8%, transparent);
  border-radius: 50%;
  place-items: center;
  margin-bottom: .1rem;
  transition: color .2s, border-color .2s;
  display: grid;
}

.cal-sound:hover, .cal-sound[aria-pressed="true"] {
  color: var(--color-cyan);
  border-color: color-mix(in srgb, var(--color-cyan) 45%, transparent);
}

.cal-chip {
  border: 1px solid var(--color-edge);
  background: color-mix(in srgb, var(--color-violet) 8%, transparent);
  border-radius: 2rem;
  padding: .4rem .7rem;
}

.cal-how {
  border-block: 1px solid var(--color-edge);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem 0;
  display: grid;
}

.cal-how li {
  align-items: baseline;
  gap: 1rem;
  display: flex;
}

.cal-guide {
  overflow-anchor: none;
  margin: -1.25rem 0 2.5rem;
}

.cal-guide-chevron {
  transition: transform .42s;
}

.cal-guide[open]:not([data-expanded="false"]) .cal-guide-chevron {
  transform: rotate(180deg);
}

.cal-guide[open]:not([data-expanded="false"]) > summary {
  color: var(--color-cyan);
}

.cal-board {
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--color-violet) 28%, transparent);
  background: radial-gradient(ellipse at 50% 0, color-mix(in srgb, var(--color-violet) 8%, transparent), transparent 55%), var(--color-night-900);
  border-radius: 1.25rem;
  padding: clamp(1rem, 3vw, 2rem);
  position: relative;
}

.cal-board-art {
  border-radius: inherit;
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: clip;
}

.cal-board-art img {
  z-index: 2;
  object-fit: contain;
  opacity: .14;
  mix-blend-mode: screen;
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

.cal-countdown {
  flex-direction: column;
  gap: .4rem;
  display: flex;
}

.cal-weekdays {
  display: none;
}

.cal-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  display: grid;
}

.cal-door {
  border: 1px solid color-mix(in srgb, var(--color-violet) 24%, transparent);
  background: linear-gradient(145deg, var(--color-night-700), var(--color-night-800));
  width: 100%;
  height: 100%;
  min-height: 145px;
  color: var(--color-mist-faint);
  border-radius: .75rem;
  flex-direction: column;
  align-items: center;
  padding: .7rem .4rem;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.cal-door:before {
  content: "";
  border: 1px solid color-mix(in srgb, var(--color-violet) 8%, transparent);
  pointer-events: none;
  border-radius: .5rem;
  position: absolute;
  inset: 5px;
}

.cal-door-top {
  text-transform: uppercase;
  letter-spacing: .08em;
  justify-content: space-between;
  align-items: center;
  gap: .25rem;
  width: 100%;
  font-size: .6rem;
  display: flex;
}

.cal-grid > li {
  perspective: 700px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--cal-accent) 8%, transparent), transparent 70%);
  border-radius: .75rem;
  position: relative;
}

.cal-finale .cal-door-top, .cal-finale .cal-number {
  color: var(--cal-accent);
}

.cal-door-top svg {
  width: 14px;
  height: 14px;
}

.cal-door-top .cal-finale-icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cal-glow) 40%, transparent));
  margin: -10px -4px -8px 0;
}

.cal-number {
  font-family: var(--font-display);
  color: var(--color-mist);
  margin: .65rem 0 .4rem;
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.2;
}

.cal-door-caption {
  font-size: .65rem;
}

.cal-door-timer {
  font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-top: .3rem;
  font-size: .6rem;
}

.cal-door-ready {
  cursor: pointer;
  color: var(--color-magenta-glow);
  border-color: color-mix(in srgb, var(--color-magenta) 60%, transparent);
  background: radial-gradient(ellipse at bottom, color-mix(in srgb, var(--color-magenta) 18%, transparent), transparent), var(--color-night-700);
}

.cal-door-ready .cal-number {
  color: #fff;
  text-shadow: 0 0 20px color-mix(in srgb, var(--color-magenta) 40%, transparent);
}

.cal-grid > li:hover .cal-door-ready:not(:disabled), .cal-door-ready:focus-visible {
  border-color: var(--color-magenta-bright);
  box-shadow: 0 8px 26px -10px var(--color-magenta);
  transform: translateY(-4px)rotate(-1deg);
}

.cal-door-next:disabled {
  border-color: color-mix(in srgb, var(--cal-accent) 50%, transparent);
  color: var(--cal-accent);
  animation: 2.6s ease-in-out infinite cal-breathe;
}

.cal-door-next:disabled .cal-number {
  color: var(--color-mist);
}

.cal-door-unlocking {
  animation: .9s cubic-bezier(.2, .8, .3, 1.2) both cal-unlock;
}

.cal-finale {
  border-color: color-mix(in srgb, var(--cal-accent) 45%, transparent);
  background: radial-gradient(ellipse at bottom, color-mix(in srgb, var(--cal-glow) 15%, transparent), transparent 70%), linear-gradient(145deg, var(--color-night-700), var(--color-night-800));
  box-shadow: 0 0 24px -10px var(--cal-glow);
}

.cal-finale:before {
  border-color: color-mix(in srgb, var(--cal-accent) 14%, transparent);
}

.cal-finale.cal-door-ready {
  color: var(--cal-accent);
  border-color: color-mix(in srgb, var(--cal-accent) 70%, transparent);
}

.cal-finale.cal-door-ready .cal-number {
  color: #fff;
  text-shadow: 0 0 20px color-mix(in srgb, var(--cal-glow) 50%, transparent);
}

.cal-grid > li:hover .cal-finale.cal-door-ready:not(:disabled), .cal-finale.cal-door-ready:focus-visible {
  border-color: var(--cal-accent);
  box-shadow: 0 8px 26px -10px var(--cal-glow);
}

.cal-door-opened {
  border-color: color-mix(in srgb, var(--color-cyan) 50%, transparent);
  color: var(--color-cyan);
}

.cal-door-done {
  border-color: color-mix(in srgb, var(--color-lime) 45%, transparent);
  color: var(--color-lime);
}

.cal-grid > li:has(.cal-flyer) {
  z-index: 3;
}

.cal-flyer {
  pointer-events: none;
  width: 44px;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cal-glow) 60%, transparent));
  margin-left: -22px;
  animation: 1.2s cubic-bezier(.3, .6, .4, 1) both cal-fly;
  position: absolute;
  top: 35%;
  left: 50%;
}

.cal-flyer svg {
  width: 100%;
  height: auto;
  display: block;
}

.cal-progress {
  background: var(--color-night-600);
  width: 100%;
  height: 5px;
  accent-color: var(--color-cyan);
  border: 0;
  border-radius: 1rem;
  display: block;
  overflow: hidden;
}

.cal-progress::-webkit-progress-bar {
  background: var(--color-night-600);
}

.cal-progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--color-magenta), var(--color-cyan));
}

.cal-progress::-moz-progress-bar {
  background: var(--color-cyan);
}

.cal-welcome {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem .5rem 1rem;
  animation: .65s both cal-arrive;
  display: flex;
}

.cal-welcome-mark {
  background: color-mix(in srgb, var(--color-magenta) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-magenta) 40%, transparent);
  width: 100px;
  height: 100px;
  color: var(--color-magenta-bright);
  box-shadow: 0 0 60px -20px var(--color-magenta);
  border-radius: 50%;
  place-items: center;
  display: grid;
  position: relative;
}

.cal-welcome-mark > :last-child {
  color: var(--color-cyan);
  position: absolute;
  top: 6px;
  right: 2px;
}

.cal-task {
  flex-direction: column;
  gap: 1.5rem;
  display: flex;
}

.cal-task button {
  white-space: normal;
}

.cal-video {
  border: 1px solid color-mix(in srgb, var(--color-magenta) 35%, transparent);
  background: var(--color-void);
  width: 100%;
  max-height: 70svh;
  box-shadow: 0 0 40px -18px var(--color-magenta);
  border-radius: .75rem;
  display: block;
}

.cal-task-dialog {
  scrollbar-width: thin;
  scrollbar-color: var(--color-violet) transparent;
  overflow-y: auto;
}

.cal-task-dialog > .dialog-content {
  max-height: none;
}

.cal-task-dialog .dialog-body {
  flex: none;
  overflow: visible;
}

.cal-task-dialog[open] {
  animation: .35s ease-out both cal-reveal;
}

.cal-task-dialog[open]::backdrop {
  animation: .35s ease-out both cal-backdrop;
}

.cal-door-revealing {
  transform-origin: 0;
  animation: .65s cubic-bezier(.2, .7, .3, 1) both cal-open-door;
}

@keyframes cal-open-door {
  0% {
    transform: rotateY(0);
    box-shadow: 0 0 #0000;
  }

  30% {
    box-shadow: 6px 0 30px -8px var(--cal-accent);
    transform: rotateY(-8deg);
  }

  100% {
    opacity: .15;
    box-shadow: 15px 0 50px var(--color-magenta);
    transform: rotateY(-100deg);
  }
}

@keyframes cal-breathe {
  0%, 100% {
    box-shadow: 0 0 #0000;
  }

  50% {
    box-shadow: 0 0 22px -6px color-mix(in srgb, var(--cal-glow) 70%, transparent);
  }
}

@keyframes cal-fly {
  0% {
    opacity: 0;
    transform: translate(0)scale(.3);
  }

  15% {
    opacity: 1;
    transform: translate(-4px, -14px)scale(.8);
  }

  55% {
    transform: translate(14px, -70px)scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(34px, -130px)scale(.6);
  }
}

@keyframes cal-unlock {
  0% {
    transform: scale(1);
    box-shadow: 0 0 #0000;
  }

  40% {
    box-shadow: 0 0 40px -4px var(--color-magenta);
    transform: scale(1.07);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 #0000;
  }
}

@keyframes cal-arrive {
  from {
    opacity: 0;
    transform: translateY(15px)scale(.95);
  }

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

@keyframes cal-reveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes cal-backdrop {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (min-width: 640px) {
  .cal-how {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cal-weekdays {
    text-align: center;
    color: var(--color-mist-faint);
    text-transform: uppercase;
    letter-spacing: .08em;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .6rem;
    margin-bottom: .75rem;
    font-size: .65rem;
    display: grid;
  }

  .cal-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .cal-first {
    grid-column-start: var(--cal-first, 1);
  }
}

@media (max-width: 639px) {
  .cal-board-art img {
    top: calc(var(--header-height) + var(--banner-height));
    height: calc(100svh - var(--header-height) - var(--banner-height));
    object-fit: cover;
    position: sticky;
  }
}

@media (max-width: 359px) {
  .cal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .cal-intro {
    grid-template-columns: 1.35fr 1fr;
    gap: 4rem;
  }

  .cal-door {
    min-height: 170px;
    padding: .9rem .6rem;
  }

  .cal-door-caption {
    font-size: .75rem;
  }

  .cal-door-timer {
    font-size: .7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cal-welcome, .cal-door-revealing, .cal-door-next:disabled, .cal-door-unlocking, .cal-task-dialog[open], .cal-task-dialog[open]::backdrop, .cal-flyer, .cal-flyer * {
    animation: none;
  }

  .cal-door, .cal-pass-buy {
    transition: none;
  }

  .cal-door-ready:hover:not(:disabled), .cal-door-ready:focus-visible, .cal-pass-buy:hover {
    transform: none;
  }
}

.cal-theme-halloween {
  --cal-accent: #ffb270;
  --cal-glow: #ff9438;
  background: radial-gradient(60% 22% at 100% 20%, #ff94380a, #0000), radial-gradient(70% 30% at 0 45%, #a98cff0b, #0000);
}

.cal-theme-halloween > header {
  background-image: radial-gradient(at 90% 10%, #ff94380b, #0000 55%);
}

.cal-theme-halloween .cal-board:before, .cal-theme-halloween .cal-board:after {
  content: "";
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' fill='none' stroke='%23c9bfff' stroke-opacity='.45' stroke-width='.7'%3E%3Cpath d='M0 0L74 30.6M0 0L56.6 56.6M0 0L30.6 74M22 0Q17.7 3.5 20.3 8.4Q15 10 15.6 15.6Q10 15 8.4 20.3Q3.5 17.7 0 22M40 0Q32.2 6.4 37 15.3Q27.3 18.2 28.3 28.3Q18.2 27.3 15.3 37Q6.4 32.2 0 40M58 0Q46.7 9.3 53.6 22.2Q39.6 26.5 41 41Q26.5 39.6 22.2 53.6Q9.3 46.7 0 58M74 0Q59.5 11.8 68.4 28.3Q50.4 33.7 52.3 52.3Q33.7 50.4 28.3 68.4Q11.8 59.5 0 74'/%3E%3C/svg%3E") 0 0 / 100% no-repeat;
  width: 88px;
  height: 88px;
  position: absolute;
}

.cal-theme-halloween .cal-board:before {
  top: 6px;
  left: 6px;
}

.cal-theme-halloween .cal-board:after {
  bottom: 6px;
  right: 6px;
  rotate: 180deg;
}

.cal-bat svg {
  animation: .14s ease-in-out infinite alternate cal-flap;
}

@keyframes cal-flap {
  to {
    transform: scaleY(.45);
  }
}

.cal-theme-nnn {
  --cal-accent: var(--color-gold);
  --cal-glow: #ffb800;
  background: radial-gradient(60% 22% at 100% 18%, #ff2fa00d, #0000), radial-gradient(70% 30% at 0 45%, #35e5ff0a, #0000);
}

.cal-theme-nnn > header {
  background-image: radial-gradient(at 90% 10%, #ff2fa00f, #0000 55%);
}

.cal-theme-nnn .cal-board {
  background: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--color-magenta) 9%, transparent), transparent 45%), radial-gradient(ellipse at 0 100%, color-mix(in srgb, var(--color-cyan) 7%, transparent), transparent 45%), var(--color-night-900);
}

.cal-theme-nnn .cal-mark {
  color: var(--color-magenta);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--color-magenta) 35%, transparent));
}

.cal-theme-nnn .cal-flyer {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--color-magenta) 70%, transparent));
}

/*# sourceMappingURL=src_components_calendar_calendar_0-vza9s.css.map*/