/* Home: flame hero, three app worlds, studio, tools. */

.hero-flame {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 940px); display: grid; align-items: center;
  padding: calc(var(--header-h) + 40px) 0 clamp(90px, 12vw, 140px);
  background: radial-gradient(90% 70% at 20% 10%, rgba(59, 31, 122, 0.8), transparent 70%), var(--ink);
  color: var(--on-dark);
}
/* the glow shown until (or instead of) the WebGL flame: devices without a GPU keep this */
.hero-flame::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; transform-origin: 62% 100%;
  background: radial-gradient(60% 55% at 62% 100%, rgba(255, 91, 31, 0.75), transparent 70%), radial-gradient(40% 35% at 62% 100%, rgba(255, 194, 92, 0.8), transparent 70%);
  animation: embers 7s ease-in-out infinite alternate; }
@keyframes embers { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.1); opacity: 1; } }
#flame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 1.6s ease; }
#flame.on { opacity: 1; }
.hero-flame .wrap { position: relative; }
.hero-flame .eyebrow { color: var(--glow); }
.hero-flame h1 { font-size: clamp(2.35rem, 1.3rem + 4.4vw, 4.6rem); line-height: 1.02; margin-top: 22px; max-width: 13ch; font-weight: 400; letter-spacing: -0.03em; }
.hero-flame h1 .ln { display: block; }
.hero-flame h1 em { font-style: italic; background: linear-gradient(90deg, var(--a), var(--b)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.08em; }
.hero-flame h1 .m { --a: #9BF5DF; --b: #A9C1FF; }
.hero-flame h1 .r { --a: #5BE7FF; --b: #E08BFF; }
.hero-flame h1 .d { --a: #FF8A80; --b: #FFC25C; }
.hero-flame .lede { margin-top: 22px; color: #D8CFEA; max-width: 34rem; }
.hero-flame .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-flame .btn.ghost { color: var(--on-dark); }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35); }
.scroll-cue::after { content: ""; position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--glow); animation: cue 2.2s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* word-by-word entrance */
.js .rise > * { display: inline-block; opacity: 0; transform: translateY(0.45em); filter: blur(6px); animation: rise 1s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
.js .fade-up { opacity: 0; transform: translateY(16px); animation: rise 1s var(--ease) forwards; animation-delay: var(--dl, 0.9s); }

/* ------------------------------------------------------------ proof strip */
.proof { background: var(--ink); color: var(--on-dark-muted); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.proof .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-block: 34px; }
.proof div { display: grid; gap: 2px; }
.proof b { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); color: var(--on-dark); line-height: 1.1; }
.proof span { font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.02em; }
@media (max-width: 640px) { .proof .wrap { grid-template-columns: 1fr; gap: 16px; } .proof div { grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; } }

/* ------------------------------------------------------------ worlds */
.worlds { background: var(--ink); color: var(--on-dark); padding-top: clamp(56px, 8vw, 110px); }
.worlds .section-head h2 em { color: var(--ember); }
.world-grid { display: flex; gap: 16px; height: clamp(520px, 62vh, 640px); }
.world {
  --grow: 1; flex: var(--grow) 1 0; min-width: 0; position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px; text-decoration: none; color: #fff; display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(22px, 2.4vw, 32px); transition: flex-grow 0.8s var(--ease), transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
@media (hover: hover) and (min-width: 900px) {
  .world-grid:hover .world { --grow: 0.8; }
  .world-grid .world:hover, .world-grid .world:focus-visible { --grow: 1.55; }
}
.world .scene { position: absolute; inset: 0; z-index: -1; }
.world::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; z-index: -1; pointer-events: none; background: linear-gradient(transparent, rgba(10, 6, 30, 0.28)); }
.world .copy { position: relative; max-width: 30rem; }
.world .app-icon { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 16px; }
.world h3 { font-family: var(--serif); font-weight: 450; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.02em; line-height: 1.1; }
.world p { margin-top: 8px; font-size: var(--fs-sm); opacity: 0.9; max-width: 26rem; }
.world .more { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; font-weight: 750; font-size: var(--fs-sm); padding: 10px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.world .more::after { content: "\2192"; transition: transform 0.3s var(--ease); }
.world:hover .more::after { transform: translateX(4px); }
.world .tag { position: absolute; top: clamp(22px, 2.4vw, 32px); left: clamp(22px, 2.4vw, 32px); font-size: var(--fs-xs); font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
@media (max-width: 899px) {
  .world-grid { flex-direction: column; height: auto; gap: 14px; }
  .world { min-height: 520px; position: sticky; top: calc(var(--header-h) + 12px + var(--k, 0) * 14px); }
}

/* meditation world: dawn sky, breathing sun, drifting hills */
.w-med .scene { background: linear-gradient(180deg, #78EAD2 0%, #A3DDF0 42%, #B9C4FF 100%); }
/* The glow is a pre-drawn gradient; only transform and opacity animate (no per-frame shadow repaint). */
.w-med .sun { position: absolute; top: 18%; left: 58%; width: 26%; aspect-ratio: 1; min-width: 90px; animation: sun 8s ease-in-out infinite; will-change: transform; }
.w-med .sun::before { content: ""; position: absolute; inset: -60%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 238, 144, 0.7), rgba(255, 238, 144, 0.28) 55%, rgba(255, 238, 144, 0)); animation: glow 8s ease-in-out infinite; will-change: opacity; }
.w-med .sun::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #FFF8C8, #FFEE90 55%, #FFD96B); }
@keyframes sun { 0%, 100% { transform: scale(0.94); } 50% { transform: scale(1.06); } }
@keyframes glow { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.w-med .hills { position: absolute; left: -10%; right: -10%; bottom: 0; height: 62%; }
.w-med .hills svg { position: absolute; bottom: 0; width: 120%; height: 100%; }
.w-med .h1 { animation: drift 18s ease-in-out infinite alternate; }
.w-med .h2 { animation: drift 24s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translateX(-4%); } to { transform: translateX(3%); } }
.w-med .copy { text-shadow: 0 1px 18px rgba(40, 30, 120, 0.35); }

/* retexta world: speed lines that write */
.w-ret .scene { background: radial-gradient(120% 80% at 70% 20%, #2A1580 0%, #0C0747 45%, #06032E 100%); }
.w-ret .lines { position: absolute; inset: 33% 0 auto 0; height: 22%; display: grid; align-content: center; gap: 11px; }
.w-ret .lines i { display: block; height: 7px; border-radius: 7px; background: linear-gradient(90deg, #22D3F5, #8A5CFF 55%, #FF4FD8); width: var(--w); margin-left: var(--x); opacity: 0.9; animation: dash 3.4s var(--ease) infinite; animation-delay: var(--dl); transform-origin: left; box-shadow: 0 0 18px rgba(138, 92, 255, 0.55); }
@keyframes dash { 0% { transform: scaleX(0); opacity: 0; } 25% { opacity: 1; } 55%, 80% { transform: scaleX(1); opacity: 0.95; } 100% { transform: scaleX(1) translateX(30px); opacity: 0; } }
.w-ret .bubble { position: absolute; left: 9%; right: 9%; top: 13%; min-height: 86px; padding: 14px 16px; border-radius: 16px; font-size: 0.8rem; line-height: 1.45; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); }
.w-ret .bubble .raw { color: #BDB7E8; animation: rawcycle 7s infinite; }
.w-ret .bubble .clean { position: absolute; inset: 14px 16px; color: #fff; font-weight: 650; animation: cleancycle 7s infinite; }
.w-ret .bubble s { text-decoration-color: #FF4FD8; text-decoration-thickness: 2px; }
@keyframes rawcycle { 0%, 40% { opacity: 1; filter: none; } 50%, 92% { opacity: 0; filter: blur(4px); } 100% { opacity: 1; } }
@keyframes cleancycle { 0%, 42% { opacity: 0; transform: translateY(6px); } 52%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* darts world: a real board, three darts land in it (assets/js/home.js) */
.w-dar .scene { background: radial-gradient(90% 70% at 50% 30%, #F26B68 0%, #EF5350 45%, #C8352F 100%); }
.w-dar .board { position: absolute; width: min(62%, 290px); left: 50%; top: 12%; transform: translateX(-50%); filter: drop-shadow(0 26px 34px rgba(80, 10, 10, 0.5)); }
.w-dar .board svg { width: 100%; height: auto; overflow: visible; }

/* ------------------------------------------------------------ studio */
.studio { background: var(--paper); }
.studio blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2.1rem); line-height: 1.3; letter-spacing: -0.01em; font-weight: 350; }
.studio blockquote::before { content: "\201C"; display: block; font-size: 4rem; line-height: 0.6; color: var(--fire); font-style: italic; }
.studio figcaption { margin-top: 18px; font-size: var(--fs-sm); color: var(--muted); font-weight: 650; }
.studio .facts { display: grid; gap: 14px; }
.studio .fact { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.studio .fact b { display: block; }
.studio .fact p { color: var(--muted); font-size: var(--fs-sm); }
.studio .fact .ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 91, 31, 0.1); color: var(--fire); }
.studio .fact .ico svg { width: 20px; height: 20px; }

/* ------------------------------------------------------------ tools */
.tools { background: var(--paper-2); }
.tool { display: grid; grid-template-columns: 120px 1fr; gap: 22px; align-items: center; padding: 24px; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.tool:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--line), 0 28px 50px -30px rgba(40, 20, 80, 0.35); }
.tool h3 { margin-bottom: 6px; }
.tool p { color: var(--muted); font-size: var(--fs-sm); }
.tool .vis { width: 120px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 20px; }
.tool .orb { width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #B9C4FF 45%, #7B6CF0); box-shadow: 0 0 40px rgba(123, 108, 240, 0.5); animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(0.72); } 50% { transform: scale(1); } }
.tool .vis.b { background: linear-gradient(160deg, #E4F8F2, #E3E6FF); }
.tool .vis.c { background: #1C1A1F; }
.tool .vis.c svg { width: 88%; }
@media (max-width: 520px) { .tool { grid-template-columns: 84px 1fr; gap: 16px; padding: 18px; } .tool .vis { width: 84px; } }

/* ------------------------------------------------------------ pick */
.pick { background: var(--ink); color: var(--on-dark); }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.pick-card { padding: 26px; border-radius: var(--radius); background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); display: grid; gap: 14px; justify-items: start; }
.pick-card .top { display: flex; gap: 14px; align-items: center; }
.pick-card .app-icon { width: 56px; height: 56px; }
.pick-card b { font-size: 1.05rem; display: block; }
.pick-card small { color: var(--on-dark-muted); font-size: var(--fs-xs); }
.pick-card p { color: var(--on-dark-muted); font-size: var(--fs-sm); }
.pick-card .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pick-card .play-badge img { height: 60px; }
.pick-card a.link { font-weight: 750; font-size: var(--fs-sm); text-decoration: none; }
.pick-card a.link:hover { text-decoration: underline; }

@media (max-width: 899px) { .w-dar .board { width: min(56%, 240px); top: 11%; } }

/* phones: headline above the flame (after the base rules so it wins) */
@media (max-width: 700px) {
  .hero-flame { align-items: start; padding-top: calc(var(--header-h) + 44px); }
  .hero-flame h1 { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.35rem); max-width: none; }
  html[lang="de"] .hero-flame h1 { font-size: clamp(1.6rem, 1rem + 3.4vw, 2.1rem); }
  .hero-flame .wrap::before { content: ""; position: absolute; inset: -30px -10px; z-index: -1; background: radial-gradient(closest-side, rgba(14, 10, 28, 0.55), transparent); pointer-events: none; }
}