body {
  &:has(.landing-page) {
    --unit: 8px;
    --c-spacing: var(--unit);
    --gap: var(--unit);
    --rounded: var(--unit);

    display: flex;
    flex-direction: column;
    block-size: 100dvh;
    overflow-x: clip;
    scrollbar-gutter: stable both-edges;
    word-break: break-all;
  }
}


/*==================================
                Header
====================================*/
#mainNav.landing-header {
  padding-block: calc(2 * var(--c-spacing));
  h1 {
    margin: 0 auto;
    align-content: center;
  }
  .navbar-brand {
    display: block;
    width: 20rem;
    @media (width > 480px) {
      width: 24rem;
    }
    @media (width > 1024px) {
      width: 28rem;
    }
  }
} 

/*==================================
                Banner
====================================*/
.landing-page {
  --white: #fff;
  --black: #000;
  --orange-500: #f97316;
  --amber-300: #fcd34d;
  --orange-300: #fdba74;
  --rose-200: #fecdd3;
  --red-400: #f87171;
  --transparent: transparent;
  --aurora: repeating-linear-gradient(
    100deg,
    var(--orange-500) 10%,
    var(--amber-300) 15%,
    var(--orange-300) 20%,
    var(--rose-200) 25%,
    var(--red-400) 30%
  );
  --white-gradient: repeating-linear-gradient(
    100deg,
    var(--white) 0%,
    var(--white) 7%,
    var(--transparent) 10%,
    var(--transparent) 12%,
    var(--white) 16%
  );
  --dark-gradient: repeating-linear-gradient(
    100deg,
    var(--black) 0%,
    var(--black) 7%,
    var(--transparent) 10%,
    var(--transparent) 12%,
    var(--black) 16%
  );
  flex: 1 0 auto;
  position: relative;
  padding-block-start: 0;
  overflow: hidden;
  .bg {
    opacity: 0.3;
    pointer-events: none;
    position: absolute;
    inline-size: 100vw;
    block-size: 100vh;
    inset: -10px;
    mask-image: radial-gradient(
      ellipse at 100% 0,
      #000 10%,
      var(--transparent) 70%
    );
    background-size: 300%, 200%;
    background-position:
      50% 50%,
      50% 50%;
    background-image: var(--white-gradient), var(--aurora);
    filter: blur(10px) invert(100%);
    &:after {
      content: "";
      position: absolute;
      inset: 0;
      background-size: 200%, 100%;
      background-image: var(--white-gradient), var(--aurora);
      background-attachment: fixed;
      mix-blend-mode: difference;
      animation: aurora 60s linear infinite;
    }
  }
}
@keyframes aurora {
  0% {
    content: "";
    background-position:
      50% 50%,
      50% 50%;
  }
  to {
    content: "";
    background-position:
      350% 50%,
      350% 50%;
  }
}
.slick-banner {
  picture, img {
    display: block;
    inline-size: 100%;
  }
}

/*==================================
                 Plan
====================================*/
.sec-plan {
  padding-block: calc(5 * var(--c-spacing));
  .row {
    row-gap: calc(2 * var(--gap));
  }
}
@property --fade {
  syntax: '<length>';
  inherits: false;
  initial-value: 24px;
}
.plan {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: calc(3 * var(--c-spacing));
  overflow: clip;
  @media (width > 1024px) {
    aspect-ratio: 3 / 1;
    border-radius: calc(5 * var(--c-spacing));
  }
  &:before {
    opacity: .6;
    z-index: 1;
    pointer-events: none;
    content: '';
    position: absolute;
    inset: 0;
  }
  &.plan-1 {
    &:before { background-color: #DE7272; }
    .plan-title { --title-bg: oklch(0.68 0.14 21.28 / .35); }
  }
  &.plan-2 {
    &:before { background-color: #ec7b21; }
    .plan-title { --title-bg: oklch(0.70 0.17 52.59 / .35); }
  }

  .plan-link {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    align-items: center;
    position: absolute;
    inset: 0;
    &:focus-visible {
      .plan-title {
        block-size: 100%;
        --fade: 0px;
      }
      .plan-text {
        opacity: 1;
        translate: 0 0;
      }
    }
    &:not(:has(.plan-text)) {
      pointer-events: none;
      cursor: default;
    }
    @media (width <= 1024px) {
      .plan-title {
        /* padding-block-end: calc(3 * var(--c-spacing)); */
        --fade: 24px;
      }
      .plan-text {
        opacity: 1;
        translate: 0 0;
      }
    }
    @media (hover: hover) and (width > 1024px) {
      &:has(.plan-text) {
        &:hover {
          .plan-title {
            padding-block-end: calc(7 * var(--c-spacing)); 
            block-size: 100%;
            --fade: 0px;
          }
          .plan-text {
            opacity: 1;
            translate: 0 0;
          }
        }         
      }
    }
  }
  .plan-title, .plan-text {
    z-index: 2;
    grid-area: 1 / 1;
    color: var(--white);
    font-weight: 700;
  }
  .plan-title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block-end: 0;
    padding: var(--c-spacing) calc(4 * var(--c-spacing));
    inline-size: 100%;
    block-size: 130px;
    text-align: center;
    text-shadow: 0 0 8px oklch(0 0 0 / 0.75);
    letter-spacing: 0.02em;
    transition: block-size .3s, --fade .3s, padding .3s;
    @media (width > 480px) {
      block-size: 150px; /* 80px */
    }
    @media (width > 1024px) {
      block-size: 150px; /* 130px */
    }
    &:before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background-color: var(--title-bg);
      backdrop-filter: blur(1px);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
    }
  }
  .plan-title, .plan-title p {
    font-size: 22px;
    line-height: 120%;
    @media (width > 1024px) {
      font-size: 34px;
    }
    small {
      display: block;
      margin-block-start: calc(.5 * var(--c-spacing));
      font-size: 18px;
    }
  }
  .plan-text {
    opacity: 0;
    align-self: end;
    justify-self: center;
    margin-block-end: calc(2 * var(--c-spacing));
    padding: calc(.5 * var(--c-spacing)) calc(3 * var(--c-spacing));
    background-color: oklch(0 0 0 / .25);
    font-size: 16px;
    border: 1px solid currentColor;
    border-radius: 999px;
    transition: opacity .3s, translate .3s;
    translate: 0 8px;
    @media (width > 1024px) {
      margin-block-end: calc(5 * var(--c-spacing));
      font-size: 18px;
    }
  }
  .plan-bg {
    pointer-events: none;
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.05);
  }
}

/*==================================
                Footer
====================================*/
.landing-footer {
  flex-shrink: 0;
  padding-block: calc(3 * var(--c-spacing));
  background-color: #F2F2F2;
  .landing-footer-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(2 * var(--gap));
  }
  .landing-footer-link {
    display: block;
    line-height: 0;
  }
  .img-fluid {
    --ar: 1;        /* 寬 / 高 */
    --base: 80;

    height: auto;
    width: calc(pow(var(--ar), 0.6) * var(--base) * 1px);
    aspect-ratio: var(--ar);
    max-width: 100%;
    @media (width > 1024px) {
      --base: 120;
    }
    &.img-aoc {
      --ar: 2.8; 
    }
    &.img-csd {
      --ar: 3.82;
    }
  }
}