/* Features: the overview and every area page (scripts/build-features.mjs). */

/* ------------------------------------------------------------ hero */
.fx-hero { padding-bottom: clamp(2rem, 1.5rem + 3vw, 4rem); }
.fx-hero h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.6rem); max-width: 14ch; }
.fx-hero-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 980px) { .fx-hero-grid { grid-template-columns: 1.15fr .85fr; } }
.fx-hero-art { position: relative; display: grid; place-items: center; }
.fx-hero-art.shot-art img { width: min(100%, 330px); border-radius: 18px; border: 1px solid var(--line-2); transform: rotate(2deg);
  box-shadow: 0 60px 100px -40px rgba(0, 0, 0, .9), 0 0 100px -30px rgba(63, 184, 163, .45); }
@media (prefers-reduced-motion: no-preference) { .fx-hero-art.shot-art img { animation: float-in 1s var(--ease-out) both; } }
@keyframes float-in { from { opacity: 0; transform: translateY(40px) rotate(5deg); } }
.fx-hero-peek { position: absolute; left: max(0px, calc(50% - 260px)); bottom: -6%; width: 150px; }
.fx-hero-art.wide-art img { border-radius: 18px; border: 1px solid var(--line-2); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9); image-rendering: pixelated; }
.fx-hero-art.crab-art { min-height: 280px; }
.fx-hero-crab { width: min(78%, 340px); position: relative; z-index: 1; }
.fx-hero-sand { position: absolute; left: 6%; right: 6%; bottom: 8%; height: 34px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(234, 217, 182, .32), transparent); }
@media (max-width: 979px) { .fx-hero-art.shot-art { display: none; } }

/* the strip of areas under the hero */
.fx-areas { position: sticky; top: 72px; z-index: 40; border-block: 1px solid var(--line); background: rgba(8, 18, 20, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.fx-areas .wrap { display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none; padding-block: .55rem; scroll-padding-inline: 2rem; }
@media (min-width: 1100px) { .fx-areas .wrap { justify-content: space-between; } }
/* on a narrow screen the strip scrolls: fade its edges so it reads as more */
@media (max-width: 1099px) { .fx-areas .wrap { -webkit-mask: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent); mask: linear-gradient(90deg, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent); } }
.fx-areas .wrap::-webkit-scrollbar { display: none; }
.fx-areas a { flex: none; display: inline-flex; gap: .4rem; align-items: center; padding: .5rem .7rem; white-space: nowrap; border-radius: 9px; color: var(--text-2); text-decoration: none; font-weight: 700; font-size: .9rem; }
.fx-areas a:hover { color: var(--paper); background: rgba(168, 236, 217, .06); }
.fx-areas a[aria-current='page'] { color: var(--ink); background: var(--coral); }

/* ------------------------------------------------------------ spotlight */
.fx-spot .feats { grid-template-columns: 1fr; gap: 1.1rem; margin-top: .6rem; }
.fx-visual { position: relative; height: clamp(420px, 38vw, 560px); }
.fx-visual img { position: absolute; height: 100%; width: auto; max-width: none; border-radius: 16px; border: 1px solid var(--line-2); box-shadow: 0 50px 90px -35px rgba(0, 0, 0, .9); }
.fx-front { right: 6%; top: 0; z-index: 1; }
.fx-back { right: 40%; top: 8%; height: 86% !important; opacity: .4; filter: saturate(.6); transform: rotate(-5deg); }
.split.flip .fx-back { transform: rotate(5deg); }
@media (max-width: 899px) {
  .fx-visual { height: 460px; }
  .fx-front, .split.flip .fx-front { left: 50%; right: auto; transform: translateX(-50%); }
  .fx-back, .split.flip .fx-back { display: none; }
}

/* ------------------------------------------------------------ cards */
.fx-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.fx-card { position: relative; padding: 1.5rem; border-radius: 16px; border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(180deg, rgba(36, 80, 75, .28), rgba(13, 28, 29, .7)); transition: transform .4s var(--ease-out), border-color .3s; }
.fx-card:hover { transform: translateY(-4px); border-color: rgba(255, 122, 92, .4); }
.fx-card::after { content: ''; position: absolute; inset: auto -30% -60% auto; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 122, 92, .12), transparent); opacity: 0; transition: opacity .4s; }
.fx-card:hover::after { opacity: 1; }
.fx-card .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 122, 92, .12); border: 1px solid rgba(255, 122, 92, .28); font-size: 1.25rem; font-weight: 800; color: var(--coral-hi); }
.fx-card:nth-child(even) .ico { background: rgba(63, 184, 163, .12); border-color: rgba(63, 184, 163, .3); color: var(--foam); }
.fx-card h3 { margin-top: 1rem; font-size: 1.1rem; line-height: 1.3; }
.fx-card p { margin-top: .45rem; color: var(--text-2); font-size: .97rem; }
.fx-card code, .feat code, .fx-table code { color: var(--foam); font-size: .82em; }

