@charset "UTF-8";
/* =====================================================================
   Cool Summer Golf 2026 — 西武プリンスホテルズ＆リゾーツ
   Static landing page. Tokens pulled 1:1 from the Figma design.
   ===================================================================== */

/* ---- Reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; overflow-anchor: none; }
body { margin: 0; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

/* SP/PC 出し分け — sp-only は SP のみ表示 */
.max375, .max425, .max600 { display: none; }

/* ---- Tokens --------------------------------------------------------- */
:root {
  --navy:  #13384a;
  --blue:  #3080bf;
  --cyan:  #0fa6cb;
  --body:  #4a6675;
  --hero-deep: #154265;
  --cyan-pale: #d0f0f8;
  --paper: #E7F5FB;
  --tag-bg: #ecf7f6;
  --tag-bd: #daefee;
  --card-bd: rgba(17, 72, 96, .10);
  --card-sh: 0 4px 18px rgba(11, 55, 72, .07);
  --link-deep: #0a6c92;
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --accent: var(--blue);          /* overridden per section theme */
}

body {
  font-family: var(--sans);
  color: var(--body);
  background: var(--paper);
  line-height: 1.8;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* eyebrow keeps its own hue, independent of the section accent */
[data-theme="blue"] { --accent: var(--blue); --eyebrow: #3080bf; }
[data-theme="cyan"] { --accent: var(--cyan); --eyebrow: #28908b; }

/* ---- Layout helper -------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 1260px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
  /* Establish a stacking context so content sits above section backgrounds. */
  position: relative;
  z-index: 2;
}

/* ---- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  width: 100%;
  max-width: 262px;
  min-height: 60px;
  padding: 0px 28px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .03em;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(11, 55, 72, .08);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, background-color .25s;
}
/* sheen sweeps across on hover */
.btn::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  transition: left .6s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.btn:hover::before { left: 150%; }
.btn--ghost::before { background: linear-gradient(100deg, transparent, rgba(48, 128, 191, .14), transparent); }
.btn__arrow { position: relative; font-weight: 700; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(11, 55, 72, .16); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn:active { transform: translateY(0); }
.btn--solid { background: var(--accent); color: #fff; }
.btn--ghost { background: #fff; color: var(--link-deep); }

/* ====================================================================
   HERO
   ==================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 92vh, 1200px);
  overflow: hidden;
  color: #fff;
}
/* white wordmark, pinned to the hero's top-right corner */
.hero__logo {
  position: absolute;
  top: clamp(20px, 4vh, 40px);
  right: clamp(20px, 4vw, 56px);
  z-index: 2;
  width: clamp(150px, 20vw, 240px);
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0, 30, 42, .45));
}
/* Sits behind the hero text (.hero__inner, z-index:2). */
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__slide.is-active { opacity: 1; }
/* slow Ken Burns drift on the live slide — a touch of moving air */
@media (prefers-reduced-motion: no-preference) {
  .hero__slide.is-active { animation: kenburns 7s ease-out both; }
}
@keyframes kenburns {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, var(--hero-deep) 0%, rgba(21,66,101,.55) 22%, rgba(21,66,101,0) 46%),
    linear-gradient(to right, rgba(21,66,101,.45) 0%, rgba(21,66,101,0) 55%);
}
.hero__inner {
  position: relative;
  padding-block: 0 clamp(48px, 8vh, 80px);
}
.hero__eyebrow {
  display: flex; align-items: center; gap: 12px;
  color: #bfeaf3;
  font-weight: 500;
  letter-spacing: .055em;
  font-size: clamp(16px, 1.7vw, 22px);
  margin-bottom: 17px;
}
.hero__rule { display: block; width: 46px; height: 1px; background: #bfeaf3; opacity: .8; }
.hero__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(29px, 4.6vw, 40px);
  line-height: 1.7;
  letter-spacing: .084em;
  text-shadow: 0 2px 30px rgba(0, 30, 42, .4);
}
.hero__title .accent { color: #9fe7f4; }
.hero__lead {
  max-width: 22em;
  margin-top: 17px;
  font-size: clamp(14.5px, 1.5vw, 18px);
  line-height: 1.7;
  color: rgba(255, 255, 255, .92);
}
/* staged fade-up entrance — first impression hierarchy */
@media (prefers-reduced-motion: no-preference) {
  .hero__eyebrow, .hero__title, .hero__lead {
    opacity: 0;
    animation: heroIn .9s cubic-bezier(.16,1,.3,1) both;
  }
  .hero__eyebrow { animation-delay: .15s; }
  .hero__title  { animation-delay: .32s; }
  .hero__lead   { animation-delay: .54s; }
  /* hold the hero behind the intro veil; resumes (staged) as the veil lifts */
  html.intro-active:not(.intro-done) .hero__eyebrow,
  html.intro-active:not(.intro-done) .hero__title,
  html.intro-active:not(.intro-done) .hero__lead { animation-play-state: paused; }
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ====================================================================
   INTRO VEIL — one-time page-load reveal
   A cool gradient curtain holds for a beat, then lifts to hand off to
   the hero's staged entrance. Shown only when JS sets html.intro-active
   (in <head>), so no-JS visitors are never covered.
   ==================================================================== */
.intro {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 14%, rgba(159, 231, 244, .18), rgba(159, 231, 244, 0) 60%),
    linear-gradient(165deg, #0c4a6b 0%, var(--hero-deep) 48%, #0a2f47 100%);
  transform: translateY(-101%);   /* default (no JS): parked off-screen */
  visibility: hidden;
}
html.intro-active .intro { transform: none; visibility: visible; } /* shown instantly while loading */
html.intro-active.intro-done .intro {
  transform: translateY(-101%);
  visibility: hidden;
  transition: transform 1s cubic-bezier(.76, 0, .24, 1), visibility 0s linear 1s;
}
.intro__mark {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  color: #d8f3fa;
  font-weight: 500;
  letter-spacing: .14em;
  font-size: clamp(15px, 2vw, 20px);
}
.intro__rule { width: 64px; height: 1px; background: #9fe7f4; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  html.intro-active .intro__label { animation: introLabel .9s cubic-bezier(.16, 1, .3, 1) both; }
  html.intro-active .intro__rule  { animation: introRule .9s cubic-bezier(.16, 1, .3, 1) .12s both; }
}
@keyframes introLabel {
  from { opacity: 0; transform: translateY(10px); letter-spacing: .26em; }
  to   { opacity: 1; transform: none; letter-spacing: .14em; }
}
@keyframes introRule {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: .9; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}

/* ====================================================================
   CONCEPT
   ==================================================================== */
.concept {
  background: linear-gradient(180deg, #ffffff 0%, #e3f5fb 38%, #cfeaf6 100%);
  text-align: center;
  padding-block: clamp(64px, 10vw, 140px) clamp(30px, 5vw, 64px);
}
.concept__title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  font-size: clamp(24px, 4vw, 46px);
  line-height: 1.6;
  letter-spacing: .04em;
}
.concept__lead {
  max-width: 640px;
  margin: 20px auto 0;
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.85;
  color: var(--body);
}

/* ====================================================================
   STICKY CATEGORY NAV
   ==================================================================== */
.catnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--card-bd);
  transition: box-shadow .3s, transform .35s cubic-bezier(.16,1,.3,1);
}
.catnav.is-stuck { box-shadow: 0 6px 18px rgba(11, 55, 72, .08); }
/* once pinned, slide fully out of view on scroll-down and back in on scroll-up */
.catnav.is-stuck.is-hidden { transform: translateY(-100%); }
.catnav__list {
  display: flex;
  justify-content: space-around;
  gap: clamp(8px, 1.6vw, 32px);
  padding-block: 24px;
  overflow-x: auto;
  scrollbar-width: none;
}

.catnav__list li {
    flex: 1;
}
.catnav__list::-webkit-scrollbar { display: none; }
.catnav__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  position: relative;
  padding: 8px 14px 10px;
  border-bottom: 2px solid transparent;
}
/* underline grows from the centre on hover / active */
.catnav__link::after {
  content: "";
  position: absolute;
  left: 50%; right: 50%; bottom: -2px;
  height: 2px;
  background: var(--accent);
  transition: left .3s cubic-bezier(.16,1,.3,1), right .3s cubic-bezier(.16,1,.3,1);
}
.catnav__thumb {
  width: clamp(96px, 12vw, 160px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  transition: width .35s cubic-bezier(.16,1,.3,1), height .35s, opacity .3s, margin .3s;
}
.catnav__thumb img { width: 100%; height: 100%; object-fit: cover; }
.catnav__label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--body);
  font-weight: 700;
  font-size: clamp(12px, 1.4vw, 16px);
  white-space: nowrap;
}
.catnav__label b { color: var(--accent); font-size: 1.25em; }
.catnav__link:hover::after,
.catnav__link.is-active::after { left: 0; right: 0; }

