/* =============================================================
   Premium layer — Preloader / Cursor / Marquee / Noise / Magnetic
============================================================= */

/* Hide default cursor on pointer devices (not touch) */
@media (hover: hover) and (pointer: fine) {
  html, body, a, button, .btn, .store-card, .news-item,
  .biz-card, .pref-btn, .site-nav a {
    cursor: none;
  }
}

/* =============================================================
   1. PRELOADER
============================================================= */
.preloader {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity .8s var(--ease), visibility .8s;
}
.preloader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader__circle {
  position: absolute;
  width: 20px; height: 20px;
  background: var(--yellow);
  border-radius: 50%;
  animation: preloadBurst 1.8s var(--ease) forwards;
  animation-delay: 0.2s;
}
@keyframes preloadBurst {
  0%   { transform: scale(1); opacity: 1; }
  60%  { transform: scale(4); opacity: 1; }
  100% { transform: scale(220); opacity: 1; }
}
.preloader__logo {
  position: relative; z-index: 2;
  width: 160px; height: auto;
  opacity: 0;
  animation: preloadLogo 1.2s var(--ease) forwards;
  animation-delay: 0.5s;
}
@keyframes preloadLogo {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
.preloader__text {
  position: absolute;
  bottom: 15%; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  opacity: 0;
  white-space: nowrap;
  animation: preloadText .8s var(--ease) forwards;
  animation-delay: 1.2s;
  z-index: 3;
}
@keyframes preloadText {
  0%   { opacity: 0; transform: translate(-50%, 10px); }
  100% { opacity: 1; transform: translate(-50%, 0); }
}
.preloader__progress {
  position: absolute;
  bottom: 48px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-display);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--ink);
  opacity: 0.6;
  z-index: 3;
}

/* =============================================================
   2. CUSTOM CURSOR
============================================================= */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  will-change: transform;
  opacity: 0;
  transition: opacity .3s, width .3s var(--ease), height .3s var(--ease),
              background .3s, border-color .3s, mix-blend-mode .3s;
}
.cursor-dot {
  width: 8px; height: 8px;
  background: var(--yellow);
  border-radius: 50%;
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  mix-blend-mode: difference;
  transition: transform .4s var(--ease-back), width .4s var(--ease-back),
              height .4s var(--ease-back), border-color .3s, opacity .3s;
}
.cursor-dot.is-visible,
.cursor-ring.is-visible { opacity: 1; }
.cursor-ring.is-hover {
  width: 64px; height: 64px;
  border-color: var(--yellow);
  background: rgba(255,229,0,0.1);
}
.cursor-dot.is-hover {
  width: 4px; height: 4px;
}
.cursor-ring.is-hold {
  width: 24px; height: 24px;
  background: var(--yellow);
  border-color: var(--yellow);
}
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* =============================================================
   3. MARQUEE