/* ------------------------------------------------------------ callout */
.fx-callout { position: relative; display: grid; gap: 1.2rem; padding: clamp(2rem, 1.5rem + 3vw, 3.5rem); padding-right: clamp(2rem, 18vw, 16rem); border-radius: 24px;
  border: 1px solid var(--line-2); background: radial-gradient(60% 120% at 100% 50%, rgba(255, 122, 92, .16), transparent 70%), var(--reef); overflow: hidden; }
.fx-callout blockquote { margin: 0; font: 700 var(--step-2)/1.25 var(--f-body); color: var(--paper); text-wrap: balance; }
.fx-callout blockquote code { color: var(--foam); }
.fx-callout figcaption { margin: 0; color: var(--text-2); font-size: 1rem; }
.fx-callout-crab { position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: 1rem; width: clamp(110px, 13vw, 190px); }
@media (max-width: 700px) { .fx-callout { padding-right: clamp(2rem, 1.5rem + 3vw, 3.5rem); padding-bottom: 9rem; } }

/* ------------------------------------------------------------ table */
.fx-table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line-2); background: rgba(13, 28, 29, .7); }
.fx-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.fx-table th, .fx-table td { padding: 1rem 1.2rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.fx-table thead th { font: 600 .72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--glass); background: rgba(8, 18, 20, .5); }
.fx-table tbody th { font-weight: 400; white-space: nowrap; }
.fx-table td { color: var(--text-2); }
.fx-table tbody tr:last-child > * { border-bottom: 0; }
.fx-table tbody tr:hover { background: rgba(168, 236, 217, .04); }

/* ------------------------------------------------------------ critters */
.fx-critters { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fx-critters figure { padding: 1rem 1rem 1.2rem; border-radius: 16px; border: 1px solid var(--line); background: radial-gradient(80% 60% at 50% 100%, rgba(234, 217, 182, .1), transparent), rgba(13, 28, 29, .7); text-align: center; transition: transform .4s var(--ease-spring); }
.fx-critters figure:hover { transform: translateY(-6px) rotate(-1deg); }
.fx-critters img { width: 100%; max-width: 170px; margin-inline: auto; }
.fx-critters figcaption { margin-top: .6rem; color: var(--text-2); font-size: .9rem; }

/* ------------------------------------------------------------ band */
.fx-band { position: relative; display: grid; gap: 2rem; align-items: center; padding: clamp(2rem, 1.5rem + 3vw, 4rem); border-radius: 24px; border: 1px solid rgba(127, 214, 194, .35);
  background: radial-gradient(70% 100% at 0% 100%, rgba(63, 184, 163, .22), transparent 60%), var(--deep); }
@media (min-width: 900px) { .fx-band { grid-template-columns: 1.4fr .6fr; } }
.fx-points { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .6rem 1.5rem; margin-top: .6rem; }
.fx-points li { display: flex; gap: .6rem; color: var(--text-2); }
.fx-points li::before { content: '✓'; color: var(--glass); font-weight: 800; }
.fx-band-crab { width: min(100%, 260px); justify-self: center; }

/* ------------------------------------------------------------ gallery */
.fx-gallery { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.fx-gallery .trick { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--deep); }
.fx-gallery .trick img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; image-rendering: pixelated; }
.fx-gallery figcaption { margin: 0; padding: 1.1rem 1.25rem 1.3rem; color: var(--text-2); }
.fx-gallery figcaption b { display: block; color: var(--paper); font: 700 1.2rem/1.2 var(--f-pixel); margin-bottom: .35rem; }
.fx-gallery .switch { display: block; margin-top: .7rem; font: 500 .74rem/1.4 var(--f-mono); color: var(--text-3); }

