/* Hero (FV) Section CSS
 * HPP HP — Exact values from Figma file hTk2UtIZPusbWScukKNgMV, node 102:76
 * Frame size in Figma: 1441×863px
 */

/* =====================
 * Hero Section
 * ===================== */

.hero {
  position: relative;
  /* Full-bleed: override .section max-width/margin centering */
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  /* Figma FV frame is 863px tall. The header overlays the hero at y=32.
     No negative margin needed — hero starts at top of page, header floats over it. */
  height: 863px;
  min-height: 600px;
  overflow: hidden;
  margin-top: 0;

  /* Dark navy base (from Figma node 102:79: bg-[#112b60]) */
  background-color: #112b60;
}

/* =====================
 * Background image layer
 * (fvimg/fv-img, node 102:77)
 * ===================== */

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Primary stock photo — cover the entire hero */
.hero__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* Secondary stock photo with color-burn blend — also covers entire hero */
.hero__bg-img--overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: color-burn;
  pointer-events: none;
}

/* =====================
 * Bottom gradient
 * (gradients, node 102:82)
 * height: 170px in Figma; positioned at bottom of hero)
 * Fades from transparent to --color-navy-primary (#1a2332)
 * ===================== */

.hero__gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 170px;
  pointer-events: none;
  z-index: 2;
}

.hero__gradient img {
  width: 100%;
  height: 100%;
  display: block;
}

/* =====================
 * Tagline text block
 * (Group 5173, node 102:85)
 * Figma position: x:180 y:417 on 863px-tall frame
 * y ratio: 417/863 ≈ 48.3% from top of frame (not viewport)
 * Text: vertical writing, right-to-left columns, #f4e5b8, 20px
 * ===================== */

.hero__tagline {
  position: absolute;
  /* Figma Group 5173: x:180, y:417 from frame top */
  left: var(--layout-padding-x);   /* 180px */
  top: 417px;                      /* exact y from Figma frame */

  /* Horizontal flex container — each child renders text vertically.
     Do NOT apply writing-mode to the container itself or flex axes flip. */
  display: flex;
  /* Figma column order is right-to-left (一人ひとり on right, PIKAPIKAに on left).
     DOM order: 一人ひとり first → reverse so it renders rightmost. */
  flex-direction: row-reverse;
  /* Top-align columns — Figma shows all columns start at y=417 */
  align-items: flex-start;
  gap: 20px;                       /* gap between columns: (262-221) - 21 = 20px */

  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 500;                /* Medium — Shippori Mincho:Medium */
  font-size: 20px;                 /* text-[20px] from Figma */
  line-height: 1.7;                /* column width (vertical text inline-axis) */
  letter-spacing: 0.22em;          /* spacing between chars within a column */
  color: #f4e5b8;                  /* Accent/Gold — #f4e5b8 from Figma */
  font-feature-settings: 'vert' 1;
  font-style: normal;

  z-index: 3;
}

.hero__tagline-column {
  display: block;
  writing-mode: vertical-rl;      /* each column renders vertically */
  text-orientation: mixed;
  white-space: nowrap;
}

/* PC: brackets「」are hidden, PIKAPIKA letters are stacked upright */
.hero__tagline-bracket {
  display: none;
}

.hero__tagline-upright {
  text-orientation: upright;
  /* letter-spacing inherits from .hero__tagline */
}

/* =====================
 * Scroll indicator
 * Bottom-left of hero
 * ===================== */

.hero__scroll {
  position: absolute;
  /* Figma: scroll indicator sits in the lower portion of the hero,
     within the gradient zone. Position from bottom of hero. */
  bottom: 48px;
  left: var(--layout-padding-x); /* 180px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 4;
}

.hero__scroll-label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(244, 229, 184, 0.7);  /* gold, slightly muted */
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(
    to bottom,
    rgba(244, 229, 184, 0.7) 0%,
    transparent 100%
  );
  position: relative;
  overflow: hidden;
}

/* Animated scroll indicator line */
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(244, 229, 184, 0.9);
  animation: scroll-line 2s ease-in-out infinite;
}

@keyframes scroll-line {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}

/* =====================
 * Large vertical text on right side
 * Figma nodes: 102:72, 102:73, 102:74
 * Positioned within the hero, right side
 * "ストレスのない" x=1202, y=156, w=58, h=350
 * "美しい意識で"   x=1114, y=162, w=58, h=300
 * "世界を変える"   x=1026, y=166, w=58, h=300
 * ===================== */

/* Hero content wrapper — transparent on desktop, flex-centered on mobile */
.hero__content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.hero__side-text {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}

.hero__side-text-col {
  position: absolute;
  writing-mode: vertical-rl;
  font-family: 'Shippori Mincho', 'Noto Serif JP', serif;
  font-weight: 500;
  font-size: 50px;
  line-height: 1.16;   /* w=58px / font-size=50px ≈ 1.16 */
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  font-feature-settings: 'vert' 1;
  white-space: nowrap;
}