@charset "UTF-8";
/*
Theme Name: STRAWK
Author: STRAWK
Description: Custom theme for STRAWK portfolio.
Version: 1.0.0
Text Domain: strawk
*/

html {
  font-size: 16px;
}

@media screen and (max-width: 390px) {
  html {
    font-size: 4.1025641vw;
  }
}

/* JSが動けない状況（遷移後の重い読み込み等）でも --vh を実効ビューポート単位で成立させる。
   JSが動いている場合は app.js が inline で --vh(px) を上書きする。 */
@supports (height: 100dvh) {
  :root {
    --vh: 1dvh;
  }
}

/* Page transition: pre-reveal state to prevent flicker on next page load */
html.strawk-reveal #page-transition [data-transition="top"],
html.strawk-reveal #page-transition [data-transition="bottom"] {
  --tw-translate-y: 0px !important;
}

html.strawk-reveal #page-transition-label {
  display: flex !important;
}

body {
  font-family: "Inter", "Noto Sans JP", sans-serif;
  background-color: #050505;
  scroll-behavior: smooth;
  line-break: strict;
}

/* Keyframe for Marquee Animation */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

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

.animate-marquee-left {
  animation: marquee 90s linear infinite;
}

.animate-marquee-left-duplicate {
  animation: marquee 90s linear infinite;
  transform: translateX(100%);
}

/* Navigation Menu Link Effects */
.nav-link-effect {
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-shadow: none;
  transform: skewX(0) scale(1) translateX(0);
}

.nav-link-effect:hover {
  color: #80ff00 !important;
  text-shadow:
    0 0 15px rgba(128, 255, 0, 0.9),
    -4px 0 0 #00ded3,
    0 0 6px #80ff00;
  transform: skewX(-3deg) scale(1.03) translate(8px, 0px);
}

.nav-link-active {
  color: #80ff00 !important;
  text-shadow: 0 0 12px rgba(128, 255, 0, 0.8);
}

/* Scoped override to ensure menu hover matches index.html (including active link hover). */
#fullscreen-menu .nav-link-effect:hover,
#fullscreen-menu .nav-link-effect.nav-link-active:hover {
  color: #80ff00 !important;
  text-shadow:
    0 0 15px rgba(128, 255, 0, 0.9),
    -4px 0 0 #00ded3,
    0 0 6px #80ff00 !important;
  transform: skewX(-3deg) scale(1.03) translate(8px, 0px) !important;
}

/* Keep the active state glow for non-hover. */
#fullscreen-menu .nav-link-effect.nav-link-active {
  text-shadow: 0 0 12px rgba(128, 255, 0, 0.8);
}

/* Hamburger Click Effect (CodePen ROLxzx: btn18, no SVG) */
.btn-trigger {
  position: relative;
  width: 2rem;
  height: 1.25rem;
  cursor: pointer;
}

.btn-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background-color: currentColor;
  border-radius: 0.125rem;
}

.btn-trigger,
.btn-trigger span {
  display: inline-block;
  transition: all 0.5s;
  box-sizing: border-box;
}

.btn-trigger span:nth-of-type(1) {
  top: 0;
}

.btn-trigger span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}

.btn-trigger span:nth-of-type(3) {
  bottom: 0;
}

/*=============================
btn18 (adapted from CodePen #btn18)
=============================*/
.btn18.is-armed span:nth-of-type(1) {
  -webkit-animation: btn18-bar01 0.5s forwards;
  animation: btn18-bar01 0.5s forwards;
}

@-webkit-keyframes btn18-bar01 {
  0% {
    -webkit-transform: translateY(0.5625rem) rotate(-45deg);
  }

  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}

@keyframes btn18-bar01 {
  0% {
    transform: translateY(0.5625rem) rotate(-45deg);
  }

  100% {
    transform: translateY(0) rotate(0);
  }
}

.btn18.is-armed span:nth-of-type(2) {
  -webkit-animation: btn18-bar02 0.5s forwards;
  animation: btn18-bar02 0.5s forwards;
}

@-webkit-keyframes btn18-bar02 {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-50%);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(-50%);
  }
}

@keyframes btn18-bar02 {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }

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

.btn18.is-armed span:nth-of-type(3) {
  -webkit-animation: btn18-bar03 0.5s forwards;
  animation: btn18-bar03 0.5s forwards;
}

@-webkit-keyframes btn18-bar03 {
  0% {
    -webkit-transform: translateY(-0.5625rem) rotate(45deg);
  }

  100% {
    -webkit-transform: translateY(0) rotate(0);
  }
}

@keyframes btn18-bar03 {
  0% {
    transform: translateY(-0.5625rem) rotate(45deg);
  }

  100% {
    transform: translateY(0) rotate(0);
  }
}

.btn18::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  margin: -0.6875rem 0 0 -0.6875rem;
  border-radius: 50%;
  border: 0.0625rem solid currentColor;
  opacity: 0;
  transition: all 0.1s;
  pointer-events: none;
}

.btn18.active::after {
  -webkit-animation: circle 0.35s;
  animation: circle 0.35s;
}

@-webkit-keyframes circle {
  0% {
    -webkit-transform: scale(0.1);
    opacity: 0;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    -webkit-transform: scale(3.5);
    opacity: 0;
  }
}

@keyframes circle {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }

  50% {
    opacity: 0.6;
  }

  100% {
    transform: scale(3.5);
    opacity: 0;
  }
}

.btn18.active span:nth-of-type(1) {
  -webkit-animation: active-btn18-bar01 0.35s 0.25s forwards;
  animation: active-btn18-bar01 0.35s 0.25s forwards;
}

@-webkit-keyframes active-btn18-bar01 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }

  100% {
    -webkit-transform: translateY(0.5625rem) rotate(-45deg);
  }
}

@keyframes active-btn18-bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }

  100% {
    transform: translateY(0.5625rem) rotate(-45deg);
  }
}

.btn18.active span:nth-of-type(2) {
  -webkit-animation: active-btn18-bar02 0.35s 0.25s forwards;
  animation: active-btn18-bar02 0.35s 0.25s forwards;
}

@-webkit-keyframes active-btn18-bar02 {
  0% {
    opacity: 1;
    -webkit-transform: translateY(-50%);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-50%);
  }
}

@keyframes active-btn18-bar02 {
  0% {
    opacity: 1;
    transform: translateY(-50%);
  }

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

.btn18.active span:nth-of-type(3) {
  -webkit-animation: active-btn18-bar03 0.35s 0.25s forwards;
  animation: active-btn18-bar03 0.35s 0.25s forwards;
}

@-webkit-keyframes active-btn18-bar03 {
  0% {
    -webkit-transform: translateY(0) rotate(0);
  }

  100% {
    -webkit-transform: translateY(-0.5625rem) rotate(45deg);
  }
}

@keyframes active-btn18-bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }

  100% {
    transform: translateY(-0.5625rem) rotate(45deg);
  }
}