/* Homepage only: hero polish and real design previews (index.html). Uses the existing Fikoraa palette. */

/* Hero: warm gold glow and a fine gold arch echoing the logo */
.hu-hero { background: radial-gradient(48% 62% at 76% 46%, rgba(226, 204, 152, .32), transparent 72%), radial-gradient(30% 40% at 8% 10%, rgba(216, 200, 168, .18), transparent 70%); }
.hu-hero .hero-arch { position: relative; isolation: isolate; }
.hu-hero .hero-arch::before { content: ""; position: absolute; inset: -16px; border: 1px solid rgba(184, 155, 99, .55); border-radius: 260px 260px 22px 22px; z-index: -1; pointer-events: none; }
.hu-hero .hero-arch::after { content: ""; position: absolute; left: 50%; top: -22px; width: 10px; height: 10px; background: var(--gold); transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 0 4px var(--bg, #F8F4EC); pointer-events: none; }

.hu-proof { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .55rem 1.4rem; font-size: .92rem; color: var(--forest); }
.hu-proof li { display: inline-flex; align-items: center; gap: .55rem; }
.hu-proof li::before { content: ""; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); flex: none; }
.hu-proof strong { font-weight: 700; font-variant-numeric: lining-nums; }
.hu-langs { max-width: 34rem; }

@keyframes huRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes huFade { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.hu-hero .stack-lg > * { animation: huRise .8s cubic-bezier(.2, .7, .2, 1) both; }
.hu-hero .stack-lg > :nth-child(2) { animation-delay: .08s; }
.hu-hero .stack-lg > :nth-child(3) { animation-delay: .16s; }
.hu-hero .stack-lg > :nth-child(4) { animation-delay: .24s; }
.hu-hero .stack-lg > :nth-child(5) { animation-delay: .32s; }
.hu-hero .stack-lg > :nth-child(6) { animation-delay: .4s; }
.hu-hero .hero-visual { animation: huFade 1.1s .15s ease both; }

/* Designs: real previews of each design's opening screen */
.hu-card { animation: huRise .55s ease both; animation-delay: calc(var(--i, 0) * 70ms); }
.hu-thumb { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #EFE8DA, #E2D7C4); box-shadow: 0 1px 2px rgba(40, 30, 15, .08), 0 8px 22px rgba(40, 30, 15, .10); transition: transform .3s ease, box-shadow .3s ease; text-decoration: none; }
.hu-thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(184, 155, 99, .45); pointer-events: none; }
.hu-pic { position: absolute; inset: 0; }
.hu-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .6s ease; }
.hu-thumb .tpl-thumb { height: 100%; border-radius: 0; }
.hu-peek { position: absolute; left: 50%; bottom: .9rem; transform: translate(-50%, 6px); display: inline-flex; align-items: center; gap: .35rem; background: rgba(31, 42, 34, .86); color: #fff; font-size: .78rem; font-weight: 600; padding: .4rem .8rem; border-radius: 999px; opacity: 0; transition: opacity .25s, transform .25s; }
.hu-peek svg { width: 15px; height: 15px; }
.hu-card:hover .hu-thumb, .hu-thumb:focus-visible { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(40, 30, 15, .08), 0 18px 36px rgba(40, 30, 15, .16); }
.hu-card:hover .hu-pic img { transform: scale(1.03); }
.hu-card:hover .hu-peek, .hu-thumb:focus-visible .hu-peek { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .hu-peek { display: none; } }
.hu-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.hu-next { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 1.25rem 1.5rem; border: 1px solid rgba(184, 155, 99, .45); border-radius: 16px; background: linear-gradient(100deg, rgba(226, 204, 152, .16), rgba(255, 253, 247, .6)); }
.hu-next p { margin: 0; max-width: 34rem; color: var(--ink, #2F3A32); }

#home-tabs { flex-wrap: wrap; }

@media (max-width: 640px) {
  .hu-hero .hero-arch::before { inset: -10px; }
  .hu-next { padding: 1.1rem; }
  .hu-next .cluster { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hu-hero .stack-lg > *, .hu-hero .hero-visual, .hu-card { animation: none; }
  .hu-thumb, .hu-pic img, .hu-peek { transition: none; }
}