/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


/*
  = General Styles
*/
.bg-golden {
  background: linear-gradient(102.12deg, #FF9D9D -9.54%, #FFB744 41.33%, #F22F2F 104.23%);
}

.text-muted {
  color: color-mix(in oklch, var(--color-base-content) 60%, var(--color-base-100));
}

/*
  = Background images (Propshaft rewrites the urls to digested asset paths)
*/
.css-bg-hero-001 {
  background: url("/assets/bg-hero-001-bdea0476.jpg") no-repeat center/cover;
}

.css-bg-hero-002 {
  background: url("/assets/bg-hero-002-de216683.jpg") no-repeat center/cover;
}

.css-bg-hero-003 {
  background: url("/assets/bg-hero-003-b998418c.jpg") no-repeat center/cover;
}

.css-bg-hero-004 {
  background: url("/assets/bg-hero-004-068d2958.jpg") no-repeat left center/cover;
}

.css-bg-hero-006 {
  background: url("/assets/bg-hero-006-1fd09f48.jpg") no-repeat center/cover;
}

.css-bg-hero-007 {
  background: url("/assets/bg-hero-007-9c16118e.webp") no-repeat center/cover;
}

/* Gated on [open] because daisyUI modals hide with visibility, not display, so an ungated rule downloads this image on every page load */
dialog[open] .css-bg-hero-008 {
  background: url("/assets/bg-hero-008-3da7bc94.webp") no-repeat center/cover;
}

.css-bg-hero-009 {
  background: url("/assets/bg-hero-009-d78e4585.webp") no-repeat center/cover;
}

.css-bg-hero-010 {
  background: url("/assets/bg-hero-010-c2a34727.webp") no-repeat right center/cover;
}

.css-bg-hero-011 {
  background: url("/assets/bg-hero-011-83df5eb3.jpg") no-repeat center/cover;
}

@media (width < 40rem) {
  .css-bg-hero-011 {
    background-position: left center;
  }
}

.css-bg-footer-001 {
  background: url("/assets/bg-footer-001-c2a51b13.jpg") center bottom/cover no-repeat;
}

/*
  = Calendar popover anchor
*/
.css-cally-anchor {
  anchor-name: --cally;
}

.css-cally-popover {
  position-anchor: --cally;
}

/*
  = Header
*/
.css-edition {

  &:before,
  &:after {
    content: "";
    width: 21px;
    height: 32px;
    background: url("/assets/laurel-8307428e.svg") no-repeat center/cover;
  }

  &:after {
    transform: scaleX(-1);
  }
}

.css-navbar-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 18px;
  width: 0;
  margin-right: 2px;
  cursor: pointer;
  background-color: #e5e7eb;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'><path d='M6 6l8 8M14 6l-8 8'/></svg>");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 9999px;
  opacity: 0;
  transition: opacity 150ms ease, transform 150ms ease;

}

.css-navbar-search-input:not(:placeholder-shown):focus::-webkit-search-cancel-button {
  width: 18px;
  opacity: 0.6;
}

.css-navbar-search-input::-webkit-search-cancel-button:hover {
  opacity: 0.9;
  transform: scale(1.05);
}

.css-navbar-search-input::-webkit-search-cancel-button:active {
  transform: scale(1);
}

/*
  = Source logos
*/
.css-source-zig_tickets {
  height: 20px;
  width: auto;
}

.css-source-eventim {
  top: -4px;
  position: relative;
}

.css-source-ticket360 {
  width: 24px;
  height: 24px;
}

