/* ===== Reset & Base ===== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  background: #ffffff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #1a1a1a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Phase 190: モバイルでの長押し時テキスト選択・コールアウトを防止 */
@media (max-width: 767px) {
  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }
}

/* ===== Canvas ===== */
/* ─── NEW UI ELEMENTS (Figma Node 3:9) ──────────────── */

/* ===== Overlay Components Stagger ===== */
/* Logo appears first */

#logo-corner {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 2100;
  /* ロゴを全画面オーバーレイや帯よりも前面に */
  width: 180px;
  height: auto;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  animation: fadeSlideIn 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.3s both;
  animation-play-state: paused;
  /* Phase 124: JSがローダー後に running に切替 */
}

/* Contact Button */
.contact-btn {
  position: fixed;
  top: 40px;
  right: 40px;
  z-index: 2600;
  background: #111;
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: bold;
  text-decoration: none;
  padding: 8px 28px;
  border-radius: 0;
  transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.4s ease;
  pointer-events: auto;
  transform: translateX(0%);
  opacity: 0;
  animation: fadeSlideInContact 1.5s cubic-bezier(0.23, 1, 0.32, 1) 1.2s both;
  animation-play-state: paused;
  /* Phase 124 */
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #111;
}

@keyframes fadeSlideInContact {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Phase 24: Sub-layer text control for color inversion */
.contact-btn .contact-text {
  position: relative;
  z-index: 2;
  display: inline-block;
  transform: translateZ(0);
  /* Phase 26: Push to compositor frame so it doesn't repaint with background */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  letter-spacing: 0.1em;
  /* ABOUT等のメニューに合わせる */
}

/* Phase 24/94: Left-to-right white sweeping line via scaleX (Sync'd to Next Project Sweep) */
.contact-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transform-origin: right;
  /* Phase 94: Exit Origin right */
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

/* Phase 24 & 65: Wrap hover effects in media query to prevent sticky hover on touch devices */
@media (hover: hover) {
  .contact-btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
    /* Phase 94: Enter Origin left */
  }

  .contact-btn:hover {
    border-color: #111;
  }

  .contact-btn:hover .contact-text {
    color: #111111;
  }
}

/* Modal Interaction overrides */
.contact-btn.slide-out {
  transform: translateX(120%);
  opacity: 0;
}

.contact-btn.slide-in {
  /* Return to default state */
  transform: translateX(0%);
  opacity: 1;
}

/* Phase 105: Global Nav Modal Slide-Out Sync */
#global-nav {
  transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.4s ease;
}

#global-nav.slide-out {
  transform: translateX(100vw) !important;
  opacity: 0 !important;
  transition: transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.4s ease !important;
}

#global-nav.slide-in {
  transform: translateX(0%) !important;
  opacity: 1 !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease !important;
}

/* Copyright appears third */
.overlay .copyright {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #111111;
  opacity: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Phase 16 Stagger */
  animation: fadeSlideIn 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.9s both;
}


/* --- SLIDING GALLERY STYLES --- */
#detail-img-container {
  /* Changed to overflow hidden for slider */
  overflow: hidden;
  display: flex;
  /* Flex to hold slides */
  align-items: center;
  justify-content: center;
  position: relative;
  /* Phase 46: Explictly enable pointer interactions and grab styling */
  pointer-events: auto;
  cursor: grab;
  /* Phase 54: Defeat ALL mobile OS panning behaviors to guarantee strict Touch parsing */
  touch-action: none;
  /* Phase 37: Removed hardcoded background color to eliminate grey bars */
}

.slide-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 1.6s cubic-bezier(0.075, 0.82, 0.165, 1);
  /* Phase 37: 1.6s Heavy ease-out Parallax slide */
  will-change: transform;
  touch-action: pan-y;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Phase 44: Prevent OS ghost-image drags overriding JS */
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}

/* Adjust old detail-img if needed, or remove it in JS */

#gallery-nav {
  position: fixed;
  bottom: 40px;
  left: 40px;
  display: none;
  /* Changed from flex to none (Hidden by default) */
  flex-direction: column;
  flex-direction: column;
  /* Vertical alignment */
  gap: 12px;
  z-index: 2500;
  pointer-events: auto;
  width: auto;
  height: auto;
  align-items: center;
}

.gallery-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
  /* Default Gray */
  cursor: pointer;
  border: none;
  padding: 0;

  /* Phase 22: Prepare sequential animation */
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s ease;
}

#gallery-nav.nav-visible .gallery-thumb {
  opacity: 1;
  transform: scale(1);
}

.gallery-thumb:hover {
  background: #999;
}

#gallery-nav.nav-visible .gallery-thumb:hover {
  transform: scale(1.2);
}

.gallery-thumb.active {
  background: #000;
  /* Active Black */
}

#gallery-nav.nav-visible .gallery-thumb.active {
  transform: scale(1.2);
}

/* =========================================== */
/* Phase 103: Responsive Global Navigation     */
/* =========================================== */
#global-nav {
  position: fixed;
  z-index: 2500;
  display: flex;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 0.1em;
  pointer-events: none;
  /* Phase 110: Removed sticky animation forward lock */
}

.nav-item {
  color: #111;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  opacity: 0;
  animation: fadeSlideIn 1.5s cubic-bezier(0.23, 1, 0.32, 1) both;
  animation-play-state: paused;
  /* Phase 124 */
}

/* ロゴ(0.3s)の後: ABOUT→BRANDING→GRAPHIC→VIDEO→WEB→CONTACT(1.2s) */
.nav-item:nth-child(1) {
  animation-delay: 0.5s;
}

.nav-item:nth-child(2) {
  animation-delay: 0.6s;
}

.nav-item:nth-child(3) {
  animation-delay: 0.7s;
}

.nav-item:nth-child(4) {
  animation-delay: 0.8s;
}

.nav-item:nth-child(5) {
  animation-delay: 0.9s;
}

/* WEB */