/* ------------------------------------------------------------ next */
.fx-next { position: relative; display: grid; gap: .3rem; padding: 1.6rem 1.8rem; padding-right: 9rem; border-radius: 20px; border: 1px solid var(--line-2); text-decoration: none; color: var(--paper);
  background: linear-gradient(90deg, rgba(36, 80, 75, .4), rgba(13, 28, 29, .6)); overflow: hidden; transition: border-color .3s, transform .4s var(--ease-out); }
.fx-next:hover { color: var(--paper); border-color: rgba(255, 122, 92, .5); transform: translateY(-3px); }
.fx-next .k { font: 600 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--glass); }
.fx-next .t { font: 700 var(--step-2)/1.1 var(--f-pixel); }
.fx-next .t::after { content: ' →'; color: var(--coral); }
.fx-next-crab { position: absolute; right: 1.5rem; bottom: -.4rem; width: 110px; transition: transform .5s var(--ease-out); }
.fx-next:hover .fx-next-crab { transform: translateX(10px); }

/* ------------------------------------------------------------ overview */
.ov-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .ov-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .ov-grid.five { grid-template-columns: repeat(6, 1fr); } .ov-grid.five > * { grid-column: span 2; } .ov-grid.five > :nth-child(-n+2) { grid-column: span 3; } }
.ov-card { display: grid; grid-template-rows: auto 1fr; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); color: inherit; text-decoration: none;
  background: linear-gradient(180deg, rgba(36, 80, 75, .3), rgba(13, 28, 29, .85)); transition: transform .45s var(--ease-out), border-color .3s; }
.ov-card:hover { color: inherit; transform: translateY(-6px); border-color: rgba(255, 122, 92, .45); }
.ov-art { position: relative; display: grid; place-items: center; height: 240px; overflow: hidden; border-bottom: 1px solid var(--line);
  background: radial-gradient(70% 70% at 50% 100%, rgba(255, 122, 92, .14), transparent), rgba(8, 18, 20, .55); }
.ov-art img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease-out); }
.ov-card.tall .ov-art img { width: 62%; height: auto; object-fit: initial; margin-top: 2.2rem; align-self: start; border-radius: 12px 12px 0 0; border: 1px solid var(--line-2); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8); }
.ov-card:hover .ov-art img { transform: translateY(-6px) scale(1.02); }
.ov-crab { width: 150px; }
.ov-body { display: grid; gap: .5rem; padding: 1.4rem 1.5rem 1.6rem; align-content: start; }
.ov-body .k { font: 600 .72rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--glass); }
.ov-body .t { font: 700 var(--step-1)/1.15 var(--f-pixel); color: var(--paper); }
.ov-body .d { color: var(--text-2); font-size: .95rem; }
.ov-body .go { margin-top: .4rem; font-weight: 700; color: var(--coral-hi); }
.ov-body .go::after { content: ' →'; display: inline-block; transition: transform .3s var(--ease-out); }
.ov-card:hover .go::after { transform: translateX(4px); }