/*
 * FV (First View) Section Stylesheet
 * Page: TOPページ | Order: 1 | Section: FV
 *
 * Enqueue in functions.php:
 * wp_enqueue_style(
 *   'top-fv-style',
 *   get_template_directory_uri() . '/assets/css/pages/front/FV.css',
 *   array(),
 *   '1.0.0'
 * );
 *
 * Google Fonts (add to wp_head or functions.php via wp_enqueue_style):
 * https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&family=Inter:wght@300&display=swap
 */

/* ============================================================
  SECTION-LEVEL CUSTOM PROPERTIES
  (extends common.css :root — section-specific values only)
   ============================================================ */
:root {
  /* --- Colors: Hero overlay --- */
  --fv-color--overlay:           #831843;
  --fv-color--overlay-opacity:   0.28;

  /* --- Colors: Text --- */
  --fv-color--headline:          #FDF2F8;               /* opacity: 100% */
  --fv-color--headline-accent:   #EC4899;
  --fv-color--service-name:      rgba(249, 168, 212, 0.85);; /* #F9A8D4 at 85% */
  --fv-color--scroll-signal:     #FDF2F8;  /* #F9A8D4 at 60% */
  --fv-color--deco-line:         #F9A8D4;               /* opacity: 100% */

  /* --- Colors: Bottom gradient stops --- */
  --fv-color--grad-start:        transparent;
  --fv-color--grad-mid:          rgba(253, 242, 248, 0.4);  /* 55% stop */
  --fv-color--grad-end:          rgba(253, 242, 248, 0.85);  /* 100% stop */

  /* --- Colors: Headline text-shadow --- */
  --fv-color--headline-shadow:   rgba(131, 24, 67, 0.18);

  /* --- Colors: Focus indicator (from common.css --color--focus: #8B5CF6) --- */
  /* Uses var(--color--focus) from common.css */

  /* --- Typography: Headline --- */
  --fv-font--headline-family:    "Playfair Display", Georgia, "游明朝", "Noto Serif JP", serif;
  --fv-font--headline-weight:    600;
  --fv-font--headline-size:      clamp(2rem, 1.563rem + 2.19vw, 4.188rem);
  --fv-font--headline-lh:        1.15;
  --fv-font--headline-ls:        -0.01em;

  /* --- Typography: Service name --- */
  --fv-font--service-family:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fv-font--service-weight:     300;
  --fv-font--service-size:       clamp(0.75rem, 0.641rem + 0.47vw, 1.2rem);
  --fv-font--service-lh:         1.8;
  --fv-font--service-ls:         0.25em;

  /* --- Typography: Scroll signal --- */
  --fv-font--scroll-family:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fv-font--scroll-weight:      500;
  --fv-font--scroll-size:        0.75rem;
  --fv-font--scroll-lh:          1.0;
  --fv-font--scroll-ls:          0.3em;

  /* --- Spacing --- */
  --fv-spacing--gap-headline-service: 32px;   /* gap between headline and service name */
  --fv-spacing--deco-line-width:      24px;   /* decorative line width (expanded) */
  --fv-spacing--deco-line-gap:        8px;    /* gap between deco line and service text */
  --fv-spacing--scroll-bottom:        32px;   /* scroll signal position from bottom */
  --fv-spacing--text-left-mobile:     24px;   /* text block left margin — mobile */
  --fv-spacing--text-left-desktop:    64px;   /* text block left margin — desktop */
  --fv-spacing--text-max-width:       680px;  /* text block max-width */

  /* --- Animation durations (MI-1) --- */
  --fv-dur--photo-opacity:       1400ms;
  --fv-dur--photo-scale:         8000ms;

  /* --- Animation durations (MI-2) --- */
  --fv-dur--text-fade:           700ms;
  --fv-dur--deco-line-expand:    300ms;
  --fv-dur--service-text:        400ms;
  --fv-dur--scroll-signal-in:    400ms;

  /* --- Animation durations (MI-3) --- */
  --fv-dur--scroll-fade-out:     400ms;

  /* --- Animation durations (Scroll signal loop) --- */
  --fv-dur--scroll-loop:         2000ms;

  /* --- Easing curves --- */
  --fv-ease--photo-scale:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fv-ease--text-in:            cubic-bezier(0.16, 1, 0.3, 1); /* swift-out */
  --fv-ease--scroll-out:         ease-out;

  /* --- Parallax (JS reads & updates this) --- */
  --fv-parallax-y:               0px;
}


