---
---

<style is:inline th:if="${theme.config?.hero?.hero_title_color_light != null and theme.config?.hero?.hero_title_color_light != ''}" th:utext="${' :root { --hero-title-text: ' + theme.config?.hero?.hero_title_color_light + '; } '}">/*hero-title-light*/</style>
<style is:inline th:if="${theme.config?.hero?.hero_title_color_dark != null and theme.config?.hero?.hero_title_color_dark != ''}" th:utext="${' html.dark { --hero-title-text: ' + theme.config?.hero?.hero_title_color_dark + '; } '}">/*hero-title-dark*/</style>
<style is:inline th:if="${theme.config?.hero?.hero_subtitle_color_light != null and theme.config?.hero?.hero_subtitle_color_light != ''}" th:utext="${' :root { --hero-subtitle-text: ' + theme.config?.hero?.hero_subtitle_color_light + '; } '}">/*hero-subtitle-light*/</style>
<style is:inline th:if="${theme.config?.hero?.hero_subtitle_color_dark != null and theme.config?.hero?.hero_subtitle_color_dark != ''}" th:utext="${' html.dark { --hero-subtitle-text: ' + theme.config?.hero?.hero_subtitle_color_dark + '; } '}">/*hero-subtitle-dark*/</style>

<section
  class="hero"
  id="wi-hero"
  th:if="${theme.config?.hero?.hero_enabled != false}"
  th:classappend="${theme.config?.animation?.animation_breath == false} ? 'hero--no-breath'"
>
  <div class="hero__bg">
    <div class="hero__orb hero__orb--1"></div>
    <div class="hero__orb hero__orb--2"></div>
    <div class="hero__orb hero__orb--3"></div>
    <div
      class="hero__bg-image"
      th:if="${!#strings.isEmpty(theme.config?.hero?.hero_background_image) and #strings.isEmpty(theme.config?.hero?.hero_background_image_dark)}"
      th:style="'background-image: url(' + ${theme.config?.hero?.hero_background_image} + ')'"
    ></div>
    <div
      class="hero__bg-image"
      th:if="${#strings.isEmpty(theme.config?.hero?.hero_background_image) and !#strings.isEmpty(theme.config?.hero?.hero_background_image_dark)}"
      th:style="'background-image: url(' + ${theme.config?.hero?.hero_background_image_dark} + ')'"
    ></div>
    <div
      class="hero__bg-image hero__bg-image--light"
      th:if="${!#strings.isEmpty(theme.config?.hero?.hero_background_image) and !#strings.isEmpty(theme.config?.hero?.hero_background_image_dark)}"
      th:style="'background-image: url(' + ${theme.config?.hero?.hero_background_image} + ')'"
    ></div>
    <div
      class="hero__bg-image hero__bg-image--dark"
      th:if="${!#strings.isEmpty(theme.config?.hero?.hero_background_image) and !#strings.isEmpty(theme.config?.hero?.hero_background_image_dark)}"
      th:style="'background-image: url(' + ${theme.config?.hero?.hero_background_image_dark} + ')'"
    ></div>
  </div>

  <div class="hero__blur-overlay" id="wi-hero-blur-overlay"></div>

  <div class="hero__content" id="wi-hero-content">
    <h1
      class="hero__title"
      th:text="${theme.config?.hero?.hero_title != null and !#strings.isEmpty(theme.config?.hero?.hero_title) ? theme.config?.hero?.hero_title : site.title}"
    >
      暖屿
    </h1>
    <p
      class="hero__subtitle"
      th:text="${theme.config?.hero?.hero_subtitle != null and !#strings.isEmpty(theme.config?.hero?.hero_subtitle) ? theme.config?.hero?.hero_subtitle : site.subtitle}"
    >
      深夜里温暖的小岛
    </p>
    <p
      class="hero__description"
      th:if="${theme.config?.hero?.hero_description_mode == 'hitokoto'}"
      id="wi-hitokoto"
      th:attr="data-api=${theme.config?.hero?.hero_hitokoto_api ?: 'https://v1.hitokoto.cn/'},data-categories=${theme.config?.hero?.hero_hitokoto_categories},data-auto-refresh=${theme.config?.hero?.hero_hitokoto_auto_refresh == true ? 'true' : 'false'},data-refresh-interval=${theme.config?.hero?.hero_hitokoto_refresh_interval ?: 10000}"
    ></p>
    <p
      class="hero__description"
      th:if="${theme.config?.hero?.hero_description_mode == 'custom'}"
      th:text="${theme.config?.hero?.hero_custom_description}"
    ></p>
  </div>

  <button
    class="hero__scroll-indicator"
    id="wi-hero-scroll-indicator"
    type="button"
    aria-label="向下浏览"
  >
    <svg
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      aria-hidden="true"
    >
      <polyline points="6 9 12 15 18 9"></polyline>
    </svg>
  </button>
