/* =================================================================
   imageful.css — pagina dedicata /dev/imageful/
   Riusa il design system di dev/main.css (:root). Animazioni concettuali:
   compressione, conversione, upscale AI. Nessun asset esterno (placeholder CSS).
   ================================================================= */
.if { --if-accent: #3ce0c5; --if-accent-2: #4ea1ff; --if-ink: #0b111f; }
.if .eyebrow--on-dark { color: rgba(255,255,255,.6); }

.if-back { font-family: var(--font-mono); font-size: 13px; color: var(--muted); display: inline-flex; gap: 8px; }
.if-back:hover { color: var(--fg); }

/* ---------- HERO ---------- */
.if-hero { padding-block: clamp(48px, 8vw, 110px) clamp(60px, 9vw, 130px); }
.if-hero__grid {
  display: grid; grid-template-columns: 0.85fr 1.3fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
  margin-top: clamp(32px, 5vw, 56px);
}
.if-hero__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(44px, 7vw, 92px); line-height: 0.95; letter-spacing: -0.03em;
  margin-top: 18px;
}
.if-hero__tagline {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(19px, 2.4vw, 27px); line-height: 1.25; letter-spacing: -0.01em;
  margin-top: 22px; max-width: 22ch;
}
.if-hero__lead { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55; color: var(--fg-soft); margin-top: 18px; max-width: 46ch; }
.if-hero__note { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 16px; letter-spacing: .03em; }
.if-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.if-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.if-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 12px;
  background: var(--invert-bg); color: var(--invert-fg);
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
}
.if-badge--ghost { background: transparent; color: var(--fg); border: 1px solid var(--line); }
.if-badge--dark { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.16); }
.if-badge__soon {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  background: var(--if-accent); color: #06231f;
}
.if-badge--ghost .if-badge__soon { background: var(--if-accent); color: #06231f; }

/* Hero visual: screenshot reale dell'app (finestra già inclusa nell'immagine,
   sfondo trasparente → drop-shadow invece di box-shadow rispetta la sagoma) */
.if-hero__stage { perspective: 1500px; }
.if-hero__shot {
  width: 100%; height: auto;
  filter: drop-shadow(0 50px 90px rgba(21,20,14,.45));
  transform: rotateY(-7deg) rotateX(3deg) translateZ(0);
  transition: transform 1s var(--ease);
}
.if-hero__stage.is-in .if-hero__shot { transform: none; }

/* ---------- CONCEPTS ---------- */
.if-concepts { padding-block: clamp(56px, 9vw, 120px); border-top: 1px solid var(--line); }
.if-concepts__eyebrow { display: block; margin-bottom: clamp(40px, 6vw, 72px); }
.if-concept {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center;
  padding-block: clamp(40px, 6vw, 72px);
}
.if-concept + .if-concept { border-top: 1px solid var(--line-soft); }
.if-concept--rev .if-concept__text { order: 2; }
.if-concept__kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--if-accent); filter: saturate(1.4) brightness(.7); }
.if-concept__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 42px); line-height: 1.02; letter-spacing: -0.02em; margin-top: 14px; }
.if-concept__body { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; color: var(--fg-soft); margin-top: 18px; max-width: 42ch; }

.if-concept__viz { display: grid; place-items: center; }
.if-viz {
  width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; position: relative; overflow: hidden;
  background: var(--bg-alt); border: 1px solid var(--line);
  display: grid; place-items: center;
}