.nav-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #111;
  transform: scaleX(0);
  transform-origin: right;
  /* Phase 107: Default to right so it exits left-to-right */
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .nav-item:hover::after {
    transform: scaleX(1);
    transform-origin: left;
    /* Phase 107: Enter left-to-right */
  }
}

/* Phase 106: Locked underline state for active 3D scene */
.nav-item.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* PC: Docked next to CONTACT button */
@media (min-width: 768px) {
  #global-nav {
    top: 48px;
    /* Optically matched to CONTACT 40px + 8px internal padding baseline */
    right: 200px;
    /* Phase 107: Group firmly with CONTACT (contact width ~120px + margins) */
    flex-direction: row;
    gap: 40px;
  }
}

/* Mobile: Aligned right under the CONTACT button */
@media (max-width: 767px) {
  #global-nav {
    /* Match the Logo Y alignment + pad down 52px below CONTACT (Refined +2px shift) */
    top: calc(5vw + 52px);
    right: 5vw;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
  }

  .nav-item {
    font-size: 11px;
    padding-bottom: 2px;
  }

  /* CONTACT(1.2s on PC) -> Mobile starts at 1.0s and delays 0.2s per item */
  .nav-item:nth-child(1) {
    animation-delay: 1.0s;
    /* ABOUT */
  }

  .nav-item:nth-child(2) {
    animation-delay: 1.2s;
    /* BRANDING */
  }

  .nav-item:nth-child(3) {
    animation-delay: 1.4s;
    /* GRAPHIC */
  }

  .nav-item:nth-child(4) {
    animation-delay: 1.6s;
    /* VIDEO */
  }

  .nav-item:nth-child(5) {
    animation-delay: 1.8s;
    /* WEB */
  }
}

/* =========================================== */
/* Phase 111: ABOUT Message Overlay            */
/* =========================================== */
#about-message-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2400;
  /* Below Nav (2500) but above Canvas */
  display: flex;
  flex-direction: column;
  pointer-events: none;
  /* Let empty space click through to 3D */
  width: 100vw;
  text-align: center;
  align-items: center;
  justify-content: center;
  /* Phase 111: Default hidden state */
  display: none;
}

#about-message-overlay.active {
  display: flex;
}

#about-message-overlay .message-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* Phase 117: Reduced to 2/3 of previous 24px gap */
}

#about-message-overlay .message-svg {
  width: 70vw;
  max-width: 1200px;
  height: auto;
  opacity: 0;
}

/* Phase 115: Maximize SVG width on mobile to perfectly flush with 5vw side margins */
@media (max-width: 767px) {
  #about-message-overlay .message-svg {
    width: 90vw;
  }
}

#about-message-overlay .message-text {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: clamp(12px, 1.2vw, 16px);
  line-height: 1.4;
  letter-spacing: 0.1em;
  color: #111 !important;
  opacity: 0;
  max-width: 50vw;
  /* width固定を削除 → ラッパーがテキスト実幅にフィット */
  white-space: normal;
}

/* Modifier overriding the Modal Left-Align to Center-Align the SVG wrapper */
#about-message-overlay .message-anim-line {
  display: inline-flex;
  justify-content: center;
}

/* Phase 118: Mobile-only line break control */
br.sp-br {
  display: none;
  /* 非表示: PC */
}

@media (max-width: 767px) {
  br.sp-br {
    display: block;
    /* 有効: スマホ */
  }

  /* Phase 118: Widen text container so first line doesn't break early */
  #about-message-overlay .message-text {
    width: 90vw;
    max-width: none;
    /* PCの max-width: 50vw をモバイルで解除 */
    white-space: normal;
  }
}

#next-project-btn {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 2500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  height: 48px;
  /* Phase 12: Fixed height to prevent fraction subpixels */
  cursor: pointer;
  pointer-events: none;
  /* Phase 18 Fix: Disable pointer events when hidden */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1;
  /* Phase 12: Prevents fractional text heights */
  letter-spacing: 0.05em;
  color: #000;
  opacity: 1;
  overflow: hidden;
  transform: translateZ(0);
  /* Phase 12: Hardware accel to prevent blurring */
}

/* SWIPE EFFECT SCRIPT (CSS only) */
#next-project-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Phase 89: Reverted from accidental Phase 86 100dvh back to 100% to contain inner wipe mask */
  background: #000;
  /* Phase 90: Reverted from accidental Phase 86 rgba(255, 255, 255, 1) to restore black wipe animation */
  z-index: 0;
  /* Behind content */
  transform: scaleX(0);
  transform-origin: right;
  /* Default: Exit direction -> Shrink to Right */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Borders */
#next-project-btn .border-line {
  position: absolute;
  background: #000;
  transition: all 0.4s ease-out;
}

/* Top: Left to Right */
#next-project-btn .border-top {
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  transition-delay: 0s;
}

/* Right: Top to Bottom */
#next-project-btn .border-right {
  top: 0;
  right: 0;
  width: 1px;
  height: 0;
  transition-delay: 0.1s;
}

/* Bottom: Right to Left */
#next-project-btn .border-bottom {
  bottom: 0;
  right: 0;
  width: 0;
  height: 1px;
  transition-delay: 0.2s;
}

/* Left: Bottom to Top */
#next-project-btn .border-left {
  bottom: 0;
  left: 0;
  width: 1px;
  height: 0;
  transition-delay: 0.3s;
}

/* Active State to trigger animation */
#next-project-btn.animate-in {
  pointer-events: auto;
  /* Re-enable pointer events when visible */
}

#next-project-btn.animate-in .border-top {
  width: 100%;
}

#next-project-btn.animate-in .border-right {
  height: 100%;
}

#next-project-btn.animate-in .border-bottom {
  width: 100%;
}

#next-project-btn.animate-in .border-left {
  height: 100%;
}


/* Content (Text + Arrow) */
#next-project-btn .next-content {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.4s ease-out;
  transition: opacity 0.4s ease-out;
  transition-delay: 0.6s;
  /* Wait for borders */
  position: relative;
  z-index: 10;
  /* Above black swipe */
}

#next-project-btn.animate-in .next-content {
  opacity: 1;
}

