/* KiMaPa Easter Hunt v0.4.0 — Crack + Niete (Iteration 2b-A) */

.kmp-eh-egg {
  position: absolute;
  z-index: 9999;
  /* Bigger eggs (mobile-first). */
  width: clamp(132px, 16vw, 210px);
  aspect-ratio: 5 / 7;
  height: auto;
  border-radius: 50% 50% 48% 48%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  user-select: none;
  touch-action: manipulation;
  display: grid;
  place-items: center;
  will-change: transform, opacity, filter;
}

/* legacy highlight (disabled later for SVG eggs) */
.kmp-eh-egg::after{
  content:"";
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  position: absolute;
  top: 10px;
  left: 12px;
  filter: blur(.2px);
}

/* --------------------------------------------
   IMPORTANT: Body must NOT move.
   We keep the inner wrapper, but disable any
   tipping/physics transforms entirely.
--------------------------------------------- */
.kmp-eh-egg-inner{
  width: 100%;
  height: 100%;
  display: block;
  transform: none !important;
  animation: none !important;
  will-change: auto;
}

/* (old tip keyframes kept here intentionally removed)
   If you want to keep them for later experiments, move
   them into another file. */

/* Pattern fallback (legacy) */
.kmp-eh-egg-pattern {
  width: 80%;
  height: 80%;
  border-radius: 50% 50% 48% 48%;
  opacity: .55;
}

/* simple pattern variants */
.kmp-eh-egg[data-variant="dots"] .kmp-eh-egg-pattern{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.6) 0 2px, transparent 3px),
    radial-gradient(circle at 65% 45%, rgba(255,255,255,.6) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 70%, rgba(255,255,255,.6) 0 2px, transparent 3px);
}
.kmp-eh-egg[data-variant="splats"] .kmp-eh-egg-pattern{
  background:
    radial-gradient(circle at 30% 35%, rgba(255,255,255,.55) 0 6px, transparent 7px),
    radial-gradient(circle at 65% 65%, rgba(255,255,255,.45) 0 5px, transparent 6px);
}

/* Pulse once when entering viewport */
@keyframes kmp-eh-pulse {
  0%   { transform: translate(-50%, -50%) scale(1); }
  55%  { transform: translate(-50%, -50%) scale(1.10); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.kmp-eh-pulse-once { animation: kmp-eh-pulse 700ms ease-out 1; }

/* Click feedback */
.kmp-eh-clicked {
  transform: translate(-50%, -50%) scale(1.08);
  transition: transform 120ms ease-out;
}

/* Crack animation (container "pop") */
@keyframes kmp-eh-crack-pop {
  0%   { transform: translate(-50%, -50%) scale(1.00) rotate(0deg); }
  40%  { transform: translate(-50%, -50%) scale(1.12) rotate(-2deg); }
  100% { transform: translate(-50%, -50%) scale(1.03) rotate(1deg); }
}
.kmp-eh-crack {
  animation: kmp-eh-crack-pop 280ms ease-out 1;
}

.kmp-eh-crackline{
  position:absolute;
  inset: 8px 10px 10px 10px;
  border-radius: 50% 50% 48% 48%;
  pointer-events:none;
  opacity: 0;
  background:
    linear-gradient(120deg,
      rgba(0,0,0,0) 0%,
      rgba(255,255,255,.85) 48%,
      rgba(0,0,0,0) 52%,
      rgba(0,0,0,0) 100%);
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.12));
}
.kmp-eh-cracked .kmp-eh-crackline{
  opacity: 1;
}

/* Dissolve for duds */
@keyframes kmp-eh-dissolve {
  0%   { opacity: 1; filter: blur(0px); transform: translate(-50%, -50%) scale(1.03); }
  100% { opacity: 0; filter: blur(3px); transform: translate(-50%, -50%) scale(0.92); }
}
.kmp-eh-dissolve {
  animation: kmp-eh-dissolve 520ms ease-in 1 forwards;
}

