/* ── Unsparkle — paper & ink ───────────────────────────────────────────── */

:root {
  --paper:        #f5f6fb;
  --paper-soft:   #ffffff;
  --paper-warm:   #fafbff;
  --paper-line:   #e1e4ee;
  --ink:          #1d1f2e;
  --ink-soft:     #5b5e72;
  --ink-faint:    #a7abbc;

  /* Gemini gradient stops */
  --gem-blue:     #4285f4;
  --gem-purple:   #9b72cb;
  --gem-pink:     #d96570;
  --gem-orange:   #f4a261;

  /* Solid pulls from the gradient for non-gradient surfaces */
  --accent:       #8a6ec5;
  --accent-deep:  #6f54aa;
  --accent-soft:  #ddd2ef;
  --mustard:      #d96570;

  --gem-gradient:        linear-gradient(135deg, #4285f4 0%, #9b72cb 48%, #d96570 100%);
  --gem-gradient-deep:   linear-gradient(135deg, #2c6ad6 0%, #7e54b0 48%, #be4d5b 100%);
  --gem-gradient-soft:   linear-gradient(135deg, rgba(66,133,244,0.12) 0%, rgba(155,114,203,0.12) 48%, rgba(217,101,112,0.12) 100%);

  --shadow-sm:    0 1px 0 rgba(29, 31, 46, 0.05);
  --shadow-md:    0 6px 22px -10px rgba(80, 60, 160, 0.22);
  --shadow-lg:    0 18px 44px -16px rgba(120, 70, 180, 0.32);
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 22px;
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Fraunces", Georgia, "Iowan Old Style", serif;
  font-variation-settings: "opsz" 14, "SOFT" 30, "WONK" 0;
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100svh;
  overflow-x: hidden;
}

/* Subtle paper grain overlay */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.18;
  mix-blend-mode: multiply;
}

/* Soft aurora wash behind everything — Gemini gradient ghost */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(60% 40% at 8% 0%, rgba(66, 133, 244, 0.16), transparent 70%),
    radial-gradient(50% 40% at 92% 18%, rgba(217, 101, 112, 0.14), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(155, 114, 203, 0.14), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

main {
  position: relative;
  z-index: 2;
  max-width: 540px;
  margin: 0 auto;
  padding: clamp(2rem, 7vh, 3.5rem) 1.4rem 4rem;
  padding-top: max(clamp(2rem, 7vh, 3.5rem), env(safe-area-inset-top));
  padding-bottom: max(4rem, calc(env(safe-area-inset-bottom) + 3rem));
}

/* ── Header ──────────────────────────────────────────────────────────── */

header {
  text-align: center;
  margin-bottom: 2.5rem;
  animation: fade-up 0.8s 0.05s both var(--ease-soft);
}

.hero-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 0.9rem;
  animation: drift 9s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(120, 70, 180, 0.28));
}
.hero-mark svg { width: 100%; height: 100%; }
.hero-mark path { fill: url(#sparkleGrad); }

h1 {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1, "wght" 600;
  font-size: clamp(2.8rem, 13vw, 4.4rem);
  letter-spacing: -0.045em;
  line-height: 0.92;
  color: var(--ink);
  display: inline-block;
}

.tagline {
  margin: 0.65rem auto 0;
  max-width: 30ch;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 12, "SOFT" 60;
}

.sparkle-mark {
  font-size: 0.95em;
  display: inline-block;
  transform: translateY(0.04em);
  background: var(--gem-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
}

/* ── Dropzone ────────────────────────────────────────────────────────── */

#dropzone {
  position: relative;
  background: var(--paper-soft);
  border: 1.5px dashed var(--paper-line);
  border-radius: var(--r-lg);
  padding: 2.6rem 1.4rem;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.3s var(--ease-soft),
    border-color 0.3s var(--ease-soft),
    box-shadow 0.3s var(--ease-soft),
    transform 0.3s var(--ease-soft),
    padding 0.4s var(--ease-soft);
  box-shadow: var(--shadow-sm);
  animation: fade-up 0.8s 0.18s both var(--ease-soft);
}

#dropzone::before {
  /* a soft inner highlight so it feels printed, not hollow */
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: calc(var(--r-lg) - 4px);
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
  opacity: 0.55;
}

#dropzone:hover,
#dropzone:focus-visible {
  background: var(--paper-warm);
  border-color: var(--mustard);
  outline: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

#dropzone.dragging {
  background: var(--paper-warm);
  border-color: var(--accent);
  border-style: solid;
  transform: translateY(-2px) scale(1.005);
  box-shadow: var(--shadow-lg);
}

