/* AFIWAI Dynamic Image Designer — Front styles (UTF-8 sans BOM) */

/* =========================
   Base container + variables
========================= */
.afiwai-did {
  --afiwai-maxw: 100%;
  --afiwai-h: 380px;
  --afiwai-radius: 22px;
  --afiwai-shadow: 18px;
  --afiwai-bw: 0px;
  --afiwai-bc: #ffffff;

  --afiwai-overlay-op: 0.15;
  --afiwai-overlay: #000000;
  --afiwai-g-from: #000000;
  --afiwai-g-to: #0064C0;
  --afiwai-g-ang: 135deg;

  --afiwai-grain: 0;

  --afiwai-glow: 22px;
  --afiwai-glowc: #0064C0;

  --afiwai-tilt-max: 10;
  --afiwai-persp: 900px;

  --afiwai-reveal: 18px;

  --afiwai-anim-dur: 6s;
  --afiwai-anim-del: 0s;
  --afiwai-anim-ease: ease-in-out;
  --afiwai-anim-int: 12;

  --afiwai-hover-zoom: 1.06;

  /* ✅ Responsive ratios (utilisés sur tablette/mobile) */
  --afiwai-ar: 4 / 3;
  --afiwai-ar-mobile: 1 / 1;

  width: 100% !important;
  max-width: var(--afiwai-maxw) !important;

  /* ✅ IMPORTANT: centrer le composant quand max-width < 100% (évite “marge à droite”) */
  margin-left: auto !important;
  margin-right: auto !important;

  /* Sécurité anti-débordement (themes/builders) */
  overflow: visible !important;
}

.afiwai-did * { box-sizing: border-box; }

/* =========================
   Core stage
========================= */
.afiwai-did-inner {
  position: relative;
  height: var(--afiwai-h) !important;
  border-radius: var(--afiwai-radius) !important;
  overflow: hidden !important;
  border: var(--afiwai-bw) solid var(--afiwai-bc) !important;
  box-shadow: 0 calc(var(--afiwai-shadow) * 0.6) calc(var(--afiwai-shadow) * 1.4) rgba(0,0,0,.18) !important;
  background: transparent !important;
  transform-style: preserve-3d !important;
  will-change: transform !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;

  /* Sécurité: certains thèmes mettent display:inline-block sur des wrappers */
  display: block !important;
}

/* Image (centrage par défaut, même si JS ne tourne pas) */
.afiwai-did-img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  transform: translateZ(0);
  will-change: transform, filter;
  object-fit: cover;
  object-position: center center;
  border-radius: var(--afiwai-radius) !important;
}

/* Overlay */
.afiwai-did-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--afiwai-overlay-op);
  transition: opacity .22s ease;
  border-radius: var(--afiwai-radius) !important;
}

.afiwai-overlay-none .afiwai-did-overlay { display: none; }

.afiwai-overlay-solid .afiwai-did-overlay {
  display: block;
  background: var(--afiwai-overlay);
}

.afiwai-overlay-gradient .afiwai-did-overlay {
  display: block;
  background: linear-gradient(var(--afiwai-g-ang), var(--afiwai-g-from), var(--afiwai-g-to));
}

/* Grain */
.afiwai-did-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(var(--afiwai-grain) / 100);
  mix-blend-mode: overlay;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  transition: opacity .22s ease;
  border-radius: var(--afiwai-radius) !important;
}

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .afiwai-did-inner,
  .afiwai-did-img,
  .afiwai-did-overlay,
  .afiwai-did-grain { transition: none !important; }
}

/* =========================
   Hover + Click toggle
========================= */
.afiwai-hover:hover .afiwai-did-inner {
  transform: scale(var(--afiwai-hover-zoom)) !important;
  box-shadow:
    0 calc(var(--afiwai-shadow) * 0.6) calc(var(--afiwai-shadow) * 1.6) rgba(0,0,0,.20),
    0 0 var(--afiwai-glow) color-mix(in srgb, var(--afiwai-glowc) 70%, transparent) !important;
}

.afiwai-click-toggle.is-toggled .afiwai-did-inner {
  transform: scale(calc(var(--afiwai-hover-zoom) + 0.02)) !important;
  box-shadow:
    0 calc(var(--afiwai-shadow) * 0.7) calc(var(--afiwai-shadow) * 1.7) rgba(0,0,0,.24),
    0 0 calc(var(--afiwai-glow) * 1.15) color-mix(in srgb, var(--afiwai-glowc) 75%, transparent) !important;
}
.afiwai-click-toggle.is-toggled .afiwai-did-overlay { opacity: calc(var(--afiwai-overlay-op) + .08); }