/*
  = Back-on-scroll (mobile): seta de voltar, sempre visível no canto inferior esquerdo.
  Entrada sutil de baixo para cima ao carregar a página.
*/
@keyframes back-on-scroll-enter {
  from {
    opacity: 0;
    transform: translateX(-1rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.back-on-scroll-btn {
  animation: back-on-scroll-enter 0.3s ease-out forwards;
}

/*
  = Entry card highlight (scroll-to from "Pegar ingresso" CTA)
*/
@keyframes entry-card-highlight {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 40, 233, 0);
  }

  25% {
    box-shadow: 0 0 10px 3px rgba(102, 40, 233, 0.4);
  }

  100% {
    box-shadow: 0 0 5px 0 rgba(102, 40, 233, 0);
  }
}

.entry-card-highlight {
  animation: entry-card-highlight 1.4s ease-out forwards;
}

/*
  = Steps (PWA install instructions): círculo com contorno em vez de preenchido
*/
.step-outline:before {
  width: 1px;
  border-width: 0;
}

.step-outline:after {
  background-color: var(--color-base-100);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/*
  = Sponsored Event card (EventListItemComponent)
  The .card in the selectors is only there to beat the bg-base-300 utility, which loads after this file
*/
.card.sponsored {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
  border: 2px solid var(--color-primary);
  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;

  figure {
    position: relative;
  }

  .css-sponsored-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    gap: 0.25rem;
    padding-inline: 0.5rem;
    border: none;
    box-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 10px;
    line-height: 1;
  }

  /* The dot before the badge text */
  .css-sponsored-badge:before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: var(--color-primary);
  }

  /* The Tags become a translucent white chip with black text over the purple card */
  .card-body .badge {
    background-color: color-mix(in oklab, var(--color-base-100) 65%, transparent);
    color: var(--color-base-content);
    border: none;
  }
}

/*
  = Event Description
*/
.css-event-description {

  ul,
  ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;

    li {
      margin-bottom: .5rem;
    }
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  hr {
    opacity: .15;
    margin: 1rem 0;
  }
}

/*
  = Editorial Description (content written in-house, e.g. artist bios)
*/
.css-editorial-description {

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ul,
  ol,
  dl,
  blockquote,
  pre,
  table,
  hr,
  li,
  dd {
    margin-bottom: .5rem;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 700;
  }

  :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
    margin-top: 1rem;
  }

  ul,
  ol {
    margin-left: 1.5rem;
  }

  dl {
    margin-left: 1.5rem;

    dt {
      font-weight: 700;
    }
  }

  ul {
    list-style-type: disc;
  }

  ol {
    list-style-type: decimal;
  }

  hr {
    opacity: .15;
    margin-top: 1rem;
  }

  a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  img {
    border-radius: var(--radius-box);
    max-width: 100%;
  }

  blockquote {
    padding-left: .5rem;
    border-left: 2px solid var(--color-base-300);
    font-style: italic;

    cite {
      display: block;
      margin-top: .5rem;
      font-style: normal;
      opacity: .7;
    }
  }

  code,
  kbd,
  samp {
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-field);
    background: var(--color-base-200);
    font-size: 0.875em;
  }

  pre {
    padding: .5rem;
    border-radius: var(--radius-field);
    background: var(--color-base-200);
    overflow-x: auto;

    code {
      padding: 0;
      background: none;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;

    th,
    td {
      padding: .375rem .5rem;
      border: 1px solid var(--color-base-300);
      text-align: left;
    }

    th {
      font-weight: 700;
      background: var(--color-base-200);
    }
  }

  del {
    opacity: .6;
  }

  small {
    opacity: .7;
  }
}

/*
  = Halloween: lightning that flashes with every batch of emojis, triggered from JS (halloween_controller#flashLightning),
  kept to two flashes since WCAG allows at most three full-screen flashes per second
*/
@keyframes halloween-lightning {
  0%,
  100% {
    opacity: 0;
  }

  2% {
    opacity: .85;
  }

  5% {
    opacity: .1;
  }

  8% {
    opacity: .75;
  }

  13% {
    opacity: 0;
  }
}

.halloween-lightning {
  /* a white flash isn't a UI color, so it doesn't become a theme token */
  background-color: #fff;
  opacity: 0;
}

.halloween-lightning.is-flashing {
  animation: halloween-lightning 2.5s ease-out both;
}

/*
  = Halloween: emojis that cross the screen with every lightning flash, spawned from JS (halloween_controller#popEmoji),
  each starting just past its edge and traveling the whole viewport plus its own size, in viewport units so every screen is crossed in the same time
*/
@keyframes halloween-emoji-cross {
  60% {
    opacity: 1;
  }

  100% {
    translate: var(--travel);
    opacity: 0;
  }
}