/* -- compress -- */
.if-viz--compress { background: #0f1420; border-color: rgba(255,255,255,.08); }
.if-grid {
  display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px;
  width: 78%; transition: transform 2.4s var(--ease), gap 2.4s var(--ease), width 2.4s var(--ease);
  transform-origin: center;
}
/* i tasselli partono CHIARI (opacity 1) → il pattern finale "compresso" è
   dipinto dal JS (imageful.js runCompress) con un'onda staggerata L→R */
.if-grid span {
  aspect-ratio: 1; border-radius: 2px;
  background: linear-gradient(135deg, var(--if-accent), var(--if-accent-2));
  opacity: 1; transition: opacity 1s var(--ease);
}
.if-viz--compress.is-anim .if-grid { gap: 1px; width: 42%; }
.if-counter {
  position: absolute; bottom: 16px; right: 18px;
  font-family: var(--font-mono); color: #fff; display: flex; align-items: baseline; gap: 4px;
}
.if-counter__val { font-size: clamp(22px, 3vw, 32px); font-weight: 500; }
.if-counter__u { font-size: 13px; color: rgba(255,255,255,.6); }
/* pulsante replay (freccia curva) — rilancia l'animazione */
.if-replay {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.if-replay:hover { color: #06231f; background: var(--if-accent); border-color: var(--if-accent); transform: translateY(-1px); }
.if-replay:focus-visible { outline: 2px solid var(--if-accent); outline-offset: 2px; }
.if-replay svg { display: block; }
.if-replay.is-spin svg { animation: if-replay-spin .6s var(--ease); }
@keyframes if-replay-spin { to { transform: rotate(-360deg); } }

/* -- convert -- */
.if-viz--convert { flex-direction: column; gap: 22px; }
.if-tile {
  position: relative; width: 46%; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  box-shadow: 0 20px 40px -22px rgba(21,20,14,.5);
  transition: transform .6s var(--ease);
}
.if-viz--convert.is-anim .if-tile { transform: scale(.9); }
.if-tile__img {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, hsl(var(--if-hue, 168) 70% 62%), hsl(calc(var(--if-hue, 168) + 40) 78% 58%));
  transition: background .5s var(--ease);
}
.if-tile__tag {
  position: absolute; left: 8px; bottom: 8px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  background: rgba(0,0,0,.5); color: #fff; padding: 4px 8px; border-radius: 6px;
}
.if-fmts { display: flex; gap: 6px; }
.if-fmts span {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.if-fmts span.is-on { color: #06231f; background: var(--if-accent); border-color: var(--if-accent); }

/* -- upscale -- */
.if-viz--upscale { background: #0f1420; border-color: rgba(255,255,255,.08); }
.if-up { position: relative; width: 62%; aspect-ratio: 1; border-radius: 12px; overflow: hidden; }
/* canvas: la scena (iride ricca di dettaglio) è resa a risoluzione crescente
   via nearest-neighbor (imageSmoothingEnabled=false) → sgranato 1× a nitido 4×.
   NB: niente image-rendering:pixelated qui, così il livello 4× resta liscio. */
.if-up__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.if-up__scan {
  position: absolute; top: 0; bottom: 0; width: 42%; left: -46%;
  background: linear-gradient(90deg, transparent, rgba(60,224,197,.55), transparent);
  mix-blend-mode: screen; pointer-events: none;
}
.if-up__scan.is-scan { animation: if-scan 1.05s var(--ease); }
@keyframes if-scan { from { left: -46%; } to { left: 104%; } }
.if-up__scale { position: absolute; right: 10px; top: 10px; display: flex; gap: 5px; }
.if-up__x {
  font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.5);
  padding: 3px 7px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  transition: color .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.if-up__x.is-on { color: #06231f; background: var(--if-accent); border-color: var(--if-accent); }

/* ---------- FEATURES ---------- */
.if-features { padding-block: clamp(56px, 9vw, 120px); border-top: 1px solid var(--line); }
.if-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.if-feat { background: var(--bg); padding: clamp(24px, 3vw, 38px); }
.if-feat__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.01em; }
.if-feat__desc { font-size: 15.5px; line-height: 1.5; color: var(--fg-soft); margin-top: 10px; }

/* ---------- FORMATS ---------- */
.if-formats { padding-block: clamp(56px, 9vw, 120px); border-top: 1px solid var(--line); }
.if-formats__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.if-formats__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.if-export__row { display: flex; flex-wrap: wrap; gap: 12px; }
.if-export__pill {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2.6vw, 30px); letter-spacing: -0.01em;
  padding: 12px 22px; border-radius: 14px; color: var(--invert-fg);
  background: var(--invert-bg);
}
.if-import__lead { font-size: 16px; line-height: 1.5; color: var(--fg-soft); margin-bottom: 20px; max-width: 44ch; }
.if-import__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.if-chip { font-family: var(--font-mono); font-size: 12px; color: var(--fg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; }

/* ---------- PRIVACY ---------- */
.if-privacy { padding-block: clamp(64px, 10vw, 130px); background: var(--if-ink); color: #eaf6f3; }
.if-privacy__inner { max-width: 760px; text-align: center; margin-inline: auto; }
.if-privacy__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.02; letter-spacing: -0.02em; margin-top: 18px; }
.if-privacy__body { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.55; color: rgba(234,246,243,.7); margin-top: 20px; }
.if-privacy .eyebrow::before { background: currentColor; }

/* ---------- CTA ---------- */
.if-cta { padding-block: clamp(64px, 10vw, 130px); text-align: center; }
.if-cta__inner { max-width: 720px; margin-inline: auto; }
.if-cta__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 5.5vw, 68px); line-height: 0.98; letter-spacing: -0.02em; }
.if-cta__body { font-size: clamp(16px, 1.8vw, 20px); line-height: 1.55; color: var(--fg-soft); margin-top: 20px; }
.if-cta__row { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 34px; }
.if-cta__btn {
  display: inline-flex; align-items: center; padding: 16px 34px; border-radius: 999px;
  background: var(--invert-bg); color: var(--invert-fg);
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.if-cta__btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -18px rgba(21,20,14,.5); }
.if-buy { background: linear-gradient(135deg, var(--if-accent), var(--if-accent-2)); color: #06231f; }
.if-buy:hover { box-shadow: 0 22px 44px -18px color-mix(in srgb, var(--if-accent) 60%, #15140e); }
.if-buy:focus-visible { outline: 2px solid var(--if-accent); outline-offset: 3px; }
.if-cta__stores { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.if-cta .if-badge--dark { background: var(--bg-alt); color: var(--fg); border-color: var(--line); }
.if-cta__note { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 20px; letter-spacing: .03em; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .if-hero__grid { grid-template-columns: 1fr; }
  .if-hero__shot { transform: none; }
  .if-concept, .if-concept--rev { grid-template-columns: 1fr; }
  .if-concept--rev .if-concept__text { order: 0; }
  .if-concept__viz { order: 2; }
  .if-viz { max-width: 460px; width: 100%; }
  .if-feat-grid { grid-template-columns: 1fr 1fr; }
  .if-formats__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .if-feat-grid { grid-template-columns: 1fr; }
}

/* reduced motion: mostra stato finale, niente scan/tween */
@media (prefers-reduced-motion: reduce) {
  .if-up__scan { animation: none; opacity: 0; }
}