/* Personal portfolio overrides — loaded after the original stylesheets. */

/* Text copy of the hero image for screen readers and AI agents
   (tools/make_profile.py). Standard visually-hidden pattern. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The hero's yellow side is now kv_back_me.jpg (photo sticker). Hide the
   animated "Welcome" baku that the script places over the old artwork. */
.home_kv_baku {
  display: none !important;
}

/* About block below the hero: English copy (tools/set_about.py). The original
   font is a Japanese web font with wide tracking; English reads better tighter. */
.home_about_text {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.9;
}

/* Line breaks that only apply on wider screens; phones wrap naturally. */
@media (max-width: 576px) {
  .br-desktop {
    display: none;
  }
}

/* "PROJECTS" (8 letters) replaces "WORKS" (5); scale the outlined title so it
   still fits the screen width (originally min(288px, 18vw)). */
.home_works_title.repeatText {
  font-size: min(224px, 14vw);
}
@media not screen and (min-width: 769px) {
  .home_works_title.repeatText {
    font-size: min(119px, 14vw);
  }
}

/* Same for "EXPERIENCE" (10 letters) replacing "SERVICE" (7). */
.home_service_title.repeatText {
  font-size: min(182px, 11.4vw);
}
@media not screen and (min-width: 769px) {
  .home_service_title.repeatText {
    font-size: min(97px, 11.4vw);
  }
}

/* TOOLS & TECH (was the AWARDS logo wall; tools/set_tools.py). */
.home_award_title.repeatText {
  font-size: min(150px, 9.4vw);
  white-space: nowrap;
}
.home_awards_list {
  grid-template-columns: repeat(6, 1fr);
  gap: min(56px, 3.6vw) min(32px, 2vw);
}
.home_tools_group {
  grid-column: 1 / -1;
  margin-top: min(36px, 2.4vw);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(211, 255, 2, 0.35);
  font-family: Montserrat, sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 1vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d3ff02;
  text-align: left;
  align-items: flex-start;
}
.home_tools_group:first-child {
  margin-top: 0;
}
/* the original only staggers the first 7 items; keep later ones in step */
.is-scroll-anime .home_awards_item:nth-of-type(n + 8) {
  transition-delay: 0.42s;
}
.home_awards_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}
.home_awards_item img {
  width: auto;
  height: min(88px, 6.5vw);
}
.home_tools_name {
  font-family: Montserrat, sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.2vw, 17px);
  letter-spacing: 0.04em;
  color: #f7f7f7;
}
@media not screen and (min-width: 769px) {
  .home_award_title.repeatText {
    font-size: min(80px, 9.4vw);
  }
  .home_awards_list {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 14px;
  }
  .home_awards_item img {
    height: 48px;
  }
}

/* CERTIFICATIONS (was RECRUIT; tools/set_certs.py). */
.home_recruit_title.repeatText {
  font-size: min(130px, 7.6vw);
  white-space: nowrap;
}
.home_recruit_text {
  font-family: Montserrat, sans-serif;
  letter-spacing: 0.01em;
}
.home_certs_list {
  line-height: 2.1;
}
.home_certs_list b {
  font-weight: 700;
}
.home_certs_issuer {
  opacity: 0.6;
  font-size: 0.82em;
}
/* certificates are landscape documents: show them whole on a white card
   (the photo slots were portrait/square, zoomed 130% and stretched) */