</section>

<script is:inline th:inline="none">
  /* Hero 下滑箭头：平滑滚动到首屏内容区 */
  (function () {
    var indicator = document.getElementById("wi-hero-scroll-indicator");
    if (!indicator) return;

    indicator.addEventListener("click", function () {
      var content = document.querySelector(".wi-home-content");
      var hero = document.getElementById("wi-hero");
      var top;

      if (content) {
        /* 与首页滚动吸附逻辑保持一致：内容区顶部对齐视口顶部，完全盖住固定背景的 Hero */
        top = content.getBoundingClientRect().top + window.pageYOffset;
      } else if (hero) {
        top = hero.offsetTop + hero.offsetHeight;
      } else {
        top = window.innerHeight;
      }

      var reduce =
        window.matchMedia &&
        window.matchMedia("(prefers-reduced-motion: reduce)").matches;

      window.scrollTo({
        top: Math.max(0, top),
        behavior: reduce ? "auto" : "smooth",
      });
    });
  })();

  (function () {
    var el = document.getElementById("wi-hitokoto");
    if (!el) return;

    var api = el.getAttribute("data-api") || "https://v1.hitokoto.cn/";
    var categories = el.getAttribute("data-categories");
    var autoRefresh = el.getAttribute("data-auto-refresh") === "true";
    var refreshInterval = parseInt(el.getAttribute("data-refresh-interval"), 10) || 10000;

    function buildUrl() {
      var url = api + "?encode=json";
      if (categories) {
        try {
          var cats = JSON.parse(categories);
          if (Array.isArray(cats)) {
            cats.forEach(function (c) {
              url += "&c=" + encodeURIComponent(c);
            });
          }
        } catch (e) {}
      }
      return url;
    }

    function load(initial) {
      if (initial) {
        el.style.opacity = "0.5";
        el.textContent = "\u2026";
      }

      return fetch(buildUrl())
        .then(function (res) {
          if (!res.ok) throw new Error("HTTP " + res.status);
          return res.json();
        })
        .then(function (data) {
          var text = data.hitokoto || "";
          var from = data.from || data.from_who || "";
          if (from) {
            text += " \u2014\u2014 " + from;
          }

          if (initial) {
            el.style.opacity = "1";
            el.textContent = text;
          } else {
            /* 自动刷新：淡出 → 换文案 → 淡入，避免生硬跳变 */
            el.style.opacity = "0";
            setTimeout(function () {
              el.textContent = text;
              el.style.opacity = "1";
            }, 280);
          }
        })
        .catch(function () {
          // 失败时恢复可见：首次为空，刷新时保留原文案
          el.style.opacity = "1";
          if (initial) el.textContent = "";
        });
    }

    load(true);

    // 自动刷新：仅在开启且间隔不小于 3 秒时启用，避免请求过于频繁
    if (autoRefresh && refreshInterval >= 3000) {
      setInterval(function () {
        load(false);
      }, refreshInterval);
    }
  })();
</script>