/* =========================
   Reveal on scroll
========================= */
.afiwai-reveal .afiwai-did-inner {
  opacity: 0;
  transform: translateY(var(--afiwai-reveal)) !important;
}
.afiwai-reveal.is-revealed .afiwai-did-inner {
  opacity: 1;
  transform: translateY(0) !important;
}

/* =========================
   Presets
========================= */
.afiwai-preset-clean .afiwai-did-inner {
  background: transparent !important;
}

/* Polaroid */
.afiwai-preset-polaroid .afiwai-did-inner {
  background: #ffffff !important;
  padding: 18px 18px 46px 18px !important;
  border-radius: calc(var(--afiwai-radius) + 6px) !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.18) !important;
}
.afiwai-preset-polaroid .afiwai-did-img {
  position: relative !important;
  height: 100% !important;
  border-radius: calc(var(--afiwai-radius) - 6px) !important;
}
.afiwai-preset-polaroid .afiwai-did-overlay,
.afiwai-preset-polaroid .afiwai-did-grain {
  border-radius: calc(var(--afiwai-radius) + 6px) !important;
}

/* Pin */
.afiwai-preset-pin .afiwai-did-inner {
  border-radius: calc(var(--afiwai-radius) + 4px) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.22) !important;
}
.afiwai-preset-pin .afiwai-did-inner::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #ffffff 0 20%, #d3182a 28% 100%);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  z-index: 5;
}
.afiwai-preset-pin .afiwai-did-inner::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 50%;
  width: 2px;
  height: 18px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.22);
  z-index: 4;
}

/* Torn */
.afiwai-preset-torn .afiwai-did-inner {
  border-radius: 16px !important;
  clip-path: polygon(
    0% 2%, 6% 0%, 14% 3%, 22% 0%, 30% 3%, 40% 1%, 50% 3%, 60% 1%, 72% 4%, 84% 1%, 94% 4%, 100% 2%,
    98% 12%, 100% 22%, 97% 34%, 100% 46%, 97% 58%, 100% 70%, 97% 84%, 100% 96%,
    92% 100%, 82% 98%, 74% 100%, 62% 97%, 50% 100%, 38% 97%, 26% 100%, 16% 98%, 8% 100%, 0% 96%,
    3% 84%, 0% 72%, 3% 60%, 0% 48%, 3% 36%, 0% 24%, 2% 12%
  );
  box-shadow: 0 20px 60px rgba(0,0,0,.22) !important;
}

/* Shadow card */
.afiwai-preset-shadowcard .afiwai-did-inner {
  border-radius: calc(var(--afiwai-radius) + 10px) !important;
  box-shadow:
    0 22px 70px rgba(0,0,0,.22),
    0 2px 0 rgba(255,255,255,.12) inset !important;
  border: 1px solid rgba(255,255,255,.20) !important;
}