/* ============================================================
  KEYFRAME ANIMATIONS
   ============================================================ */

/* MI-1: Ken Burns — scale 1.04 → 1.00 (zoom out direction) */
@keyframes fv-ken-burns {
  from { transform: scale(1.04) translateY(var(--fv-parallax-y)); }
  to   { transform: scale(1.00) translateY(var(--fv-parallax-y)); }
}

/* MI-2: Hero photo fade-in */
@keyframes fv-photo-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scroll signal: vertical bar runner loop (CSS only, no JS) */
@keyframes fv-scroll-runner {
  0%   { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(10px); opacity: 0.6; }
  100% { transform: translateY(15px); opacity: 0; }
}

/* Scroll signal: fade-in entry */
@keyframes fv-scroll-signal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ============================================================
  SECTION LAYOUT — Full-bleed 100vw × 100svh
   ============================================================ */

.fv {
  position: relative;
  width: 100%;
  height: 100svh;           /* safe-area aware */
  min-height: 600px;        /* floor for very short viewports */
  overflow: hidden;
  margin-block: 0;           /* section top/bottom margin: 0px */
  background-color: var(--color--bg--1); /* #FDF2F8 — page-level base */
}


/* ============================================================
  PHOTO LAYER
   ============================================================ */

.fv__photo-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fv__picture {
  display: block;
  width: 100%;
  height: 100%;
}

.fv__hero-img {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center;   /* focal point: upper-right one-third */

  /* MI-1 initial state — set via CSS (no JS initial state) */
  opacity: 0;
  transform-origin: 66% 33%;     /* focal point as transform-origin */

  /* Ken Burns animation fires after JS removes .js-fv-hero-hidden */
  /* Applied by JS class toggle — see below */
}

/* JS-triggered Ken Burns (opacity + scale) */
.fv__hero-img.is-animate-photo {
  animation:
    fv-photo-fade-in var(--fv-dur--photo-opacity) ease-in-out forwards,
    fv-ken-burns     var(--fv-dur--photo-scale)   var(--fv-ease--photo-scale) forwards;
}


/* ============================================================
  COLOUR OVERLAY
   ============================================================ */

.fv__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--fv-color--overlay);
  opacity: var(--fv-color--overlay-opacity);
  mix-blend-mode: multiply;
  pointer-events: none;
}


/* ============================================================
  BOTTOM-EDGE GRADIENT
   ============================================================ */

.fv__bottom-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    var(--fv-color--grad-start) 0%,   /* 上端: 完全透明 */
    var(--fv-color--grad-start) 20%,  /* しばらく透明を維持してから徐々に */
    var(--fv-color--grad-mid)   55%,  /* 中間: 薄くにじみ始める */
    var(--fv-color--grad-end)   80%,  /* 下寄り: 背景色に近づく */
    var(--color--bg--1)         100%  /* 下端: 完全に背景色と一致 */
  );
  pointer-events: none;
}


/* ============================================================
  TEXT BLOCK — columns 1–5, left-anchored
   ============================================================ */

.fv__text-block {
  position: absolute;
  z-index: 10;
  bottom: 28%;          /* ~72% height from top on mobile */
  left: var(--fv-spacing--text-left-mobile);
  max-width: var(--fv-spacing--text-max-width);
}

@media (width >= 375px) {
  .fv__text-block {
    bottom: 30%;        /* ~60–70% height from top on desktop — adjusted at wider viewport */
  }
}

@media (width >= 768px) {
  .fv__text-block {
    left: var(--fv-spacing--text-left-desktop);
    bottom: 32%;
  }
}


/* ============================================================
  HEADLINE / PRIMARY INFORMATION
   ============================================================ */

.fv__headline {
  margin: 0;
  padding: 0;
  font-family: var(--fv-font--headline-family);
  font-weight: var(--fv-font--headline-weight);
  font-size: var(--fv-font--headline-size);
  line-height: var(--fv-font--headline-lh);
  letter-spacing: var(--fv-font--headline-ls);
  color: var(--fv-color--headline);
  text-shadow: 0 2px 16px var(--fv-color--headline-shadow);
  display: flex;
  flex-direction: column;
}

.fv__headline-line {
  display: block;
}

.fv__headline-line--1 {
  text-shadow: 0 1px 4px var(--shadow--lg);
}

