/* Butterfly Wishes / Schmetterlingswünsche — "fairytale sky", taken from the cover:
   lilac-to-pink sky with twinkling stars, pink ribbon, candy lettering with a white outline,
   butterflies, a flower meadow. */

body[data-book="butterfly"] {
  --paper: #fff5fb; --paper-2: #ffffff; --ink: #3a1f5d; --ink-soft: #6a4d86; --line: #3a1f5d1c;
  --c1: #ff4fa3; --c2: #8b5cf6; --c3: #6fd8b0; --c4: #ffcd4a; --c5: #7cc4ff;
  --btn: #ff4fa3; --btn-ink: #fff; --spine: #c39bff;
  --pink-soft: #ffd3ea; --lilac: #e7dbff;
  --display: "Lora", Georgia, serif;
}
body[data-book="butterfly"] h2 { font-family: var(--display); font-style: italic; font-weight: 700; letter-spacing: -.01em; color: #5b2d8f; }

/* ---------- logo: turns from studio blue into butterfly pink, little sparkles pop ---------- */
.brand .logo { position: relative; display: inline-grid; }
.brand .logo img { transition: transform .5s cubic-bezier(.2, 1.6, .4, 1), filter .5s ease; }
.spark { position: absolute; width: 12px; height: 12px; pointer-events: none; opacity: 0; transform: scale(.2);
  background: var(--c4); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.spark.s1 { left: -6px; top: -4px; background: #ff7cc0; }
.spark.s2 { right: -8px; top: 4px; width: 9px; height: 9px; background: #ffcd4a; }
.spark.s3 { left: 20px; bottom: -6px; width: 8px; height: 8px; background: #a77bff; }
.brand:hover .logo img, .brand:focus-visible .logo img { transform: rotate(-12deg) scale(1.1); filter: hue-rotate(105deg) saturate(1.35) drop-shadow(0 0 8px rgba(255, 79, 163, .55)); }
.brand:hover .spark, .brand:focus-visible .spark { animation: spark .9s cubic-bezier(.2, 1.4, .4, 1) both; }
.brand:hover .spark.s2 { animation-delay: .08s; } .brand:hover .spark.s3 { animation-delay: .16s; }
@keyframes spark { 0% { opacity: 0; transform: scale(.2) rotate(0); } 40% { opacity: 1; transform: scale(1.3) rotate(45deg); } 100% { opacity: 0; transform: scale(.6) rotate(90deg); } }
.brand .word b { background: linear-gradient(90deg, #ff4fa3, #8b5cf6); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- header ---------- */
body[data-book="butterfly"] .top { background: rgba(255, 245, 251, .82); }
body[data-book="butterfly"] .top nav a:hover { background: var(--pink-soft); color: var(--ink); }

/* ---------- buttons: candy pills with a shine ---------- */
body[data-book="butterfly"] .btn-main { background: linear-gradient(180deg, #ff74b8 0%, #ff3f98 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 4px 0 #c41f72; position: relative; overflow: hidden; }
body[data-book="butterfly"] .btn-main:hover { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 6px 0 #c41f72; }
body[data-book="butterfly"] .btn-main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s ease; }
body[data-book="butterfly"] .btn-main:hover::after { transform: translateX(120%); }
body[data-book="butterfly"] .btn-line { border-color: #8b5cf6; color: #5b2d8f; }
body[data-book="butterfly"] .btn-line:hover { background: var(--lilac); }

/* ---------- hero: fairytale sky ---------- */
body[data-book="butterfly"] .hero {
  background:
    radial-gradient(40% 50% at 82% 30%, rgba(255, 255, 255, .75), transparent 70%),
    radial-gradient(50% 60% at 8% 90%, rgba(255, 183, 222, .8), transparent 70%),
    linear-gradient(180deg, #d4c2ff 0%, #ead6ff 40%, #ffdcef 85%, #fff5fb 100%);
  padding-bottom: clamp(110px, 12vw, 170px);
}
.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='180'%3E%3Cg fill='%23fff'%3E%3Cpath d='M30 20l3 9 9 3-9 3-3 9-3-9-9-3 9-3z'/%3E%3Cpath d='M160 60l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3Ccircle cx='110' cy='30' r='2'/%3E%3Ccircle cx='70' cy='120' r='1.6'/%3E%3Cpath d='M190 140l2.4 7 7 2.4-7 2.4-2.4 7-2.4-7-7-2.4 7-2.4z'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='240'%3E%3Cg fill='%23fff7c2'%3E%3Cpath d='M80 70l2.6 8 8 2.6-8 2.6-2.6 8-2.6-8-8-2.6 8-2.6z'/%3E%3Ccircle cx='230' cy='40' r='2.2'/%3E%3Cpath d='M250 190l2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/%3E%3C/g%3E%3C/svg%3E");
  animation: twinkle 4s ease-in-out infinite alternate; opacity: .9;
  -webkit-mask: linear-gradient(#000 0 55%, transparent 90%); mask: linear-gradient(#000 0 55%, transparent 90%);
}
@keyframes twinkle { from { opacity: .45; } to { opacity: 1; } }
body[data-book="butterfly"] .hero .wrap { position: relative; z-index: 2; }

/* ribbon like the one on the cover */
body[data-book="butterfly"] .hero .for { margin-bottom: 4px; }
body[data-book="butterfly"] .hero .for span {
  display: inline-block; padding: 8px 30px 9px; color: #fff; font-weight: 600; font-size: .95rem; letter-spacing: .01em;
  background: linear-gradient(180deg, #ff8fc8, #ff4fa3);
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  filter: drop-shadow(0 3px 0 #c41f72);
}

/* candy lettering: pink-to-purple, white outline, soft glow */
body[data-book="butterfly"] .hero h1 {
  font-family: var(--display); font-style: italic; font-weight: 700; letter-spacing: -.015em; line-height: .96;
  font-size: clamp(3rem, 7vw, 6rem); margin: 16px 0 22px; padding: 0 .08em .06em 0;
  background: linear-gradient(100deg, #ff2f93 0%, #ff63b1 38%, #b06cff 72%, #7b45ee 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 16px rgba(139, 92, 246, .35));
}
body[data-book="butterfly"] .hero h1 span { display: inline; }
/* the German title is one long word: a little smaller so "Schmetterlings-" always fits */
body[data-book="butterfly"] .pane[data-l="de"] .hero h1 { font-size: clamp(2.5rem, 5.1vw, 4.6rem); }
body[data-book="butterfly"] .hero .lead { color: #4b2d6c; }
body[data-book="butterfly"] .facts li { background: rgba(255, 255, 255, .85); border: 2px solid #ffc4e2; display: inline-flex; align-items: center; gap: 8px; }
body[data-book="butterfly"] .facts li::before { content: ""; width: 12px; height: 11px; background: #ff4fa3;
  clip-path: path("M6 11C2 8 0 6 0 3.4 0 1.5 1.4 0 3.2 0 4.4 0 5.4.7 6 1.7 6.6.7 7.6 0 8.8 0 10.6 0 12 1.5 12 3.4 12 6 10 8 6 11z"); }
body[data-book="butterfly"] .hero .note { color: #6a4d86; }
body[data-book="butterfly"] .book3d::after { background: radial-gradient(closest-side, rgba(91, 45, 143, .35), transparent); }
body[data-book="butterfly"] .book3d .sticker { background: #ffcd4a; }

/* meadow at the bottom of the sky */
.meadow { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(70px, 9vw, 120px); z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, #ff7cc0 0 5px, #fff 5px 7px, transparent 8px) 0 18px / 90px 50px repeat-x,
    radial-gradient(circle at 50% 50%, #ffcd4a 0 4px, #fff 4px 6px, transparent 7px) 45px 38px / 120px 50px repeat-x,
    radial-gradient(circle at 50% 50%, #a77bff 0 4px, #fff 4px 6px, transparent 7px) 20px 52px / 140px 50px repeat-x,
    radial-gradient(60px 40px at 50% 100%, #8fdc8a 98%, transparent 100%) 0 100% / 110px 64px repeat-x,
    linear-gradient(transparent 60%, #fff5fb 60%);
}

/* butterflies drifting through the sky — tap one and it flies off */
.bfly { position: absolute; z-index: 3; width: 54px; height: 44px; cursor: pointer; --w1: #ff7cc0; --w2: #ffb3dc;
  animation: drift 14s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(91, 45, 143, .2)); }
.bfly .wl, .bfly .wr { transform-box: fill-box; animation: flap .32s ease-in-out infinite alternate; }
.bfly .wl { transform-origin: right center; } .bfly .wr { transform-origin: left center; }
@keyframes flap { to { transform: scaleX(.35); } }
.bf1 { left: 6%; top: 16%; }
.bf2 { left: 44%; top: 8%; width: 38px; height: 31px; --w1: #a77bff; --w2: #d4bdff; animation-duration: 17s; animation-delay: -4s; }
.bf3 { right: 5%; bottom: 26%; width: 44px; height: 36px; --w1: #7cc4ff; --w2: #c4e6ff; animation-duration: 12s; animation-delay: -7s; }
.bf4 { left: 30%; bottom: 18%; width: 32px; height: 26px; --w1: #ffcd4a; --w2: #ffe69a; animation-duration: 19s; animation-delay: -2s; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0) rotate(-8deg); }
  25% { transform: translate(40px, -24px) rotate(6deg); }
  50% { transform: translate(80px, 8px) rotate(-4deg); }
  75% { transform: translate(30px, 26px) rotate(10deg); }
}
.bfly.away { animation: away 2.6s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes away { 0% { transform: translate(0, 0) rotate(0); } 45% { transform: translate(160px, -260px) rotate(25deg) scale(.6); opacity: 0; } 55% { transform: translate(-160px, 120px) scale(.6); opacity: 0; } 100% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } }

/* ---------- video: a storybook window with an arch crest ---------- */
.video-sec { padding-top: clamp(40px, 6vw, 80px); }
body[data-book="butterfly"] .video-frame {
  position: relative; max-width: 940px; margin: 30px auto 0; padding: 14px; border-radius: 34px;
  background: linear-gradient(135deg, #ff9ccd, #b98cff 55%, #8fd0ff);
  box-shadow: 0 0 0 6px #fff, 0 34px 70px -28px rgba(91, 45, 143, .55);
}
.video-label { position: absolute; left: 50%; top: -22px; transform: translateX(-50%); z-index: 2; white-space: nowrap; padding: 8px 34px 9px; color: #fff; font-weight: 700; font-size: .95rem;
  background: linear-gradient(180deg, #ff8fc8, #ff4fa3); clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); filter: drop-shadow(0 3px 0 #c41f72); }
.video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #2a1640; border-radius: 22px; }
.video-play { all: unset; cursor: pointer; position: absolute; left: 50%; top: 50%; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--c1); box-shadow: 0 0 0 8px rgba(255, 255, 255, .45), 0 16px 30px rgba(0, 0, 0, .25); transition: transform .3s cubic-bezier(.2, 1.6, .4, 1); }
.video-play svg { width: 40px; height: 40px; margin-left: 6px; }
.video-play:hover { transform: scale(1.1); }
.video-play:focus-visible { outline: 3px solid var(--c2); outline-offset: 4px; }
.is-playing .video-play { display: none; }

/* ---------- sections ---------- */
body[data-book="butterfly"] .inside { position: relative; background: #fff; border: 0;
  background-image: radial-gradient(circle at 12px 12px, #ffe0f0 2.5px, transparent 3px); background-size: 34px 34px; }
body[data-book="butterfly"] .inside::before, body[data-book="butterfly"] .author::before {
  content: ""; position: absolute; left: 0; right: 0; top: -17px; height: 18px;
  background: radial-gradient(circle at 18px 18px, #fff 17px, transparent 18px) 0 0 / 36px 18px repeat-x; }
body[data-book="butterfly"] .strip figcaption { font-family: var(--display); font-style: italic; font-size: 1.02rem; color: #8b5cf6; }
body[data-book="butterfly"] .sheet { border-radius: 16px; border: 3px solid #ffc4e2; box-shadow: 0 18px 30px -14px rgba(91, 45, 143, .35); }
body[data-book="butterfly"] .free-art .sheet { border: 0; border-radius: 18px; box-shadow: 0 0 0 10px #fff, 0 0 0 13px #ffc4e2, 0 30px 60px -24px rgba(91, 45, 143, .4); overflow: visible; }
body[data-book="butterfly"] .free-art .sheet img { border-radius: 18px; }

/* free page: butterflies burst out from behind the page and flutter around it */
.ff { position: absolute; left: 46%; top: 42%; width: 74px; height: 60px; opacity: 0; transform: scale(.2) rotate(0);
  --w1: #ff7cc0; --w2: #ffb3dc; transition: left .9s cubic-bezier(.2, 1.2, .3, 1), top .9s cubic-bezier(.2, 1.2, .3, 1), opacity .25s, transform .9s cubic-bezier(.2, 1.4, .3, 1); }
.ff .wl, .ff .wr { transform-box: fill-box; animation: flap .28s ease-in-out infinite alternate; }
.ff .wl { transform-origin: right center; } .ff .wr { transform-origin: left center; }
.ff.f2 { --w1: #a77bff; --w2: #d4bdff; width: 56px; height: 45px; }
.ff.f3 { --w1: #7cc4ff; --w2: #c4e6ff; }
.ff.f4 { --w1: #ffcd4a; --w2: #ffe69a; width: 52px; height: 42px; }
.ff.f5 { --w1: #6fd8b0; --w2: #bff0dc; width: 62px; height: 50px; }
.free-art:hover .ff, .free-art.play .ff { opacity: 1; animation: ff-bob 1.6s ease-in-out .9s infinite alternate; }
.free-art:hover .f1, .free-art.play .f1 { left: -5%; top: -12%; transform: scale(1) rotate(-18deg); }
.free-art:hover .f2, .free-art.play .f2 { left: 30%; top: -16%; transform: scale(1) rotate(8deg); transition-delay: .06s; }
.free-art:hover .f3, .free-art.play .f3 { left: 88%; top: -8%; transform: scale(1) rotate(22deg); transition-delay: .12s; }
.free-art:hover .f4, .free-art.play .f4 { left: 93%; top: 62%; transform: scale(1) rotate(-12deg); transition-delay: .18s; }
.free-art:hover .f5, .free-art.play .f5 { left: -6%; top: 70%; transform: scale(1) rotate(14deg); transition-delay: .1s; }
@keyframes ff-bob { to { translate: 0 -10px; } }
.tw { position: absolute; width: 22px; height: 22px; opacity: 0; transform: scale(0); background: #ffcd4a;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transition: transform .5s cubic-bezier(.2, 1.8, .4, 1), opacity .2s; }
.tw.t1 { left: 14%; top: -6%; background: #ff7cc0; } .tw.t2 { left: 70%; top: -9%; } .tw.t3 { left: 101%; top: 30%; background: #a77bff; width: 16px; height: 16px; } .tw.t4 { left: 20%; top: 100%; width: 16px; height: 16px; }
.free-art:hover .tw, .free-art.play .tw { opacity: 1; transform: scale(1) rotate(45deg); transition-delay: .35s; animation: twk 1.1s ease-in-out 1s infinite alternate; }
@keyframes twk { to { opacity: .35; } }
body[data-book="butterfly"] .free { background: linear-gradient(180deg, #fff5fb, #f4ecff); }
body[data-book="butterfly"] .formats li { border-bottom: 2px dotted #ffc4e2; }
body[data-book="butterfly"] .what { background: #f4ecff; padding-top: 0; }
body[data-book="butterfly"] .what-list { border: 3px solid #b98cff; border-radius: 26px; }
body[data-book="butterfly"] .what-list li { border-color: #e7dbff; }
body[data-book="butterfly"] .what-list b { color: #d6338a; }
body[data-book="butterfly"] .faq { background: #f4ecff; padding-top: 0; }
body[data-book="butterfly"] .faq details { border-bottom: 2px dotted #c9b2ff; }
body[data-book="butterfly"] .faq summary::after { color: #ff4fa3; }

/* author: portrait in a candy ring */
.author { position: relative; }
body[data-book="butterfly"] .author { background: #fff; border: 0; }
.author .wrap { grid-template-columns: 190px minmax(0, 1fr); }
.portrait { display: block; width: 180px; height: 180px; border-radius: 50%; padding: 7px; position: relative; }
body[data-book="butterfly"] .portrait { background: conic-gradient(#ff4fa3, #ffcd4a, #6fd8b0, #7cc4ff, #a77bff, #ff4fa3); }
.portrait img { width: 100% !important; height: 100% !important; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: none !important; }

/* closing band */
.more { padding: clamp(46px, 6vw, 70px) 0; }
body[data-book="butterfly"] .more { background: linear-gradient(100deg, #ffd3ea, #e7dbff); }
.more .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }
.more h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 6px; }
.more p { color: var(--ink-soft); }
body[data-book="butterfly"] .foot { background: #3a1f5d; color: #e7dbff; border: 0; }
body[data-book="butterfly"] .foot a:hover { color: #fff; }

/* 404 */
.lost .wrap { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.lost-cover { width: min(100%, 360px); justify-self: center; border-radius: 6px; transform: rotate(4deg); box-shadow: 0 0 0 6px #fff, 0 30px 50px -20px rgba(58, 31, 93, .45); animation: lost-bob 6s ease-in-out infinite; }
@keyframes lost-bob { 50% { transform: rotate(1deg) translateY(-10px); } }

@media (max-width: 920px) {
  .bf2, .bf4 { display: none; }
  .bf1 { top: 4%; } .bf3 { bottom: 40%; }
  .author .wrap { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .lost-cover { order: -1; width: min(60%, 260px); }
}
@media (max-width: 560px) {
  body[data-book="butterfly"] .hero h1 { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  body[data-book="butterfly"] .pane[data-l="de"] .hero h1 { font-size: clamp(2.1rem, 10.4vw, 3rem); }
  body[data-book="butterfly"] .hero .for span { font-size: .86rem; padding: 7px 24px 8px; }
  .video-play { width: 66px; height: 66px; margin: -33px 0 0 -33px; }
  .video-play svg { width: 30px; height: 30px; }
  body[data-book="butterfly"] .video-frame { padding: 8px; border-radius: 24px; }
  body[data-book="butterfly"] .video-frame video { border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .bfly, .bfly .wl, .bfly .wr, .sparkles { animation: none !important; }
}