/* TOP 「BUB RESORTとは」 (みっくん FB-33, 2026-10-05): the concept, activities, all-inclusive and meals.
   A statement first, then three points that step down the ASAMOYA band in the activity wall's
   language: hand-drawn circle, square and triangle photos that float like the wall, each carrying its
   figure as a sticker (ink with a band-coloured outline), words beside. Figures come from the owner's
   brief; motion is skipped for reduced motion. */
.ref-intro.ref-section { position: relative; width: 100%; background: var(--surface); }
.ref-intro::before, .ref-intro::after { content: ""; position: absolute; left: 0; right: 0; height: 18px; z-index: 1; pointer-events: none; -webkit-mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat; mask: url('/assets/images/top-handdrawn-edge.png') center -72px / 140% 198px no-repeat; }
.ref-intro::before { top: -17px; background: var(--surface); }
.ref-intro::after { bottom: -1px; background: var(--paper); }
.ref-intro-layout { width: min(calc(100% - var(--gutter) * 2), var(--content)); margin-inline: auto; }

.ref-intro .ref-section-head { margin-bottom: 32px; }
.ref-intro-eyebrow { margin: 0 0 12px; color: var(--top-body-ink); font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: .04em; }
.ref-intro .ref-section-head h2.ref-intro-eyebrow { margin: 0; font-size: var(--top-feature-size); line-height: var(--top-feature-line); letter-spacing: .04em; }
@media (max-width: 767px) { .ref-intro .ref-section-head h2.ref-intro-eyebrow { font-size: 20px; line-height: 30px; } }
@media (max-width: 359px) { .ref-intro .ref-section-head h2.ref-intro-eyebrow { font-size: 18px; line-height: 28px; } }
.ref-intro .ref-section-head > p:last-child { max-width: 34em; margin-top: 16px; }
.ref-intro .ref-section-head > p.ref-intro-summary { grid-column: 1 / -1; max-width: 48em; margin: 12px 0 0; color: var(--top-body-ink); font-size: 14px; line-height: 24px; font-weight: 400; }

.ref-intro-points { display: grid; gap: 36px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.ref-intro-points li { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 22px; align-items: center; }
.ref-intro-points li:nth-child(even) { grid-template-columns: minmax(0, 1fr) 148px; }
.ref-intro-points li:nth-child(even) .ref-intro-visual { order: 2; }
.ref-intro-visual { position: relative; }
.ref-intro-art { display: block; aspect-ratio: 1; -webkit-mask: var(--intro-mask) center / 100% 100% no-repeat; mask: var(--intro-mask) center / 100% 100% no-repeat; }
.ref-intro-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The figure sits on the photo's outer corner like a sticker, outlined in the band colour. */
.ref-intro-figure { position: absolute; right: -6px; bottom: -10px; color: var(--ink); font: 700 46px/1 var(--font-num), var(--font-ja); letter-spacing: -.02em; -webkit-text-stroke: 7px var(--surface); paint-order: stroke fill; }
.ref-intro-points li:nth-child(even) .ref-intro-figure { right: auto; left: -6px; }
/* Hand-placed: each sticker leans a little, alternately. */
.ref-intro-points li:nth-child(1) .ref-intro-figure { rotate: -6deg; }
.ref-intro-points li:nth-child(2) .ref-intro-figure { rotate: 5deg; }
.ref-intro-points li:nth-child(3) .ref-intro-figure { rotate: -4deg; }
.ref-intro-figure small { margin-left: 1px; font-size: 22px; letter-spacing: 0; }
.ref-intro-index { display: block; margin-bottom: 6px; color: var(--muted); font: 500 12px/16px var(--font-num), var(--font-ja); letter-spacing: .1em; }
.ref-intro-copy h3 { font-size: 17px; line-height: 26px; font-weight: 700; }
.ref-intro-copy h3 + p { margin-top: 6px; color: var(--top-body-ink); font-size: 14px; line-height: 22px; }
.ref-intro-note { margin-top: 40px; color: var(--muted); font-size: 12px; line-height: 20px; }

/* Motion: the photos float on the wall's loop; each point rises in as it scrolls into view. */
@keyframes ref-intro-float { 0%, 100% { translate: 0 0; } 25% { translate: 3px -4px; } 50% { translate: 0 -6px; } 75% { translate: -3px -2px; } }
@keyframes ref-intro-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ref-intro-art { animation: ref-intro-float 7s ease-in-out infinite; animation-play-state: paused; }
  .ref-intro-art[data-motion-active="true"] { animation-play-state: running; }
  .ref-intro-points li:nth-child(2) .ref-intro-art { animation-duration: 8s; animation-delay: -2s; }
  .ref-intro-points li:nth-child(3) .ref-intro-art { animation-duration: 9s; animation-delay: -4s; }
  @supports (animation-timeline: view()) {
    .ref-intro-points li { animation: ref-intro-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  }
}

@media (min-width: 768px) {
  .ref-intro .ref-section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; margin-bottom: 40px; }
  .ref-intro-eyebrow { grid-column: 1 / -1; }
  .ref-intro .ref-section-head > p:last-child { margin-top: 0; }
  .ref-intro .ref-section-head > p.ref-intro-summary { margin-top: 14px; font-size: 16px; line-height: 28px; }
  /* Four points since the crew joined (owner, 2026-10-14): クルー / 20+ / 0円 / 旬, as on /about/. */
  .ref-intro-points { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; align-items: start; }
  .ref-intro-points li, .ref-intro-points li:nth-child(even) { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .ref-intro-points li:nth-child(even) .ref-intro-visual { order: 0; }
  .ref-intro-points li:nth-child(2) { margin-top: 72px; }
  .ref-intro-visual { width: min(100%, 240px); }
  .ref-intro-figure, .ref-intro-points li:nth-child(even) .ref-intro-figure { right: -14px; left: auto; bottom: -12px; font-size: 64px; -webkit-text-stroke-width: 9px; }
  .ref-intro-figure small { font-size: 28px; }
  .ref-intro-copy h3 { font-size: var(--top-card-size); line-height: var(--top-card-line); }
  .ref-intro-copy h3 + p { margin-top: 8px; font-size: var(--top-body-size); line-height: var(--top-body-line); }
  .ref-intro-note { margin-top: 56px; font-size: var(--top-meta-size); }
}
.ref-intro .ref-intro-more { justify-content: center; margin-top: 32px; }
@media (min-width: 768px) { .ref-intro .ref-intro-more { margin-top: 48px; } }
/* Each point opens its own page (owner, 2026-10-14): the whole card is the link, no arrow; 詳しく見る stays /about/. */
.ref-intro-points li { position: relative; }
.ref-intro-link { color: inherit; text-decoration: none; }
.ref-intro-link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.ref-intro-link:focus-visible { outline: none; }
.ref-intro-points li:has(.ref-intro-link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 12px; }
@media (hover: hover) { .ref-intro-points li:hover .ref-intro-link { text-decoration: underline; text-underline-offset: 3px; } }

/* TOP コンセプト band (みっくん FB 58・60 10/14; owner 10/15, plan B): the statement in the hero's type, then 親 and
   子 face each other — one real photograph each in the activity wall's hand-drawn frame, floating like
   「BUB RESORTとは」, with its line of 余白 under it. */
.ref-concept.ref-section { position: relative; width: 100%; padding: 56px 0 32px; background: var(--paper); }
.ref-concept-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; width: min(calc(100% - var(--gutter) * 2), var(--content)); margin: 0 auto; }
.ref-concept-title { grid-column: 1 / -1; margin-bottom: 8px; }
.ref-text-home .ref-concept-title.ref-head-row { align-items: flex-end; }
/* The link's text bottom sits on the heading's last line, not on its box. */
.ref-text-home .ref-concept-title.ref-head-row > .button.ref-view-all { margin-bottom: -4px; }
.ref-text-home .ref-concept-title.ref-head-row > h2 { margin: 0; color: var(--ink); font-size: min(32px, calc((100vw - 186px) / 6.1)); line-height: 1.4; font-weight: 700; letter-spacing: normal; }
.ref-concept h2 span, .ref-concept-fig figcaption span { display: block; }
/* 「きっかけが／未来をつくる」 is always two lines (owner, 2026-10-15): each half stays whole, and on narrow
   phones the size gives way so it still fits beside the link. */
