/* ============================================
   HERO — ACT 1: JAPAN 🇯🇵
   Asymmetric layout · Ink black · Wabi-sabi
   Two-column: words left, portrait right.
   ============================================ */

/* ── Section shell ── */
.hero {
  height: 100vh;
  height: 100dvh;
  background: var(--japan-bg);
  color: var(--japan-text);
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Kanji watermark — 間 (Ma) — the concept of meaningful void ── */
.hero__watermark {
  position: absolute;
  top: 50%;
  right: -4vw;
  transform: translateY(-50%);
  font-family: var(--font-japan);
  font-size: clamp(18rem, 40vw, 45rem);
  color: rgba(232, 228, 220, 0.014);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── Shoji screen lines — grid of a Japanese sliding door ── */
.hero__shoji-h {
  position: absolute;
  top: 38%;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(212, 160, 181, 0.04) 20%,
    rgba(212, 160, 181, 0.07) 50%,
    rgba(212, 160, 181, 0.04) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

.hero__shoji-v {
  position: absolute;
  top: 0;
  left: 55%;
  width: 1px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(212, 160, 181, 0.04) 20%,
    rgba(212, 160, 181, 0.06) 60%,
    rgba(212, 160, 181, 0.03) 85%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Sakura petals — falling animation ── */
.hero__petals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.hero__petal {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  opacity: 0;
  animation: petalFall var(--dur) var(--delay) ease-in-out infinite;
}

/* Petal shape — SVG-free, pure CSS ellipse */
.hero__petal::before {
  content: '';
  display: block;
  width: 100%;
  height: 60%;
  background: var(--japan-accent);
  opacity: 0.25;
  border-radius: 50% 50% 50% 0 / 60% 60% 40% 0;
  transform: rotate(-30deg);
}

@keyframes petalFall {
  0% {
    opacity: 0;
    transform: translateY(-10px) translateX(0) rotate(0deg);
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) translateX(var(--drift)) rotate(540deg);
  }
}

/* ── Two-column layout ── */
.hero__layout {
  flex: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: clamp(7rem, 12vh, 10rem) var(--container-padding) clamp(4rem, 8vh, 6rem);
  position: relative;
  z-index: 10;
}

/* ============================================
   UV HIDDEN ELEMENTS — ultraviolet reveal
   Invisible at rest, glow on hover proximity
   ============================================ */
.hero__uv {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.hero__uv-el {
  position: absolute;
  opacity: 0.08;
  filter: grayscale(1) brightness(0.25) contrast(0.7);
  transition: opacity 0.25s ease-out, filter 0.25s ease-out;
  pointer-events: auto;
  z-index: 2;
  isolation: isolate;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

/* Lit state — triggered by cursor proximity */
.hero__uv-el.uv-lit {
  opacity: var(--uv-opacity, 0.60);
  filter:
    brightness(var(--uv-brightness, 1.4))
    contrast(0.9)
    saturate(1.3)
    hue-rotate(var(--uv-hue, 265deg));
}

/* Violet glow confined inside the element via mix-blend-mode overlay */
.hero__uv-el::after {
  content: '';
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(148, 0, 255, 0.0) 0%,
    rgba(120, 0, 220, 0.0) 100%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  transition: background 0.3s ease-out;
  z-index: 1;
}

.hero__uv-el.uv-lit::after {
  background: radial-gradient(ellipse at 50% 50%,
    rgba(180, 60, 255, calc(var(--uv-glow-a, 0.55))) 0%,
    rgba(120, 0, 220, calc(var(--uv-glow-a, 0.55) * 0.6)) 45%,
    transparent 75%
  );
}

/* ── Positioning + sizing ── */
.hero__uv-el--fuji {
  bottom: 10%;
  left: 4%;
  width: clamp(200px, 24vw, 320px);
  transform: rotate(-3deg);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 60%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 60%, black 30%, transparent 100%);
}

.hero__uv-el--sakura {
  top: 4%;
  right: 6%;
  width: clamp(130px, 16vw, 200px);
  transform: rotate(12deg);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 85% 75% at 50% 50%, black 25%, transparent 100%);
}

.hero__uv-el--samurai {
  bottom: 18%;
  left: 38%;
  width: clamp(150px, 18vw, 240px);
  transform: rotate(-5deg) scaleX(-1);
  -webkit-mask-image: radial-gradient(ellipse 70% 85% at 50% 45%, black 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 85% at 50% 45%, black 30%, transparent 100%);
}

.hero__uv-el--hat {
  top: 12%;
  left: 35%;
  width: clamp(220px, 28vw, 360px);
  transform: rotate(8deg);
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, black 25%, transparent 100%);
}

/* ============================================
   LEFT COLUMN — Identity + Message
   ============================================ */
.hero__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* ── Badge — vermillion hanko-style ── */
.hero__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.4rem;
  background: var(--japan-accent);
  border: none;
  border-radius: 2px;
  margin-bottom: var(--space-md);
  opacity: 0;
  animation: badgeIn 0.6s var(--ease-out) 0.8s forwards;
}

.hero__badge-text {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: #0A0A0A;
}

@keyframes badgeIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* ── H1 Statement — flush-left, massive, commanding ── */
.hero__statement {
  font-family: var(--font-japan);
  font-size: clamp(2.6rem, 6.5vw, 6.2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--japan-text);
  margin-bottom: var(--space-md);
  text-align: left;
}

.hero__line-wrap {
  display: block;
  overflow: hidden;
}

.hero__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(105%);
  animation: wordUp 0.85s var(--ease-out) forwards;
  animation-delay: calc(0.5s + var(--i) * 0.15s);
}