.dropzone-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.dropzone-sparkle {
  width: 42px;
  height: 42px;
  margin-bottom: 0.65rem;
  transition: transform 0.5s var(--ease-spring), width 0.4s var(--ease-soft), height 0.4s var(--ease-soft);
}
.dropzone-sparkle svg { width: 100%; height: 100%; }
.dropzone-sparkle path { fill: url(#sparkleGrad); }
#dropzone:hover .dropzone-sparkle { transform: rotate(45deg) scale(1.08); }
#dropzone.dragging .dropzone-sparkle { transform: rotate(180deg) scale(1.18); }

.dropzone-title {
  font-size: 1.1rem;
  font-weight: 500;
  font-variation-settings: "opsz" 14, "SOFT" 80, "WONK" 0, "wght" 500;
  letter-spacing: -0.005em;
}

.dropzone-hint {
  display: block;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 11, "SOFT" 70;
}

.dropzone-loaded {
  display: none;
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* When an image is loaded, dropzone collapses & shows "change photo" */
body.has-image #dropzone {
  padding: 1.05rem 1rem;
}
body.has-image .dropzone-sparkle {
  width: 24px;
  height: 24px;
  margin-bottom: 0.4rem;
}
body.has-image .dropzone-title { display: none; }
body.has-image .dropzone-hint { display: none; }
body.has-image .dropzone-loaded { display: block; }

/* ── Controls ────────────────────────────────────────────────────────── */

.controls {
  margin: 1.4rem 0 0;
  display: grid;
  gap: 0.85rem;
  animation: fade-up 0.8s 0.28s both var(--ease-soft);
}

.toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  padding: 0.85rem 1rem;
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, border-color 0.2s;
}
.toggle:hover { background: var(--paper-warm); border-color: var(--mustard); }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }

.toggle-track {
  width: 36px;
  height: 22px;
  border-radius: 14px;
  background: var(--ink-faint);
  position: relative;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background 0.25s var(--ease-soft);
  box-shadow: inset 0 1px 2px rgba(28,22,18,0.15);
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper-soft);
  transition: transform 0.3s var(--ease-spring);
  box-shadow: 0 1px 2px rgba(28,22,18,0.25);
}
.toggle input:checked ~ .toggle-track { background: var(--gem-gradient); }
.toggle input:checked ~ .toggle-track .toggle-thumb { transform: translateX(14px); }
.toggle input:focus-visible ~ .toggle-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.toggle-label { display: block; line-height: 1.3; }
.toggle-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  font-variation-settings: "opsz" 12, "SOFT" 50;
  color: var(--ink);
}
.toggle-desc {
  display: block;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 0.1rem;
  font-variation-settings: "opsz" 10, "SOFT" 80;
}

/* ── Primary action ──────────────────────────────────────────────────── */

#download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  background: var(--gem-gradient);
  color: #fff;
  border: 0;
  padding: 1.05rem 1.25rem;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 500;
  font-variation-settings: "opsz" 14, "SOFT" 30, "wght" 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.15s var(--ease-soft),
    box-shadow 0.25s var(--ease-soft),
    filter 0.2s var(--ease-soft);
  box-shadow: var(--shadow-md);
}
#download:hover:not(:disabled) {
  filter: brightness(1.06) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}
