/* Artist vibe styles */
:root {
  --bg: #0f0f14;
  --ink: #121217;
  --paper: #f8f5f1;
  --accent: #ff6ec7;
  --accent2: #7ee8fa;
  --shadow: rgba(0, 0, 0, .25);
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  color: #fff;
  background:
    radial-gradient(1200px 600px at 80% 0%, #1a1740 0%, #0f0f14 45%),
    radial-gradient(800px 400px at 20% 100%, #201a2e 0%, #0f0f14 50%),
    linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .05));
  font: 16px/1.6 "Segoe UI", system-ui, -apple-system, sans-serif;
}

.hero {
  position: relative;
  padding: 6rem 2rem 8rem;
  overflow: hidden
}

.hero-copy {
  max-width: 900px;
  margin: 0 auto;
  text-align: center
}

.hero h1 {
  font-size: 3.2rem;
  letter-spacing: .02em;
  margin: .25rem 0;
  background: linear-gradient(120deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.hero p {
  opacity: .85;
  margin: .5rem 0 1.25rem
}

.scribble {
  height: 90px
}

.scribble svg {
  width: 440px;
  max-width: 80vw
}

.stroke {
  fill: none;
  stroke: #fff;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .25));
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  animation: write 2.8s ease forwards
}

@keyframes write {
  to {
    stroke-dashoffset: 0
  }
}

/* Typewriter love note */
.love-note {
  max-width: 720px;
  margin: 1rem auto 0;
  padding: 1rem 1.25rem;
  border-radius: 16px;
  background:
    radial-gradient(600px 240px at 0% 0%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0)),
    rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 32px var(--shadow)
}

.love-note-inner {
  font-size: 1.1rem;
  position: relative;
  min-height: 1.2em
}

.typed {
  white-space: pre-wrap;
  display: inline-block
}

.caret {
  display: inline-block;
  width: 1px;
  height: 1.2em;
  background: #fff;
  vertical-align: bottom;
  margin-left: 2px;
  animation: blink 1s step-end infinite
}

@keyframes blink {
  50% {
    opacity: 0
  }
}

@keyframes fadeUpOut {
  0% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px)
  }

  100% {
    opacity: 0;
    transform: translateY(-12px);
    filter: blur(1.2px)
  }
}

.typed.fade-out-up {
  animation: fadeUpOut .38s ease forwards;
  will-change: transform, opacity, filter
}

/* Floating SVGs */
.floating-svgs {
  pointer-events: none
}

.floating-svgs .float {
  position: absolute;
  opacity: .85;
  filter: drop-shadow(0 12px 18px var(--shadow));
}

.floating-svgs .f1 {
  right: 6vw;
  top: 2rem;
  animation: float1 9s ease-in-out infinite
}

.floating-svgs .f2 {
  left: 7vw;
  top: 5rem;
  animation: float2 10s ease-in-out infinite
}

.floating-svgs .f3 {
  right: 12vw;
  bottom: -1rem;
  animation: float3 12s ease-in-out infinite
}

@keyframes float1 {

  0%,
  100% {
    transform: translateY(0) rotate(-4deg)
  }

  50% {
    transform: translateY(-16px) rotate(3deg)
  }
}

@keyframes float2 {

  0%,
  100% {
    transform: translateY(0) rotate(6deg)
  }

  50% {
    transform: translateY(-22px) rotate(-3deg)
  }
}

@keyframes float3 {

  0%,
  100% {
    transform: translateY(0) rotate(-8deg)
  }

  50% {
    transform: translateY(-18px) rotate(2deg)
  }
}

img.float {
  width: 140px
}

/* Studio */
.studio {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.25rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem
}

.palette {
  background: rgba(255, 255, 255, .06);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 20px 40px var(--shadow);
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.palette::before {
  content: "Palette";
  display: block;
  font-weight: 600;
  opacity: .7;
  margin-bottom: .5rem
}

.palette .swatch {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 12px;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .2);
  box-shadow: 0 8px 14px var(--shadow);
  transition: .2s transform
}

.palette .swatch:hover {
  transform: translateY(-4px)
}

.palette .swatch.active {
  outline: 2px solid #fff;
  outline-offset: 3px
}

.palette .row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem
}

.canvas-wrap {
  position: relative;
  background: linear-gradient(180deg, #fff, #f9f5f0);
  border-radius: 22px;
  padding: 1rem;
  box-shadow: 0 30px 60px var(--shadow)
}

#sketch {
  width: 100%;
  height: 610px;
  background: repeating-linear-gradient(180deg, #fff, #fff 8px, #f6f2ea 8px, #f6f2ea 9px);
  border-radius: 16px;
  display: block;
  border: 1px solid #e7e0d6
}

.actions {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  gap: .6rem;
  flex-wrap: wrap
}

.brush-ctrl {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  padding: .35rem .7rem
}

.brush-ctrl label {
  font-weight: 600;
  opacity: .9
}

.brush-ctrl input[type=range] {
  width: 160px;
  accent-color: var(--accent)
}

.brush-ctrl .value {
  font-weight: 700;
  opacity: .95
}

button {
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: .6rem 1rem;
  font-weight: 600;
  cursor: pointer;
  color: #0f0f14
}

#clear {
  background: #ffd36b
}