/* Line 2: ~1em right indent for poetic visual rhythm */
.fv__headline-line--2 {
  padding-inline-start: 0.8em;
}

/* MI-2 initial state — opacity & position set in CSS (no JS) */
.fv__headline-line {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--fv-dur--text-fade) var(--fv-ease--text-in),
    transform var(--fv-dur--text-fade) var(--fv-ease--text-in);
}

/* JS removes .is-animate-hidden by toggling .is-visible */
.fv__headline-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (width >= 375px) {
.fv__headline-line--2 {
  padding-inline-start: 1em;
}
}

/* ============================================================
  BRAND SERVICE NAME / SECONDARY INFORMATION
   ============================================================ */

.fv__service {
  display: flex;
  align-items: center;
  gap: var(--fv-spacing--deco-line-gap);
  margin-block-start: var(--fv-spacing--gap-headline-service);
}

/* Decorative line — initial state: width 0 */
.fv__service-line {
  display: block;
  flex-shrink: 0;
  width: 0;                          /* initial: width 0 */
  height: 1px;
  background-color: var(--color--bg--1);
  transition: width var(--fv-dur--deco-line-expand) var(--fv-ease--text-in);
}

/* JS adds .is-visible to expand the line */
.fv__service-line.is-visible {
  width: var(--fv-spacing--deco-line-width);   /* 24px */
}

/* Service name text — initial state */
.fv__service-name {
  margin: 0;
  padding: 0;
  font-family: var(--fv-font--service-family);
  font-weight: var(--fv-font--service-weight);
  font-size: var(--fv-font--service-size);
  line-height: var(--fv-font--service-lh);
  letter-spacing: var(--fv-font--service-ls);
  color: var(--color--bg--1);

  /* Initial state — set in CSS */
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--fv-dur--service-text) var(--fv-ease--text-in),
    transform var(--fv-dur--service-text) var(--fv-ease--text-in);
}

.fv__service-name.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
  SCROLL SIGNAL / TERTIARY INFORMATION
   ============================================================ */

.fv__scroll-signal {
  position: absolute;
  bottom: var(--fv-spacing--scroll-bottom);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;

  /* Initial state: hidden — JS triggers fade-in at 1400ms */
  opacity: 0;
  transition: opacity var(--fv-dur--scroll-signal-in) var(--fv-ease--scroll-out);
}

.fv__scroll-signal.is-visible {
  opacity: 1;
}

/* JS adds .is-hidden to fade out on scroll */
.fv__scroll-signal.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Touch target wrapper — min 44×44px */
.fv__scroll-signal {
  min-width: 44px;
  min-height: 44px;
  padding-block: 8px;
}

/* Vertical bar container */
.fv__scroll-bar {
  position: relative;
  width: 3px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Static track line */
.fv__scroll-bar-track {
  display: block;
  width: 3px;
  height: 100%;
  background-color: var(--fv-color--scroll-signal);
}

/* Animated runner — CSS keyframe loop (no JS) */
.fv__scroll-bar-runner {
  position: absolute;
  top: 0;
  display: block;
  width: 3px;
  height: 16px;
  background-color: var(--fv-color--deco-line);

  animation: fv-scroll-runner var(--fv-dur--scroll-loop) ease-in-out infinite;
}

/* Scroll text */
.fv__scroll-text {
  display: block;
  font-family: var(--fv-font--scroll-family);
  font-weight: var(--fv-font--scroll-weight);
  font-size: var(--fv-font--scroll-size);
  line-height: var(--fv-font--scroll-lh);
  letter-spacing: var(--fv-font--scroll-ls);
  color: black;
  text-transform: uppercase;
  writing-mode: horizontal-tb;

}


/* ============================================================
  FOCUS INDICATOR — All interactive elements
  (uses --color--focus from common.css = #8B5CF6)
   ============================================================ */

.fv a:focus-visible,
.fv button:focus-visible {
  outline: 2px solid var(--color--focus);
  outline-offset: 3px;
  border-radius: var(--radius--sm);
}


/* ============================================================
  ACCESSIBILITY — prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Ensure content is visible even without animation */
  .fv__hero-img {
    opacity: 1;
    transform: none;
  }

  .fv__headline-line,
  .fv__service-name {
    opacity: 1;
    transform: none;
  }

  .fv__service-line {
    width: var(--fv-spacing--deco-line-width);
  }

  .fv__scroll-signal {
    opacity: 1;
  }
}