* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Georgia, "Times New Roman", serif;
  background: black;
  color: white;
  /* room for the fixed header at full size: logo 200 + logo padding 4 + header padding 24 + border 3 */
  padding-top: 231px;
}

/* The header is fixed (not sticky) so shrinking it on scroll doesn't move the page
   content. With sticky, the page jumped by the size difference, which flipped the
   shrink on and off and made the page bounce when scrolling back to the top. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgb(0, 0, 0);
  border-bottom: 3px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.logo {
  display: block;
  flex-shrink: 0;
  border-radius:20px;
  box-shadow: 0px 0px 20px white;
  padding: 2px;
}

.logo img {
  display: block;
  height: 200px;
  width: auto;
  border-radius: 15px;
  transition: height 0.3s ease;
}

/* header shrinks once the page is scrolled */
.site-header {
  transition: box-shadow 0.3s ease;
}

.site-header.scrolled {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.35);
}

.site-header.scrolled .logo img {
  height: 90px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  color: white;
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.nav-links a:hover,
.nav-links a:focus,
.nav-links a.active {
  color: white;
  border-bottom-color: white;
}

.nav-links .order-btn {
  background-image: linear-gradient(45deg, black, #333, black);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  border-bottom: none;
  box-shadow: 0 0 10px white;
}

.nav-links .order-btn:hover,
.nav-links .order-btn:focus {
  background-image: none;
  background-color: white;
  color: black;
  box-shadow: 0 0 20px white;
}

.social-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 1rem;
  color: white;
  background: black;
  border: 2px solid white;
  border-radius: 50%;
  text-decoration: none;
  transition:
    transform 0.2s,
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}

.social-links a:hover,
.social-links a:focus {
  background: white;
  color: black;
  box-shadow: 0 0 12px white;
  transform: scale(1.1);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
}

@media (max-width: 900px) {
  .menu-toggle {
    display: block;
  }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.95);
    border-bottom: 3px solid white;
  }

  .main-nav.open {
    display: flex;
  }

  .nav-links {
    flex-direction: column;
    gap: 16px;
  }

  /* smaller logo so the header doesn't fill a phone screen */
  .logo img {
    height: 100px;
  }

  body {
    padding-top: 131px;
  }

  .site-header.scrolled .logo img {
    height: 60px;
  }
}

/* Hero */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: black;
  text-align: center;
}

.hero-video {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-width: 177.78vh;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.5));
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  padding: 40px 20px;
  color: rgb(235, 216, 216);
}

.hero-content h1 {
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1.1;
  margin-bottom: 16px;
  text-shadow: 0 0 20px black;
}

.hero-content p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  margin-bottom: 32px;
  /* keeps the text readable over bright parts of the video */
  text-shadow: 0 0 12px black, 0 0 4px black;
}

.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.btn {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: none;
  padding: 14px 30px;
  border-radius: 999px;
  transition:
    box-shadow 0.2s,
    background 0.2s,
    color 0.2s;
}

.btn-primary {
  background: black;
  color: white;
  box-shadow: 0 0 10px white;
}

.btn-primary:hover,
.btn-primary:focus {
  box-shadow: 0 0 20px white;
}

.btn-outline {
  border: 2px solid white;
  color: white;
}

.btn-outline:hover,
.btn-outline:focus {
  background: white;
  color: black;
}

/* Services dropdown */
.dropdown {
  position: relative;
}

.dropdown > a i {
  font-size: 0.7rem;
  margin-left: 4px;
}

.dropdown-menu {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 220px;
  margin-top: 10px;
  padding: 8px 0;
  background: black;
  border: 2px solid white;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition:
    opacity 0.2s,
    transform 0.2s,
    visibility 0.2s;
  z-index: 200;
}

/* invisible bridge so the menu doesn't close while moving the mouse down */
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.dropdown-menu a {
  display: block;
  padding: 10px 20px;
  border-bottom: none;
  white-space: nowrap;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus,
.dropdown-menu a.active {
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 900px) {
  .dropdown-menu {
    position: static;
    min-width: 0;
    margin-top: 8px;
    border: none;
    border-left: 2px solid white;
    border-radius: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .dropdown-menu a {
    padding: 6px 16px;
  }
}

/* Business hours */
.business-hours {
  background: black;
  color: white;
  text-align: center;
  padding: 50px 20px;
  border-top: 3px solid white;
}

.hours-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 28px;
  background: black;
  border: 2px solid white;
  border-radius: 20px;
  box-shadow: 0 0 20px white;
}

.business-hours h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 24px;
}

.business-hours h2 i {
  margin-right: 8px;
}

.hours-list {
  max-width: 480px;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.1rem;
}