/* =========================
   Animations (compat Tilt)
========================= */
.afiwai-anim .afiwai-did-inner,
.afiwai-anim.afiwai-tilt .afiwai-did-img {
  animation-duration: var(--afiwai-anim-dur);
  animation-delay: var(--afiwai-anim-del);
  animation-timing-function: var(--afiwai-anim-ease);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

/* Tilt actif: animation sur l’image, pas sur le conteneur (évite conflit transform) */
.afiwai-anim.afiwai-tilt .afiwai-did-inner {
  animation: none !important;
}

/* once */
.afiwai-anim.afiwai-anim-once .afiwai-did-inner { animation-iteration-count: 1; }
.afiwai-anim.afiwai-tilt.afiwai-anim-once .afiwai-did-img { animation-iteration-count: 1; }

@media (prefers-reduced-motion: reduce) {
  .afiwai-anim .afiwai-did-inner,
  .afiwai-anim .afiwai-did-img { animation: none !important; }
}

/* Amplifiées */
@keyframes afiwai_float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(calc(var(--afiwai-anim-int) * -1.6px)); }
}
@keyframes afiwai_pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(calc(1 + (var(--afiwai-anim-int) / 210))); }
}
@keyframes afiwai_kenburns {
  0% { transform: scale(1.02) translate(0, 0); }
  100% {
    transform:
      scale(calc(1.02 + (var(--afiwai-anim-int) / 95)))
      translate(calc(var(--afiwai-anim-int) * -1.6px), calc(var(--afiwai-anim-int) * 1.3px));
  }
}
@keyframes afiwai_zoom {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(calc(1 + (var(--afiwai-anim-int) / 115))); }
}
@keyframes afiwai_shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(calc(var(--afiwai-anim-int) * 1.4px), calc(var(--afiwai-anim-int) * -1.2px)); }
  20% { transform: translate(calc(var(--afiwai-anim-int) * -1.3px), calc(var(--afiwai-anim-int) * 1.2px)); }
  30% { transform: translate(calc(var(--afiwai-anim-int) * 1.2px), calc(var(--afiwai-anim-int) * 1.1px)); }
  40% { transform: translate(calc(var(--afiwai-anim-int) * -1.2px), calc(var(--afiwai-anim-int) * -1.1px)); }
  50% { transform: translate(calc(var(--afiwai-anim-int) * 1.1px), 0); }
  60% { transform: translate(calc(var(--afiwai-anim-int) * -1.1px), 0); }
  70% { transform: translate(0, calc(var(--afiwai-anim-int) * 1.1px)); }
  80% { transform: translate(0, calc(var(--afiwai-anim-int) * -1.1px)); }
  90% { transform: translate(calc(var(--afiwai-anim-int) * 0.8px), calc(var(--afiwai-anim-int) * -0.8px)); }
}
@keyframes afiwai_rotate {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(calc(var(--afiwai-anim-int) * 0.28deg)); }
}
@keyframes afiwai_fadein {
  0% { opacity: 0; transform: translateY(calc(var(--afiwai-anim-int) * 1.4px)); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Mapping */
.afiwai-anim-float .afiwai-did-inner { animation-name: afiwai_float; }
.afiwai-anim-pulse .afiwai-did-inner { animation-name: afiwai_pulse; }
.afiwai-anim-kenburns .afiwai-did-inner { animation-name: afiwai_kenburns; }
.afiwai-anim-zoom .afiwai-did-inner { animation-name: afiwai_zoom; }
.afiwai-anim-shake .afiwai-did-inner { animation-name: afiwai_shake; }
.afiwai-anim-rotate .afiwai-did-inner { animation-name: afiwai_rotate; }
.afiwai-anim-fadein .afiwai-did-inner { animation-name: afiwai_fadein; }

.afiwai-anim.afiwai-tilt.afiwai-anim-float .afiwai-did-img { animation-name: afiwai_float; }
.afiwai-anim.afiwai-tilt.afiwai-anim-pulse .afiwai-did-img { animation-name: afiwai_pulse; }
.afiwai-anim.afiwai-tilt.afiwai-anim-kenburns .afiwai-did-img { animation-name: afiwai_kenburns; }
.afiwai-anim.afiwai-tilt.afiwai-anim-zoom .afiwai-did-img { animation-name: afiwai_zoom; }
.afiwai-anim.afiwai-tilt.afiwai-anim-shake .afiwai-did-img { animation-name: afiwai_shake; }
.afiwai-anim.afiwai-tilt.afiwai-anim-rotate .afiwai-did-img { animation-name: afiwai_rotate; }
.afiwai-anim.afiwai-tilt.afiwai-anim-fadein .afiwai-did-img { animation-name: afiwai_fadein; }

/* =========================
   Fullscreen button + modal
========================= */
.afiwai-did-fs {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 6;
  border: 0;
  border-radius: 999px;
  padding: 9px 12px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .2px;
  background: rgba(0, 0, 0, .52);
  color: #ffffff;
  backdrop-filter: blur(8px);
  transition: transform .18s ease, opacity .18s ease;
}
.afiwai-did-fs:hover { transform: translateY(-1px); }
.afiwai-did-fs:active { transform: translateY(0); }

.afiwai-did-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0,0,0,.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.afiwai-did-modal-inner {
  width: min(1100px, 100%);
  max-height: 92vh;
  position: relative;
}

.afiwai-did-modal-close {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
  border: 0;
  border-radius: 999px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 800;
  background: rgba(255,255,255,.92);
}

.afiwai-did-modal-stage {
  width: 100%;
  height: min(78vh, 760px);
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 25px 80px rgba(0,0,0,.45);
  position: relative;
}

.afiwai-did-modal-stage img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* =========================
   ✅ Responsive (tablette / mobile)
========================= */
@media (max-width: 900px) {
  .afiwai-did {
    width: 100% !important;
    max-width: 100% !important;
  }

  .afiwai-did-inner {
    height: auto !important;
    aspect-ratio: var(--afiwai-ar, 4 / 3) !important;
  }
}

@media (max-width: 600px) {
  .afiwai-did-inner {
    aspect-ratio: var(--afiwai-ar-mobile, 1 / 1) !important;
  }

  .afiwai-preset-polaroid .afiwai-did-inner {
    padding: 14px 14px 36px 14px !important;
  }
}

/* Option: sur mobile, on peut désactiver l’effet “torn” pour retrouver un arrondi classique */
@media (max-width: 600px) {
  .afiwai-preset-torn .afiwai-did-inner {
    clip-path: none !important;
    border-radius: var(--afiwai-radius) !important;
  }
}