/* Arrow Style */
.next-arrow {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid #000;
  transition: border-color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.next-text {
  font-weight: 700;
  /* Phase 12: Bold Font */
  transition: color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) {

  /* Phase 95: Touch Isolation for Black Wipe Animation */
  #next-project-btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }

  /* Hover States for Content */
  #next-project-btn:hover .next-text {
    color: #fff;
  }

  #next-project-btn:hover .next-arrow {
    border-left-color: #fff;
  }
}

/* Hide header/subtitle as they are replaced */
header {
  display: none !important;
}

/* ─── MODAL (Figma 3:9) ───────────────────────── */
#detail-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  /* Phase 9: Transparent background per user request */
  z-index: 2000;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

#detail-modal.active {
  opacity: 1;
  /* Phase 48: Explictly restore pointer events so the slider can register interactions */
  pointer-events: auto;
}

#detail-content {
  position: relative;
  /* Anchor for close button */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 90%;
  margin: 0;
  padding-top: 40px;
  /* Raised 20px from 60px */
}

#detail-img-container {
  position: relative;
  width: 500px;
  max-width: 90vw;
  aspect-ratio: 1 / 1;
  margin-bottom: 5px;
  /* 5px gap as requested */
  overflow: hidden;
  opacity: 0;
  /* Hidden by default to prevent flash */
}

/* Circular Reveal Animation Class (Opening) - 1.3s Faster, Ease-In */
.reveal-anim {
  opacity: 1 !important;
  will-change: clip-path;
  /* Ease-In (starts slow, speeds up at end) */
  animation: revealCircle 1.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

/* Circular Hide Animation Class (Closing) */
.hide-anim {
  opacity: 1 !important;
  will-change: clip-path;
  animation: hideCircle 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealCircle {
  0% {
    clip-path: circle(0% at 50% 50%);
  }

  100% {
    clip-path: circle(150% at 50% 50%);
  }
}

@keyframes hideCircle {
  0% {
    clip-path: circle(150% at 50% 50%);
  }

  100% {
    clip-path: circle(0% at 50% 50%);
  }
}

#detail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Phase 71: Dedicated Cinema Modal ===== */
#cinema-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  /* Phase 86: Guaranteed absolute centering against Safari address bar */
  background: transparent;
  /* Phase 73: Transparent backplate to reveal 3D scene */
  /* Solid white backplate */
  z-index: 2000;
  /* Phase 173: Sync with detail-modal (was 1000) */
  /* Above WebGL and UI */
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  /* Blocked until active */
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

#cinema-modal.active {
  pointer-events: auto;
  opacity: 1;
}

/* 16:9 Responsive Container Alignment */
.cinema-content-wrapper {
  width: 80%;
  max-width: 1200px;
  position: relative;
  /* Phase 73: PC perfectly centered */
  transform: translateY(0%);
}

.cinema-iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  /* 16:9 Aspect Ratio Hack */
  background: #000;
  /* Pre-loader black flash prevention */
  /* Phase 79: Removed drop-shadow to match Graphic styling */
}

.cinema-iframe-container iframe,
.cinema-iframe-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  object-fit: cover;
  /* アスペクト比違いの黒帯を解消 */
}

/* Phase 73/76: Cinema Info Overlay */
#cinema-info {
  width: 500px;
  max-width: 90vw;
  text-align: left;
  position: absolute;
  /* Phase 76/77: Bind exactly beneath the 16:9 inner container */
  top: 100%;
  left: 0px;
  margin-top: 10px;
  /* Slight gap below video */
  z-index: 2050;
  /* Phase 74: Bruteforce above Vimeo iframe */
  pointer-events: none;
  /* Let clicks pass through */
}

/* Force mobile resizing */
@media (max-width: 768px) {
  .cinema-content-wrapper {
    width: 90vw;
    /* Phase 79: Modified from 95% to 90vw to perfectly bracket 5vw margin margins aligned with header/footer */
    /* Phase 86: Removed the -5% translateY bias because 100dvh guarantees true center natively */
  }

  #cinema-close {
    top: 20px;
    right: 20px;
  }

  #cinema-info {
    bottom: 0px;
    left: 0px;
  }
}

/* =========================================== */

#detail-info {
  width: 500px;
  max-width: 90vw;
  text-align: left;
  position: relative;
  margin-top: 4px;
  /* Minimal gap */
}

/* Text Container (Values) */
.text-reveal-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  /* Phase 174: Restored global 4px gap per user request */
  margin-top: 0;
  /* Remove extra margin */
}

/* Individual Line Wrapper for Block Reveal */
.text-line-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 0.95;
  /* Phase 174: Restored global 0.95 line height to avoid side effects on Profile/View Profile */
}

/* Isolated Modal Fix: Apply the 4px uniform rhythm ONLY to project detail modals */
#detail-info .text-reveal-container,
#cinema-info .text-reveal-container {
  gap: 0;
}

#detail-info .text-line-wrapper,
#cinema-info .text-line-wrapper {
  line-height: 1.333;
  /* 12px * 1.333 = 16px (creating a consistent 4px gap for BOTH wraps and categories) */
}

/* The actual text line */
.detail-text-line {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  color: #000 !important;
  letter-spacing: 0.05em;
  opacity: 0;
  position: relative;
  z-index: 10;
  transition: opacity 0.5s ease, transform 0.5s ease;
  /* For closing anim */
}

.detail-text-line.force-visible {
  opacity: 1 !important;
}

/* Phase 80/89: Clickable URLs inside Typography blocks */
a.detail-text-line.link-anim {
  text-decoration: none;
  display: block;
  /* Phase 89: Match the other three auto-generated blocks to eliminate line-height float gaps */
  padding-left: 14px;
  /* Room for exact icon footprint */
  position: relative;
  cursor: pointer;
  pointer-events: auto;
  /* Re-enable clicks inside the non-interactive text container */
}

/* Restrict underline to the text bounds rather than entire block */
a.detail-text-line.link-anim .link-text {
  position: relative;
  display: inline-block;
}

