/* WYLJO home — editorial brand layer
   The shop lives on shop.wyljo.com. This page introduces the world and its Wilden. */

body { background: var(--nacht); }

.hero {
  min-height: min(820px, calc(100dvh - 72px));
  padding: clamp(72px, 10vw, 132px) var(--pad-x) clamp(52px, 7vw, 96px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 48%, rgba(232, 201, 106, .2), transparent 24%),
    radial-gradient(circle at 25% 20%, rgba(126, 200, 164, .2), transparent 30%),
    linear-gradient(125deg, #101b1a 0%, #102321 45%, #0d0b14 100%);
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .62;
  background-image:
    linear-gradient(90deg, rgba(242,237,228,.035) 1px, transparent 1px),
    linear-gradient(rgba(242,237,228,.028) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(90deg, #000 0%, transparent 86%);
}

.hero::after {
  z-index: -1;
  opacity: 1;
  background: linear-gradient(90deg, rgba(13,11,20,.1) 0%, rgba(13,11,20,0) 57%, rgba(13,11,20,.35) 100%);
}

.hero-content {
  width: min(610px, 56%);
  z-index: 3;
}

.hero .reveal,
.hero .artwork-appear {
  opacity: 1;
  transform: none;
}

.hero-eyebrow {
  color: var(--goud);
  opacity: 1;
  font-size: clamp(20px, 2vw, 27px);
  margin-bottom: 20px;
}

.hero-h1 {
  color: var(--perkament);
  font-size: clamp(66px, 8.5vw, 124px);
  max-width: 690px;
  text-wrap: balance;
  margin-bottom: 24px;
}

.hero-sub {
  color: var(--perkament);
  opacity: .76;
  max-width: 530px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.68;
  margin-bottom: 32px;
}

.hero-actions { margin-bottom: 34px; }
.btn-hero-primary {
  background: var(--groen);
  color: var(--woud);
  box-shadow: 0 12px 28px rgba(0,0,0,.19);
}
.btn-hero-primary:hover { background: var(--goud); color: var(--nacht); }
.btn-hero-outline { border-color: rgba(242,237,228,.44); color: var(--perkament); }
.btn-hero-outline:hover { border-color: var(--perkament); background: rgba(242,237,228,.09); }
.hero-feit { color: var(--perkament); opacity: .55; }
.hero-sep { color: var(--goud); opacity: .7; }

.hero-artwork-zone {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(58vw, 860px);
  z-index: 1;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.hero-artwork-zone::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #102321 0%, rgba(16,35,33,.72) 15%, rgba(13,11,20,.02) 65%),
    linear-gradient(0deg, rgba(13,11,20,.45), transparent 36%),
    url('../artwork/stello_banner.png') center / cover no-repeat;
  filter: saturate(.8) contrast(1.06);
}

.hero-artwork-zone::after {
  content: '';
  position: absolute;
  width: min(40vw, 570px);
  height: min(40vw, 570px);
  right: clamp(2rem, 7vw, 8rem);
  bottom: clamp(3rem, 6vw, 7rem);
  border: 1px solid rgba(232,201,106,.48);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(232,201,106,.04), 0 0 90px rgba(232,201,106,.16);
}

.wild-artwork {
  position: absolute;
  z-index: 2;
  width: min(29vw, 420px);
  height: auto;
  right: clamp(1rem, 7vw, 7rem);
  bottom: clamp(1.25rem, 3vw, 3.5rem);
  margin: 0;
  filter: drop-shadow(0 30px 28px rgba(0,0,0,.42));
}

.spotlight {
  padding-top: clamp(104px, 11vw, 156px);
  padding-bottom: clamp(84px, 9vw, 132px);
  background: #100e18;
}
.spotlight-inner { max-width: var(--max-w); margin: auto; gap: clamp(44px, 8vw, 112px); }
.spotlight-ghost { color: var(--goud); opacity: .045; }
.spotlight-media {
  min-height: 470px;
  padding: 10px;
  background: linear-gradient(145deg, rgba(232,201,106,.54), rgba(126,200,164,.14));
}
.spotlight-media .editorial-image { border: 0; }
.spotlight-feit-value { font-size: clamp(21px, 2vw, 28px); }

.wereld, .kaartspel, .oprichters, .drop { padding-left: max(var(--pad-x), calc((100vw - var(--max-w)) / 2)); padding-right: max(var(--pad-x), calc((100vw - var(--max-w)) / 2)); }
.wereld { padding-top: 120px; padding-bottom: 120px; }
.energie-card { min-height: 270px; }
.kaartspel { padding-top: 112px; padding-bottom: 112px; }
.oprichters { padding-top: 112px; padding-bottom: 112px; }
.drop { padding-top: 128px; padding-bottom: 128px; }

@media (max-width: 900px) {
  .hero { min-height: 770px; padding-left: var(--pad-x-sm); padding-right: var(--pad-x-sm); align-items: flex-start; }
  .hero-content { width: min(580px, 100%); padding-top: 8px; }
  .hero-artwork-zone { width: 76vw; opacity: .94; }
  .hero-artwork-zone::before { background-position: 57% center; }
  .wild-artwork { width: min(43vw, 390px); right: 3vw; bottom: 1rem; }
  .spotlight, .wereld, .kaartspel, .oprichters, .drop { padding-left: var(--pad-x-sm); padding-right: var(--pad-x-sm); }
}

@media (max-width: 640px) {
  .hero { min-height: 746px; padding-top: 58px; padding-bottom: 24px; }
  .hero::before { mask-image: none; opacity: .22; }
  .hero::after { background: linear-gradient(180deg, rgba(13,11,20,.05) 0%, rgba(13,11,20,.06) 32%, rgba(13,11,20,.8) 100%); }
  .hero-content { width: 100%; }
  .hero-eyebrow { font-size: 20px; margin-bottom: 16px; }
  .hero-h1 { font-size: clamp(58px, 17vw, 82px); line-height: .86; max-width: 340px; }
  .hero-sub { max-width: 340px; font-size: 15px; line-height: 1.55; margin-bottom: 24px; }
  .hero-actions { gap: 9px; margin-bottom: 24px; }
  .btn-hero-primary, .btn-hero-outline { padding: 13px 14px; font-size: 9px; }
  .hero-feiten { max-width: 280px; }
  .hero-feit { font-size: 9px; }
  .hero-sep { margin: 0 9px; }
  .hero-artwork-zone { width: 100%; inset: auto 0 0; height: 48%; }
  .hero-artwork-zone::before { background-position: 64% 58%; }
  .hero-artwork-zone::after { width: 230px; height: 230px; right: -25px; bottom: 32px; }
  .wild-artwork { width: 210px; right: 8px; bottom: 12px; }
  .spotlight { padding-top: 86px; padding-bottom: 72px; }
  .spotlight-media { min-height: 260px; }
  .wereld { padding-top: 80px; padding-bottom: 80px; }
}