/* =========================
   HOME ROOT VARIABLES (RESPONSIVE)
   ========================= */

:root {
  /* ===== wide screen scaling ===== */
  /*
    1   = old behavior, stops at the 1920px design size
    1.5 = continues growing to 150% of the old max caps
    2   = continues growing to 200% of the old max caps
  */
  --wide-scale: 2;

  /* home top nav */
  --topnav-y: clamp(18px, calc(45 / 1920 * 100vw), calc(60px * var(--wide-scale)));
  --topnav-gap: clamp(10px, calc(45 / 1920 * 100vw), calc(45px * var(--wide-scale)));

  --topnav-about:  url("/static/site_imgs/about.png");
  --topnav-faq:    url("/static/site_imgs/faq.png");
  --topnav-faq:    image-set(url("/static/site_imgs/generated/faq-320.png") type("image/png"), url("/static/site_imgs/faq.png") type("image/png"));
  --topnav-social: url("/static/site_imgs/social.png");

  --topnav-about-w: clamp(64px, calc(159 / 1920 * 100vw), calc(159px * var(--wide-scale)));
  --topnav-faq-w: clamp(65px, calc(160.5 / 1920 * 100vw), calc(160.5px * var(--wide-scale)));
  --topnav-social-w: clamp(64px, calc(159 / 1920 * 100vw), calc(159px * var(--wide-scale)));

  --topnav-label-aspect: 159 / 65.5;
  --topnav-faq-aspect: 160.5 / 65.5;
  --topnav-h: clamp(26.4px, calc(65.5 / 1920 * 100vw), calc(65.5px * var(--wide-scale)));

  /* name artwork */
  --home-name-width-adjustment: clamp(0px, calc(1 / 1920 * 100vw), calc(1px * var(--wide-scale)));
  --home-name-w: calc(
    var(--topnav-about-w) +
    var(--topnav-faq-w) +
    var(--topnav-social-w) +
    var(--topnav-gap) +
    var(--topnav-gap) +
    var(--home-name-width-adjustment)
  );
  --home-name-gap: clamp(3px, calc(16 / 1920 * 100vw), calc(16px * var(--wide-scale)));
  --home-name-top: max(
    0px,
    calc(var(--topnav-y) + var(--topnav-h) + var(--home-name-gap) - var(--content-pad))
  );

  /* logo */
  --logo-w: clamp(180px, calc(556 / 1920 * 100vw), calc(720px * var(--wide-scale)));
  --logo-h: var(--logo-w);
  --logo-top: clamp(26px, calc(72 / 1920 * 100vw), calc(92px * var(--wide-scale)));

  /* frames */
  --frame-gap: clamp(8px, calc(256 / 1920 * 100vw), calc(256px * var(--wide-scale)));
  --frame-top: clamp(10px, calc(40 / 1920 * 100vw), calc(40px * var(--wide-scale)));
  --frame-bottom: clamp(100px, calc(220 / 1920 * 100vw), calc(220px * var(--wide-scale)));
  --frame-label-gap: clamp(12px, calc(12 / 1920 * 100vw), calc(12px * var(--wide-scale)));
  --frame-bottom-label-shadow-gap: clamp(1px, calc(1 / 1920 * 100vw), calc(1px * var(--wide-scale)));

  --frame-w: clamp(112px, calc(512 / 1920 * 100vw), calc(512px * var(--wide-scale)));
  --frame-aspect: 1039 / 783;

  --frame-left: url("/static/site_imgs/l_box_b.png");
  --frame-left: image-set(url("/static/site_imgs/generated/l_box_b-1000.png") type("image/png"), url("/static/site_imgs/l_box_b.png") type("image/png"));
  --frame-right: url("/static/site_imgs/r_box_b.png");
  --frame-right: image-set(url("/static/site_imgs/generated/r_box_b-1000.png") type("image/png"), url("/static/site_imgs/r_box_b.png") type("image/png"));
  --frame-left-secondary: url("/static/site_imgs/l_box_b2.png");
  --frame-left-secondary: image-set(url("/static/site_imgs/generated/l_box_b2-1000.png") type("image/png"), url("/static/site_imgs/l_box_b2.png") type("image/png"));
  --frame-right-secondary: url("/static/site_imgs/r_box_b2.png");
  --frame-right-secondary: image-set(url("/static/site_imgs/generated/r_box_b2-1000.png") type("image/png"), url("/static/site_imgs/r_box_b2.png") type("image/png"));

  --home-frame-layer: 1;
  --home-label-layer: 2;
  --home-glow-layer: 3;

  /* label art */
  --label-w: clamp(92px, calc(262 / 1920 * 100vw), calc(262px * var(--wide-scale)));
  --label-aspect: 262 / 116;
  --label-nudge: clamp(0px, calc(1 / 1920 * 100vw), calc(1px * var(--wide-scale)));
  --label-top-left-x: calc(-2 * var(--label-nudge));
  --label-top-right-x: calc(3 * var(--label-nudge));
  --label-bottom-left-x: calc(3 * var(--label-nudge));
  --label-bottom-right-x: calc(-2 * var(--label-nudge));

  --top-left:     url("/static/site_imgs/arc.png");
  --top-left:     image-set(url("/static/site_imgs/generated/arc-320.png") type("image/png"), url("/static/site_imgs/arc.png") type("image/png"));
  --top-right:    url("/static/site_imgs/can.png");
  --top-right:    image-set(url("/static/site_imgs/generated/can-320.png") type("image/png"), url("/static/site_imgs/can.png") type("image/png"));
  --bottom-left:  url("/static/site_imgs/inc.png");
  --bottom-left:  image-set(url("/static/site_imgs/generated/inc-320.png") type("image/png"), url("/static/site_imgs/inc.png") type("image/png"));
  --bottom-right: url("/static/site_imgs/box.png");
  --bottom-right: image-set(url("/static/site_imgs/generated/box-320.png") type("image/png"), url("/static/site_imgs/box.png") type("image/png"));


/* invoke button */
--inv: url("/static/site_imgs/inv.png");
--inv: image-set(url("/static/site_imgs/generated/inv-320.png") type("image/png"), url("/static/site_imgs/inv.png") type("image/png"));
--inv-w: clamp(103px, calc(295.5 / 1920 * 100vw), 295.5px);
--inv-aspect: 591 / 235;
--inv-offset-x: 0px;

/* same positioning model as article altar */
--inv-nav-mt: clamp(40px, calc(80 / 1920 * 100vw), 80px);
--inv-nav-mb: clamp(20px, calc(40 / 1920 * 100vw), 40px);
--inv-shift-y: clamp(40px, calc(150 / 1920 * 100vw), 150px);

  --page-bottom-clearance: var(--frame-bottom);
}