/* Phase 88: Absolute Custom SVG icon to fix broken whitespace */
a.detail-text-line.link-anim .external-icon {
  position: absolute;
  left: 0;
  top: 3px;
  /* Optically centered with 12px font */
  width: 9px;
  height: 9px;
}

/* Phase 87/91/96: Animated Underline pinned exclusively to the span width. Sweeps left to right on entry & exit. */
a.detail-text-line.link-anim .link-text::after {
  content: '';
  position: absolute;
  bottom: 1px;
  /* Phase 91: Elevated from 0px to 1px to bypass the parent overflow: hidden clipping guillotine */
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  /* Phase 96: Exit Direction shrinks toward Right */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

a.detail-text-line.link-anim:hover .link-text::after {
  transform: scaleX(1);
  transform-origin: left;
  /* Phase 96: Enter Direction grows from Left */
}

a.detail-text-line.link-anim:hover {
  /* opacity: 0.6 !important; Phase 93: Removed hover fade per user request, text remains solid */
  opacity: 1 !important;
}

/* Text Reveal Animation */
.text-line-wrapper {
  position: relative;
  overflow: hidden;
  display: block;
}

/* ENTER: Black block swipes L -> R */
.text-line-wrapper.block-anim::after {
  content: '';
  position: absolute;
  z-index: 20;
  /* Ensure on top of text (z-index: 10) */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  animation: block-reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* EXIT: Black block swipes L -> R (Same visual, triggers exit) */
.text-line-wrapper.wipe-out::after {
  content: '';
  position: absolute;
  z-index: 100;
  /* Super high Z-Index to force visibility */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  transform: translateX(-101%);
  /* Start off-screen left */
  animation: block-reveal-exit-transform 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.detail-text-line.text-closing-anim {
  animation: text-hide-sync 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  opacity: 1;
}

@keyframes text-hide-sync {
  0% {
    opacity: 1;
  }

  45% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

@keyframes block-reveal {
  0% {
    left: -100%;
  }

  50% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

#detail-close,
#cinema-close,
#profile-close {
  position: fixed;
  top: 28px;
  /* Optically matched to Logo top edge (-12px rotational offset) */
  right: 28px;
  /* Optically matched to Next Project right edge (-12px rotational offset) */
  width: 80px;
  /* 2x size for PC */
  height: 80px;
  cursor: pointer;
  z-index: 2002;
  /* Phase 173: Float above 2000 modal bodies and 2001 next-btn */
  pointer-events: auto;
}

/* On mobile, keep it fixed but smaller */
@media (max-width: 850px) {

  #detail-close,
  #cinema-close,
  #profile-close {
    top: 5vw;
    /* Logo top calc(5vw + 6px) minus 6px padding */
    right: calc(5vw - 6px);
    /* Next Project 5vw margin minus 6px padding */
    width: 44px;
    /* Mobile size */
    height: 44px;
  }
}

/* Ensure Close Button is hidden by default */
#detail-close,
#cinema-close,
#profile-close {
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  /* Prevent clicks when hidden */
}

#detail-close .line,
#cinema-close .line,
#profile-close .line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Initial State (Cross) */
#detail-close .line:nth-child(1),
#cinema-close .line:nth-child(1),
#profile-close .line:nth-child(1) {
  transform: rotate(45deg);
}

#detail-close .line:nth-child(2),
#cinema-close .line:nth-child(2),
#profile-close .line:nth-child(2) {
  transform: rotate(-45deg);
}

/* Hover Effect */
#detail-close:hover .line:nth-child(1),
#cinema-close:hover .line:nth-child(1),
#profile-close:hover .line:nth-child(1) {
  transform: rotate(135deg);
}

#detail-close:hover .line:nth-child(2),
#cinema-close:hover .line:nth-child(2),
#profile-close:hover .line:nth-child(2) {
  transform: rotate(45deg);
}

/* Animation Classes for Close Button */
#detail-close.opening-anim,
#cinema-close.opening-anim,
#profile-close.opening-anim {
  animation: openSpin 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  pointer-events: auto;
  /* Restore interaction */
}

#detail-close.closing-anim,
#cinema-close.closing-anim,
#profile-close.closing-anim {
  animation: closeSpin 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  pointer-events: none;
}

@keyframes openSpin {
  0% {
    transform: rotate(-180deg) scale(0);
    opacity: 0;
  }

  100% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes closeSpin {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }

  100% {
    transform: rotate(180deg) scale(0);
    opacity: 0;
  }
}

canvas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* ===== Loader ===== */
/* ========================================= */
/* Phase 125 TEST: 5秒テスト版ローダー */
/* ========================================= */
#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  transition: opacity 0.5s ease, visibility 0.5s;
}

#loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 円とロゴのステージ */
.loader-stage {
  position: relative;
  width: 69px;
  /* logoLoader.svgと同幅 */
  height: 48px;
}

/* 黒い円（線のみ、塗りなし） */
.loader-circle {
  position: absolute;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  border: 5px solid #111;
  /* ロゴの線の太さに合わせる */
  box-sizing: border-box;
  transition: opacity 0.4s ease;
  /* スムーズなクロスフェード */
}

/* Phase 125: 円の位置はJSがリソース読み込み進捗に応じて制御 */
.loader-circle-left {
  left: -50vw;
}

.loader-circle-right {
  right: -50vw;
}

/* パーセント表示 */
.loader-percent {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 28px;
  color: #111;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease;
}

/* 差替え用SVGロゴ */
.loader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 69px;
  height: 48px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  /* 円とのクロスフェード */
}

/* バネズームインアニメーション */
@keyframes loaderSpringZoom {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }

  40% {
    transform: translate(-50%, -50%) scale(1.25);
  }

  60% {
    transform: translate(-50%, -50%) scale(1.15);
  }

  100% {
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* 画面手前へ拡大 */
@keyframes loaderExplode {
  0% {
    transform: translate(-50%, -50%) scale(1.2);
  }

  100% {
    transform: translate(-50%, -50%) scale(60);
  }
}

/* Ensure intermediate containers don't block clicks */
#canvas-container {
  pointer-events: none;
}

