/*
 * Homepage motion and ticket treatment.
 *
 * This file is intentionally additive: home.css retains the static composition,
 * while these rules only activate enhanced states when home.js adds
 * .motion-enabled to .editorial-home.
 */

/* -------------------------------------------------------------------------- */
/* 01 / Original Sonoma luggage tag — progressive entrance and barcode scan. */
/* -------------------------------------------------------------------------- */

.editorial-home .location-label[data-tag-motion] {
  /* Existing desktop/mobile dimensions and transforms stay in site.css. */
  --tag-motion-scale: 1;
}

.editorial-home .location-label[data-tag-motion] .label-barcode {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* The original barcode remains the background. This is only a masked sheen
   which can occupy the pre-existing bar shapes, never the paper around it. */
.editorial-home .location-label[data-tag-motion] .barcode-highlight {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  pointer-events: none;
  transform: translateX(-118%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 33%,
    rgb(146 222 2 / 0.18) 42%,
    rgb(146 222 2 / 0.96) 50%,
    rgb(255 255 255 / 0.9) 54%,
    rgb(146 222 2 / 0.2) 62%,
    transparent 71%,
    transparent 100%
  );
  -webkit-mask: url("/assets/208212fe37fe2377.svg") center / 100% 100% no-repeat;
  mask: url("/assets/208212fe37fe2377.svg") center / 100% 100% no-repeat;
}

.editorial-home.motion-enabled .location-label[data-tag-motion].tag-entering {
  animation: home-tag-arrive 760ms cubic-bezier(0.2, 0.74, 0.26, 1) both;
}

.editorial-home.motion-enabled
  .location-label[data-tag-motion].tag-entering
  .barcode-highlight {
  animation: home-barcode-scan 550ms cubic-bezier(0.2, 0.7, 0.3, 1) 1000ms both;
}

@keyframes home-tag-arrive {
  0% {
    transform: translateX(160px) translateY(18px) rotate(9deg)
      scale(var(--tag-motion-scale));
  }

  76% {
    transform: translateX(-2px) translateY(-1px) rotate(4deg)
      scale(var(--tag-motion-scale));
  }

  100% {
    transform: translateX(0) translateY(0) rotate(5deg)
      scale(var(--tag-motion-scale));
  }
}

@keyframes home-barcode-scan {
  from {
    transform: translateX(-118%);
  }

  to {
    transform: translateX(118%);
  }
}

/* -------------------------------------------------------------------------- */
/* 02 / Dark review ticket — the existing two-column offer stays intact.     */
/* -------------------------------------------------------------------------- */

.editorial-home .home-offer.home-review-ticket {
  --ticket-pad-top: clamp(48px, 6vw, 76px);
  --ticket-pad-bottom: clamp(48px, 6vw, 76px);
  --ticket-divider: #7a8280;
  --ticket-cutout-size: 7px;
  position: relative;
  isolation: isolate;
}

.editorial-home .home-review-ticket .home-offer-purchase {
  position: relative;
  isolation: isolate;
  border-left: 0;
}

/* The pseudo-elements span the whole padded ticket field rather than only the
   price copy, so the divider stays in the correct place across desktop sizes. */
.editorial-home .home-review-ticket .home-offer-purchase::before {
  position: absolute;
  z-index: 0;
  inset-block-start: calc(-1 * var(--ticket-pad-top));
  inset-block-end: calc(-1 * var(--ticket-pad-bottom));
  inset-inline-start: 0;
  inline-size: 1px;
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    var(--ticket-divider) 0 3px,
    transparent 3px 9px
  );
}

/* White semicircles at the ticket edge read as tiny punched cut-outs. */
.editorial-home .home-review-ticket .home-offer-purchase::after {
  position: absolute;
  z-index: 0;
  inset-block-start: calc(-1 * var(--ticket-pad-top));
  inset-block-end: calc(-1 * var(--ticket-pad-bottom));
  inset-inline-start: calc(-1 * var(--ticket-cutout-size));
  inline-size: calc(var(--ticket-cutout-size) * 2);
  content: "";
  pointer-events: none;
  background:
    radial-gradient(
        circle at 50% 0,
        var(--white) 0 calc(var(--ticket-cutout-size) - 1px),
        transparent var(--ticket-cutout-size)
      )
      top center / 100% 50% no-repeat,
    radial-gradient(
        circle at 50% 100%,
        var(--white) 0 calc(var(--ticket-cutout-size) - 1px),
        transparent var(--ticket-cutout-size)
      )
      bottom center / 100% 50% no-repeat;
}