.hero__word--accent {
  color: var(--japan-text);
}

/* The period alone gets the vermillion red */
.hero__period {
  color: var(--japan-accent);
}

@keyframes wordUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Sub paragraph — quiet, left, with accent border ── */
.hero__sub {
  font-family: var(--font-sans);
  font-size: clamp(0.88rem, 1.3vw, 1.05rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--japan-text-mid);
  letter-spacing: 0.01em;
  max-width: 420px;
  margin-bottom: var(--space-lg);
  padding-left: 1rem;
  border-left: 2px solid var(--japan-accent);
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-out) 1.1s forwards;
}

/* ── CTA row ── */
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out) 1.4s forwards;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.8rem 1.6rem;
  border: 1px solid var(--japan-text);
  color: var(--japan-text);
  position: relative;
  overflow: hidden;
  transition: color 0.4s var(--ease-out), background 0.4s var(--ease-out);
}

.hero__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--japan-text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease-out);
  z-index: -1;
}

.hero__cta:hover::before {
  transform: scaleX(1);
}

.hero__cta:hover {
  color: var(--japan-bg);
}

.hero__cta-arrow {
  transition: transform 0.3s var(--ease-out);
}

.hero__cta:hover .hero__cta-arrow {
  transform: translateX(4px);
}

.hero__cta--ghost {
  border-color: var(--japan-text-mid);
  color: var(--japan-text-mid);
}

.hero__cta--ghost::before {
  background: var(--japan-text-mid);
}

.hero__cta--ghost:hover {
  color: var(--japan-bg);
}

/* ── Meta footer — location + role ── */
.hero__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--japan-text-mid);
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out) 1.7s forwards;
}

.hero__meta-sep {
  opacity: 0.3;
}

/* ============================================
   RIGHT COLUMN — Portrait in Japanese Frame
   ============================================ */
.hero__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  opacity: 0;
  animation: frameIn 1s var(--ease-out) 0.6s forwards;
}

@keyframes frameIn {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Frame — torii-inspired bracket corners ── */
.hero__frame {
  position: relative;
  width: min(380px, 100%);
  aspect-ratio: 3 / 4;
  padding: 12px;
}

/* Corner brackets — inspired by torii gate geometry */
.hero__frame-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 3;
}

.hero__frame-corner--tl {
  top: 0; left: 0;
  border-top: 1.5px solid var(--japan-accent);
  border-left: 1.5px solid var(--japan-accent);
}

.hero__frame-corner--tr {
  top: 0; right: 0;
  border-top: 1.5px solid var(--japan-accent);
  border-right: 1.5px solid var(--japan-accent);
}

