/* MM Studio Ghibli V4 - tema 2D, compatible oscuro/claro */
:root {
  --ghibli-ink: #eaf8df;
  --ghibli-ink-soft: rgba(234,248,223,.74);
  --ghibli-leaf: #86ef9f;
  --ghibli-grass: #5fd188;
  --ghibli-sky: #8ee6ff;
  --ghibli-sun: #ffe28a;
  --ghibli-earth: #b88755;
  --ghibli-border: rgba(142,230,255,.34);
  --ghibli-card: rgba(13,33,30,.72);
}

html[data-theme="light"] {
  --ghibli-ink: #1a352c;
  --ghibli-ink-soft: rgba(26,53,44,.74);
  --ghibli-leaf: #2f9b63;
  --ghibli-grass: #4fb678;
  --ghibli-sky: #4cb8e6;
  --ghibli-sun: #c88c2a;
  --ghibli-earth: #916035;
  --ghibli-border: rgba(47,155,99,.28);
  --ghibli-card: rgba(255,252,238,.82);
}

.mm-section[data-kind="ghibli"] {
  --accent: var(--ghibli-leaf);
  --accent2: var(--ghibli-sun);
  color: var(--ghibli-ink);
  border: 2px solid transparent !important;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg, var(--ghibli-sky), var(--ghibli-leaf), var(--ghibli-sun), var(--ghibli-earth)) border-box !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 38px color-mix(in srgb, var(--ghibli-leaf) 18%, transparent);
  position: relative;
  overflow: hidden;
}

html[data-theme="light"] .mm-section[data-kind="ghibli"] {
  background:
    linear-gradient(rgba(255,252,238,.88), rgba(245,239,214,.84)) padding-box,
    linear-gradient(135deg, var(--ghibli-sky), var(--ghibli-leaf), var(--ghibli-sun), var(--ghibli-earth)) border-box !important;
  box-shadow:
    0 24px 62px rgba(75,95,74,.18),
    0 0 0 1px rgba(255,255,255,.72) inset;
}

.mm-section[data-kind="ghibli"]::before {
  opacity: .22 !important;
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--ghibli-sky) 54%, transparent), transparent 22%),
    radial-gradient(circle at 80% 14%, color-mix(in srgb, var(--ghibli-sun) 42%, transparent), transparent 20%),
    radial-gradient(circle at 22% 94%, color-mix(in srgb, var(--ghibli-leaf) 42%, transparent), transparent 22%) !important;
}

.mm-section[data-kind="ghibli"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .20 !important;
  z-index: -1;
  background-image:
    radial-gradient(ellipse at center, var(--ghibli-leaf) 0 2px, transparent 3px),
    radial-gradient(ellipse at center, var(--ghibli-sun) 0 1.6px, transparent 2.8px),
    linear-gradient(135deg, transparent 0 46%, color-mix(in srgb, var(--ghibli-sky) 18%, transparent) 48% 52%, transparent 54%);
  background-size: 120px 70px, 170px 110px, 34px 34px;
  background-position: 0 0, 40px 20px, 0 0;
}

.mm-effects-ready .mm-section[data-kind="ghibli"].is-visible::after {
  animation: mmGhibliLeavesV4 18s linear infinite;
}

@keyframes mmGhibliLeavesV4 {
  to { background-position: 260px 150px, -230px 190px, 34px 34px; }
}

.mm-section[data-kind="ghibli"] .mm-section-head {
  align-items: center;
  border-bottom: 1px dashed color-mix(in srgb, var(--ghibli-leaf) 34%, transparent);
  padding-bottom: 1rem;
}

.mm-section[data-kind="ghibli"] .mm-kicker {
  color: var(--ghibli-sun) !important;
  text-shadow: 0 0 18px color-mix(in srgb, var(--ghibli-sun) 20%, transparent);
}

.mm-section[data-kind="ghibli"] h2 {
  color: var(--ghibli-ink);
  letter-spacing: -.035em;
  text-shadow: 0 2px 0 rgba(0,0,0,.12);
}

.mm-section[data-kind="ghibli"] p {
  color: var(--ghibli-ink-soft) !important;
}

.mm-section[data-kind="ghibli"] .mm-link {
  border: 1px solid color-mix(in srgb, var(--ghibli-leaf) 42%, var(--line));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--ghibli-sky) 16%, transparent),
      color-mix(in srgb, var(--ghibli-leaf) 14%, transparent));
  color: var(--ghibli-ink);
}