@media (min-width: 1920px){
  :root{
    --inv-w: clamp(295.5px, calc(295.5 / 1920 * 100vw), calc(295.5px * var(--wide-scale)));

    --inv-nav-mt: clamp(80px, calc(80 / 1920 * 100vw), calc(80px * var(--wide-scale)));
    --inv-nav-mb: clamp(40px, calc(40 / 1920 * 100vw), calc(40px * var(--wide-scale)));
    --inv-shift-y: clamp(150px, calc(150 / 1920 * 100vw), calc(150px * var(--wide-scale)));
  }
}

@media (max-width: 650px) {
  :root {
    --topnav-y: 42px;
  }
}

@media (max-width: 520px) {
  :root {
    --topnav-y: 56px;
  }
}

/* =========================
   HOME PAGE CONTENT SPACING
   ========================= */

.page__content {
   padding-bottom: calc(var(--content-pad) + var(--page-bottom-clearance));
}


/* =========================
   HOME TOP NAV
   ========================= */

.topnav-home {
  position: absolute;
  top: var(--topnav-y);
  left: 50%;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: var(--topnav-gap);
  transform: translateX(-50%);
}

.topnav-home__item {
  display: block;
  line-height: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: var(--button-shadow);
  transition: filter 200ms ease, transform 200ms ease;
}

.topnav-home__item--about {
  width: var(--topnav-about-w);
  aspect-ratio: var(--topnav-label-aspect);
  background-image: var(--topnav-about);
}

.topnav-home__item--faq {
  width: var(--topnav-faq-w);
  aspect-ratio: var(--topnav-faq-aspect);
  background-image: var(--topnav-faq);
}

.topnav-home__item--social {
  width: var(--topnav-social-w);
  aspect-ratio: var(--topnav-label-aspect);
  border-radius: 0;
  background-image: var(--topnav-social);
}

.topnav-social {
  position: relative;
  width: var(--topnav-social-w);
}