/* ===== Overlay ===== */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Header top, Footer bottom */
  align-items: center;
  padding: 60px 20px;
}

/* Ensure text doesn't block canvas interaction */
.overlay header,
.overlay footer,
.overlay h1,
.overlay .subtitle,
.overlay .hint,
.overlay .copyright {
  pointer-events: none;
}

.overlay header {
  text-align: center;
}

.overlay h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111111;
  opacity: 0;
  animation: fadeSlideIn 1.8s cubic-bezier(0.23, 1, 0.32, 1) 0.4s forwards;
  margin-bottom: 8px;
}

/* ===== Phase 16 & 27: Central Hint Sequence & Desktop Follower ===== */
.hint-container {
  position: absolute;
  top: 0;
  /* Phase 27: Base at 0,0 for JS pixel tracking */
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  z-index: 1000;
  pointer-events: none;
  /* Center stage appearance */
  animation: fadeSlideInHint 1.5s cubic-bezier(0.23, 1, 0.32, 1) 1.5s both;
  /* Phase 27: Only transition opacity strictly, leave transform to JS */
  transition: opacity 0.5s ease;
}

@keyframes fadeSlideInHint {

  /* Desktop starting values, JS takes over immediately, but this handles initial fade */
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.hint-container .mouse-icon svg {
  opacity: 0.8;
  transition: opacity 0.8s ease;
}

.click-ripple {
  transform-origin: 24px 24px;
  /* Phase 21: Perfect radial expansion from the exact tip of the arrow */
  animation: clickRippleAnim 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.click-ripple-delay {
  animation-delay: 0.4s;
}

@keyframes clickRippleAnim {
  0% {
    transform: scale(0.5);
    opacity: 1;
    stroke-width: 2.5px;
  }

  100% {
    transform: scale(6);
    opacity: 0;
    stroke-width: 0px;
  }
}

.hint-container .hint {
  font-family: 'Inter', Helvetica, Arial, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.15em;
  color: #6D6D6D !important;
  /* Phase 22: Updated to 6D6D6D explicitly on user request */
  margin: 0;
  transition: all 1s ease;
}

/* Settled State: Modifies Hint Container after first click */
.hint-container.settled {
  /* Phase 18 & 31: Stop closer to the copyright text (was 104px, now 64px) */
  top: calc(100% - 64px);
  left: 50%;
  transform: translate(-50%, -100%);
  gap: 0px;
  /* Phase 27 & 30: Re-enable transform transitions for the drop animation and ensure opacity is locked */
  transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  opacity: 1;
  /* Phase 30: Prevent opacity 0 regressions when initial animations cancel */
}

.hint-container.settled .mouse-icon svg {
  opacity: 0;
  /* Fade out SVG entirely */
  height: 0;
  width: 0;
  /* Phase 28: Fully collapse physical footprint so text aligns perfectly left */
  display: none;
  /* Helps with bounding box flush */
}

/* Phase 23: Instantly delete the ripple upon interaction so it never lingers */
.hint-container.settled .click-ripple {
  display: none !important;
  animation: none !important;
}

.hint-container.settled .hint {
  font-family: 'Inter', Helvetica, Arial, sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  color: #6D6D6D !important;
  /* Phase 22 updated */
  letter-spacing: 0.15em;
  margin-top: 2px;
}

.overlay .subtitle {
  font-size: clamp(0.7rem, 1.4vw, 1rem);
  font-weight: 300;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #555555;
  opacity: 0;
  animation: fadeSlideIn 1.8s cubic-bezier(0.23, 1, 0.32, 1) 0.9s forwards;
}

.overlay footer {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  /* Phase 12/16: Position from absolute bottom to align with NEXT PROJECT bottom (40px) */
  position: absolute;
  bottom: 40px;
  width: 100%;
}



/* ===== Animations ===== */
@keyframes fadeSlideIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Contact Button ===== */
/* Phase 13: Clean slide off-screen to the right */
.contact-btn.slide-out {
  opacity: 0 !important;
  transform: translateX(150vw) !important;
  pointer-events: none !important;
  transition: all 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  animation: none !important;
  /* Cancel fadeSlideIn to allow transform overrides */
}

/* Phase 15: Slide back in from the right */
.contact-btn.slide-in {
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  /* Slower, smoother ease-out matching close button */
  animation: none !important;
}


/* Desktop: Top Right Fixed */
@media (min-width: 768px) {
  .contact-btn {
    /* Maintained by base style, but kept for clarity */
    position: fixed;
    top: 40px;
    right: 40px;
  }
}

/* Mobile: Top Right Fixed */
@media (max-width: 767px) {
  .contact-btn {
    position: fixed;
    /* Phase 64: Visual alignment. Match exact top pixel to Logo top (calc(5vw + 6px)). */
    top: calc(5vw + 6px);
    right: 5vw;
    /* Phase 63 & 64: Shrink CONTACT button by 20% on mobile and preserve scale */
    transform: scale(0.80);
    transform-origin: right top;
    /* Phase 65: Delay entry to 0.7s = ロゴ(0.3s)の次 */
    animation: fadeSlideInMobile 1.5s cubic-bezier(0.23, 1, 0.32, 1) 0.7s both;
    animation-play-state: paused;
    /* Phase 124: JSがローダー後に running に切替 */
  }

  /* Phase 64: Preserve 0.8 scale during entry animation */
  @keyframes fadeSlideInMobile {
    0% {
      opacity: 0;
      transform: translateY(20px) scale(0.80);
    }

    100% {
      opacity: 1;
      transform: translateY(0) scale(0.80);
    }
  }

  /* Phase 64: Preserve 0.8 scale during modal transitions on mobile */
  .contact-btn.slide-out {
    transform: translateX(150vw) scale(0.80) !important;
  }

  .contact-btn.slide-in {
    transform: translateX(0) scale(0.80) !important;
  }

  /* Phase 11 & 32: Logo Mobile Adjustment */
  #logo-corner {
    /* Phase 32: Pushed down by 6px to meet the contact button bounding box perfectly */
    top: calc(5vw + 6px);
    left: 5vw;
    width: 150px;
    /* Scale down slightly for mobile */
  }

  /* Phase 11 & 59: Next Project Mobile Adjustment moved below */

  .hint-container {
    /* Phase 27: Ensure mobile defaults to true center since JS lerping is disabled */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fadeSlideInHintMobile 1.5s cubic-bezier(0.23, 1, 0.32, 1) 1.5s both;
  }

  @keyframes fadeSlideInHintMobile {
    0% {
      opacity: 0;
      transform: translate(-50%, -30%);
    }

    100% {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }

  #next-project-btn .next-content {
    font-size: 0.75rem;
    /* Smaller text on mobile */
  }

  /* Phase 21, 62, 65, 67 & 68: Hint text smaller by 1pt (0.65rem) and drops 5px total (+2px from Phase 67) */
  .hint-container .hint,
  .hint-container.settled .hint {
    font-size: 0.65rem !important;
    position: relative;
    top: 5px;
  }

  .overlay .copyright {
    /* Phase 67: Decrease copyright font size by 1pt (0.65 -> 0.60rem) */
    font-size: 0.60rem !important;
    /* Phase 61: Prevent wrap, shrink via scale to fit single line. Remove top adjustment to match NEXT PROJECT bottom border. */
    white-space: nowrap;
    transform: scale(0.70);
    transform-origin: left bottom;
    z-index: 2100;
    /* 白い帯(2005)よりも前面に */
  }

  /* Phase 59, 61, 62, 63, 64 & 66: Next Project Mobile adjustments */
  #next-project-btn {
    /* Phase 64: Lowered by 2px from Phase 63 (6px -> 4px offset) to fine-tune baseline match */
    bottom: calc(5vw + 4px);
    right: 5vw;
    transform: scale(0.72);
    /* Phase 66: Bump scale up slightly (~+2px equivalent) */
    transform-origin: right bottom;
  }

  #view-profile-btn {
    height: 34px !important;
    padding: 0 17px !important;
    margin-top: 16px;
  }

  #view-profile-btn .next-content {
    font-size: 10px;
    gap: 6px;
  }

  #view-profile-btn .next-arrow {
    border-top-width: 3.5px;
    border-bottom-width: 3.5px;
    border-left-width: 5.5px;
  }

  /* Phase 62, 66 & 68: Increase font size slightly (+0.05rem / ~1pt) inside the shrunken button */
  #next-project-btn .next-content .next-text {
    font-size: 0.90rem !important;
  }

  /* Phase 20/23/28/29: Consistently animate using top/left bindings to bypass 'auto' jump bugs.
     Removed `!important` and `align-items: flex-start` to prevent layout snapping mid-tween.
     Relying on desktop opacity/height fading for the SVG to prevent `display: none` collapse. */
  .hint-container.settled {
    left: 5vw;
    top: calc(100% - 5vw - 29px);
    /* Phase 29: Restore 29px base so it tracks correctly matching the footer drop */
    transform: translate(0, -100%);
    transition: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    animation: none;
    /* Cancel the `both` fill-mode from initial load so transform override works */
    align-items: flex-start;
    /* Phase 28: Ensure text flushes cleanly to the left bounds */
    opacity: 1;
    /* Phase 29: Prevent opacity: 0 revert after animation cancellation */
  }

  .overlay footer {
    position: absolute !important;
    left: 5vw !important;
    bottom: 5vw !important;
    /* Phase 29: Align precisely with NEXT project terminal baseline (bottom: 5vw) */
    /* Match NEXT PROJECT perfectly */
    width: auto !important;
    padding-left: 0 !important;
    margin: 0 !important;
    align-items: flex-start !important;
  }

  /* Phase 20: Move circular gallery thumbnails above NEXT PROJECT button on mobile */
  #gallery-nav {
    left: auto !important;
    right: 5vw !important;
    bottom: calc(5vw + 48px + 12px) !important;
    /* Above next project button (48px tall) */
    align-items: flex-end !important;
    /* Right aligned */
  }
}

