:root { --land-foot: 46px; }

body {
  display: flex; flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

body > kinkyrvn-bar, body > .kr-note { flex: none; }

.landing {
  position: relative;
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-height: 0;
}

.split {
  flex: 1 1 auto;
  display: flex;
  min-height: 420px;
}

.half {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  color: var(--fg);
  transition: flex-grow var(--t-big) var(--ease);
}
.half:hover,
.half:focus-visible { flex-grow: 1.75; }

.half:focus-visible {
  outline-offset: -4px;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

.half + .half::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  z-index: 4; pointer-events: none;
  background: linear-gradient(180deg,
    transparent,
    var(--stroke)   12%,
    var(--specular) 50%,
    var(--stroke)   88%,
    transparent);
}

.half::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 3; pointer-events: none;
  background-image: var(--grain);
  opacity: .04;
}

.art {
  position: absolute; inset: 0;
  z-index: 0; display: block; pointer-events: none;
  overflow: hidden;
}

.art::before,
.art::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
}

.art::before {
  z-index: 0;
  opacity: .75;
  transition: opacity var(--t-big) var(--ease);
}
.art::after {
  z-index: 2;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--field) 62%, transparent)  0%,
      color-mix(in srgb, var(--field) 12%, transparent) 34%,
      color-mix(in srgb, var(--field) 78%, transparent) 76%,
      color-mix(in srgb, var(--field) 92%, transparent) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--field) 72%, transparent) 0%,
      transparent 58%);
}
.half:hover .art::before,
.half:focus-visible .art::before { opacity: 1; }

.motif {
  position: absolute; inset: 0;
  z-index: 1; display: block;
  opacity: .58;
  transition: opacity var(--t-big) var(--ease);
}
.half:hover .motif,
.half:focus-visible .motif { opacity: .8; }

.motif svg {
  position: absolute;
  height: auto;
  color: var(--accent);
}

.lew .shot {
  position: absolute; inset: 0;
  z-index: -1;

  background: url("../assets/img/lewdity-hero.jpg") 58% 30% / auto 132% no-repeat;

  filter: grayscale(.66) contrast(1.16) brightness(.46);

  opacity: .46;
  transition: opacity var(--t-big) var(--ease);

  -webkit-mask-image: linear-gradient(300deg, transparent 4%, #000 46%);
          mask-image: linear-gradient(300deg, transparent 4%, #000 46%);
}
.lew:hover .shot,
.lew:focus-visible .shot { opacity: .6; }

.lew .art::before {
  background:
    radial-gradient(120% 92% at 78% 22%, var(--accent-wash), transparent 62%),
    radial-gradient(88% 72% at 98% 4%,
      color-mix(in srgb, var(--red) 5%, transparent), transparent 66%);
}

.cre .art::before {
  background:
    radial-gradient(120% 92% at 74% 18%, var(--accent-wash), transparent 62%),
    radial-gradient(80% 80% at 100% 100%,
      color-mix(in srgb, var(--magenta) 4%, transparent), transparent 66%);
}
.cre .motif {
  background-image:
    linear-gradient(color-mix(in srgb, var(--magenta) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--magenta) 6%, transparent) 1px, transparent 1px),
    linear-gradient(color-mix(in srgb, var(--magenta) 11%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--magenta) 11%, transparent) 1px, transparent 1px);
  background-size: 100% 44px, 44px 100%, 100% 176px, 176px 100%;
  background-position: right top;
  background-repeat: repeat;
}