.mm-section[data-kind="ghibli"] .mm-rail {
  gap: 1rem;
  padding: .45rem .15rem 1.05rem;
  scrollbar-width: thin;
  scrollbar-color: var(--ghibli-leaf) color-mix(in srgb, var(--ghibli-earth) 22%, transparent);
}

.mm-section[data-kind="ghibli"] .mm-rail::-webkit-scrollbar { height: 12px; }

.mm-section[data-kind="ghibli"] .mm-rail::-webkit-scrollbar-track {
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--ghibli-earth) 18%, transparent),
      color-mix(in srgb, var(--ghibli-sky) 16%, transparent));
  border: 1px solid color-mix(in srgb, var(--ghibli-leaf) 22%, transparent);
}

.mm-section[data-kind="ghibli"] .mm-rail::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--bg) 72%, transparent);
  background:
    linear-gradient(90deg, var(--ghibli-leaf), var(--ghibli-sky), var(--ghibli-sun));
}

.mm-section[data-kind="ghibli"] .mm-media {
  flex-basis: 178px;
  width: 178px;
  min-width: 178px;
  border-radius: 24px 18px 26px 18px;
  border: 2px solid color-mix(in srgb, var(--ghibli-leaf) 28%, var(--line));
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ghibli-card) 92%, transparent),
      color-mix(in srgb, var(--ghibli-card) 72%, transparent));
  box-shadow:
    0 16px 30px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.06) inset;
  transform-origin: center bottom;
}

.mm-section[data-kind="ghibli"] .mm-media:nth-child(odd) { transform: rotate(-.45deg); }
.mm-section[data-kind="ghibli"] .mm-media:nth-child(even) { transform: rotate(.45deg); }

.mm-section[data-kind="ghibli"] .mm-media:hover {
  transform: translateY(-7px) rotate(0deg) scale(1.015);
  border-color: color-mix(in srgb, var(--ghibli-sun) 62%, var(--ghibli-leaf));
  box-shadow:
    0 24px 52px rgba(0,0,0,.30),
    0 0 28px color-mix(in srgb, var(--ghibli-leaf) 20%, transparent);
}

.mm-section[data-kind="ghibli"] .mm-cover {
  border-radius: 18px 14px 18px 14px;
  margin: 10px 10px 0;
  width: calc(100% - 20px);
  aspect-ratio: 2 / 3;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ghibli-sky) 18%, transparent),
    0 10px 26px rgba(0,0,0,.22);
  background-color: color-mix(in srgb, var(--ghibli-leaf) 10%, var(--bg2));
}

.mm-section[data-kind="ghibli"] .mm-body { padding: .72rem .82rem .95rem; }
.mm-section[data-kind="ghibli"] .mm-title {
  color: var(--ghibli-ink);
  font-weight: 1000;
  letter-spacing: -.015em;
}
.mm-section[data-kind="ghibli"] .mm-sub {
  color: color-mix(in srgb, var(--ghibli-sun) 78%, var(--ghibli-ink));
  font-weight: 800;
}
.mm-section[data-kind="ghibli"] .mm-desc {
  color: var(--ghibli-ink-soft);
  -webkit-line-clamp: 3;
}

.mm-effects-ready .mm-section[data-kind="ghibli"].is-visible .mm-media:nth-child(4n+1) {
  animation: mmGhibliCardBobA 7s ease-in-out infinite alternate;
}
.mm-effects-ready .mm-section[data-kind="ghibli"].is-visible .mm-media:nth-child(4n+3) {
  animation: mmGhibliCardBobB 8s ease-in-out infinite alternate;
}

@keyframes mmGhibliCardBobA { from { translate: 0 0; } to { translate: 0 -5px; } }
@keyframes mmGhibliCardBobB { from { translate: 0 0; } to { translate: 0 -3px; } }

@media (max-width: 700px) {
  .mm-section[data-kind="ghibli"] .mm-section-head { display: block; }
  .mm-section[data-kind="ghibli"] .mm-media {
    flex-basis: 142px;
    width: 142px;
    min-width: 142px;
    border-radius: 20px 16px 22px 16px;
  }
  .mm-section[data-kind="ghibli"] .mm-cover {
    margin: 8px 8px 0;
    width: calc(100% - 16px);
  }
  .mm-section[data-kind="ghibli"] .mm-desc { display: none; }
}

@media (max-width: 420px) {
  .mm-section[data-kind="ghibli"] { border-radius: 20px; }
  .mm-section[data-kind="ghibli"] .mm-media {
    flex-basis: 128px;
    width: 128px;
    min-width: 128px;
  }
}