<style>
  .hero {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(
      160deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 85%, var(--accent) 15%) 40%,
      color-mix(in srgb, var(--bg) 90%, var(--mist-pink) 10%) 70%,
      var(--bg) 100%
    );
    width: 100%;
  }

  .hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .hero__blur-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    will-change: backdrop-filter;
    pointer-events: none;
  }

  .hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: breathe 5s ease-in-out infinite;
  }

  .hero__orb--1 {
    width: 420px;
    height: 420px;
    top: -10%;
    right: -5%;
    background: radial-gradient(
      circle,
      rgba(212, 118, 78, 0.4) 0%,
      transparent 70%
    );
    animation-delay: 0s;
    animation-duration: 5s;
  }

  .hero__orb--2 {
    width: 350px;
    height: 350px;
    bottom: -8%;
    left: -5%;
    background: radial-gradient(
      circle,
      rgba(220, 140, 160, 0.3) 0%,
      transparent 70%
    );
    animation-delay: -1.8s;
    animation-duration: 6s;
  }

  .hero__orb--3 {
    width: 300px;
    height: 300px;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(
      circle,
      rgba(180, 150, 200, 0.2) 0%,
      transparent 70%
    );
    animation-delay: -3.2s;
    animation-duration: 4.5s;
  }

  .hero__bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 1;
  }

  /* 深色模式背景图切换：未配置双图时不生效，保持单一背景图 */
  .hero__bg-image--dark,
  html.dark .hero__bg-image--light {
    display: none;
  }

  html.dark .hero__bg-image--dark {
    display: block;
  }

  .hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-xl);
    gap: var(--space-lg);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .hero__title {
    font-family: var(--font-sans);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--hero-title-text, var(--ink));
    line-height: var(--leading-tight);
    /* 背景图完整显示后，用轻投影保证文字在复杂图片上仍可读 */
    text-shadow: 0 1px 3px rgba(255, 253, 250, 0.6), 0 1px 14px rgba(255, 253, 250, 0.4);
  }

  html.dark .hero__title {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 14px rgba(0, 0, 0, 0.35);
  }

  .hero__subtitle {
    font-family: var(--font-body);
    font-size: var(--text-xl);
    color: var(--hero-subtitle-text, var(--ink-2));
    letter-spacing: 0.05em;
    line-height: var(--leading-normal);
    text-shadow: 0 1px 3px rgba(255, 253, 250, 0.6), 0 1px 10px rgba(255, 253, 250, 0.4);
  }

  html.dark .hero__subtitle {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 1px 10px rgba(0, 0, 0, 0.35);
  }

  .hero__description {
    font-size: var(--text-lg);
    color: var(--ink-2);
    line-height: var(--leading-relaxed);
    max-width: 560px;
    text-align: center;
    transition: opacity 0.3s ease;
    text-shadow: 0 1px 3px rgba(255, 253, 250, 0.55);
  }

  html.dark .hero__description {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  }

  .hero__scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    animation: scrollHint 2s ease-in-out infinite;
    transition: opacity 0.4s ease, color 0.2s ease, background 0.2s ease;
  }

  .hero__scroll-indicator:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
  }

  .hero__scroll-indicator:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .hero--no-breath .hero__orb {
    animation: none;
  }

  html.dark .hero {
    background: linear-gradient(
      160deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 85%, var(--accent) 12%) 40%,
      var(--bg) 100%
    );
  }

  html.dark .hero__orb--1 {
    background: radial-gradient(
      circle,
      rgba(232, 149, 95, 0.25) 0%,
      transparent 70%
    );
  }

  html.dark .hero__orb--2 {
    background: radial-gradient(
      circle,
      rgba(200, 120, 140, 0.18) 0%,
      transparent 70%
    );
  }

  html.dark .hero__orb--3 {
    background: radial-gradient(
      circle,
      rgba(160, 130, 180, 0.12) 0%,
      transparent 70%
    );
  }

  @media (max-width: 768px) {
    .hero__title {
      font-size: clamp(2.25rem, 10vw, 3.5rem);
    }

    .hero__orb--1 {
      width: 260px;
      height: 260px;
    }

    .hero__orb--2 {
      width: 220px;
      height: 220px;
    }

    .hero__orb--3 {
      width: 180px;
      height: 180px;
    }

    .hero__content {
      padding: var(--space-lg);
      gap: var(--space-md);
    }

    .hero__description {
      max-width: 90vw;
    }
  }
</style>