.cre .motif .dropspiral {
  --sp-size: min(230vh, 1900px);
  --sp-cx: calc(280px - 12vh);
  --sp-cy: calc(280px - 9vh);

  position: absolute;
  aspect-ratio: 1;
  width: var(--sp-size);
  right: calc(var(--sp-cx) - var(--sp-size) / 2);
  top:   calc(var(--sp-cy) - var(--sp-size) / 2);

  opacity: .62;
  transition: opacity var(--t-big) var(--ease);

  -webkit-mask-image: radial-gradient(circle closest-side, #000 82%, transparent 100%);
          mask-image: radial-gradient(circle closest-side, #000 82%, transparent 100%);
}
.cre .motif .dropspiral .sp-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.cre .motif .sp-1 { fill: currentColor; }
.cre .motif .sp-2 { fill: none; }

.cre .motif .dropspiral,
.cre .motif .dropspiral .sp-art {
  will-change: transform;
}
.cre .motif .dropspiral { animation: kr-sp-spin 42s linear infinite; }
.cre .motif .dropspiral .sp-art {
  animation: kr-sp-spin 84s linear infinite;
  animation-play-state: paused;
}
.cre:hover .motif .dropspiral .sp-art,
.cre:focus-visible .motif .dropspiral .sp-art { animation-play-state: running; }
@keyframes kr-sp-spin { to { transform: rotate(-360deg); } }

.cre:hover .motif .dropspiral,
.cre:focus-visible .motif .dropspiral { opacity: .78; }

.hire .art::before {
  background:
    radial-gradient(120% 92% at 70% 16%, var(--accent-wash), transparent 62%),
    radial-gradient(80% 80% at 100% 100%,
      color-mix(in srgb, var(--purple) 5%, transparent), transparent 66%);
}
.hire .motif {
  background-image:
    repeating-linear-gradient(45deg,
      color-mix(in srgb, var(--purple) 10%, transparent) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(-45deg,
      color-mix(in srgb, var(--purple) 6%, transparent) 0 1px, transparent 1px 34px);
}

.half-inner {
  position: relative; z-index: 5;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(14px, 2.2vh, 22px);
  width: 100%; max-width: 620px;
  padding: clamp(28px, 4.4vw, 64px);
}

.half-title {
  display: block;
  font-family: var(--display);
  font-weight: 700; line-height: .94; letter-spacing: -.034em;
}
.half-title .ln1 {
  display: block;
  font-size: clamp(19px, 2.3vw, 32px);
  letter-spacing: -.018em;
  color: var(--dim);
  transition: color var(--t-big) var(--ease);
}
.half-title .ln2 {
  display: block;
  font-size: clamp(42px, 6.2vw, 94px);
  color: var(--fg);
}
.half:hover .half-title .ln1,
.half:focus-visible .half-title .ln1 { color: var(--fg); }

.half-sub {
  display: block;
  color: var(--dim);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.6;
  max-width: 44ch;
}

.half-inner .chips,
.apps { display: flex; align-items: center; gap: var(--s2); min-height: 40px; }

.apps .frame img { filter: grayscale(.55) saturate(.5) brightness(.82); }
.half:hover .apps .frame img,
.half:focus-visible .apps .frame img { filter: none; }

.apps .frame {
  padding: 0;
  background: none;
  box-shadow: none;
}
.apps .frame img { border-radius: 0; }

.apps .frame img.mark {
  filter: brightness(0) invert(1);
  opacity: .62;
  padding: 3px;
  transition: opacity var(--t-big) var(--ease);
}
.half:hover .apps .frame img.mark,
.half:focus-visible .apps .frame img.mark {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.enter {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  color: var(--dim);
  transition: color var(--t-big) var(--ease);
}
.enter::before {
  content: "";
  width: 20px; height: 1px; flex: none;
  background: var(--stroke-2);
  transition: width var(--t-big) var(--ease), background var(--t-big) var(--ease);
}
.enter .go {
  color: var(--faint-deco);
  transition: color var(--t-big) var(--ease), transform var(--t-big) var(--ease);
}
.half:hover .enter,
.half:focus-visible .enter { color: var(--fg); }
.half:hover .enter::before,
.half:focus-visible .enter::before { width: 34px; background: var(--accent-line); }
.half:hover .enter .go,
.half:focus-visible .enter .go { color: var(--accent); transform: translateX(4px); }

.land-foot {
  position: relative; z-index: 1;
  flex: none;
  border-top: 1px solid var(--hairline);
}

.foot-line {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: var(--s3); row-gap: var(--s1);
  min-height: var(--land-foot);
  padding-block: var(--s3);
  padding-inline: var(--gutter);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  line-height: 1.8; color: var(--faint);
}
.foot-line > span { min-width: 0; }
.foot-line .grow { flex: 1 1 0; }
.foot-line .dot { color: var(--faint-deco); }
.foot-line b { color: var(--dim); font-weight: 600; }
.foot-line [data-clock] { color: var(--dim); font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) {

  .cre .motif .dropspiral { --sp-cx: calc(220px - 16vh); }
}

@media (max-width: 820px) {
  .foot-line { align-items: baseline; padding-block: var(--s4); }
  .foot-line .grow { display: none; }

  .split { flex-direction: column; min-height: 0; }
  .half { flex: 1 1 auto; min-height: 288px; }

  .half:hover, .half:focus-visible { flex-grow: 1; }

  .half + .half::before {
    left: 0; right: 0; top: 0; bottom: auto;
    width: auto; height: 1px;
    background: linear-gradient(90deg,
      transparent,
      var(--stroke)   12%,
      var(--specular) 50%,
      var(--stroke)   88%,
      transparent);
  }

  .cre .motif .dropspiral {
    --sp-size: min(190vw, 1100px);
    --sp-cx: 24vw;
    --sp-cy: 30vw;
  }

  .lew .shot {
    background-size: cover;
    background-position: center 26%;

    -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 52%);
            mask-image: linear-gradient(90deg, transparent 2%, #000 52%);
    opacity: .44;
  }

  .half-title .ln2 { font-size: clamp(40px, 10.5vw, 68px); }
  .half-sub { max-width: 40ch; }
}

@media (max-width: 560px) {
  .half-inner { gap: var(--s3); padding: var(--s6) var(--s5) var(--s8); }
  .half-title .ln1 { font-size: 17px; }
  .half-title .ln2 { font-size: clamp(34px, 11vw, 52px); }
  .half-sub { font-size: 13.5px; max-width: 36ch; }
  .foot-line { gap: var(--s2); font-size: 9px; }
  .foot-line .grow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .half:hover, .half:focus-visible { flex-grow: 1; }
}

.age-gate {
  background: rgba(0, 0, 0, .88);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
.age-card {
  background: #000;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .25);
}
.age-card::before,
.age-card::after { display: none; }

.age-mark { color: #fff; text-shadow: none; }
.age-mark .plus { color: #fff; text-shadow: none; }
.age-rule { background: rgba(255, 255, 255, .25); }
.age-fine { color: rgba(255, 255, 255, .55); border-top-color: rgba(255, 255, 255, .15); }

.age-actions .btn {
  background: none;
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}
.age-actions .btn:hover {
  box-shadow: inset 0 0 0 1px #fff;
}
.age-actions .btn-pri {
  background: #fff;
  color: #000;
  box-shadow: none;
}
.age-actions .btn-pri:hover {
  background: #fff;
  box-shadow: none;
}
.age-actions .btn .go,
.age-actions .btn:hover .go { color: inherit; }

.hire {
  flex: none;
  min-height: clamp(112px, 16vh, 168px);
  align-items: center;
  transition: min-height var(--t-big) var(--ease);
}
.hire:hover,
.hire:focus-visible {
  flex-grow: 0;
  min-height: clamp(200px, 30vh, 300px);
}

.hire::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px;
  z-index: 4; pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    var(--stroke)   12%,
    var(--specular) 50%,
    var(--stroke)   88%,
    transparent);
}

.hire .half-inner {
  flex-direction: row; align-items: center;
  max-width: none;
  gap: clamp(20px, 3.5vw, 48px);
  padding-block: clamp(18px, 3vh, 30px);
}
.hire .half-title .ln1 { font-size: clamp(13px, 1.3vw, 17px); }
.hire .half-title .ln2 { font-size: clamp(28px, 3.4vw, 48px); }
.hire .half-sub { max-width: 52ch; }
.hire .enter { margin-left: auto; }

@media (max-width: 820px) {
  .hire { min-height: 0; }
  .hire:hover, .hire:focus-visible { min-height: 0; }
  .hire .half-inner {
    flex-direction: column; align-items: flex-start;
    gap: var(--s3);
  }
  .hire .enter { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hire:hover, .hire:focus-visible { min-height: clamp(112px, 16vh, 168px); }
}