#save {
  background: #7ee8fa
}

#saveHd {
  background: #ff6ec7;
  color: #0b0b10
}

button:active {
  transform: translateY(1px)
}

/* Gallery */
.gallery {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem
}

.gallery h2 {
  margin: .25rem 0 0;
  font-size: 1.6rem
}

.subtitle {
  opacity: .7;
  margin: .25rem 0 1rem
}

.tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem
}

.tile {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(120deg, #ff6ec7, #7ee8fa);
  position: relative
}

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* Diary note */
.diary {
  max-width: 1200px;
  margin: 2rem auto;
  background:
    repeating-linear-gradient(180deg, #fffdf7, #fffdf7 28px, #faf5ee 28px, #faf5ee 29px),
    radial-gradient(800px 400px at 10% 0%, rgba(255, 255, 255, .75), rgba(255, 255, 255, .65));
  color: #121217;
  border: 1px solid #e7e0d6;
  border-radius: 22px;
  box-shadow: 0 30px 60px var(--shadow);
  position: relative;
  padding: 2rem 3rem 2rem 6rem
}

.diary::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 64px;
  width: 2px;
  background: linear-gradient(180deg, rgba(255, 0, 64, .35), rgba(255, 0, 64, .2))
}

.diary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem
}

.diary-header h2 {
  margin: 0;
  font-size: 1.4rem;
  color: #1a1a1f
}

.diary-header .date {
  opacity: .6
}

.diary-stamp {
  position: absolute;
  top: -16px;
  right: -12px;
  width: 120px;
  opacity: .18;
  transform: rotate(-8deg);
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .2))
}

.diary-content {
  font-size: 1.08rem;
  line-height: 1.9
}

.diary-content p {
  margin: 0 0 1.1rem
}

.diary-content .opening {
  font-weight: 600
}

.diary-content {
  font-family: "Segoe Script", "Lucida Handwriting", "Segoe UI", cursive;
  font-size: 1.2rem;
  transform: rotate(-0.5deg)
}

/* Confetti */
.confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000
}

.confetti svg {
  position: absolute;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25));
  will-change: transform
}

.confetti svg.heart {
  width: 16px;
  height: 16px
}

/* Minimal modal overlay */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .6);
  z-index: 1000
}

.modal-content {
  position: relative
}

.modal-content img {
  display: block;
  max-width: min(90vw, 720px);
  max-height: 85vh
}

.modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  background: rgba(58, 57, 57, 0.85);
  color: #ffffff;
  font-weight: 100;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.modal-close:active {
  transform: translateY(1px)
}

.footer {
  padding: 3rem 2rem;
  text-align: center;
  opacity: .7
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .hero h1 { font-size: 2.8rem; }
  .scribble { height: 72px; }
  .scribble svg { width: 380px; }
  .studio { grid-template-columns: 280px 1fr; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .palette .row { grid-template-columns: repeat(5, 1fr); }
}

@media (max-width: 768px) {
  .hero { padding: 4rem 1.25rem 5rem; }
  .hero h1 { font-size: 2.4rem; }
  .floating-svgs .float { opacity: .7; }
  img.float { width: 100px; }

  .studio { grid-template-columns: 1fr; gap: 1rem; padding: 1rem; }
  .canvas-wrap { order: 1; }
  .palette { order: 2; max-height: 50vh; }
  #sketch { height: min(60vh, 420px); }
  .actions { position: static; margin-top: .8rem; justify-content: flex-start; }
  .brush-ctrl input[type=range] { width: 120px; }

  .tiles { grid-template-columns: repeat(3, 1fr); }
  .gallery { padding: 1.25rem; }

  .diary { padding: 1.25rem 1rem 1.25rem 2.25rem; }
  .diary::before { left: 24px; }
  .diary-stamp { width: 96px; }
  .diary-content { font-size: 1.08rem; line-height: 1.8; }
}

@media (max-width: 480px) {
  .hero { padding: 3rem 1rem 3.5rem; }
  .hero h1 { font-size: 2rem; }
  .scribble { height: 60px; }
  .scribble svg { width: 280px; }
  .floating-svgs { display: none; }

  #sketch { height: min(55vh, 360px); }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .palette .row { grid-template-columns: repeat(4, 1fr); }

  .footer { padding: 1.75rem 1rem; }
}