#download:active:not(:disabled) { transform: translateY(0); filter: brightness(0.96); }
#download:disabled {
  background: var(--paper-line);
  color: var(--ink-faint);
  cursor: not-allowed;
  box-shadow: none;
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Status line ─────────────────────────────────────────────────────── */

#status {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 11, "SOFT" 60;
  min-height: 1.4em;
  transition: opacity 0.3s var(--ease-soft);
}
#status.warning { color: var(--accent); font-style: italic; }
#status:empty { opacity: 0; }

/* ── Canvases ────────────────────────────────────────────────────────── */

.canvases {
  margin-top: 1.6rem;
  display: grid;
  gap: 1rem;
  animation: fade-up 0.8s 0.4s both var(--ease-soft);
}

figure {
  background: var(--paper-soft);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-md);
  padding: 0.7rem 0.7rem 0.85rem;
  box-shadow: var(--shadow-sm);
}

figcaption {
  display: block;
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 10, "SOFT" 80;
  text-transform: lowercase;
  margin: 0 0 0.45rem 0.15rem;
}

.canvas-wrap {
  background:
    linear-gradient(45deg, var(--paper) 25%, transparent 25%) 0 0/14px 14px,
    linear-gradient(-45deg, var(--paper) 25%, transparent 25%) 0 0/14px 14px,
    linear-gradient(45deg, transparent 75%, var(--paper) 75%) 7px 7px/14px 14px,
    linear-gradient(-45deg, transparent 75%, var(--paper) 75%) 7px 7px/14px 14px,
    var(--paper-warm);
  border-radius: var(--r-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}

canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56vh;
  object-fit: contain;
  border-radius: var(--r-sm);
}

/* Until an image is loaded, hide canvas frames */
body:not(.has-image) .canvases { display: none; }

/* ── Footer ──────────────────────────────────────────────────────────── */

footer {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-faint);
  line-height: 1.55;
  font-variation-settings: "opsz" 11, "SOFT" 60;
  animation: fade-up 0.8s 0.5s both var(--ease-soft);
}

.footer-rule {
  width: 200px;
  height: 14px;
  margin: 0 auto 1rem;
  color: var(--ink-faint);
  opacity: 0.7;
}
.footer-rule svg { width: 100%; height: 100%; }

footer p { margin: 0.35rem 0; }
footer em {
  color: var(--ink-soft);
  font-style: italic;
  font-variation-settings: "opsz" 11, "SOFT" 80;
}
.credits a {
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: var(--paper-line);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.18em;
  transition: color 0.2s, text-decoration-color 0.2s;
}
.credits a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

/* ── Desktop ─────────────────────────────────────────────────────────── */

@media (min-width: 720px) {
  main {
    max-width: 760px;
    padding: 4.5rem 2rem 5rem;
  }
  header { margin-bottom: 3rem; }
  .hero-mark { width: 64px; height: 64px; }
  h1 { font-size: 5rem; }
  .tagline { font-size: 1.05rem; max-width: 38ch; }

  #dropzone { padding: 3.2rem 1.5rem; }
  body.has-image #dropzone { padding: 1.2rem 1.25rem; }

  .controls {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1.25rem;
  }
  #download { width: auto; min-width: 240px; padding: 0.95rem 1.6rem; }

  .canvases { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
}

/* ── Animations ──────────────────────────────────────────────────────── */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-3px) rotate(8deg); }
  75%      { transform: translateY(2px)  rotate(-6deg); }
}

@keyframes celebrate {
  0%   { transform: scale(1) rotate(0deg); }
  40%  { transform: scale(1.35) rotate(35deg); }
  100% { transform: scale(1) rotate(0deg); }
}

#dropzone.celebrate .dropzone-sparkle {
  animation: celebrate 0.7s var(--ease-spring) both;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero-mark { animation: none; }
}