/* compact mode once the user has scrolled past the hero */
.catnav.is-stuck .catnav__thumb {
  width: clamp(0px, 0px, 0px);
  height: 0;
  opacity: 0;
  margin-top: -4px;
}
.catnav.is-stuck .catnav__link { padding-block: 12px; }

/* ====================================================================
   CATEGORY SECTIONS + CAROUSEL
   ==================================================================== */
.cat {
  position: relative;
  padding-block: clamp(60px, 9vw, 120px) clamp(112px, 17vw, 212px);
  overflow: hidden;
}

#cat02, #cat04 {padding-block: clamp(60px, 9vw, 120px);}

#cat03 {
    padding-block: clamp(150px, 23vw, 300px) clamp(120px, 18vw, 240px);
}
.cat[data-theme="cyan"] { background: var(--cyan-pale); }
.cat[data-theme="cyan"]::before {
  /* soft high-altitude haze, echoing the figma background ellipses */
  content: "";
  position: absolute;
  left: 50%;
  top: -10%;
  width: 140%;
  height: 60%;
  transform: translateX(-50%);
  pointer-events: none;
}

.cat__intro {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 3vw, 32px);
  margin-bottom: clamp(20px, 2.6vw, 32px);
}
.cat__num {
  flex: 0 0 auto;
  align-self: flex-end;
  font-weight: 500;
  font-size: clamp(48px, 7vw, 76px);
  margin-bottom: 64px;
  line-height: 1.1;
  background: linear-gradient(165deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #fff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: .92;
  font-feature-settings: "tnum";
}
.cat__head {flex: 1 1 auto;min-width: 0;padding-top: 4px;margin-bottom: 32px;}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--eyebrow);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 16px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 4px; background: var(--eyebrow); }
.cat__title {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  font-size: clamp(21px, 3.2vw, 32px);
  line-height: 1.84;
  letter-spacing: .03em;
  margin: 13px 0;
}
.cat__lead {
  max-width: 640px;
  color: var(--body);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.85;
}
.pager {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  align-self: flex-end;
}
.pager__btn {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  color: var(--accent);
  font-size: 18px;
  transition: color .25s, transform .25s, opacity .25s;
}
.pager__btn[data-dir="prev"]:hover { transform: translateX(-4px); }
.pager__btn[data-dir="next"]:hover { transform: translateX(4px); }
.pager__btn:disabled { opacity: .3; cursor: default; }
.pager__btn:disabled:hover { transform: none; }
.pager__count { color: var(--body); font-weight: 500; font-size: 18px; white-space: nowrap; }
.pager__count b { color: var(--accent); }