/* ─── MODAL WIPE ANIMATION ───────────────────────── */
/* Circular Reveal Animation Class (Opening) - 1.3s Faster, Ease-In */
.reveal-anim {
  opacity: 1 !important;
  will-change: clip-path;
  animation: revealCircle 1.3s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

/* Circular Hide Animation Class (Closing) */
.hide-anim {
  opacity: 1 !important;
  will-change: clip-path;
  animation: hideCircle 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes revealCircle {
  0% {
    clip-path: circle(0% at 50% 50%);
  }

  100% {
    clip-path: circle(150% at 50% 50%);
  }
}

@keyframes hideCircle {
  0% {
    clip-path: circle(150% at 50% 50%);
  }

  100% {
    clip-path: circle(0% at 50% 50%);
  }
}

/* Block Reveal Exit Keyframes (Transform based) */
@keyframes block-reveal-exit-transform {
  0% {
    transform: translateX(-101%);
  }

  50% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(101%);
  }
}

/* ========================================= */
/* FAILSAFE: Loader Force-Hide (Reliability) */
/* ========================================= */
/* Phase 125: フェイルセーフタイムアウトを8秒に延長（読み込み+アニメーション分） */
#loader {
  animation: failsafeFadeOut 1s forwards 8s;
}

@keyframes failsafeFadeOut {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* ========================================= */
/* Phase 191: VIEW PROFILE Button            */
/* ========================================= */
#view-profile-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  height: 48px;
  cursor: pointer;
  pointer-events: none;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #000;
  opacity: 1;
  overflow: hidden;
  transform: translateZ(0);
  margin: 28px auto 0;
}

#view-profile-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#view-profile-btn .border-line {
  position: absolute;
  background: #000;
  transition: all 0.4s ease-out;
}

#view-profile-btn .border-top {
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  transition-delay: 0s;
}

