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


/* =============================================================
   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;
}

/* =============================================================
   4. NOISE / GRAIN overlay
============================================================= */
.noise {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.028;
  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) {
  html, body, a, button, .btn { cursor: auto; }
  .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) {
  .split-char { opacity: 1; transform: none; transition: none; }
  .preloader__circle, .preloader__logo, .preloader__text { animation: none; }
}