.hero__frame-corner--bl {
  bottom: 0; left: 0;
  border-bottom: 1.5px solid var(--japan-accent);
  border-left: 1.5px solid var(--japan-accent);
}

.hero__frame-corner--br {
  bottom: 0; right: 0;
  border-bottom: 1.5px solid var(--japan-accent);
  border-right: 1.5px solid var(--japan-accent);
}

/* Subtle full-frame ghost border */
.hero__frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(232, 228, 220, 0.06);
  pointer-events: none;
  z-index: 2;
}

/* ── Portrait images — crossfade on hover ── */
.hero__portrait {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.hero__portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: opacity 1.1s var(--ease-in-out);
}

.hero__portrait-img--default {
  opacity: 1;
  z-index: 1;
}

.hero__portrait-img--hover {
  opacity: 0;
  z-index: 2;
}

.hero__frame:hover .hero__portrait-img--default {
  opacity: 0;
}

.hero__frame:hover .hero__portrait-img--hover {
  opacity: 1;
}

/* ── Vermillion seal stamp — 印鑑 inkan style ── */
.hero__seal {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--japan-accent);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  background: rgba(212, 160, 181, 0.08);
  transform: rotate(6deg);
}

.hero__seal-kanji {
  font-family: var(--font-japan);
  font-size: 1.3rem;
  color: var(--japan-accent);
  line-height: 1;
}

/* ── Frame label — vertical Japanese tag ── */
.hero__frame-label {
  position: absolute;
  top: 50%;
  right: -36px;
  transform: translateY(-50%) rotate(90deg);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  white-space: nowrap;
  z-index: 3;
}

.hero__frame-label-kanji {
  font-family: var(--font-japan);
  font-size: 0.75rem;
  color: rgba(232, 228, 220, 0.15);
  letter-spacing: 0.2em;
}

.hero__frame-label-en {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(232, 228, 220, 0.1);
}

/* ── Status badge under portrait ── */
.hero__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.8rem;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out) 1.6s forwards;
}

.hero__status-icon {
  width: 11px;
  height: 11px;
  stroke: var(--japan-text-mid);
  flex-shrink: 0;
}

.hero__status-text {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--japan-text-mid);
}

/* ── Founder tag — under status badge ── */
.hero__founder {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.8rem;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out) 1.75s forwards;
}

.hero__founder-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--japan-text-mid);
}

.hero__founder-sep {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--japan-text-mid);
  opacity: 0.5;
}

.hero__founder-link {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--japan-text);
  position: relative;
  transition: color 0.3s;
}

.hero__founder-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--japan-accent);
  transition: width 0.35s var(--ease-out);
}

.hero__founder-link:hover { color: var(--japan-accent); }
.hero__founder-link:hover::after { width: 100%; }

/* ============================================
   SCROLL CUE — bottom center
   ============================================ */
.hero__scroll {
  position: absolute;
  bottom: clamp(24px, 4vh, 40px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: fadeUp 0.7s var(--ease-out) 2.2s forwards;
}

.hero__scroll-text {
  font-family: var(--font-mono);
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--japan-text-mid);
}

.hero__scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--japan-text-mid), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%      { opacity: 1;   transform: scaleY(1.2); }
}

/* ============================================
   KEYFRAMES — shared
   ============================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 960px) {
  .hero__layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    text-align: left;
    padding-top: clamp(6rem, 10vh, 8rem);
  }

  .hero__right {
    order: -1;
    align-items: center;
  }

  .hero__frame {
    width: min(280px, 70vw);
  }

  .hero__frame-label {
    display: none;
  }

  .hero__statement {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
  }

  .hero__actions {
    flex-wrap: wrap;
  }

  .hero__watermark {
    font-size: clamp(10rem, 30vw, 18rem);
    right: -8vw;
  }

  .hero__uv {
    display: none;  /* no hover on mobile */
  }
}

@media (max-width: 480px) {
  .hero__frame {
    width: min(240px, 65vw);
  }

  .hero__seal {
    width: 36px;
    height: 36px;
    bottom: 12px;
    right: 12px;
  }

  .hero__seal-kanji {
    font-size: 1rem;
  }

  .hero__cta {
    padding: 0.7rem 1.2rem;
    font-size: 0.6rem;
  }
}