/*
 * Mystery Offer – Scratch Modal (Tiered Version)
 * Matches gift-offer-dual-wrapper design language
 */

/* ── Modal overlay & container ── */
.mystery-modal .mystery-overlay {
   background: rgba(0, 0, 0, 0.72);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   z-index: 10000;
}

.mystery-modal .mystery-container {
   max-width: 440px;
   width: 92%;
   padding: 0;
   border-radius: 18px;
   background: #faf8f4;
   position: relative;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* ── X close ── */
.mystery-modal .mystery-close {
   position: absolute;
   right: 16px;
   top: 16px;
   z-index: 20;
   background: #f8f6ef;
   border: 0;
   border-radius: 50%;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 16px;
   transition: background 0.2s;
}

.mystery-modal .mystery-close:before {
   content: "\2715";
}

.mystery-modal .mystery-close:hover {
   background: #eae8e2;
}

/* ── Content ── */
.mystery-modal .mystery-content {
   margin: 0;
   padding: 44px 28px 36px;
   text-align: center;
}

.mystery-logo-wrap {
   margin-bottom: 28px;
}

.mystery-logo {
   max-width: 170px;
   height: auto;
   margin: 0 auto;
   display: block;
}

.mystery-title {
   font-size: 36px;
   font-weight: 900;
   letter-spacing: 0.04em;
   text-transform: uppercase;
   color: #111;
   margin: 0 0 8px;
   line-height: 1.1;
}

.mystery-subtitle {
   font-size: 15px;
   font-weight: 500;
   color: #555;
   margin: 0 0 28px;
}

/* ── Scratch card ── */
.mystery-scratch-wrap {
   position: relative;
   width: 100%;
   max-width: 340px;
   margin: 0 auto;
   aspect-ratio: 1.6 / 1;
   border-radius: 14px;
   overflow: hidden;
   cursor: grab;
   -webkit-user-select: none;
   user-select: none;
   touch-action: none;
   box-shadow:
      0 4px 20px rgba(180, 140, 60, 0.25),
      inset 0 0 0 2px rgba(200, 170, 80, 0.3);
   transition: aspect-ratio 0.4s ease, box-shadow 0.4s ease;
}

/* After reveal: collapse to fit content */
.mystery-scratch-wrap.mystery-scratch--revealed {
   aspect-ratio: unset;
   cursor: default;
   box-shadow: none;
   border-radius: 14px;
   overflow: visible;
}

.mystery-scratch-wrap:active {
   cursor: grabbing;
}

#mystery-canvas {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 5;
   border-radius: 14px;
   transition: opacity 0.4s ease;
}

#mystery-canvas.mystery-canvas--revealed {
   opacity: 0;
   pointer-events: none;
   position: absolute;
   height: 0;
}

