/* The home page: a dark page over a moving colour field, a big squishy wordmark and the shelf of apps. Loaded after style.css and only on the home page. */

/* Registered so they can be animated: moving the pointer over an app card fades the whole background to that
   app's colours. home.js reads the same values for the WebGPU shader, so both layers always agree. */
@property --pa { syntax: "<color>"; inherits: true; initial-value: #151a3d; }
@property --pb { syntax: "<color>"; inherits: true; initial-value: #5a4fcf; }
@property --pc { syntax: "<color>"; inherits: true; initial-value: #ff7a59; }

body.home {
  --pa: #151a3d; --pb: #5a4fcf; --pc: #ff7a59;
  --glass: rgba(255, 255, 255, 0.07);
  --glass-line: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--paper); background: var(--pa);
  transition: --pa 1.2s ease, --pb 1.2s ease, --pc 1.2s ease;
}
/* each app's colours (deep, middle, highlight) */
body.home[data-mood="crackd"] { --pa: #141b40; --pb: #6e7dd8; --pc: #f3c24f; }
body.home[data-mood="next"] { --pa: #0f1222; --pb: #34406a; --pc: #9a8bd8; }

/* ---------- background ---------- */
.bg-fallback { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--pa); }
.bg-fallback i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(40px); opacity: 0.75; }
.bg-fallback i:nth-child(1) { background: radial-gradient(closest-side, var(--pb), transparent); left: -20vmax; top: -25vmax; animation: drift1 26s ease-in-out infinite alternate; }
.bg-fallback i:nth-child(2) { background: radial-gradient(closest-side, var(--pc), transparent); right: -25vmax; bottom: -30vmax; opacity: 0.45; animation: drift2 32s ease-in-out infinite alternate; }
.bg-fallback i:nth-child(3) { background: radial-gradient(closest-side, var(--pb), transparent); left: 30vw; top: 40vh; width: 45vmax; height: 45vmax; opacity: 0.4; animation: drift1 38s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(18vw, 14vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-16vw, -12vh) scale(0.9); } }

/* !important: the shaders library writes a fixed pixel size onto the canvas when it starts, which would keep it
   at its first size after the window grows */
#paint { position: fixed; inset: 0; width: 100% !important; height: 100% !important; display: block; z-index: 0; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; }
#paint.ready { opacity: 1; }

.home .site-header, .home main, .home .site-footer { position: relative; z-index: 1; }
.home .site-header { position: absolute; }

/* ---------- glass chip ---------- */
.chip {
  display: inline-block; margin: 0 0 18px; padding: 8px 16px; border-radius: 999px;
  font-family: var(--caps); letter-spacing: 1.5px; text-transform: uppercase; font-size: 14px; color: var(--paper);
  background: var(--glass); border: var(--glass-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}

/* ---------- hero ---------- */
.hero { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 110px 0 90px; position: relative; }
.hero h1 { margin: 0; color: var(--paper); }
.mega {
  display: block; white-space: nowrap; font-family: var(--display); font-size: clamp(56px, 17vw, 230px); line-height: 0.9; letter-spacing: -0.02em;
  user-select: none; filter: drop-shadow(0 10px 40px rgba(5, 6, 15, 0.35));
}
/* Each letter is painted by two layers clipped to its shape: its resting colour on top, and under it a slice of the
   logo's gradient (--x is how far along the word the letter starts, in em, so the slices line up). The top layer has
   a soft round hole that grows out of the letter's bottom left corner: growing --flood floods the gradient in, and
   shrinking it drains it back. The padding keeps the tops of the letters inside the painted area. */
@property --flood { syntax: "<length>"; inherits: false; initial-value: 0px; }
.mega .ch {
  --x: 0; --rest: var(--paper); --flood: 0px; display: inline-block; transform-origin: 50% 100%; cursor: default; animation: drop 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  padding: 0.16em 0.04em; margin: -0.16em -0.04em;
  background-image:
    radial-gradient(circle at 12% 112%, transparent calc(var(--flood) - 0.7em), var(--rest) var(--flood)),
    radial-gradient(26% 62% at 4% 12%, #ffdc6e, #ffb45f 50%, rgba(255, 150, 120, 0) 100%),
    radial-gradient(22% 58% at 88% 12%, #ffd05c, #fc8448 55%, rgba(255, 110, 140, 0) 100%),
    radial-gradient(20% 58% at 50% 12%, #7fe3ff, #3f93ff 55%, rgba(80, 110, 255, 0) 100%),
    radial-gradient(24% 52% at 25% 92%, #39a4ff, #5c5cff 60%, rgba(120, 80, 255, 0) 100%),
    radial-gradient(14% 44% at 94% 92%, #3fb0ff, rgba(120, 130, 255, 0) 100%),
    radial-gradient(18% 44% at 63% 92%, #f65cff, rgba(246, 92, 255, 0) 100%),
    linear-gradient(90deg, #ff5fe8, #a860ff 34%, #9a5cff 52%, #ff4fd2 72%, #ff55c0);
  background-size: 100% 100%, 4.56em 1.22em, 4.56em 1.22em, 4.56em 1.22em, 4.56em 1.22em, 4.56em 1.22em, 4.56em 1.22em, 4.56em 1.22em;
  background-position: 0 0, calc(var(--x) * -1em) 0, calc(var(--x) * -1em) 0, calc(var(--x) * -1em) 0, calc(var(--x) * -1em) 0, calc(var(--x) * -1em) 0, calc(var(--x) * -1em) 0, calc(var(--x) * -1em) 0;
  background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transition: --flood 1s cubic-bezier(0.35, 0, 0.25, 1);
}
/* a tap has no hover to hold it, so it floods for as long as the squish runs (home.js adds .boing) */
.mega .ch.boing { --flood: 2.4em; transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1); }
@media (hover: hover) {
  .mega .ch:hover { --flood: 2.4em; transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1); }
}
.mega .ch:nth-child(1) { animation-delay: 0.05s; }
.mega .ch:nth-child(2) { animation-delay: 0.12s; --x: 0.8565; }
.mega .ch:nth-child(3) { animation-delay: 0.19s; --x: 1.5652; }
.mega .ch:nth-child(4) { animation-delay: 0.26s; --x: 2.2; }
.mega .ch:nth-child(5) { animation-delay: 0.33s; --x: 2.9043; }
.mega .ch:nth-child(6) { animation-delay: 0.4s; --x: 3.4957; }
.mega .ch:nth-child(7) { animation-delay: 0.55s; --x: 4.2087; }
.mega .dot { --rest: var(--butter); }
/* squash and stretch when a pointer reaches a letter or a finger taps it (home.js adds .boing). The finished drop
   stays in the list so it doesn't replay. */
.mega .ch.boing { animation: drop 0.9s cubic-bezier(0.2, 1.4, 0.4, 1) both, squish 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); animation-delay: 0s, 0s; }
@keyframes drop { from { transform: translateY(-60%) scaleY(1.2); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }
@keyframes squish {
  0% { transform: none; }
  25% { transform: scale(1.25, 0.7); }
  50% { transform: scale(0.85, 1.18) translateY(-12%); }
  75% { transform: scale(1.06, 0.95); }
  100% { transform: none; }
}
.tagline { display: block; font-family: var(--display); font-size: clamp(26px, 4.4vw, 52px); line-height: 1.1; margin-top: 10px; color: var(--paper); }
.hero .sub { font-size: clamp(17px, 2vw, 20px); color: rgba(251, 245, 234, 0.82); max-width: 520px; margin: 16px auto 28px; }

.home .scroll-cue { position: absolute; bottom: 26px; left: 50%; margin-left: -15px; width: 30px; height: 46px; border: 2px solid rgba(251, 245, 234, 0.6); border-radius: 16px; }
.home .scroll-cue span { position: absolute; left: 50%; top: 9px; width: 4px; height: 9px; margin-left: -2px; border-radius: 2px; background: var(--paper); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- the shelf ---------- */
.apps { padding: 110px 0 60px; }
.apps h2, .hello h2 { color: var(--paper); font-size: clamp(40px, 7vw, 80px); margin: 0 0 32px; }
.app-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }

.app-card {
  display: grid; grid-template-columns: 1fr; border-radius: 30px; overflow: hidden;
  background: var(--glass); border: var(--glass-line); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 30px 60px rgba(5, 6, 15, 0.35);
  /* a gentle tilt toward the pointer (home.js sets --rx and --ry) */
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.25s ease, border-color 0.3s ease;
}
.app-card:hover { border-color: rgba(255, 255, 255, 0.32); }
@media (min-width: 860px) { .app-card { grid-template-columns: 1.1fr 1fr; } }

.card-cover { display: grid; place-items: center; min-height: 260px; padding: 8%; background-color: var(--deep); background-size: cover; background-position: center 40%; overflow: hidden; }
.card-cover img { width: 100%; max-width: 480px; transition: transform 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
a.card-cover:hover img { transform: scale(1.06) rotate(-2deg); }
.cover-crackd { background-image: url("/assets/crackd/scenes/home_lit.jpg"); }

.card-body { padding: 30px; display: flex; flex-direction: column; justify-content: center; }
.card-body > p { margin: 0 0 16px; color: rgba(251, 245, 234, 0.86); }
.card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.card-icon { width: 72px; height: 72px; border-radius: 22%; box-shadow: 0 10px 24px rgba(5, 6, 15, 0.4); flex: 0 0 auto; }
.app-card h3 { margin: 0; font-size: clamp(28px, 3.4vw, 38px); color: var(--paper); }
.app-card h3 a { color: inherit; text-decoration: none; }
.app-card h3 a:hover { color: var(--butter); }
.genre { font-family: var(--caps); text-transform: uppercase; letter-spacing: 1.5px; font-size: 14px; color: var(--butter); margin: 2px 0 0; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; }
.meta .pill { white-space: nowrap; }
.links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 6px !important; font-weight: 700; }
.links a:not(.btn) { color: var(--paper); min-height: 44px; display: inline-flex; align-items: center; }
.links a:not(.btn):hover { color: var(--butter); }

.app-card.next { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 2px dashed rgba(255, 255, 255, 0.25); box-shadow: none; }
@media (min-width: 860px) { .app-card.next { grid-template-columns: 1fr 2fr; } }
.app-card.next .card-cover { background: rgba(255, 255, 255, 0.04); min-height: 180px; }
.app-card.next .card-cover span { font-family: var(--display); font-size: 96px; line-height: 1; color: rgba(251, 245, 234, 0.3); animation: bob 3s ease-in-out infinite; }
.app-card.next h3 { margin-bottom: 6px; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(8deg); } }

/* ---------- contact ---------- */
.hello { padding: 60px 0 110px; text-align: center; }
.hello h2 { margin-bottom: 12px; }
.hello p { color: rgba(251, 245, 234, 0.82); margin: 0 0 26px; }
.hello .email {
  display: inline-block; font-family: var(--display); font-weight: 400; font-size: clamp(20px, 3.4vw, 34px); color: var(--paper); text-decoration: none;
  padding: 16px 30px; border-radius: 999px; background: var(--glass); border: var(--glass-line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform 0.2s ease, color 0.2s ease;
}
.hello .email:hover { color: var(--butter); transform: translateY(-3px) scale(1.02); }

.home .site-footer { background: rgba(5, 6, 15, 0.35); }

/* no motion: still colours, letters in place, no tilt */
@media (prefers-reduced-motion: reduce) {
  .bg-fallback i, .mega .ch, .home .scroll-cue span, .app-card.next .card-cover span { animation: none !important; }
  .mega .ch { transition: none; }
  .app-card { transform: none; }
  body.home { transition: none; }
}