.editorial-home .home-review-ticket .home-offer-purchase > * {
  position: relative;
  z-index: 1;
}

/* The real /buy link remains a normal, high-contrast button. The lime is an
   under-label ink sweep, not a separate overlay or click target. */
.editorial-home .home-review-ticket .home-ticket-buy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
  transition: border-color 180ms ease;
}

.editorial-home .home-review-ticket .home-ticket-buy:hover,
.editorial-home .home-review-ticket .home-ticket-buy:focus-visible {
  border-color: var(--lime);
  background: var(--white);
  color: var(--ink);
}

.editorial-home .home-review-ticket .ticket-button-fill {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  transform: translateX(-101%);
  background: var(--lime);
  transition: transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.editorial-home .home-review-ticket .ticket-button-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.editorial-home .home-review-ticket .ticket-button-arrow {
  display: inline-block;
  transition: transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.editorial-home .home-review-ticket .home-ticket-buy:hover .ticket-button-fill,
.editorial-home
  .home-review-ticket
  .home-ticket-buy:focus-visible
  .ticket-button-fill {
  transform: translateX(0);
}

.editorial-home .home-review-ticket .home-ticket-buy:hover .ticket-button-arrow,
.editorial-home
  .home-review-ticket
  .home-ticket-buy:focus-visible
  .ticket-button-arrow {
  transform: translateX(6px);
}

/* -------------------------------------------------------------------------- */
/* 03 / Compact layout and motion-preference safeguards.                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .editorial-home .home-offer.home-review-ticket {
    --ticket-pad-top: 56px;
    --ticket-pad-bottom: 58px;
  }

  .editorial-home .home-review-ticket .home-offer-purchase {
    border-top: 0;
  }

  /* Leave the existing 28px purchase padding clear of this horizontal tear. */
  .editorial-home .home-review-ticket .home-offer-purchase::before {
    inset-block-start: 0;
    inset-block-end: auto;
    inset-inline: calc(-1 * var(--gutter));
    inline-size: auto;
    block-size: 1px;
    background: repeating-linear-gradient(
      to right,
      var(--ticket-divider) 0 3px,
      transparent 3px 9px
    );
  }

  .editorial-home .home-review-ticket .home-offer-purchase::after {
    inset-block-start: calc(-1 * var(--ticket-cutout-size));
    inset-block-end: auto;
    inset-inline: calc(-1 * var(--gutter));
    inline-size: auto;
    block-size: calc(var(--ticket-cutout-size) * 2);
    background:
      radial-gradient(
          circle at 0 50%,
          var(--white) 0 calc(var(--ticket-cutout-size) - 1px),
          transparent var(--ticket-cutout-size)
        )
        left center / calc(var(--ticket-cutout-size) * 2) 100% no-repeat,
      radial-gradient(
          circle at 100% 50%,
          var(--white) 0 calc(var(--ticket-cutout-size) - 1px),
          transparent var(--ticket-cutout-size)
        )
        right center / calc(var(--ticket-cutout-size) * 2) 100% no-repeat;
  }
}

@media (prefers-reduced-motion: reduce) {
  .editorial-home.motion-enabled .location-label[data-tag-motion].tag-entering {
    animation: none;
    transform: rotate(5deg) scale(var(--tag-motion-scale));
  }

  .editorial-home.motion-enabled
    .location-label[data-tag-motion]
    .barcode-highlight,
  .editorial-home .home-review-ticket .home-ticket-buy,
  .editorial-home .home-review-ticket .ticket-button-fill,
  .editorial-home .home-review-ticket .ticket-button-arrow {
    animation: none;
    transition: none;
  }

  .editorial-home .home-review-ticket .ticket-button-fill,
  .editorial-home
    .home-review-ticket
    .home-ticket-buy:hover
    .ticket-button-fill,
  .editorial-home
    .home-review-ticket
    .home-ticket-buy:focus-visible
    .ticket-button-fill {
    transform: translateX(-101%);
  }

  .editorial-home
    .home-review-ticket
    .home-ticket-buy:hover
    .ticket-button-arrow,
  .editorial-home
    .home-review-ticket
    .home-ticket-buy:focus-visible
    .ticket-button-arrow {
    transform: none;
  }
}

@media (max-width: 760px) {
  .editorial-home .location-label[data-tag-motion] {
    --tag-motion-scale: 0.86;
  }
}