/* carousel — left aligned to content, right bleeds off the viewport edge */
.carousel {
  margin-inline: calc(50% - 50vw);
}
.carousel__track {
  display: flex;
  align-items: stretch;
  gap: 30px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  cursor: grab;
}
.carousel__track.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
.carousel__track.is-dragging a { pointer-events: none; }
.carousel__track img { -webkit-user-drag: none; user-select: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* card */
.card {
  flex: 0 0 auto;
  width: min(450px, 84vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border: 1px solid var(--card-bd);
  border-radius: 3px;
  box-shadow: var(--card-sh);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s cubic-bezier(.16,1,.3,1);
}
/* accent hairline draws across the top edge on hover */
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 30%, #fff));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.card:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(11, 55, 72, .16); }
.card:hover::before { transform: scaleX(1); }
.card__media { width: 100%; aspect-ratio: 356 / 267; position: relative; overflow: hidden; background: #e7eef2; }
.card__media picture { display: block; width: 100%; height: 100%; }
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.card:hover .card__media img { transform: scale(1.05); }
/* cool light spotlight that tracks the cursor across the photo */
.card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
              rgba(159, 231, 244, .45), rgba(159, 231, 244, 0) 60%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.card:hover .card__media::after { opacity: 1; }
.card__noimg {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, #fff), color-mix(in srgb, var(--accent) 8%, #fff));
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: 14px;
}
.card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 1.8vw, 16px) clamp(12px, 2vw, 22px);
}
.card__name {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: .048em;
}
.card__catch {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--navy);
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.7;
  letter-spacing: .048em;
  margin-top: 4px;
}
.card__desc {
  margin-top: 16px;
  color: var(--body);
  font-size: 16px;
  line-height: 1.7;
}
.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.card__tags li {
  background: var(--tag-bg);
  border: 1px solid var(--tag-bd);
  border-radius: 12px;
  color: var(--accent);
  font-weight: 700;
  font-size: clamp(13px, 1.5vw, 16px);
  padding: 7px 18px;
  line-height: 1.5;
}
.card__body .btn {margin-top: auto;align-self: center;}
.card__tags { margin-bottom: 28px; }

