/* -----------------------------------
   Fonts
----------------------------------- */
@font-face { font-family: 'San Miguel'; src: url('fonts/san-miguel.regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Satoshi-Light'; src: url('fonts/Satoshi-Light.ttf') format('truetype'); font-display: swap; }

/* -----------------------------------
   Theme variables
----------------------------------- */
:root {
  --color-bg1-default: rgb(10, 10, 10);
  --color-bg2-default: rgb(25, 15, 15);
  --color1-default: 189, 71, 71;
  --color2-default: 220, 40, 20;
  --color3-default: 255, 150, 60;
  --color4-default: 255, 210, 140;
  --color5-default: 240, 230, 220;
  --color-interactive-default: 220, 40, 20;

  /* Panel color sets */
  --panel-1-bg1: #020024; --panel-1-bg2: #1e6f0b; --panel-1-c1: 174,202,174; --panel-1-c2: 29,190,29; --panel-1-c3: 176,252,69; --panel-1-c4: 150,251,37; --panel-1-c5: 187,253,45; --panel-1-interactive: 187,253,45;
  --panel-2-bg1: #ffffff; --panel-2-bg2: #0b7f6c; --panel-2-c1: 174,202,174; --panel-2-c2: 29,190,140; --panel-2-c3: 176,252,140; --panel-2-c4: 150,251,140; --panel-2-c5: 187,253,140; --panel-2-interactive: 187,253,140;
  --panel-3-bg1: #020024; --panel-3-bg2: #dd9009; --panel-3-c1: 174,202,174; --panel-3-c2: 29,190,140; --panel-3-c3: 176,252,140; --panel-3-c4: 150,251,140; --panel-3-c5: 187,253,140; --panel-3-interactive: 187,253,140;
  --panel-4-bg1: #000000; --panel-4-bg2: #333333; --panel-4-c1: 150,150,150; --panel-4-c2: 100,100,100; --panel-4-c3: 200,200,200; --panel-4-c4: 220,220,220; --panel-4-c5: 240,240,240; --panel-4-interactive: 255,255,255;

  --circle-size: 100%;
  --blending: soft-light;
}
.services-page-colors {
  --color-bg1: var(--color-bg1-default);
  --color-bg2: var(--color-bg2-default);
  --color1: var(--color1-default);
  --color2: var(--color2-default);
  --color3: var(--color3-default);
  --color4: var(--color4-default);
  --color5: var(--color5-default);
  --color-interactive: var(--color-interactive-default);
}

/* -----------------------------------
   Base
----------------------------------- */
html { scroll-behavior: smooth; }
body { font-family: 'San Miguel', sans-serif; margin: 0; padding: 0; overflow-x: hidden; background-color: #0c0a1a; }
@media (hover: hover) and (pointer: fine) { body { cursor: none; } }
.skip-link { position: absolute; left: -999px; top: 10px; background: #000; color: #fff; padding: 8px 12px; z-index: 2000; }
.skip-link:focus { left: 10px; }

/* -----------------------------------
   Gradient background
----------------------------------- */
.gradient-bg { width: 100vw; height: 100vh; position: fixed; inset: 0; z-index: -1; overflow: hidden; background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2)); transition: background 0.6s ease-in-out; }
.gradient-bg svg { position: absolute; width: 0; height: 0; }
.gradients-container { filter: url(#goo) blur(40px); width: 100%; height: 100%; will-change: filter; }
.g1, .g2, .g3, .g4, .g5, .interactive { position: absolute; mix-blend-mode: var(--blending); opacity: 1; will-change: transform, opacity; }
.g1 { background: radial-gradient(circle at center, rgba(var(--color1), 0.8) 0, rgba(var(--color1), 0) 50%) no-repeat; width: var(--circle-size); height: var(--circle-size); top: calc(50% - var(--circle-size) / 2); left: calc(50% - var(--circle-size) / 2); transform-origin: center center; animation: moveVertical 30s ease infinite; }
.g2 { background: radial-gradient(circle at center, rgba(var(--color2), 0.8) 0, rgba(var(--color2), 0) 50%) no-repeat; width: var(--circle-size); height: var(--circle-size); top: calc(50% - var(--circle-size) / 2); left: calc(50% - var(--circle-size) / 2); transform-origin: calc(50% - 400px); animation: moveInCircle 20s reverse infinite; }
.g3 { background: radial-gradient(circle at center, rgba(var(--color3), 0.8) 0, rgba(var(--color3), 0) 50%) no-repeat; width: var(--circle-size); height: var(--circle-size); top: calc(50% - var(--circle-size) / 2 + 200px); left: calc(50% - var(--circle-size) / 2 - 500px); transform-origin: calc(50% + 400px); animation: moveInCircle 40s linear infinite; }
.g4 { background: radial-gradient(circle at center, rgba(var(--color4), 0.8) 0, rgba(var(--color4), 0) 50%) no-repeat; width: var(--circle-size); height: var(--circle-size); top: calc(50% - var(--circle-size) / 2); left: calc(50% - var(--circle-size) / 2); transform-origin: calc(50% - 200px); animation: moveHorizontal 40s ease infinite; opacity: 0.7; }
.g5 { background: radial-gradient(circle at center, rgba(var(--color5), 0.8) 0, rgba(var(--color5), 0) 50%) no-repeat; width: calc(var(--circle-size) * 2); height: calc(var(--circle-size) * 2); top: calc(50% - var(--circle-size)); left: calc(50% - var(--circle-size)); transform-origin: calc(50% - 800px) calc(50% + 200px); animation: moveInCircle 20s ease infinite; }
.interactive { background: radial-gradient(circle at center, rgba(var(--color-interactive), 0.8) 0, rgba(var(--color-interactive), 0) 50%) no-repeat; width: 100%; height: 100%; top: -50%; left: -50%; opacity: 0.7; }
.grain { position: absolute; inset: 0; background-image: url('noise.png'); opacity: 0.2; pointer-events: none; }
@keyframes moveInCircle { 0%{transform:rotate(0)} 50%{transform:rotate(180deg)} 100%{transform:rotate(360deg)} }
@keyframes moveVertical { 0%{transform:translateY(-50%)} 50%{transform:translateY(50%)} 100%{transform:translateY(-50%)} }
@keyframes moveHorizontal { 0%{transform:translateX(-50%) translateY(-10%)} 50%{transform:translateX(50%) translateY(10%)} 100%{transform:translateX(-50%) translateY(-10%)} }

/* -----------------------------------
   Header & navigation
----------------------------------- */
.header-container { position: absolute; inset: 0 auto auto 0; width: 100%; padding: 10px; z-index: 1000; display: flex; justify-content: space-between; align-items: flex-start; }
.logo { padding: 10px; margin-left: 10px; z-index: 1001; }
.logo img { width: 200px; height: auto; transition: width 0.3s ease; }
.navbar { position: absolute; width: 100%; left: 0; display: flex; justify-content: center; padding: 15px 20px; pointer-events: none; }
.nav-container { display: flex; gap: 200px; pointer-events: auto; }
.nav-column { display: flex; gap: 15px; } /* Simplified for desktop */
.nav-link { font-family: 'Satoshi-Light', cursive; color: #fff; text-decoration: none; font-weight: bold; font-size: 15px; transition: all 0.3s ease; text-align: center; display: inline-block; }
.nav-link:hover { text-decoration: dotted; }
.letter { display: inline-block; position: relative; }
.mobile-menu-toggle { display: none; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; padding: 10px; z-index: 1100; }

/* -----------------------------------
   Fixed Corner & Bottom Text
----------------------------------- */
.ikigai-fixed {
  position: fixed;
  bottom: 30px;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
  z-index: 1001;
  box-sizing: border-box; 
}
.ikigai-left, .ikigai-right {
  position: absolute;
  bottom: 0;
  font-family: 'Satoshi-Light', sans-serif;
  font-size: 16px;
  color: #fff;
  opacity: 0.85;
  pointer-events: auto;
}
.ikigai-left { left: 100px; }
.ikigai-right { right: 100px; text-align: right; }
.tagline-top-right {
  position: fixed;
  top: 20px;
  right: 120px;
  font-family: 'Satoshi-Light', sans-serif;
  font-size: 15px;
  color: #fff;
  text-align: right;
  line-height: 1.4;
  z-index: 1001;
  opacity: 0.9;
}
@media (max-width: 991.98px) {
  .ikigai-left { left: 40px; }
  .ikigai-right { right: 40px; }
  .tagline-top-right { right: 40px; }
}
@media (max-width: 768px) {
  /* FIX: Use Flexbox for bottom text and prevent wrapping/collision */
  .ikigai-fixed {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    gap: 15px; /* Adds space between text elements */
  }
  .ikigai-left, .ikigai-right {
    position: static;
    font-size: 13px; /* Smaller font to fit on one line */
    white-space: nowrap; /* Prevents text from breaking into a second line */
  }

  /* FIX: Adjust tagline to prevent it from going under the menu button */
  .tagline-top-right { 
    right: 65px;  /* Moves text to the left of the menu button */
    top: 25px; 
    font-size: 14px; 
  }
}

/* -----------------------------------
   Main wrapper
----------------------------------- */
.main-content-wrapper { position: relative; z-index: 10; isolation: isolate; }

/* -----------------------------------
   Hero & text reveal
----------------------------------- */
.hero-section { height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; }
.text-container { position: relative; display: flex; justify-content: center; align-items: center; user-select: none; text-align: center; padding: 0 20px; }
.english-layer, .japanese-layer { display: flex; justify-content: center; align-items: center; }
.english-layer { z-index: 2; }
.japanese-layer { position: absolute; inset: 0; z-index: 1; display: none; }
.text-image { max-width: 90%; height: auto; }
.english-layer { --mask-size: 110px; --mask-x: 0px; --mask-y: 0px; -webkit-mask: radial-gradient(circle var(--mask-size) at var(--mask-x) var(--mask-y), transparent 99.5%, black 100%); mask: radial-gradient(circle var(--mask-size) at var(--mask-x) var(--mask-y), transparent 99.5%, black 100%); }
#reveal-lens { position: fixed; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); opacity: 0; z-index: 999; border: 2px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1); box-shotop-leftdow: 0 0 25px rgba(255, 255, 255, 0.3); backdrop-filter: saturate(180%) contrast(120%); transition: opacity 0.3s ease, backdrop-filter 0.3s ease; overflow: hidden; }
#reveal-content { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity 0.2s ease; }
#reveal-content img { position: absolute; transform-origin: center center; transition: transform 0.2s ease; }

/* -----------------------------------
   Projects (horizontal desktop, vertical mobile)
----------------------------------- */
.projects-section-horizontal { position: relative; background-color: transparent; }
.projects-track { height: 100vh; width: 400%; display: flex; flex-wrap: nowrap; }
.project-panel { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; padding: 0 5vw; color: #fff; }
.project-content { text-align: center; max-width: 1400px; }
.project-content img { display: block; width: 100%; max-width: 1000px; height: auto; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.project-details { margin-top: 30px; }
.project-details h3 { font-family: 'San Miguel', sans-serif; font-size: 3rem; }
.project-details p { font-family: 'Satoshi-Light', sans-serif; font-size: 1.2rem; }

@media (max-width: 991.98px) {
  .projects-section-horizontal { height: auto; }
  .projects-track { width: 100% !important; height: auto; display: block; }
  .project-panel { 
    height: auto; 
    /* FIX: Reduced bottom padding from 15vh to 8vh to decrease the gap between projects */
    padding: 5vh 6vw 8vh 6vw;
  }
}

/* -----------------------------------
   Footer
----------------------------------- */
.footer { width: 100%; padding: 50px 0 20px; background-color: transparent; color: #fff; position: relative; z-index: 20; }
.footer-container { display: flex; justify-content: space-around; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; padding: 20px; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(10px); border-radius: 10px; }
.footer-column { flex: 1; min-width: 250px; margin: 20px; }
.footer-column h3 { font-family: 'San Miguel', sans-serif; font-size: 22px; margin-bottom: 20px; position: relative; }
.footer-column h3:after { content: ''; position: absolute; left: 0; bottom: -10px; width: 50px; height: 2px; background: rgba(var(--color-interactive), 0.8); }
.footer-column p, .footer-link { font-family: 'Satoshi-Light', sans-serif; }
.social-icons { display: flex; gap: 15px; margin-top: 20px; }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; transition: all 0.3s ease; }
.social-link:hover { background: rgba(var(--color-interactive), 0.8); transform: translateY(-5px); }
.footer-link { color: #fff; text-decoration: none; display: block; margin-bottom: 10px; transition: all 0.3s ease; }
.footer-link:hover { color: rgba(var(--color-interactive), 0.8); transform: translateX(5px); }
.footer-bottom { text-align: center; padding-top: 30px; margin-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-family: 'Satoshi-Light', sans-serif; font-size: 14px; }

/* -----------------------------------
   Responsive nav
----------------------------------- */
@media (max-width: 1400px) { .nav-container { gap: 100px; } }
@media (max-width: 1200px) { .nav-container { gap: 80px; } }

/* === CONSOLIDATED MOBILE & TABLET STYLES === */
@media (max-width: 991.98px) {
  /* Hide the reveal lens on touch devices to prevent glitches */
  #reveal-lens {
    display: none !important;
  }
  
  /* Position header elements */
  .header-container {
    display: block; /* FIX: Override desktop flex properties to ensure absolute positioning works correctly */
    align-items: center;
  }
 .logo { 
  position: absolute; 
  top: 20px; 
  left: 50%; 
  transform: translateX(-50%); 
  margin-left: 0; 
  z-index: 1001; 
}

  .tagline-top-right { 
  position: absolute;
  top: 45px;        /* below the logo */
  right: 20px;      /* stay on the right edge */
  font-size: 14px; 
  text-align: right;
}

  .logo img { width: 160px; transition: width 0.3s ease; }
  .mobile-menu-toggle { display: block; position: absolute; top: 40px; left: 20px; }

  /* Hide desktop nav and style the mobile menu overlay */
  .navbar { position: static; }
  .nav-container { display: none; } /* Hide by default */
  .nav-container.active {
    display: flex;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 1050;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;
  }
  
  .nav-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  /* Other layout adjustments */
  .project-details h3 { font-size: 2rem; }
  .project-details p { font-size: 1rem; }
  .footer-container { flex-direction: column; align-items: center; }
  .footer-column { text-align: center; margin: 10px 0; }
  .footer-column h3:after { left: 50%; transform: translateX(-50%); }
  .social-icons { justify-content: center; }
  .footer-link:hover { transform: none; }
}

@media (max-width: 768px) {
  .logo img { width: 150px; } /* Slightly smaller logo for phones */
}

/* -----------------------------------
   Reduced motion
----------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gradients-container { filter: none; }
  .g1, .g2, .g3, .g4, .g5, .interactive { animation: none !important; }
  #reveal-lens, .grain { display: none; }
}