.mystery-reveal {
   position: absolute;
   inset: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 4px;
   z-index: 1;
   background: linear-gradient(160deg, #fff9f0, #fff4e0, #fff9f0);
   padding: 20px;
}

/* After reveal: flow naturally, fit content */
.mystery-scratch--revealed .mystery-reveal {
   position: relative;
   inset: auto;
   padding: 24px 20px;
}

.mystery-reveal__emoji {
   font-size: 42px;
   line-height: 1;
   margin-bottom: 4px;
   opacity: 0;
   transform: scale(0.3);
}

.mystery-reveal__emoji.mystery-emoji--animate {
   animation: mystery-gift-bounce 0.5s ease forwards;
}

.mystery-reveal__title {
   font-size: 18px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: #26692a;
   opacity: 0;
}

.mystery-reveal__title.mystery-text--animate {
   animation: mystery-fade-in 0.4s ease 0.2s forwards;
}

.mystery-reveal__headline {
   font-size: 32px;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 0.02em;
   color: #111;
   line-height: 1.1;
   opacity: 0;
}

.mystery-reveal__headline.mystery-text--animate {
   animation: mystery-fade-in 0.4s ease 0.35s forwards;
}

@keyframes mystery-gift-bounce {
   0% {
      transform: scale(0.3);
      opacity: 0;
   }

   50% {
      transform: scale(1.2);
   }

   100% {
      transform: scale(1);
      opacity: 1;
   }
}

@keyframes mystery-fade-in {
   from {
      opacity: 0;
      transform: translateY(8px);
   }

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

/* ══════════════════════════════════════════
   TIERED OFFERS — gift-offer-dual style
   ══════════════════════════════════════════ */
.mystery-post-reveal {
   margin-top: 24px;
   animation: mystery-fade-up 0.4s ease both;
}

@keyframes mystery-fade-up {
   from {
      opacity: 0;
      transform: translateY(12px);
   }

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

/* Wrapper — mirrors .gift-offer-dual-wrapper */
.mystery-tiers-wrap {
   display: flex;
   flex-direction: column;
   border-radius: 12px;
   background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 50%, #e8f5e9 100%);
   border: 1.5px solid #a5d6a7;
   position: relative;
   margin-bottom: 20px;
   overflow: visible;
}

/* Ribbon — matches .gift-offer-ribbon */
.mystery-tiers-ribbon {
   text-transform: uppercase;
   position: absolute;
   top: -11px;
   right: -1px;
   background: linear-gradient(135deg, #43a047, #2e7d32);
   color: #fff;
   font-size: 9px;
   font-weight: 700;
   letter-spacing: 1.5px;
   padding: 4px 14px;
   border-radius: 0 12px 0 8px;
   z-index: 2;
   line-height: 1.4;
}

/* Single tier row — mirrors .gift-offer-dual-item */
.mystery-tier {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 10px 14px;
   text-align: left;
   opacity: 0;
   transform: translateX(-8px);
   animation: mystery-tier-in 0.3s ease forwards;
   animation-delay: var(--tier-delay, 0s);
}

.mystery-tier:not(:last-child) {
   border-bottom: 1px solid #a5d6a7;
}

@keyframes mystery-tier-in {
   to {
      opacity: 1;
      transform: translateX(0);
   }
}

/* Icon circle — matches .gift-offer-dual-item .gift-icon */
.mystery-tier__icon {
   width: 37px;
   height: 37px;
   border-radius: 50%;
   background: #fff;
   border: 2px solid #66bb6a;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.mystery-tier__emoji {
   font-size: 19px;
   line-height: 1;
}

.mystery-tier__svg {
   width: 23px;
   height: 22px;
}

/* Text — matches .gift-offer-dual-item .gift-text */
.mystery-tier__body {
   display: flex;
   flex-direction: column;
   line-height: 1.3;
}

.mystery-tier__title {
   font-size: 14px;
   font-weight: 700;
   color: #26692a;
}

.mystery-tier__condition {
   font-size: 12px;
   color: #26692a;
   margin-top: 1px;
}

.mystery-tier__condition strong {
   color: #26692a;
   font-weight: 700;
}

/* ── Premium gift tiers — luxury treatment ── */
/*
.mystery-tier--premium {
   background: linear-gradient(105deg, #fdf6e8 0%, #faf0d8 40%, #fdf6e8 100%);
   border-bottom-color: #e2cfa0 !important;
}
*/


.mystery-tier__icon--premium {
   border-color: #c9a84c;
   background: linear-gradient(145deg, #fff9eb, #fdf2d8);
   box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15), 0 2px 8px rgba(180, 145, 55, 0.1);
   position: relative;
}

.mystery-tier__icon--premium .mystery-tier__svg path {
   fill: #8a6e38;
}

.mystery-tier__sparkle {
   position: absolute;
   top: -5px;
   right: -5px;
   font-size: 13px;
   line-height: 1;
   color: #c9a84c;
   animation: mystery-sparkle-pulse 2.4s ease-in-out infinite;
   z-index: 3;
   font-style: normal;
   text-shadow: 0 0 5px rgba(201, 168, 76, 0.35);
}

@keyframes mystery-sparkle-pulse {

   0%,
   100% {
      opacity: 0.6;
      transform: scale(0.8) rotate(0deg);
   }

   50% {
      opacity: 1;
      transform: scale(1.15) rotate(15deg);
   }
}

/* ══════════════════════════════════════════
   PROGRESS BAR — icons above dots, pre-filled
   ══════════════════════════════════════════ */
.mystery-progress {
   padding: 24px 14px 14px;
}

.mystery-progress__track {
   position: relative;
   height: 6px;
   background: rgba(255, 255, 255, 0.7);
   border-radius: 99px;
   overflow: visible;
}

/* Static pre-fill: loads instantly to just before first dot */
.mystery-progress__fill {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 18%;
   border-radius: 99px;
   background: linear-gradient(90deg, #81c784, #66bb6a);
   opacity: 0;
   animation: mystery-prefill-appear 0.6s ease 0.4s forwards;
}

@keyframes mystery-prefill-appear {
   from {
      opacity: 0;
      width: 0;
   }

   to {
      opacity: 1;
      width: 18%;
   }
}

/* Animated fill: sweeps full width slowly behind */
.mystery-progress__fill-animated {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 0;
   border-radius: 99px;
   background: linear-gradient(90deg, #66bb6a, #43a047, #2e7d32);
   animation: mystery-bar-fill 2.4s ease 1.2s forwards;
}

@keyframes mystery-bar-fill {
   to {
      width: 100%;
   }
}

/* Pulse glow on animated fill head */
.mystery-progress__fill-animated::after {
   content: '';
   position: absolute;
   right: 0;
   top: -3px;
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background: #43a047;
   box-shadow: 0 0 8px rgba(67, 160, 71, 0.6);
   animation: mystery-dot-pulse 1.2s ease-in-out infinite;
   animation-delay: 3.6s;
   opacity: 0;
}

@keyframes mystery-dot-pulse {

   0%,
   100% {
      opacity: 0.6;
      transform: scale(1);
      box-shadow: 0 0 8px rgba(67, 160, 71, 0.4);
   }

   50% {
      opacity: 1;
      transform: scale(1.4);
      box-shadow: 0 0 14px rgba(67, 160, 71, 0.8);
   }
}

/* Milestone markers (icon + dot) */
.mystery-progress__ms {
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: center;
}

/* Icon above the dot */
.mystery-progress__ms-icon {
   position: absolute;
   bottom: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transform: scale(0.5) translateY(4px);
   animation: mystery-icon-pop 0.35s ease forwards;
}

.mystery-progress__ms:nth-child(3) .mystery-progress__ms-icon {
   animation-delay: 1.6s;
}

.mystery-progress__ms:nth-child(4) .mystery-progress__ms-icon {
   animation-delay: 1.75s;
}

.mystery-progress__ms:nth-child(5) .mystery-progress__ms-icon {
   animation-delay: 1.9s;
}

@keyframes mystery-icon-pop {
   0% {
      opacity: 0;
      transform: scale(0.5) translateY(4px);
   }

   70% {
      transform: scale(1.15) translateY(-2px);
   }

   100% {
      opacity: 1;
      transform: scale(1) translateY(0);
   }
}

.mystery-progress__ms-emoji {
   font-size: 16px;
   line-height: 1;
}

.mystery-progress__ms-svg {
   width: 16px;
   height: 16px;
}

/* Dot on the track */
.mystery-progress__dot {
   width: 14px;
   height: 14px;
   background: #fff;
   border: 2.5px solid #2e7d32;
   border-radius: 50%;
   display: block;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
   animation: mystery-ms-pop 0.3s ease forwards;
   opacity: 0;
   transform: scale(0.4);
}

.mystery-progress__ms:nth-child(3) .mystery-progress__dot {
   animation-delay: 2s;
}

.mystery-progress__ms:nth-child(4) .mystery-progress__dot {
   animation-delay: 2.15s;
}

.mystery-progress__ms:nth-child(5) .mystery-progress__dot {
   animation-delay: 2.3s;
}

@keyframes mystery-ms-pop {
   0% {
      opacity: 0;
      transform: scale(0.4);
   }

   60% {
      transform: scale(1.2);
   }

   100% {
      opacity: 1;
      transform: scale(1);
   }
}

/* ── Claim button ── */
.mystery-claim-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   width: 100%;
   max-width: 320px;
   padding: 18px 32px;
   background: #111;
   color: #fff;
   font-size: 18px;
   font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   border: 2px solid #111;
   border-radius: 0;
   cursor: pointer;
   transition: background 0.2s, color 0.2s, transform 0.15s;
   animation: mystery-btn-bounce 1.2s ease-in-out infinite;
}

@keyframes mystery-btn-bounce {

   0%,
   100% {
      transform: translateY(0);
   }

   30% {
      transform: translateY(-8px);
   }

   50% {
      transform: translateY(0);
   }

   65% {
      transform: translateY(-4px);
   }

   80% {
      transform: translateY(0);
   }
}

.mystery-claim-btn:hover {
   background: #fff;
   color: #111;
   animation: none;
   transform: translateY(0);
}

.mystery-claim-btn:active {
   transform: scale(0.97);
   animation: none;
}

/* ── Confetti ── */
.mystery-confetti-canvas {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 100000;
   pointer-events: none;
   display: none;
}

.mystery-confetti-canvas.mystery-confetti--active {
   display: block;
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width: 480px) {
   .mystery-modal .mystery-container {
      width: 96%;
      border-radius: 14px;
   }

   .mystery-modal .mystery-content {
      padding: 36px 18px 28px;
   }

   .mystery-modal .mystery-close {
      right: 12px;
      top: 12px;
   }

   .mystery-title {
      font-size: 28px;
   }

   .mystery-subtitle {
      font-size: 14px;
      margin-bottom: 20px;
   }

   .mystery-reveal__headline {
      font-size: 26px;
   }

   .mystery-reveal__title {
      font-size: 15px;
   }

   .mystery-claim-btn {
      padding: 16px 24px;
      font-size: 16px;
   }

   .mystery-logo {
      max-width: 140px;
   }

   .mystery-logo-wrap {
      margin-bottom: 20px;
   }

   .mystery-tier {
      padding: 8px 12px;
      gap: 10px;
   }

   .mystery-tier__icon {
      width: 33px;
      height: 33px;
   }

   .mystery-tier__emoji {
      font-size: 17px;
   }

   .mystery-tier__svg {
      width: 20px;
      height: 19px;
   }

   .mystery-tier__title {
      font-size: 13px;
   }

   .mystery-tier__condition {
      font-size: 11px;
   }

   .mystery-tiers-ribbon {
      font-size: 8px;
      padding: 3px 10px;
   }

   .mystery-progress__ms-emoji {
      font-size: 14px;
   }

   .mystery-progress__ms-svg {
      width: 14px;
      height: 14px;
   }
}