#view-profile-btn .border-right {
  top: 0;
  right: 0;
  width: 1px;
  height: 0;
  transition-delay: 0.1s;
}

#view-profile-btn .border-bottom {
  bottom: 0;
  right: 0;
  width: 0;
  height: 1px;
  transition-delay: 0.2s;
}

#view-profile-btn .border-left {
  bottom: 0;
  left: 0;
  width: 1px;
  height: 0;
  transition-delay: 0.3s;
}

#view-profile-btn.animate-in {
  pointer-events: auto;
}

#view-profile-btn.animate-in .border-top {
  width: 100%;
}

#view-profile-btn.animate-in .border-right {
  height: 100%;
}

#view-profile-btn.animate-in .border-bottom {
  width: 100%;
}

#view-profile-btn.animate-in .border-left {
  height: 100%;
}

#view-profile-btn .next-content {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.4s ease-out;
  transition-delay: 0.6s;
  position: relative;
  z-index: 10;
}

#view-profile-btn.animate-in .next-content {
  opacity: 1;
}

@media (hover: hover) {
  #view-profile-btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }

  #view-profile-btn:hover .next-text {
    color: #fff;
  }

  #view-profile-btn:hover .next-arrow {
    border-left-color: #fff;
  }
}

/* ========================================= */
/* Phase 191: PROFILE Modal                  */
/* ========================================= */
#profile-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* 白オーバーレイ - パーティクルとモーダルの間 */
#profile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

#profile-overlay.active {
  opacity: 1;
}

#profile-modal.active {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

.profile-content {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 840px;
  width: 90%;
  position: relative;
}

/* 写真 */
.profile-photo-container {
  flex-shrink: 0;
  width: 420px;
  height: 420px;
  overflow: hidden;
  opacity: 0;
  /* reveal-anim / hide-anim で制御 */
}

.profile-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキストエリア - テキスト幅を罫線右端に合わせる。Flexboxで縦中央に配置 */
.profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 420px;
  /* 写真の高さ(420px)に合わせる */
  padding-top: 0;
  /* 前回追加したpadding-topを解除し中央揃えに戻す */
  padding-left: 28px;
  max-width: 424px;
}

/* 英語名 (70%: 37.5 -> 26px) - yの下端が切れないようさらに領域確保 (中央配置のため微調整) */
/* 名前だけを下に下げるマージンを調整 (10px -> 14px: +4px) */
.profile-info .profile-anim-line:first-child {
  margin-top: 14px;
}

.profile-info .profile-anim-line:first-child .profile-line {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.4;
  padding-bottom: 1px;
  /* 3pxから1pxに削減 (-2px): 罫線のギリギリまで下げる */
  letter-spacing: 1.3px;
  /* 2.6pxから半分に詰める */
  color: #000;
}

/* 区切り線 - 英名前をさらに2px下げた分、上マージンを削って全体の座標を固定 (2px -> 0px: -2px) */
.profile-divider {
  width: 420px;
  height: 1px;
  background: #000;
  margin: 0px 0 10px -28px;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

#profile-modal.active .profile-divider.anim-active {
  transform: scaleX(1);
}

/* 日本語名 (70%: 32 -> 22px) */
.profile-name-jp {
  font-family: 'Helvetica Neue', 'Noto Sans JP', sans-serif;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 2.2px;
  color: #000;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.profile-origin {
  font-size: 13px;
  letter-spacing: 1.3px;
}

/* テキスト共通 (70%: 15 -> 10.5px) */
.profile-desc {
  font-family: 'Helvetica Neue', 'Noto Sans JP', sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.4;
  /* さらに詰めて確実に420pxに収める */
  color: #000;
  margin-top: 0.5em;
  /* 段落間も限界まで詰めて末尾切れを防止 */
}

/* 最初の概要のみ。本文を限界まで上げ、写真内での末尾切れを解消するため0.8emに縮小。 */
.profile-info .profile-anim-line:nth-child(4) {
  margin-top: 0.8em;
}

.profile-desc strong {
  font-weight: 700;
}

/* テキスト行のblock-anim (既存パターン利用) */
.profile-anim-line {
  overflow: hidden;
  margin-bottom: 5px;
  padding-bottom: 4px;
  /* descender(「y」など)が切れないように */
}


/* ========================================== */
/* Phase 191: PROFILE Modal Responsive (SP)   */
/* ========================================== */
@media (max-width: 767px) {
  #profile-modal {
    background: transparent;
  }

  /* 上下の白い帯 (スクロール時に潜り込む) */
  #profile-modal::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    /* 少し高さを増やしてロゴ周りを確実にカバー */
    background: #fff;
    z-index: 2005;
    /* コンテンツ(2000)の上、UI要素(2100〜)の下 */
    pointer-events: none;
  }

  #profile-modal::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background: #fff;
    z-index: 2005;
    pointer-events: none;
  }

  .profile-content {
    flex-direction: column;
    align-items: flex-start;
    /* 左端揃え */
    gap: 16px;
    width: 100%;
    margin: 0;
    padding: 110px 5vw 120px 5vw;
    /* 下部パディングを増やして最後まで確実に見せる */
    max-height: 100dvh;
    /* ブラウザUIを考慮した動的ビューポートを使用 */
    height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 2000;
  }

  .profile-photo-container {
    width: 100%;
    /* 親(90vw)いっぱい */
    max-width: 500px;
    margin: 0;
    /* 左寄せ */
  }

  .profile-info {
    padding-left: 0;
    width: 100%;
    max-width: 500px;
    margin: 0;
  }

  /* 罫線 - 英名前とは限界(0)、日本名前とは理想のゆとり(11px)を保持 */
  .profile-divider {
    width: 100% !important;
    margin: 0px 0 11px 0 !important;
  }

  /* モバイル版の閉じるボタンを最前面に */
  #profile-close {
    z-index: 2500 !important;
  }

  .profile-info .profile-anim-line:first-child .profile-line {
    /* フォントサイズを大幅拡大 (+6px) */
    font-size: 26.5px;
    letter-spacing: 1.8px;
  }

  .profile-name-jp {
    font-size: 28px;
    /* 22px -> 28px (+6px) */
    letter-spacing: 2px;
    flex-direction: column;
    gap: 8px;
    /* 文字が大きくなった分、少し広げる */
  }

  .profile-origin {
    font-size: 17px;
    /* 11px -> 17px (+6px) */
  }

  /* 罫線 - 拡大した英名前が隠れないよう隙間(4px)を確保し、下(日本名前)も16pxへ再調整 */
  .profile-divider {
    width: 100% !important;
    margin: 4px 0 16px 0 !important;
  }

  /* 概要テキストを 16px で維持、はみ出しを完全に許容し、途切れを防止 */
  .profile-desc {
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.5px;
    transform: none;
    overflow: visible !important;
    /* 絶対に切れないように */
  }

  /* 最初の本文マージン。文字サイズ拡大に合わせて再調整 */
  .profile-info .profile-anim-line:nth-child(4) {
    margin-top: 1.2em !important;
  }

  /* 親コンテナの高さ制限や隠蔽を解除して全文表示を保証 */
  .profile-info {
    height: auto !important;
    overflow-y: visible !important;
    padding-bottom: 60px;
    /* 末尾の余白を多めに取って読みやすく */
  }
}