.hours-list div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.hours-list div:last-child {
  border-bottom: none;
}

.hours-list dt {
  font-weight: bold;
}

/* Services */
.services {
  background: black;
  color: white;
  text-align: center;
  padding: 60px 20px;
}

.services h2 {
  text-decoration: underline;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 36px;
}

.services-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.service-card {
  background: black;
  border: 2px solid white;
  border-radius: 20px;
  padding: 32px 24px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  scroll-margin-top: 140px;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 25px white;
}

.service-card i {
  font-size: 2.2rem;
  margin-bottom: 16px;
}

.service-card h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.service-card p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Reviews */
.reviews {
  background: black;
  color: white;
  text-align: center;
  padding: 60px 20px;
}

.reviews h2 {
  text-decoration: underline;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 36px;
}

/* every slide sits in the same grid cell, so the slider is as tall as the longest review */
.reviews-slider {
  max-width: 700px;
  margin: 0 auto;
  display: grid;
}

.reviews-slider .review-card {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.8s ease,
    visibility 0.8s;
}

.reviews-slider .review-card.active {
  opacity: 1;
  visibility: visible;
}

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.slider-btn {
  background: black;
  color: white;
  border: 2px solid white;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

.slider-btn:hover,
.slider-btn:focus {
  background: white;
  color: black;
}

.slider-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.slider-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid white;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.slider-dot.active {
  background: white;
}

.review-card {
  display: flex;
  flex-direction: column;
  background: black;
  border: 2px solid white;
  border-radius: 20px;
  padding: 28px 24px;
  text-align: left;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  scroll-margin-top: 140px;
}

.review-card i {
  font-size: 1.6rem;
  margin-bottom: 14px;
}

.review-card blockquote {
  flex-grow: 1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 18px;
}

.review-card figcaption {
  font-weight: bold;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.reviews {
  scroll-margin-top: 140px;
}

/* Gallery */
.gallery {
  background: black;
  color: white;
  text-align: center;
  padding: 60px 20px;
  scroll-margin-top: 140px;
}

.gallery h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 36px;
}

.gallery-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.gallery-item {
  display: block;
  padding: 0;
  border: 2px solid white;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1;
  background: black;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.gallery-item:hover,
.gallery-item:focus {
  transform: translateY(-6px);
  box-shadow: 0 0 25px white;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.92);
  cursor: zoom-out;
}

.lightbox[hidden] {
  display: none;
}

/* stop the page scrolling behind an open photo */
body.lightbox-open {
  overflow: hidden;
}

.lightbox img {
  max-width: 100%;
  max-height: 90vh;
  border: 2px solid white;
  border-radius: 15px;
  box-shadow: 0 0 25px white;
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 1.4rem;
  color: white;
  background: black;
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
}

/* Video */
.video {
  background: black;
  color: white;
  text-align: center;
  padding: 60px 20px;
  scroll-margin-top: 140px;
}

.video h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 36px;
}

.video-card {
  max-width: 900px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border: 2px solid white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px white;
}

.video-card iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Contact form */
.contact {
  background: black;
  color: white;
  text-align: center;
  padding: 60px 20px;
  scroll-margin-top: 140px;
}

.contact h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 36px;
}

.contact-card {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  gap: 40px;
  padding: 40px;
  border: 2px solid white;
  border-radius: 20px;
  box-shadow: 0 0 20px white;
  text-align: left;
}

.contact-logo img {
  display: block;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  border-radius: 15px;
  box-shadow: 0 0 20px white;
}

.contact-form {
  display: flex;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
}

.contact-form label {
  font-weight: bold;
  margin-bottom: 6px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  font: inherit;
  color: white;
  background: black;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: white;
  box-shadow: 0 0 10px white;
}

.contact-form button {
  align-self: flex-start;
  background: black;
  border: 2px solid white;
  font-size: 1rem;
  cursor: pointer;
}

.contact-form button:hover,
.contact-form button:focus {
  background: white;
  color: black;
}

@media (max-width: 760px) {
  .contact-card {
    grid-template-columns: 1fr;
    padding: 28px 20px;
  }

  .contact-logo img {
    max-width: 220px;
  }

  .contact-form button {
    align-self: stretch;
  }
}

/* Location map */
.location {
  background: black;
  color: white;
  text-align: center;
  padding: 0 20px 60px;
  scroll-margin-top: 140px;
}

.location h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 12px;
}

.location p {
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 28px;
}

.map-card {
  max-width: 1000px;
  margin: 0 auto 32px;
  border: 2px solid white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px white;
}

.map-card iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}

.location .btn {
  display: inline-block;
}