/* Toast */
#kmp-eh-toast {
  position: fixed;
  left: 50%;
  top: 35%;
  transform: translateX(-50%);
  z-index: 100000;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 40px 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  font: 18px/1.25 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: #1f2937;
  max-width: min(92vw, 520px);
  display: none;
}
.kmp-eh-toast-title {
	display: block;
	font-size: 18px;
	font-weight: bold;
}
.kmp-eh-toast-body {
	display: block;
	font-size: 16px;
}
#kmp-eh-toast.kmp-eh-toast-show { display: block; }


/* Modal (Win Flow) */
.kmp-eh-modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgba(0,0,0,.42);
  display: none;
}
.kmp-eh-modal-backdrop.kmp-eh-show{ display:block; }

.kmp-eh-modal{
  flex-direction: column;
  position: fixed;
  left: 50%;
  top: 14%;
  transform: translateX(-50%);
  z-index: 100002;
  width: min(92vw, 620px);
  max-height: 86vh;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 22px;
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
  padding: 14px 14px 12px 14px;
  display: none;
  font: 15px/1.3 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: #111827;
}
.kmp-eh-modal.kmp-eh-modal.kmp-eh-show{display: flex;}

.kmp-eh-modal-header{
  display:flex;
  align-items:flex-start;
  gap: 10px;
}
.kmp-eh-modal-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.kmp-eh-modal-title{ font-weight: 800; font-size: 18px; margin: 0; }
.kmp-eh-modal-copy{ margin: 6px 0 0 0; opacity: .92; }

.kmp-eh-modal-close{
  margin-left:auto;
  border: 0;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: .6;
}
.kmp-eh-modal-close:hover{ opacity: .9; }

.kmp-eh-form{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.kmp-eh-form label{
  display:block;
  font-weight: 650;
  font-size: 13px;
  margin-bottom: 4px;
}
.kmp-eh-form input[type=text], .kmp-eh-form input[type=email]
{
  width: 100%;
  height: 40px;
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  font: 15px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.kmp-eh-form .kmp-eh-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  align-items:center;
}
.kmp-eh-btn{
  appearance:none;
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  background: #75c093;
  color: #fff;
  font-weight: 750;
}
.kmp-eh-btn:disabled{
  opacity: .6;
  cursor: not-allowed;
}
.kmp-eh-btn-secondary{
  background: rgba(0,0,0,.06);
  color: #111827;
  border: 1px solid rgba(0,0,0,.10);
}

.kmp-eh-form-note{
  font-size: 13px;
  opacity: .85;
}

.kmp-eh-form-consents{
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.kmp-eh-checkbox{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.35;
  cursor: pointer;
}

.kmp-eh-checkbox input{
  margin-top: 2px;
}

.kmp-eh-checkbox a{
  color: inherit;
  text-decoration: underline;
}

/* Confetti canvas */
#kmp-eh-confetti{
  position: fixed;
  inset: 0;
  z-index: 100000;
  pointer-events: none;
  display: none;
}
#kmp-eh-confetti.kmp-eh-show{ display:block; }

/* --- SVG Egg (0.4.2+) --- */

/* Egg container is now only a positioning/click target; visuals live in the inline SVG */
.kmp-eh-egg{
  background: transparent !important;
  border-radius: 0;
  box-shadow: none;
  overflow: visible; /* allow lid to open outside */
}

/* remove legacy highlight/pattern layers */
.kmp-eh-egg::after{ display:none; }
.kmp-eh-egg .kmp-eh-egg-pattern{ display:none; }

/* SVG sizing + shadow */
.kmp-eh-svg{
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,.18));
}

/* Shell outline */
.kmp-eh-svg .shell-outline{
  fill: none;
  stroke: rgba(0,0,0,.18);
  stroke-width: 18; /* ggf. 14–24 nach Geschmack */
}

/* Crack glow (only during opening) */
.kmp-eh-svg .crack-glow{ opacity: 0; }
.kmp-eh-egg.kmp-eh-opening .kmp-eh-svg .crack-glow{
  opacity: 1;
  animation: kmp-eh-crackGlow 420ms ease-out 1;
}
@keyframes kmp-eh-crackGlow{
  0%{ opacity:0; }
  30%{ opacity:.85; }
  100%{ opacity:0; }
}