/* ========================================= */
/* Phase 184/188: Thumbnail Tooltip UI       */
/* ========================================= */
#thumb-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1500;
  --tooltip-line-w: 160px;
}

/* 1. Center Dot */
.tooltip-dot {
  position: absolute;
  top: -4px;
  left: -4px;
  width: 8px;
  height: 8px;
  background: #111;
  border-radius: 50%;
  transform: scale(0);
  /* 戻り: ドットは最後に消える → 斜め線完了(0.6+0.3=0.9s)後 */
  /* 戻り: ドットは最後に消える → 斜め線(0.9s) + 斜め消え(0.3s) = 1.2s後 */
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s;
}

#thumb-tooltip.active .tooltip-dot {
  transform: scale(1);
  transition-delay: 0s;
  /* 表示: 最初 */
}

/* 2. Expanding Ripple */
.tooltip-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 1px solid #111;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}

#thumb-tooltip.active .tooltip-ripple {
  animation: tooltipRippleAnim 1.5s linear infinite;
}

@keyframes tooltipRippleAnim {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) scale(5);
    opacity: 0;
  }
}

/* 3. Line Structures */
.tooltip-line-group {
  position: absolute;
  top: 0;
  /* Phase 188: ドット中心に合わせて隙間を埋める */
  left: 0;
}

/* 斜め線 (左上方向に伸びる) */
.tooltip-line-diagonal {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 80px;
  height: 1px;
  background: #111;
  transform-origin: left;
  transform: rotate(-60deg) scaleX(0);
  /* 戻り: 横線が消え始めた(0.6s)後、0.3sかけて消える -> delay 0.9s */
  opacity: 0;
  transition: transform 0.3s ease 0.9s, opacity 0.3s ease 0.9s;
}

#thumb-tooltip.active .tooltip-line-diagonal {
  opacity: 1;
  transform: rotate(-60deg) scaleX(1);
  /* 表示: ドット(0.4s)の直後。不透明度も少し遅らせて同期 */
  transition: transform 0.3s ease 0.3s, opacity 0.1s linear 0.3s;
}

/* 水平線 */
.tooltip-line-horizontal {
  position: absolute;
  /* 80px * sin(60deg) ≈ 69px, 80px * cos(60deg) = 40px */
  bottom: 69px;
  left: 40px;
  width: var(--tooltip-line-w);
  height: 1px;
  background: #111;
  transform-origin: left;
  transform: scaleX(0);
  /* 戻り: テキストが隠れた(0.3s)後、0.3sかけて消える -> delay 0.6s (余裕を持たせる) */
  opacity: 0;
  transition: transform 0.3s ease 0.6s, opacity 0.3s ease 0.6s;
}

#thumb-tooltip.active .tooltip-line-horizontal {
  opacity: 1;
  transform: scaleX(1);
  /* 表示: 斜め線(0.3+0.3=0.6s付近)の直後 */
  transition: transform 0.3s ease 0.55s, opacity 0.1s linear 0.55s;
}

/* 4. Typography Container - Phase 188: Block Reveal */
.tooltip-text-container {
  position: absolute;
  bottom: 71px;
  left: 40px;
  width: var(--tooltip-line-w);
  overflow: hidden;
}

/* 5. Emergency Reset Class - Phase 192: Use for fast-thumbnail switching */
#thumb-tooltip.instant-kill,
#thumb-tooltip.instant-kill .tooltip-dot,
#thumb-tooltip.instant-kill .tooltip-line-diagonal,
#thumb-tooltip.instant-kill .tooltip-line-horizontal,
#thumb-tooltip.instant-kill .tooltip-text-container {
  transition: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#thumb-tooltip.instant-kill .tooltip-line-diagonal {
  transform: rotate(-60deg) scaleX(0) !important;
}

#thumb-tooltip.instant-kill .tooltip-line-horizontal {
  transform: scaleX(0) !important;
}

.tooltip-text {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: #111;
  white-space: nowrap;
  text-align: right;
  opacity: 0;
}

/* 黒帯がL→Rで通過しテキストを表示 */
.tooltip-text-container.tooltip-block-anim::after {
  content: '';
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  animation: block-reveal 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* テキストは黒帯が覆った後(50%)に表示 → 黒帯が抜けると見える */
.tooltip-text-container.tooltip-block-anim .tooltip-text {
  animation: tooltipTextAppear 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes tooltipTextAppear {
  0% {
    opacity: 0;
  }

  49% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* ホバー解除時：黒帯がL→Rで通過しテキストを隠す */
.tooltip-text-container.tooltip-wipe-out::after {
  content: '';
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  transform: translateX(-101%);
  animation: block-reveal-exit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.tooltip-text-container.tooltip-wipe-out .tooltip-text {
  opacity: 1;
  animation: text-hide-sync 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}