.home_recruit_image[data-image] {
  padding-top: 0;
  aspect-ratio: 1.31;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
/* keep the edge slots fully on screen (the photos used to bleed off) */
.home_recruit_image[data-image=image_0] { width: min(340px, 21%); left: 2%; }
.home_recruit_image[data-image=image_1] { width: min(380px, 24%); }
.home_recruit_image[data-image=image_2] { width: min(300px, 19%); }
.home_recruit_image[data-image=image_3] { width: min(340px, 21%); right: 2%; }
.home_recruit_image_inner {
  transform: translate(-50%, -50%);
}
.home_recruit_image_inner img {
  object-fit: contain;
}
.home_recruit_mainImage_item[data-item=front] {
  background: #fff url(/assets/images/home/certs/palantir.webp) center / contain no-repeat;
}
.home_recruit_mainImage_item[data-item=back] {
  background: #fff;
}
.home_recruit_mainImage_item[data-item=back] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media not screen and (min-width: 769px) {
  .home_recruit_title.repeatText {
    font-size: min(70px, 7.6vw);
  }
  .home_recruit_image[data-image] {
    padding-top: 0;
    width: min(200px, 30%);
  }
  .home_recruit_image[data-image=image_0] { left: 2%; }
  .home_recruit_image[data-image=image_3] { right: 2%; }
  .home_recruit_image_inner {
    transform: translate(-50%, -50%);
  }
}

/* Footer menu: labels are longer now (EXPERIENCE, CERTIFICATIONS), so size the
   two columns to their content instead of a fixed 27% width. */
@media only screen and (min-width: 950px) {
  .footer_menu {
    width: max-content;
    grid-template-columns: auto auto;
    column-gap: 2.2em;
  }
}

/* Footer PAGE TOP: hovering flips the arrow to a dark card (the site's own
   flip) where the tiki mascot hops, fans its feathers and squints
   (tools/set_pagetop.py puts the SVG in; Junni had a baku lottie here). */
.footer_pageTop_item[data-hover=after] .footer_pageTop_item_inner {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.tiki {
  /* 78% of the card height; the card is min(258px, 16.125vw) wide at 258:160 */
  height: min(125px, 7.8vw);
  width: auto;
  overflow: visible;
  color: #d3ff02;
}
.tiki_part {
  transform-box: fill-box;
}
.tiki_feather {
  transform-origin: 50% 100%;
}
.tiki_eyes {
  transform-origin: 50% 50%;
}
.footer_pageTop:hover .tiki {
  animation: tiki-hop 0.9s 0.25s cubic-bezier(0.3, 0, 0.3, 1) infinite;
  transform-origin: 50% 100%;
}
.footer_pageTop:hover .tiki_feather {
  animation: tiki-fan 0.9s 0.25s ease-in-out infinite;
}
.footer_pageTop:hover .tiki_feather-1 { --fan: -16deg; }
.footer_pageTop:hover .tiki_feather-2 { --fan: -8deg; animation-delay: 0.31s; }
.footer_pageTop:hover .tiki_feather-3 { --fan: 0deg; animation-delay: 0.37s; }
.footer_pageTop:hover .tiki_feather-4 { --fan: 8deg; animation-delay: 0.43s; }
.footer_pageTop:hover .tiki_feather-5 { --fan: 16deg; animation-delay: 0.49s; }
.footer_pageTop:hover .tiki_eyes {
  animation: tiki-squint 1.8s 0.25s ease-in-out infinite;
}
@keyframes tiki-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  10% { transform: translateY(0) scale(1.06, 0.92); }   /* crouch */
  45% { transform: translateY(-14%) scale(0.97, 1.04); } /* up toward the top */
  80% { transform: translateY(0) scale(1.04, 0.95); }   /* land */
}
@keyframes tiki-fan {
  0%, 100% { transform: rotate(0) scaleY(1); }
  45% { transform: rotate(var(--fan)) scaleY(1.12); }
}
@keyframes tiki-squint {
  0%, 60%, 100% { transform: scaleY(1); }
  70% { transform: scaleY(0.55); }
  80% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .footer_pageTop:hover .tiki,
  .footer_pageTop:hover .tiki_part {
    animation: none;
  }
}

/* Contact chat (menu → CONTACT; text in tools/set_contact.py). Its Japanese
   web font isn't loaded and doesn't suit English; use the site's Montserrat.
   The CONTACT US title keeps the logo-style font. */
#contact :is(input, textarea, select, button, label, p, li, span, div):not([class*="_title_"]) {
  font-family: Montserrat, sans-serif;
}
#contact [class*="_message_detail_"] {
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}
#contact [class*="_select_label_"] {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* After a message is sent the form slides in a "thank you" mascot (Junni's
   baku-thankyou lottie, which isn't here). Show the tiki with a speech bubble. */
#contact [data-lottie="baku-thankyou"] {
  right: 16px; /* the baku peeked in from off-screen; keep the tiki fully visible */
  background: url(/assets/images/mascot/tiki_ink.svg) right 18px bottom / auto 84% no-repeat;
}
#contact [data-lottie="baku-thankyou"] > * {
  display: none;
}
#contact [data-lottie="baku-thankyou"]::before {
  content: "Thanks for reaching out — talk soon ♡"; /* shown after message, email or call */
  position: absolute;
  right: 118px;
  bottom: 70%;
  width: 190px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 0 7px #0000001a;
  font: 500 14px/1.45 Montserrat, sans-serif;
  color: #1c1d21;
}

/* Menu panel: longer labels (CERTIFICATIONS) and a gap between social links */
.nav_sns {
  column-gap: 1.2em;
}
@media only screen and (min-width: 769px) {
  .nav_item_link {
    font-size: 20px; /* CERTIFICATIONS fits the 256px menu area even beside the contact panel */
  }
}

/* Hero artwork (both sides, desktop + mobile) comes from the images in
   assets/images/home/kv/*_me.jpg. On phones the tiles only get sliced once the
   works videos load, so assets/images/works/*_min.mp4 must exist (currently
   symlinks to the desktop videos). */