/* HOME hero + YURIU -> WHY YOU transition — single canonical source */
:root {
  --story-slate: var(--y-palette-slate);
  --story-cream: var(--y-color-surface-warm);
  --story-idle: var(--y-palette-line);
}

/* overflow-x: clip is not supported by older phone browsers (iOS Safari
   before 16). There, wide decorations made the page wider than the screen,
   so the phone zoomed out and then "popped" back while scrolling. hidden on
   the root is the fallback; the root never becomes an inner scroller, so
   sticky sections keep working. */
html { overflow-x: hidden; }

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.main_hero {
  position: relative;
  z-index: auto;
  width: 100%;
}

/* Geometry, colour and type of the hero/story live in home-636.css and the
   shared type roles; this file keeps only the motion scaffolding. */

.main_hero_txt {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  word-break: break-word;
}

.main_hero_txt .hero_morph_title {
  margin: 0;
  white-space: nowrap;
}

.main_hero_description {
  margin: var(--hero-title-flow-space, 153.6px) 0 0;
}

.main_hero_description p { margin: 0; }

.hero_morph_title {
  /* Static fallback stays readable even if an external script delays motion. */
  position: absolute;
  z-index: 5;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  pointer-events: none;
  visibility: visible;
  will-change: opacity, filter;
}

html.story-motion-ready .hero_morph_title { position: fixed; }

.hero_morph_word {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: max-content;
  transform: translateX(-50%);
  transform-origin: 0 0;
  will-change: transform;
}

html.story-motion-ready .hero_morph_word { left: 0; }

.hero_morph_yu,
.hero_morph_riu { color: var(--story-cream); }

.brand_story {
  --story-curve-progress: 0;
  position: relative;
  z-index: 3;
  width: 100%;
  height: 280vh;
  min-height: 280vh;
  padding: 0;
  overflow: visible;
}

.brand_story::before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 100%;
  left: 50%;
  width: 140%;
  height: clamp(120px, 15vw, 260px);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform: translate3d(-50%, 0, 0) scaleY(var(--story-curve-progress));
  transform-origin: 50% 100%;
  pointer-events: none;
  will-change: transform;
}

.brand_story::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -2px;
  left: 0;
  width: 100%;
  height: 4px;
  pointer-events: none;
}

.brand_story_container {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 22px, 0);
  overflow: hidden;
  will-change: opacity, filter, transform;
}

.brand_story_text_wrap {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 36px;
}

.brand_story_lead {
  display: block;
  width: 100%;
  margin: 0;
  font-style: normal;
  word-break: break-word;
}

.brand_story_lead > span { display: inline; }
.brand_story_lead > span:first-child { display: block; }
.brand_story_lead > span:nth-child(n + 2) { display: block; }
.brand_story_lead > span:last-child { white-space: normal; }

.brand_story_detail { display: block; white-space: normal; }
.brand_story_detail p { margin: 0; }
.story_sweep_char { transition: color 120ms linear; }

.brand_story_media {
  position: absolute;
  z-index: 1;
  top: 0;
  overflow: hidden;
  pointer-events: none;
}
.brand_story_media img {
  display: block;
  object-position: center;
}

@media (max-width: 768px) {
  /* Compact: the title sits inside the hero and scrolls with it; the story is
     an ordinary section (no 260vh pin, no scroll lock). */
  html.story-motion-ready .hero_morph_title { position: absolute; }
  .brand_story { height: auto; min-height: 0; }
  .brand_story_container { position: relative; }
  /* The rising curve is not used on phones (its progress stays 0) and,
     at 170% width, it was the element that overflowed the screen. */
  .brand_story::before { display: none; }
  .brand_story_text_wrap { gap: 64px; }
  .brand_story_detail br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.story-motion-ready .hero_morph_title { position: absolute; visibility: visible; }
  .brand_story { height: auto; min-height: 100vh; }
  .brand_story::before { transform: translate3d(-50%, 0, 0) scaleY(1); }
  .brand_story_container { position: relative; opacity: 1; filter: none; transform: none; }
}