/* ========================================
   Ultra Rich - 最上級演出
   ======================================== */

/* --- Smooth Scroll (全体) --- */
html.smooth-scroll {
  scroll-behavior: smooth;
}

/* --- Hero Particles (背景パーティクル) --- */
.hero-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hero-particle {
  position: absolute;
  width: 2px; height: 2px;
  background-color: rgba(255,255,255,.3);
  border-radius: 50%;
  animation: particleFloat linear infinite;
}

@keyframes particleFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
}

/* --- Hero Side Text (縦書き装飾) --- */
.hero__side-text {
  position: absolute;
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-size: 13px;
  font-weight: 300;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(255,255,255,.2);
}

.hero__side-text--left {
  left: 32px;
  top: 50%;
  transform: translateY(-50%);
}

.hero__side-text--right {
  right: 32px;
  bottom: 20%;
}

/* --- Parallax Section (視差背景) --- */
.parallax-bg {
  position: relative;
  overflow: hidden;
}

.parallax-bg__image {
  position: absolute;
  top: -20%; left: 0;
  width: 100%; height: 140%;
  object-fit: cover;
  will-change: transform;
}

/* --- Reveal Mask (マスクアニメーション) --- */
.mask-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease-out);
}

.mask-reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

/* --- Hover Underline Expand --- */
.hover-line {
  position: relative;
  display: inline;
}

.hover-line::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 100%; height: 1px;
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease-out);
}

.hover-line:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- Glassmorphism Card --- */
.glass-card {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  padding: 40px 28px;
  transition: background .4s ease, border-color .4s ease, transform .4s ease;
}

.glass-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
  transform: translateY(-4px);
}

/* --- Gradient Border Button --- */
.btn-gradient-border {
  position: relative;
  background: transparent;
  border: none;
  padding: 18px 52px;
  color: var(--color-text);
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 1;
}

.btn-gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  padding: 1px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-light), var(--color-border));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  transition: opacity .4s ease;
}

.btn-gradient-border:hover::before {
  background: linear-gradient(135deg, var(--color-accent-light), var(--color-accent), var(--color-accent-light));
}

.btn-gradient-border span {
  position: relative;
  z-index: 2;
}

/* --- Scroll Indicator Dots (右端) --- */
.scroll-dots {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 800;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.scroll-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: transparent;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}

.scroll-dot.is-active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  transform: scale(1.3);
}

.scroll-dot:hover {
  border-color: var(--color-accent);
}

/* --- Text Stroke Heading --- */
.text-stroke {
  font-family: var(--font-en);
  font-size: clamp(48px, 8vw, 100px);
  font-weight: 300;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-border);
  opacity: .15;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.text-stroke--accent {
  -webkit-text-stroke-color: var(--color-accent);
  opacity: .08;
}

/* --- Floating Badge --- */
.floating-badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px; height: 80px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: #fff;
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
  animation: floatRotate 8s ease-in-out infinite;
  z-index: 3;
  box-shadow: 0 4px 20px rgba(176, 144, 112, .3);
}

@keyframes floatRotate {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(5deg); }
}

/* --- Image Grid Mosaic --- */
.mosaic-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 80px;
  gap: 8px;
}

.mosaic-grid__item {
  overflow: hidden;
  position: relative;
}

.mosaic-grid__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}

.mosaic-grid__item:hover img {
  transform: scale(1.06);
}

.mosaic-grid__item--wide { grid-column: span 6; grid-row: span 3; }
.mosaic-grid__item--tall { grid-column: span 4; grid-row: span 4; }
.mosaic-grid__item--small { grid-column: span 4; grid-row: span 3; }
.mosaic-grid__item--medium { grid-column: span 4; grid-row: span 3; }

/* --- Hover Card with Line --- */
.line-card {
  position: relative;
  padding: 36px 24px;
  border: 1px solid var(--color-border-light);
  overflow: hidden;
  transition: border-color .4s ease;
}

.line-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-light));
  transition: width .6s var(--ease-out);
}

.line-card:hover {
  border-color: var(--color-accent);
}

.line-card:hover::before {
  width: 100%;
}

/* --- Typewriter Effect --- */
.typewriter {
  display: inline-block;
  border-right: 2px solid var(--color-accent);
  white-space: nowrap;
  overflow: hidden;
  animation: typewriterBlink .8s step-end infinite;
}

@keyframes typewriterBlink {
  0%, 100% { border-color: var(--color-accent); }
  50% { border-color: transparent; }
}

/* --- Back to Top --- */
.back-to-top {
  position: fixed;
  bottom: 90px; right: 28px;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: rgba(252,250,247,.9);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 899;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease, border-color .3s ease;
  pointer-events: none;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  border-color: var(--color-accent);
}

.back-to-top__arrow {
  width: 10px; height: 10px;
  border-top: 1px solid var(--color-text);
  border-right: 1px solid var(--color-text);
  transform: rotate(-45deg);
  margin-top: 3px;
}

/* --- Bubbles (泡ぷかぷか) --- */
/* bubblesコンテナ不要。各.bubbleがbody直下にfixedで配置される */

.bubble {
  position: fixed;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 28% 18%,
    rgba(176,144,112,.4) 0%,
    rgba(200,180,160,.2) 25%,
    rgba(176,144,112,.07) 55%,
    transparent 100%
  );
  border: 1px solid rgba(176,144,112,.35);
  box-shadow:
    inset 0 -6px 14px rgba(176,144,112,.12),
    inset 4px 4px 12px rgba(255,255,255,.25),
    0 0 16px rgba(176,144,112,.12),
    0 0 4px rgba(255,255,255,.08);
  z-index: 9997;
  pointer-events: none;
  animation: bubbleRise linear infinite;
  will-change: transform;
}