/* prefecture badge: pinned to the card's top-left corner over the media */
li.card__pref {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 0;
  color: var(--accent);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .06em;
  padding: 7px 15px 7px 12px;
  box-shadow: 0 6px 16px rgba(11, 55, 72, .18);
}

/* collapsible description: clamp the copy, reveal the rest via the toggle */
.card.is-clamp .card__desc {
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* fade the last clamped line out into the card */
.card.is-clamp .card__desc::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.7em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
.card.is-clamp.is-open .card__desc {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.card.is-clamp.is-open .card__desc::after { content: none; }
.card__more {
  display: none;
  align-self: center;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 2px;
  border: 0;
  background: none;
  color: #3080bf;
  font-family: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .04em;
  line-height: 1.7;
  cursor: pointer;
}
.card.is-clamp .card__more { display: inline-flex; }
.card__more::after { content: "＋"; }
.card.is-open .card__more::after { content: "−"; }

/* ====================================================================
   PROMO BANNER
   ==================================================================== */
.promo {
  background: #fff;
  padding-block: clamp(48px, 7vw, 96px);
}
/* contained card: two background blocks (gradient text + faint image), not full-bleed */
.promo__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-radius: 4px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(185deg, #3080bf 9%, #6bc7f1 93%);
}
.promo__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(42px, 5.3vw, 64px) clamp(40px, 5vw, 60px);
  gap: clamp(40px, 5vw, 60px);
}
.promo__media {position: relative;min-height: 220px;}
.promo__media::after {
  content: "";
  position: absolute;
  width: 110%;
  aspect-ratio: 890/501;
  z-index: 5;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: url(
  ../images/bottom-bg.webp) center / cover;
  pointer-events: none;
}
.promo__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.84;
  letter-spacing: .03em;
}
.promo__lead {
  color: rgba(255, 255, 255, .86);
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.85;
}

/* ====================================================================
   FOOTER
   ==================================================================== */