/* Pattern groups (show one via data-variant) */
.kmp-eh-svg .pat{ display:none; }
.kmp-eh-egg[data-variant="dots"]   .kmp-eh-svg .pat-dots{ display:block; }
.kmp-eh-egg[data-variant="splats"] .kmp-eh-svg .pat-splats{ display:block; }


/* Animation timing */
:root{
  --kmp-eh-open-dur: 520ms;
  --kmp-eh-open-ease: cubic-bezier(.22,.85,.2,1);
}

/* Make SVG transforms behave consistently */
.kmp-eh-svg .top{
  transform-box: fill-box;
  transform-origin: 50% 86%; /* hinge near crack line */
  will-change: transform;
}

/* ONLY top transitions; bottom is fully frozen */
.kmp-eh-svg .top{
  transition: transform var(--kmp-eh-open-dur) var(--kmp-eh-open-ease);
}
.kmp-eh-svg .bottom{
  transform: none !important;
  transition: none !important;
  animation: none !important;
  will-change: auto;
}

/* Keep egg open after animation (top only) */
.kmp-eh-egg.kmp-eh-open .kmp-eh-svg .top{
  animation: kmp-eh-top-crack-right var(--kmp-eh-open-dur) cubic-bezier(.15,.85,.25,1.05) 1 both;
}
.kmp-eh-egg.kmp-eh-open.kmp-eh-open-left .kmp-eh-svg .top{
  animation-name: kmp-eh-top-crack-left;
}

@keyframes kmp-eh-top-crack-right{
  0%   { transform: rotate(0deg) translate(0,0); }
  60%  { transform: rotate(40deg) translate(10px,-14px); } /* overshoot */
  82%  { transform: rotate(34deg) translate(9px,-12px); }  /* settle back */
  100% { transform: rotate(36deg) translate(10px,-13px); } /* resting */
}
@keyframes kmp-eh-top-crack-left{
  0%   { transform: rotate(0deg) translate(0,0); }
  60%  { transform: rotate(-40deg) translate(-10px,-14px); }
  82%  { transform: rotate(-34deg) translate(-9px,-12px); }
  100% { transform: rotate(-36deg) translate(-10px,-13px); }
}

/* Optional: slightly larger eggs on touch devices */
@media (pointer: coarse) {
  .kmp-eh-egg { width: clamp(160px, 22vw, 240px); }
}
/* =========================================================
   KiMaPa Easter Hunt – Win Modal Styling (CARD)
   ========================================================= */

/* Das hier ist die INNERE Card, nicht der fixed Container */
.kmp-eh-modal-card {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  position: relative;
  background: #fff;
  border-radius: 22px;   /* gerne gleich wie außen, wirkt clean */
  overflow: hidden;      /* wichtig für Full-Bleed Bild */
}

/* ---------- Media / Image (Full Bleed) ---------- */
.kmp-eh-modal-media { width: 100%; }

.kmp-eh-modal-img {
  width: 100%;
  line-height: 0;
}

.kmp-eh-modal-img-el {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- Close Button (über dem Bild) ---------- */
.kmp-eh-modal-card .kmp-eh-modal-close{
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;

  width: 36px;
  height: 36px;
  border-radius: 50%;

  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;

  font-size: 18px;
  line-height: 1;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  -webkit-tap-highlight-color: transparent;
}

.kmp-eh-modal-card .kmp-eh-modal-close:hover{
  background: rgba(0, 0, 0, 0.75);
}

/* ---------- Content / Text / Form ---------- */
.kmp-eh-modal-body{
  overflow-y: auto;
  flex: 1;	
  padding: 12px 14px; /* 10–15px wie gewünscht */
}

/* kleine Typo-Adjustments (optional) */
.kmp-eh-modal-title { margin: 0 0 6px; }
.kmp-eh-modal-copy  { margin: 0 0 12px; }

label.kmp-eh-checkbox {
  display: flex;
}
label.kmp-eh-checkbox input { width: 3%}
label.kmp-eh-checkbox span { width: 97%}