.bubble::before {
  content: '';
  position: absolute;
  top: 14%; left: 18%;
  width: 36%; height: 24%;
  border-radius: 50%;
  background: rgba(255,255,255,.6);
  filter: blur(1.5px);
  transform: rotate(-35deg);
}

.bubble::after {
  content: '';
  position: absolute;
  bottom: 16%; right: 14%;
  width: 16%; height: 10%;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  filter: blur(1px);
}

/* 虹色の反射 */
.bubble--rainbow {
  background: radial-gradient(
    ellipse at 28% 18%,
    rgba(210,190,170,.35) 0%,
    rgba(180,200,230,.15) 25%,
    rgba(230,180,200,.1) 45%,
    rgba(200,230,180,.05) 60%,
    transparent 100%
  );
  border-color: rgba(176,144,112,.3);
}

@keyframes bubbleRise {
  0% {
    bottom: -5%;
    transform: translateX(0) scale(1);
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  25% {
    bottom: 25%;
    transform: translateX(var(--bubble-drift)) scale(var(--bubble-scale-mid));
  }
  50% {
    bottom: 50%;
    transform: translateX(calc(var(--bubble-drift) * -0.7)) scale(1.02);
    opacity: .85;
  }
  75% {
    bottom: 75%;
    transform: translateX(var(--bubble-drift2)) scale(var(--bubble-scale-mid));
    opacity: .6;
  }
  100% {
    bottom: 110%;
    transform: translateX(calc(var(--bubble-drift2) * -0.3)) scale(var(--bubble-scale-end));
    opacity: 0;
  }
}

/* 横揺れアニメーション */
@keyframes bubbleWobble {
  0%, 100% { border-radius: 50%; }
  25% { border-radius: 48% 52% 50% 50%; }
  50% { border-radius: 50% 48% 52% 50%; }
  75% { border-radius: 52% 50% 48% 52%; }
}

.bubble--wobble {
  animation: bubbleRise linear infinite, bubbleWobble 3s ease-in-out infinite !important;
}

/* 泡のサイズバリエーション */
.bubble--xxs { width: 5px; height: 5px; border-width: 0.5px; }
.bubble--xxs::before, .bubble--xxs::after { display: none; }
.bubble--xs { width: 10px; height: 10px; }
.bubble--xs::after { display: none; }
.bubble--sm { width: 16px; height: 16px; }
.bubble--md { width: 26px; height: 26px; }
.bubble--lg { width: 40px; height: 40px; }
.bubble--xl { width: 56px; height: 56px; }
.bubble--xxl { width: 72px; height: 72px; }

/* --- Photo Slide Loop (写真が左→右にゆっくり流れる) --- */
.img-wrap img,
.circle-photo img,
.service-showcase__image img,
.hscroll-gallery__item img,
.mosaic-grid__item img,
.fullwidth-image img,
.column-card__image img {
  animation: photoSlide 20s ease-in-out infinite alternate;
}

@keyframes photoSlide {
  0%   { object-position: 30% center; }
  100% { object-position: 70% center; }
}

/* フルワイドだけもっとゆっくり */
.fullwidth-image img {
  animation: photoSlide 30s ease-in-out infinite alternate;
}

/* ヒーローはズームと組み合わせ */
.hero__slide .hero__image img {
  animation: heroSlideZoom 12s ease-in-out infinite alternate;
}

@keyframes heroSlideZoom {
  0%   { object-position: 30% center; transform: scale(1.05); }
  100% { object-position: 70% center; transform: scale(1); }
}

/* サービスカードはホバー時にスライド停止 */
.service-showcase__item:hover .service-showcase__image img {
  animation-play-state: paused;
}

/* 丸写真は回り込みスライド */
.circle-photo img {
  animation: circlePhotoSlide 15s ease-in-out infinite alternate;
}

@keyframes circlePhotoSlide {
  0%   { object-position: 35% center; }
  100% { object-position: 65% center; }
}

/* --- Responsive --- */
@media (max-width: 768px) {
  .hero__side-text { display: none; }
  .scroll-dots { display: none; }
  .text-stroke { font-size: clamp(32px, 10vw, 60px); }
  .floating-badge { width: 60px; height: 60px; font-size: 8px; }
  .mosaic-grid { grid-auto-rows: 60px; gap: 4px; }
  .mosaic-grid__item--wide { grid-column: span 6; grid-row: span 2; }
  .mosaic-grid__item--tall { grid-column: span 6; grid-row: span 3; }
  .mosaic-grid__item--small { grid-column: span 6; grid-row: span 2; }
  .mosaic-grid__item--medium { grid-column: span 6; grid-row: span 2; }
  .back-to-top { bottom: 72px; right: 16px; }
  .glass-card { padding: 28px 20px; }
}

/* PC only: フォント1.2倍 */
@media (min-width: 769px) {
  .hero__side-text { font-size: 12px; }
  .btn-gradient-border { font-size: 16px; padding: 22px 62px; }
  .floating-badge { font-size: 12px; width: 96px; height: 96px; }
  .num-badge { width: 62px; height: 62px; font-size: 17px; }
  .text-stroke { font-size: clamp(58px, 9.6vw, 120px); }
}