.halloween-emoji {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  line-height: 1;
  animation: halloween-emoji-cross 2.5s ease-out;
  /* tints the emojis into a purple/red/white palette instead of full-color emoji */
  filter: hue-rotate(-45deg) saturate(4) brightness(0.95) contrast(1.15);
}

.halloween-emoji-from-top {
  bottom: calc(100% + 0.5em);
  left: var(--offset);
  --travel: var(--drift) calc(100vh + 2em);
}

.halloween-emoji-from-bottom {
  top: calc(100% + 0.5em);
  left: var(--offset);
  --travel: var(--drift) calc(-100vh - 2em);
}

.halloween-emoji-from-left {
  top: var(--offset);
  right: calc(100% + 0.5em);
  --travel: calc(100vw + 2em) var(--drift);
}

.halloween-emoji-from-right {
  top: var(--offset);
  left: calc(100% + 0.5em);
  --travel: calc(-100vw - 2em) var(--drift);
}

/*
  = Halloween: the whole page goes dark. Instead of repainting each element,
  it redefines the theme's base tokens, so the header, cards, footer and text
  follow along on their own
*/
html:has(.halloween-page) {
  --color-base-100: oklch(14% 0.02 285);
  --color-base-200: oklch(100% 0 0 / 8%);
  --color-base-300: oklch(100% 0 0 / 16%);
  --color-base-content: oklch(97% 0 0);
}

/* the heros and the footer go back to the production tokens, since the listing hero and the footer sit over light textures and the event hero's white "Ver Ingressos" button needs dark text */
html:has(.halloween-page) .hero,
html:has(.halloween-page) footer {
  --color-base-200: oklch(48.47% 0.247 286.4 / 5%);
  --color-base-300: oklch(0% 0 0 / 4%);
  --color-base-content: oklch(0% 0 0);
}

/* explicit colors, since it sits over the spider webs rather than relying on inherited tokens */
html:has(.halloween-page) .css-menu-button {
  background-color: white;
  color: var(--color-primary);
}

html:has(.halloween-page) .css-menu-button:hover {
  background-color: var(--color-primary);
  color: white;
}

/* matches the event cards' background instead of the near-black page background, flattened to an opaque color so the page behind doesn't show through */
html:has(.halloween-page) .css-site-menu {
  background-color: color-mix(in oklch, white 16%, var(--color-base-100));
}

/* the laurel SVG is drawn in black, so it turns white over the dark background */
html:has(.halloween-page) .css-edition:before,
html:has(.halloween-page) .css-edition:after {
  filter: invert(1);
}

/* quick filters: the violet-700/white tones are too contrasting over the dark theme */
html:has(.halloween-page) #quick-filters > div {
  border-color: var(--color-base-300);
}

html:has(.halloween-page) .css-quick-filter-chip {
  outline-color: var(--color-base-300);
}

/*
  = Horizontal card strip (event recommendations)

  The cards leave the centered column and bleed to both edges of the screen, with a slice of the
  next card showing as the cue that the list scrolls. The constant subtracted in each width is the
  gap plus that slice, so the slice stays the same on every screen instead of shrinking with it
*/
.css-cards-strip {
  display: flex;
  gap: 1rem;
  padding-block: .5rem; /* room for the cards' hover scale, which the scroll container would clip */
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  overflow-x: auto;
  scrollbar-width: none;

  > * {
    flex-shrink: 0;
    min-width: 0;
    width: calc(50% + 50vw - 4rem);
  }
}

.css-cards-strip::-webkit-scrollbar {
  display: none;
}

/* Two cards from sm, three once there is room for them */
@media (width >= 40rem) {
  .css-cards-strip > * {
    width: calc((50% + 50vw - 4.75rem) / 2);
  }
}

@media (width >= 860px) {
  .css-cards-strip > * {
    width: calc((50% + 50vw - 5.75rem) / 3);
  }
}

/* From xl the whole list fits at once, so it goes back to being a plain grid */
@media (width >= 80rem) {
  .css-cards-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    padding: 0;
    margin-inline: 0;
    overflow-x: visible;

    > * {
      width: auto;
    }
  }
}