@media (max-width: 760px) {
  .map-card iframe {
    height: 300px;
  }
}

/* "Learn More" button on the home page service cards */
.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.service-card .service-link {
  margin-top: auto;
  padding: 10px 24px;
  font-size: 0.9rem;
}

.service-card p {
  margin-bottom: 20px;
}

/* Service pages */
/* the photo comes from --hero-image on each page; the dark overlay keeps the text readable */
.page-hero {
  background:
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.85)),
    var(--hero-image, none) center / cover no-repeat,
    black;
  color: white;
  text-align: center;
  padding: 60px 20px 80px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.page-hero h1 {
  text-shadow: 0 0 20px black;
}

.breadcrumb {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.9rem;
  margin-bottom: 28px;
  opacity: 0.8;
}

.breadcrumb a {
  color: white;
}

.breadcrumb span {
  margin: 0 4px;
}

.page-hero-icon {
  font-size: 2.6rem;
  margin-bottom: 18px;
}

.page-hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.15;
  max-width: 800px;
  margin: 0 auto 32px;
}

.service-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.content-card {
  background: black;
  border: 2px solid white;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}

.content-card h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-bottom: 16px;
}

.content-card p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.02rem;
  line-height: 1.7;
}

.content-card p + p {
  margin-top: 14px;
}

/* cards with a photo: photo on one side, text on the other */
.content-card.has-image {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  align-items: center;
}

.content-card.has-image.flip {
  grid-template-columns: 1fr 340px;
}

.content-card.has-image.flip .content-image {
  order: 2;
}

.content-image {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid white;
  border-radius: 15px;
}

@media (max-width: 760px) {
  .content-card.has-image,
  .content-card.has-image.flip {
    grid-template-columns: 1fr;
  }

  .content-card.has-image.flip .content-image {
    order: 0;
  }
}

.artist-section {
  text-align: center;
  padding: 60px 20px 20px;
}

.artist-section h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 36px;
}

.artist-card {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: start;
  padding: 32px;
  border: 2px solid white;
  border-radius: 20px;
  box-shadow: 0 0 20px white;
  text-align: left;
}

.artist-photo {
  display: block;
  width: 100%;
  border-radius: 15px;
  border: 2px solid white;
}

.artist-work h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

.artist-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.service-cta {
  padding: 60px 20px;
}

.cta-card {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 28px;
  border: 2px solid white;
  border-radius: 20px;
  box-shadow: 0 0 20px white;
}

.cta-card h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  margin-bottom: 12px;
}

.cta-card p {
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 28px;
}

.other-services {
  text-align: center;
  padding: 0 20px 70px;
}

.other-services h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-bottom: 28px;
}

.other-services-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
}

.other-service {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  color: white;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid white;
  border-radius: 20px;
  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}

.other-service i {
  font-size: 1.6rem;
}

.other-service:hover,
.other-service:focus {
  background: white;
  color: black;
  box-shadow: 0 0 20px white;
}

@media (max-width: 760px) {
  .artist-card {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .artist-photo {
    max-width: 240px;
    margin: 0 auto;
  }

  .artist-work h3 {
    text-align: center;
  }

  .artist-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Footer */
.site-footer {
  background: rgb(0, 0, 0);
  color: white;
  border-top: 3px solid white;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
  font-family: Arial, Helvetica, sans-serif;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.footer-col h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid white;
  display: inline-block;
}

.footer-col .logo {
  display: inline-block;
  margin-bottom: 16px;
}

.footer-col ul {
  list-style: none;
}

.footer-links li,
.footer-hours li,
.footer-contact li {
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.footer-hours span,
.footer-contact span {
  display: block;
  font-weight: bold;
}

.site-footer a {
  color: white;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}

.site-footer a:hover,
.site-footer a:focus {
  border-bottom-color: white;
}

.site-footer .logo {
  border-bottom: none;
}

/* keep the full round border on the social icons (the footer link underline would replace it) */
.site-footer .social-links a {
  border: 2px solid white;
  transition:
    transform 0.2s,
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}

.footer-contact i {
  width: 18px;
  margin-right: 6px;
}

.footer-bottom {
  text-align: center;
  font-size: 0.85rem;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.footer-col .logo img {
  height: 120px;
  margin-right: 0;
}

/* Scroll reveal: elements fade up into place (classes are added by the script).
   Kept at the end of the file so it wins over the card transitions above. */
.reveal {
  opacity: 0;
  translate: 0 40px;
  transition:
    opacity 0.8s ease var(--reveal-delay, 0s),
    translate 0.8s ease var(--reveal-delay, 0s),
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s,
    color 0.2s;
}

.reveal.visible {
  opacity: 1;
  translate: 0 0;
}