.ref-concept h2 span { white-space: nowrap; }
.ref-concept-fig { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: center; gap: 14px; margin: 0; }
.ref-concept-fig.is-child { margin-top: 40px; }
.ref-concept-art { display: block; width: 100%; aspect-ratio: 1; -webkit-mask: var(--concept-mask) center / 100% 100% no-repeat; mask: var(--concept-mask) center / 100% 100% no-repeat; animation: ref-intro-float 9s ease-in-out infinite; }
.ref-concept-fig.is-child .ref-concept-art { animation-delay: -4s; }
.ref-concept-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ref-concept-fig figcaption { color: var(--ink); font-size: 16px; line-height: 1.6; font-weight: 700; text-align: center; }
/* On wider screens the band keeps the phone's composition: one compact unit, the parent photo
   under the heading's left edge and the child photo ending under the link. */
@media (min-width: 768px) {
  .ref-concept.ref-section { padding: 96px 0 40px; }
  .ref-concept-stage { width: min(calc(100% - var(--gutter) * 2), 640px); column-gap: 64px; row-gap: 40px; }
  .ref-text-home .ref-concept-title.ref-head-row > h2 { font-size: 40px; }
  .ref-text-home .ref-concept-title.ref-head-row > .button.ref-view-all { margin-bottom: -3px; }
  .ref-concept-fig.is-child { margin-top: 72px; }
  .ref-concept-fig figcaption { font-size: 18px; }
}
/* On the web the pair spreads over the full content width as a diagonal: the parent photo
   under the heading with its line to the right, the child photo under the link with its line
   to the left, so the middle holds words instead of empty space. */
@media (min-width: 1024px) {
  .ref-concept.ref-section { padding: 104px 0 64px; }
  .ref-concept-stage { width: min(calc(100% - var(--gutter) * 2), var(--content)); column-gap: 0; row-gap: 56px; }
  .ref-text-home .ref-concept-title.ref-head-row > h2 { font-size: 48px; }
  .ref-text-home .ref-concept-title.ref-head-row > .button.ref-view-all { margin-bottom: -1px; }
  .ref-concept-fig { display: flex; align-self: start; align-items: center; gap: 32px; width: max-content; }
  .ref-concept-fig.is-parent { justify-self: start; }
  .ref-concept-fig.is-child { justify-self: end; flex-direction: row-reverse; margin-top: 0; }
  .ref-concept-art { flex: none; width: 264px; }
  .ref-concept-fig figcaption { font-size: 21px; line-height: 1.6; text-align: left; }
  .ref-concept-fig.is-child figcaption { text-align: right; }
}
@media (min-width: 1280px) {
  .ref-concept-fig { gap: 40px; }
  .ref-concept-art { width: 352px; }
  .ref-concept-fig figcaption { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .ref-concept-art { animation: none; } }