.topnav-social__trigger {
  position: relative;
  z-index: 3;
  display: block;
  width: 100%;
  aspect-ratio: var(--topnav-label-aspect);
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.topnav-social__panel {
  position: absolute;
  top: calc(100% - clamp(6px, calc(6 / 1920 * 100vw), calc(6px * var(--wide-scale))));
  left: 50%;
  z-index: 2;
  display: none;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding:
    clamp(10px, calc(10 / 1920 * 100vw), calc(10px * var(--wide-scale)))
    clamp(8px, calc(8 / 1920 * 100vw), calc(8px * var(--wide-scale)))
    clamp(6px, calc(6 / 1920 * 100vw), calc(6px * var(--wide-scale)));
  border-radius: clamp(14px, calc(14 / 1920 * 100vw), calc(14px * var(--wide-scale)));
  background: rgba(18, 18, 18, 0.88);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.22),
    0 0 0 1px rgba(255,255,255,0.06);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.topnav-social__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at top center,
    rgba(255,255,255,0.08),
    rgba(255,255,255,0.00) 72%
  );
  pointer-events: none;
}

.topnav-social__panel a {
  --social-link-size: clamp(10px, calc(16 / 1920 * 100vw), calc(16px * var(--wide-scale)));
  --social-line-w: clamp(8px, calc(var(--social-link-size) * 3), calc(88px * var(--wide-scale)));

  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding:
    clamp(2px, calc(2 / 1920 * 100vw), calc(2px * var(--wide-scale)))
    clamp(8px, calc(8 / 1920 * 100vw), calc(8px * var(--wide-scale)));
  color: rgba(245,245,245,0.92);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: var(--social-link-size);
  line-height: 1.1;
  opacity: 0.92;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.social-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
}

.topnav-social__panel .social-label {
  letter-spacing: 0.04em;
}

.topnav-social__panel .social-deco {
  margin: 0 0.18em;
  letter-spacing: 0;
}

.topnav-social__panel a::before,
.topnav-social__panel a::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: var(--social-line-w);
  height: 1px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(255,255,255,0.22);
}

.topnav-social__panel a::before {
  margin-top: 0;
  margin-bottom: 0.3em;
}

.topnav-social__panel a::after {
  margin-top: 0.3em;
  margin-bottom: 0;
}

.topnav-social__panel a:hover {
  opacity: 1;
  transform: translateY(-1px);
  filter:
    drop-shadow(0 0 8px var(--hover-glow))
    drop-shadow(0 0 18px var(--hover-glow));
}

.topnav-social.is-open .topnav-social__panel {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .topnav-social:hover .topnav-social__panel {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
}


/* =========================
   HOME NAME
   ========================= */

.home-name {
  display: flex;
  justify-content: center;
  margin-top: var(--home-name-top);
}

.home-name__image {
  display: block;
  width: var(--home-name-w);
  height: auto;
  filter: var(--button-shadow);
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}


/* =========================
   HOME LOGO
   ========================= */

.logo-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--logo-top);
}