============================================================= */
.marquee {
  background: var(--yellow);
  color: var(--ink);
  padding: 28px 0;
  overflow: hidden;
  position: relative;
  border-top: 1px solid rgba(0,0,0,0.1);
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.marquee--dark {
  background: var(--ink);
  color: var(--yellow);
}
.marquee__track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  font-family: var(--ff-serif);
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 48px;
  flex-shrink: 0;
}
.marquee__item::after {
  content: '●';
  font-size: 0.35em;
  color: var(--ink);
  opacity: 0.6;
}
.marquee--dark .marquee__item::after { color: var(--yellow); }
.marquee__item em {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 0.85em;
  opacity: 0.85;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Store names marquee (smaller) */
.marquee--stores {
  background: var(--paper);
  border-top: 1px solid var(--ink-10);
  border-bottom: 1px solid var(--ink-10);
  padding: 18px 0;
}
.marquee--stores .marquee__track { animation-duration: 60s; gap: 32px; }
.marquee--stores .marquee__item {
  font-family: var(--ff-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-40);
  letter-spacing: 0.1em;
  gap: 32px;
}
.marquee--stores .marquee__item::after { content: '/'; color: var(--yellow-dim); opacity: 1; font-size: 1em; }

/* =============================================================
   4. NOISE / GRAIN overlay
============================================================= */
.noise {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

/* =============================================================
   5. HERO LINE ANIMATION (行単位のフェード)
   —— 旧 split-char は廃止。横書きの自然な折り返しを保つ。
============================================================= */
.hero-line {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  will-change: opacity, transform;
}
.hero-line.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Hero/Sub-Hero title — 横書き前提の安全設計 */
.hero__title,
.hero__title > span,
.sub-hero__title,
.sub-hero__title > span {
  overflow: visible !important;
  line-height: 1.5 !important;
  word-break: normal;
  overflow-wrap: normal;
  line-break: strict;
  white-space: normal;
}
.hero__title > span,
.sub-hero__title > span {
  display: block;
  max-width: 100%;
}

/* em (イエローハイライト) の縦方向見切れを防ぐ */
.hero__title em,
.sub-hero__title em,
.section__title em {
  line-height: 1.3;
  padding: 0.05em 0.18em;
}

/* ==== Hero フォント & レイアウト ==== */
.hero__title { font-size: clamp(32px, 4.2vw, 60px) !important; }
.sub-hero__title { font-size: clamp(36px, 5.4vw, 72px) !important; }

.hero__inner {
  grid-template-columns: 1.2fr 1fr !important;
}
.hero__content {
  max-width: 760px !important;
  padding: 80px 40px 80px 56px !important;
}

/* タブレット(1100px 以下)で早めに縦スタック */
@media (max-width: 1100px) {
  .hero__inner {
    grid-template-columns: 1fr !important;
  }
  .hero__content {
    padding: 60px 32px !important;
    order: 2;
    max-width: 100% !important;
  }
  .hero__visual {
    order: 1 !important;
    clip-path: none !important;
    min-height: 45vh !important;
    padding: 48px 32px !important;
  }
  .hero__visual::before,
  .hero__visual::after { display: none !important; }
  .hero__logo-img { width: 280px !important; }
  .hero__scroll { display: none !important; }
}

/* =============================================================
   6. MAGNETIC BUTTONS (base only; JS drives)
============================================================= */
.btn {
  transition: transform .4s var(--ease-back), box-shadow .3s, background .3s, color .3s;
  will-change: transform;
}

/* =============================================================
   7. SCROLL PROGRESS RING (bottom-right)
============================================================= */
.scroll-dot {
  position: fixed;
  right: 32px; bottom: 32px;
  width: 56px; height: 56px;
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.scroll-dot.is-visible { opacity: 1; }
.scroll-dot svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.scroll-dot circle { fill: none; stroke-width: 2; }
.scroll-dot .bg { stroke: rgba(0,0,0,0.1); }
.scroll-dot .fg { stroke: var(--ink); stroke-dasharray: 157; stroke-dashoffset: 157; transition: stroke-dashoffset .1s; }
.scroll-dot span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em;
}

/* =============================================================
   8. (removed) dead vertical-rl rule — 使用されず、文字が
      縦書きで見切れる事故の温床だったため削除
============================================================= */

/* =============================================================
   Responsive adjustments
============================================================= */
@media (max-width: 768px) {
  .cursor-dot, .cursor-ring { display: none; }
  html, body, a, button, .btn { cursor: auto; }
  .marquee__item { font-size: 24px; gap: 32px; }
  .marquee { padding: 20px 0; }
  .scroll-dot { display: none; }
  .section--numbered::before { display: none; }
  .preloader__logo { width: 120px; }
  .preloader__text { font-size: 16px; bottom: 20%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .split-char { opacity: 1; transform: none; transition: none; }
  .preloader__circle, .preloader__logo, .preloader__text { animation: none; }
}