.footer { background: var(--navy); color: rgba(255, 255, 255, .7); }
.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-block: 36px 30px;
  text-align: center;
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
}
.footer__nav a, .footer__brand a { transition: color .2s; }
.footer__nav a:hover, .footer__brand a:hover { color: #fff; }
.footer__copy {
  background: #eaf6fb;
  color: var(--link-deep);
  text-align: center;
  padding: 9px 16px;
  font-size: 12px;
}

/* ====================================================================
   SCROLL TO TOP
   ==================================================================== */
.totop {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 20px;
  box-shadow: 0 8px 22px rgba(11, 55, 72, .28);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s, background-color .25s;
  z-index: 60;
}
.totop:not([hidden]).show { opacity: 1; transform: translateY(0); }
.totop:hover { background: #256ba3; }
.totop.has-ball:hover { background: transparent; }

/* Hover label — a pill that slides out to the left of the ball. */
.totop__label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  white-space: nowrap;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(11, 55, 72, .22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) translateX(6px);
  transition: opacity .25s, transform .25s;
}
.totop:hover .totop__label,
.totop:focus-visible .totop__label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ====================================================================
   SCROLL REVEAL
   ==================================================================== */
.reveal { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(6px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1), filter .8s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ====================================================================
   RESPONSIVE — tablet / mobile
   ==================================================================== */
@media (max-width: 900px) {
  .cat__intro { flex-wrap: wrap; }
  .pager { align-self: auto; margin-left: auto; order: 3; }
  .cat__head { order: 2; flex-basis: 100%; }
  .cat__num { order: 1; }
}

@media (max-width: 600px) {
  body { font-size: 14px; }
  .max600 {display: inline;}

  /* catnav: grid 2 cột thay cho scroll ngang trên SP */
  .catnav__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px 10px;
    padding-block: 10px;
    overflow: visible;
  }
  .catnav__link {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 6px;
  }
  .catnav__thumb { width: 48px; flex: 0 0 48px; }
  .catnav__label {
    white-space: normal;
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
  }
  /* stuck: thu gọn thumb hẳn (flex-basis lẫn gap) để khỏi còn khoảng trắng */
  .catnav.is-stuck .catnav__thumb { flex-basis: 0; }
  .catnav.is-stuck .catnav__link { gap: 0; }

  .hero { min-height: 88vh; }
  .hero__title { line-height: 1.7; }
  .cat__intro { gap: 10px 16px; align-items: baseline; }
  .cat__num { font-size: 38px; }
  .pager { width: 100%; justify-content: flex-end; margin-top: 4px; }
  .card { width: 90vw; flex-direction: column; }
  .card__media { flex: unset; width: 100%; }
  .card__body { padding: 26px 24px 28px; }
  .card .btn { max-width: none; }
  .footer__nav { gap: 10px 20px; font-size: 13px; }
  .min600 { display: none;}
}

@media (max-width: 720px) {
  /* promo: stack the two blocks — faint image becomes a top banner */
  .promo__inner { grid-template-columns: 1fr; }
  .promo__media {order: -1;height: auto;min-height: 150px;aspect-ratio: 890/501;}
  .promo__media::after{width: 100%; right: 0;}
  .carousel { margin-left: unset;}
}

@media (max-width: 425px) {
  .max425 { display: inline; }
}

@media (max-width: 375px) {
  .max375 { display: inline; }
}

@media (max-width: 374px) {
  .card { width: 88vw; }
}

/* ====================================================================
   ACCESSIBILITY — reduced motion
   ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel__track { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .btn, .btn__arrow, .card__media img, .catnav__thumb, .catnav, .totop { transition: none; }
  .btn:hover, .card:hover .card__media img { transform: none; }
  /* polish pass: collapse continuous / decorative motion */
  .hero__bg, .hero__bg::after, .promo__inner, .progress { animation: none !important; }
  .card { transition: none; }
  .card:hover { transform: none; }
  .card::before, .btn::before, .card__media::after,
  .catnav__link::after { transition: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .catnav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ====================================================================
   POLISH PASS — professional motion (additive, all gated)
   ==================================================================== */

/* Scroll progress — thin reading-progress bar pinned to the very top.
   CSS scroll-driven only; degrades to an invisible 0-width bar elsewhere. */
.progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  z-index: 70;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .progress { animation: progressGrow linear both; animation-timeline: scroll(root); }
}
@keyframes progressGrow { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  /* Hero headline: clip-reveal rise instead of a plain fade (premium hierarchy) */
  .hero__title {
    clip-path: inset(0 0 110% 0);
    animation: heroTitleIn 1s cubic-bezier(.16,1,.3,1) .32s both;
  }

  /* Cool-light drift over the hero — evokes moving summer air, very subtle */
  .hero__bg::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(55% 45% at 72% 18%, rgba(159, 231, 244, .20), transparent 70%);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: airDrift 18s ease-in-out infinite alternate;
  }

  /* Living gradient on the埼玉 promo banner — slow, never loud */
  .promo__inner {
    background-size: 180% 180%;
    animation: promoGrad 16s ease-in-out infinite;
  }
}

@keyframes heroTitleIn {
  from { clip-path: inset(0 0 110% 0); opacity: 0; transform: translateY(16px); }
  to   { clip-path: inset(0 0 -10% 0); opacity: 1; transform: none; }
}
@keyframes airDrift {
  from { transform: translate3d(-3%, -2%, 0); }
  to   { transform: translate3d(4%, 3%, 0); }
}
@keyframes promoGrad {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Hero parallax — bg drifts slower than the page as it scrolls away (depth).
   Overscan the bg so the translate never exposes an edge. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__bg {
      inset: -7% 0;
      animation: heroParallax linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}
@keyframes heroParallax {
  from { transform: translateY(0); }
  to   { transform: translateY(7%); }
}

/* ====================================================================
   GOLF MOTIF — a real 3D golf ball (Three.js / WebGL) that replaces the
   back-to-top button: the canvas sits inside .totop and the ball spins idly
   (and on scroll). Clicking it returns to the top. Hidden by default —
   golfball3d.js reveals it only when WebGL is available and
   prefers-reduced-motion is off; otherwise the plain ↑ button stays as a
   fallback. */
.scrollball3d {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  pointer-events: none;
}
/* When the 3D ball is live, drop the button's blue chrome + arrow so only the
   ball shows. */
.totop.has-ball { background: transparent; box-shadow: none; }
.totop.has-ball .totop__arrow { display: none; }