#logo-rotate,
.topnav-home__item,
.top-art,
.bottom-art,
.frame,
.frame-shell,
.inv-art {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

#logo-rotate:focus:not(:focus-visible),
.topnav-home__item:focus:not(:focus-visible),
.top-art:focus:not(:focus-visible),
.bottom-art:focus:not(:focus-visible),
.frame:focus:not(:focus-visible),
.frame-shell:focus:not(:focus-visible),
.inv-art:focus:not(:focus-visible) {
  outline: none;
}

.logo {
  width: var(--logo-w);
  height: var(--logo-h);
  background-image: var(--logo-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: var(--button-shadow);
  transition: filter 200ms ease, transform 200ms ease;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

#logo-rotate:hover .logo {
  filter:
    var(--button-shadow)
    drop-shadow(0 0 12px var(--hover-glow))
    drop-shadow(0 0 28px var(--hover-glow));
}

@media (hover: none), (pointer: coarse) {
  #logo-rotate .logo {
    filter:
      var(--button-shadow)
      drop-shadow(0 0 12px var(--hover-glow))
      drop-shadow(0 0 28px var(--hover-glow));
  }
}


/* =========================
   HOME FRAMES + LABELS
   ========================= */

.frames-wrapper {
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.frame-top-row,
.frame-row,
.frame-bottom-row,
.frame-secondary-row {
  display: flex;
  justify-content: center;
  gap: var(--frame-gap);
}

.frame-top-row {
  margin-bottom: var(--frame-label-gap);
}

.frame-bottom-row {
  margin-top: calc(var(--frame-label-gap) + var(--frame-bottom-label-shadow-gap));
}

.frame-top-cell,
.frame-bottom-cell {
  width: var(--frame-w);
}

.frame-top-cell--left {
  display: flex;
  justify-content: flex-start;
}

.frame-top-cell--right {
  display: flex;
  justify-content: flex-end;
}

.frame-bottom-cell--left {
  display: flex;
  justify-content: flex-end;
}

.frame-bottom-cell--right {
  display: flex;
  justify-content: flex-start;
}

.top-art,
.bottom-art {
  position: relative;
  z-index: var(--home-label-layer);
  display: block;
  width: var(--label-w);
  aspect-ratio: var(--label-aspect);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: filter 200ms ease, transform 200ms ease;
  filter: var(--button-shadow);
  transform: translateX(var(--label-x, 0px));
}

.top-art--left {
  background-image: var(--top-left);
  --label-x: var(--label-top-left-x);
}

.top-art--right {
  background-image: var(--top-right);
  --label-x: var(--label-top-right-x);
}

.bottom-art--left {
  background-image: var(--bottom-left);
  --label-x: var(--label-bottom-left-x);
}

.bottom-art--right {
  background-image: var(--bottom-right);
  --label-x: var(--label-bottom-right-x);
}

.frame-row {
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
}

.frame {
  display: block;
  z-index: var(--home-frame-layer);
  width: var(--frame-w);
  aspect-ratio: var(--frame-aspect);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: var(--button-shadow);
  transition: filter 200ms ease, transform 200ms ease;
}

.frame--left  { background-image: var(--frame-left); }
.frame--right { background-image: var(--frame-right); }

.frame-secondary-row {
  margin-top: var(--frame-label-gap);
}

.frame-shell {
  display: block;
  z-index: var(--home-frame-layer);
  width: var(--frame-w);
  aspect-ratio: var(--frame-aspect);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: var(--button-shadow);
  transition: filter 200ms ease, transform 200ms ease;
}

.frame-shell--left  { background-image: var(--frame-left-secondary); }
.frame-shell--right { background-image: var(--frame-right-secondary); }


/* =========================
   HOME INVOKE BUTTON
   behaves like article bottom altar
   ========================= */

.inv-row {
  display: flex;
  justify-content: center;
  align-items: center;

  margin: var(--inv-nav-mt) auto var(--inv-nav-mb);

  position: relative;
  top: 0;
  z-index: 12;

  pointer-events: none;
}

.inv-art {
  display: block;
  width: var(--inv-w);
  aspect-ratio: var(--inv-aspect);

  background-image: var(--inv);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  transform:
    translateX(var(--inv-offset-x))
    translateY(var(--inv-shift-y));

  pointer-events: auto;

  transition: filter 200ms ease, transform 200ms ease;
  filter: var(--button-shadow);
}

/* =========================
   HOME HOVER EFFECTS
   ========================= */

.topnav-home__item:hover,
.top-art:hover,
.bottom-art:hover,
.frame:hover,
.frame-shell:hover,
.inv-art:hover {
  z-index: var(--home-glow-layer);
  filter:
    var(--button-shadow)
    drop-shadow(0 0 10px var(--hover-glow))
    drop-shadow(0 0 22px var(--hover-glow));
}


/* =========================
   THEMES
   ========================= */

html.theme-day {
  --page-bg:
    radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.12) 100%),
    linear-gradient(140deg, #1f3328, #2a4034);

  --hover-glow: rgba(130, 200, 160, 0.55);
  --logo-image: url("/static/site_imgs/day.png");
  --logo-image: image-set(
    url("/static/site_imgs/generated/day-1000.webp") type("image/webp"),
    url("/static/site_imgs/generated/day-1000.png") type("image/png"),
    url("/static/site_imgs/generated/day-1112.webp") type("image/webp"),
    url("/static/site_imgs/day.png") type("image/png")
  );
}

html.theme-night {
  --page-bg:
    radial-gradient(circle at center, rgba(0,0,0,0) 60%, rgba(0,0,0,0.14) 100%),
    linear-gradient(140deg, #2f2841, #1a1d2a);

  --hover-glow: rgba(165, 175, 255, 0.58);

  --logo-image: url("/static/site_imgs/night.png");
  --logo-image: image-set(
    url("/static/site_imgs/generated/night-1000.webp") type("image/webp"),
    url("/static/site_imgs/generated/night-1000.png") type("image/png"),
    url("/static/site_imgs/generated/night-1112.webp") type("image/webp"),
    url("/static/site_imgs/night.png") type("image/png")
  );

  --frame-left: url("/static/site_imgs/l_box_b.png");
  --frame-left: image-set(url("/static/site_imgs/generated/l_box_b-1000.png") type("image/png"), url("/static/site_imgs/l_box_b.png") type("image/png"));
  --frame-right: url("/static/site_imgs/r_box_b.png");
  --frame-right: image-set(url("/static/site_imgs/generated/r_box_b-1000.png") type("image/png"), url("/static/site_imgs/r_box_b.png") type("image/png"));
}

/*
  Mobile artwork tiers are selected against the largest rendered size in this
  breakpoint. The density descriptors prevent high-DPR screens from receiving
  a tier that would need browser upscaling while avoiding 1000px downloads for
  the common 2x case.
*/
@media (max-width: 600px) {
  :root {
    --frame-left: url("/static/site_imgs/generated/l_box_b-320.png");
    --frame-left: image-set(
      url("/static/site_imgs/generated/l_box_b-320.png") 2x,
      url("/static/site_imgs/generated/l_box_b-640.png") 4x,
      url("/static/site_imgs/generated/l_box_b-1000.png") 6.2x,
      url("/static/site_imgs/l_box_b.png") 6.4x
    );
    --frame-right: url("/static/site_imgs/generated/r_box_b-320.png");
    --frame-right: image-set(
      url("/static/site_imgs/generated/r_box_b-320.png") 2x,
      url("/static/site_imgs/generated/r_box_b-640.png") 4x,
      url("/static/site_imgs/generated/r_box_b-1000.png") 6.2x,
      url("/static/site_imgs/r_box_b.png") 6.4x
    );
    --frame-left-secondary: url("/static/site_imgs/generated/l_box_b2-320.png");
    --frame-left-secondary: image-set(
      url("/static/site_imgs/generated/l_box_b2-320.png") 2x,
      url("/static/site_imgs/generated/l_box_b2-640.png") 4x,
      url("/static/site_imgs/generated/l_box_b2-1000.png") 6.2x,
      url("/static/site_imgs/l_box_b2.png") 6.4x
    );
    --frame-right-secondary: url("/static/site_imgs/generated/r_box_b2-320.png");
    --frame-right-secondary: image-set(
      url("/static/site_imgs/generated/r_box_b2-320.png") 2x,
      url("/static/site_imgs/generated/r_box_b2-640.png") 4x,
      url("/static/site_imgs/generated/r_box_b2-1000.png") 6.2x,
      url("/static/site_imgs/r_box_b2.png") 6.4x
    );
  }

  html.theme-day {
    --logo-image: url("/static/site_imgs/generated/day-640.png");
    --logo-image: image-set(
      url("/static/site_imgs/generated/day-640.webp") type("image/webp") 3.5x,
      url("/static/site_imgs/generated/day-640.png") type("image/png") 3.5x,
      url("/static/site_imgs/generated/day-1000.webp") type("image/webp") 5.5x,
      url("/static/site_imgs/generated/day-1000.png") type("image/png") 5.5x,
      url("/static/site_imgs/generated/day-1112.webp") type("image/webp") 6.1x,
      url("/static/site_imgs/day.png") type("image/png") 6.1x
    );
  }

  html.theme-night {
    --logo-image: url("/static/site_imgs/generated/night-640.png");
    --logo-image: image-set(
      url("/static/site_imgs/generated/night-640.webp") type("image/webp") 3.5x,
      url("/static/site_imgs/generated/night-640.png") type("image/png") 3.5x,
      url("/static/site_imgs/generated/night-1000.webp") type("image/webp") 5.5x,
      url("/static/site_imgs/generated/night-1000.png") type("image/png") 5.5x,
      url("/static/site_imgs/generated/night-1112.webp") type("image/webp") 6.1x,
      url("/static/site_imgs/night.png") type("image/png") 6.1x
    );

    --frame-left: url("/static/site_imgs/generated/l_box_b-320.png");
    --frame-left: image-set(
      url("/static/site_imgs/generated/l_box_b-320.png") 2x,
      url("/static/site_imgs/generated/l_box_b-640.png") 4x,
      url("/static/site_imgs/generated/l_box_b-1000.png") 6.2x,
      url("/static/site_imgs/l_box_b.png") 6.4x
    );
    --frame-right: url("/static/site_imgs/generated/r_box_b-320.png");
    --frame-right: image-set(
      url("/static/site_imgs/generated/r_box_b-320.png") 2x,
      url("/static/site_imgs/generated/r_box_b-640.png") 4x,
      url("/static/site_imgs/generated/r_box_b-1000.png") 6.2x,
      url("/static/site_imgs/r_box_b.png") 6.4x
    );
  }
}