@layer modules {
  /* 3D Interactive Ticket Card */
  .ticket-container {
    --ticket-scale: 1;
    --ticket-width: calc(190px * var(--ticket-scale));
    --ticket-height: calc(254px * var(--ticket-scale));
    --ticket-radius: calc(6px * var(--ticket-scale));
    position: relative;
    width: var(--ticket-width);
    height: var(--ticket-height);
    perspective: calc(1000px * var(--ticket-scale));
    cursor: pointer;
  }
  /* Invisible hover zones for 3D tilt effect */
  .ticket-zone {
    position: absolute;
    width: 33.33%;
    height: 33.33%;
    z-index: 1;
  }
  .ticket-zone--tl {
    top: 0;
    left: 0;
  }
  .ticket-zone--tm {
    top: 0;
    left: 33.33%;
  }
  .ticket-zone--tr {
    top: 0;
    right: 0;
  }
  .ticket-zone--ml {
    top: 33.33%;
    left: 0;
  }
  .ticket-zone--mm {
    top: 33.33%;
    left: 33.33%;
  }
  .ticket-zone--mr {
    top: 33.33%;
    right: 0;
  }
  .ticket-zone--bl {
    bottom: 0;
    left: 0;
  }
  .ticket-zone--bm {
    bottom: 0;
    left: 33.33%;
  }
  .ticket-zone--br {
    bottom: 0;
    right: 0;
  }
  /* 3D rotations only on devices with a real hover state. */
  @media (hover: hover) and (pointer: fine) {
    .ticket-zone--tl:hover ~ .ticket-card {
      transform: rotateX(-10deg) rotateY(10deg);
    }
    .ticket-zone--tm:hover ~ .ticket-card {
      transform: rotateX(-10deg) rotateY(0deg);
    }
    .ticket-zone--tr:hover ~ .ticket-card {
      transform: rotateX(-10deg) rotateY(-10deg);
    }
    .ticket-zone--ml:hover ~ .ticket-card {
      transform: rotateX(0deg) rotateY(10deg);
    }
    .ticket-zone--mm:hover ~ .ticket-card {
      transform: rotateX(0deg) rotateY(0deg);
    }
    .ticket-zone--mr:hover ~ .ticket-card {
      transform: rotateX(0deg) rotateY(-10deg);
    }
    .ticket-zone--bl:hover ~ .ticket-card {
      transform: rotateX(10deg) rotateY(10deg);
    }
    .ticket-zone--bm:hover ~ .ticket-card {
      transform: rotateX(10deg) rotateY(0deg);
    }
    .ticket-zone--br:hover ~ .ticket-card {
      transform: rotateX(10deg) rotateY(-10deg);
    }
  }
  /* Main ticket card */
  .ticket-card {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--ticket-radius);
    background: var(--color-canvas-alt);
    transition: transform var(--duration-fast) var(--ease-out);
    transform-style: preserve-3d;
    box-shadow: var(--shadow-ticket), 0 0 0 1px var(--color-border);
    overflow: hidden;
  }
  /* Rotating accent glow (token-driven) */
  .ticket-card__glow {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
    filter: blur(calc(20px * var(--ticket-scale)));
    border-radius: var(--ticket-radius);
  }
  .ticket-card__glow::before {
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    top: -25%;
    left: -25%;
    background: conic-gradient(transparent 0deg 90deg, var(--color-accent) 90deg 180deg, transparent 180deg 270deg, var(--color-accent) 270deg 360deg);
    opacity: 0.15;
    animation: ticket-glow-rotate 6s linear infinite;
  }
  @keyframes ticket-glow-rotate {
    100% {
      transform: rotate(360deg);
    }
  }
  /* Content wrapper */
  .ticket-card__content {
    position: relative;
    z-index: 3;
    padding: calc(1rem * var(--ticket-scale));
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  /* Header with icon and role badge */
  .ticket-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-block-end: calc(0.75rem * var(--ticket-scale));
  }
  .ticket-card__icon {
    width: calc(2rem * var(--ticket-scale));
    height: calc(2rem * var(--ticket-scale));
    color: var(--color-accent);
  }
  .ticket-card__icon svg {
    width: 100%;
    height: 100%;
  }
  .ticket-card__role {
    display: flex;
    align-items: center;
    gap: calc(0.25rem * var(--ticket-scale));
    padding: calc(0.125rem * var(--ticket-scale)) calc(0.375rem * var(--ticket-scale));
    background: var(--color-canvas-elevated);
    border-radius: calc(4px * var(--ticket-scale));
    font-size: calc(0.5rem * var(--ticket-scale));
    font-weight: var(--font-weight-bold);
    color: var(--color-ink);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
  }
  .ticket-card__role-check {
    width: calc(0.625rem * var(--ticket-scale));
    height: calc(0.625rem * var(--ticket-scale));
    color: var(--color-accent);
  }
  /* Info section */
  .ticket-card__info {
    margin-block-end: calc(0.5rem * var(--ticket-scale));
  }
  .ticket-card__event {
    font-size: calc(0.75rem * var(--ticket-scale));
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
    margin-block-end: calc(0.125rem * var(--ticket-scale));
  }
  .ticket-card__date {
    font-size: calc(0.5rem * var(--ticket-scale));
    color: var(--color-ink-subtle);
  }
  /* Dashed separator with cutouts */
  .ticket-card__separator {
    position: relative;
    height: calc(1rem * var(--ticket-scale));
    margin-block: calc(0.375rem * var(--ticket-scale));
    display: flex;
    align-items: center;
  }
  .ticket-card__separator-line {
    width: 100%;
    border-top: calc(1px * var(--ticket-scale)) dashed var(--color-border-subtle);
  }
  .ticket-card__cutout {
    position: absolute;
    width: calc(1rem * var(--ticket-scale));
    height: calc(1rem * var(--ticket-scale));
    background: var(--color-canvas);
    border-radius: var(--radius-full);
  }
  .ticket-card__cutout--left {
    left: calc(-1.5rem * var(--ticket-scale));
  }
  .ticket-card__cutout--right {
    right: calc(-1.5rem * var(--ticket-scale));
  }
  /* User section */
  .ticket-card__user {
    display: flex;
    align-items: center;
    gap: calc(0.5rem * var(--ticket-scale));
    margin-block-end: calc(0.5rem * var(--ticket-scale));
  }
  .ticket-card__avatar {
    width: calc(1.5rem * var(--ticket-scale));
    height: calc(1.5rem * var(--ticket-scale));
    border-radius: var(--radius-full);
    background: var(--color-canvas-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink-subtle);
    font-size: calc(0.625rem * var(--ticket-scale));
    font-weight: var(--font-weight-bold);
  }
  .ticket-card__user-info {
    flex: 1;
    min-width: 0;
  }
  .ticket-card__handle {
    font-size: calc(0.5rem * var(--ticket-scale));
    color: var(--color-ink-subtle);
  }
  .ticket-card__name {
    font-size: calc(0.625rem * var(--ticket-scale));
    font-weight: var(--font-weight-semibold);
    color: var(--color-ink);
  }
  /* Bottom section with QR and details */
  .ticket-card__bottom {
    display: flex;
    gap: calc(0.5rem * var(--ticket-scale));
    margin-top: auto;
  }
  .ticket-card__qr {
    width: calc(3rem * var(--ticket-scale));
    height: calc(3rem * var(--ticket-scale));
    padding: calc(0.25rem * var(--ticket-scale));
    background: var(--color-ink);
    border-radius: calc(4px * var(--ticket-scale));
    flex-shrink: 0;
  }
  .ticket-card__qr svg {
    width: 100%;
    height: 100%;
  }
  .ticket-card__details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: calc(0.25rem * var(--ticket-scale));
  }
  .ticket-card__detail {
    display: flex;
    flex-direction: column;
  }
  .ticket-card__detail-label {
    font-size: calc(0.4375rem * var(--ticket-scale));
    color: var(--color-ink-subtle);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
  }
  .ticket-card__detail-value {
    font-size: calc(0.625rem * var(--ticket-scale));
    font-weight: var(--font-weight-bold);
    color: var(--color-ink);
  }
  /* CTA section scaling */
  .cta__ticket .ticket-container {
    --ticket-scale: 1.5;
  }
  @media (min-width: 768px) {
    .cta__ticket .ticket-container {
      --ticket-scale: 2;
    }
  }
}