/* The story inherits the brand palette and works as ordinary content with motion disabled. */
.family-section {
  position: relative;
  background: radial-gradient(ellipse at 82% 28%, #fffaf0 0, transparent 56%), #eee7da;
  isolation: isolate;
}

.family-photo {
  background: #39291e;
  border-radius: 48% 48% 4px 4px / 10% 10% 4px 4px;
  box-shadow: 0 22px 54px #46322229;
}

.family-photo::after { z-index: 1; pointer-events: none; }
.family-photo .image-caption { z-index: 3; }

.family-lens {
  position: absolute;
  z-index: 2;
  inset: 18px;
  pointer-events: none;
  border: 1px solid #ffdea875;
  border-radius: inherit;
  box-shadow: inset 0 0 28px #fad59a16;
}

.family-scene {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  transition: opacity .55s var(--ease);
}

.family-photo.scene-selected .family-scene { opacity: 1; }
.family-scene-still { position: absolute; inset: 0; }
.family-scene > .family-scene-still,
.family-mobile-preview > .family-scene-still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

.family-scene-phone {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 12%;
  width: clamp(102px, 30%, 191px);
  padding: 6px;
  border: 1px solid #c8a76b;
  border-radius: 22px;
  background: #211627;
  transform: rotate(-7deg);
  box-shadow: 0 18px 42px #0c0911a8, 0 0 35px #ffc77532;
}

.family-scene-phone img {
  position: static;
  width: 100%;
  height: auto;
  border-radius: 17px;
  transition: none;
}

.family-photo:hover .family-scene-phone img { transform: none; }

.family-photo.scene-selected .family-scene-still { animation: family-cut .75s var(--ease) both; }
.family-photo.scene-selected .family-scene-phone { animation: family-phone-in .82s .08s var(--ease) both; }
.family-photo.scene-selected .image-caption { opacity: 0; }

.family-audiences .audience-row[data-story-row] { display: block; padding: 0; }
.audience-choice {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(88px, 1fr) 2fr 22px;
  align-items: center;
  gap: 12px;
  padding: 13px 9px;
  min-height: 52px;
  border-radius: 4px;
  text-align: start;
  color: var(--light-ink);
  transition: background-color .28s var(--ease), transform .28s var(--ease);
}

.audience-choice strong { font-weight: 700; }
.audience-choice span { color: #6d5b5a; }
.audience-choice .audience-arrow {
  justify-self: center;
  color: #955539;
  font: 16px ThunaiSymbols, serif;
  transition: transform .28s var(--ease);
}
.audience-choice[aria-pressed="true"] { background: #d8bd8c42; }
.audience-choice[aria-pressed="true"] .audience-arrow { transform: rotate(45deg); }
.audience-choice:focus-visible { outline-color: #8d4c31; outline-offset: -2px; }
.family-mobile-preview { display: none; }

@media (hover: hover) {
  .audience-choice:hover { background: #d8bd8c35; }
  html[data-motion="on"] .audience-choice:hover { transform: translateX(4px); }
  html[data-motion="on"] .audience-choice:hover .audience-arrow { transform: translate(2px, -2px); }
}

@keyframes family-cut {
  from { opacity: .3; clip-path: inset(10% 12% 10% 0); scale: 1.14; }
  to { opacity: 1; clip-path: inset(0); scale: 1; }
}
@keyframes family-phone-in {
  from { opacity: 0; transform: translate(36px, 46px) rotate(9deg) scale(.9); }
  to { opacity: 1; transform: translate(0) rotate(-7deg) scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
  .story-ready[data-motion="on"] :is(.universe, .day-section, .family-section, .films-section, .promise-section, .launch-section) {
    --story-arrival: 0;
    --story-travel: 0;
  }

  .story-ready[data-motion="on"] .family-photo {
    clip-path: inset(calc((1 - var(--story-arrival)) * 15%) 0 calc((1 - var(--story-arrival)) * 15%));
  }

  .story-ready[data-motion="on"] .family-photo > img {
    transform: translateY(calc((var(--story-travel) - .5) * -55px)) scale(calc(1.08 + (1 - var(--story-arrival)) * .16));
    transition: none;
  }

  .story-ready[data-motion="on"] .family-lens {
    transform: scale(calc(.86 + var(--story-arrival) * .14));
    opacity: var(--story-arrival);
  }

  .story-ready[data-motion="on"] .family-copy h2 {
    transform: translateY(calc((1 - var(--story-arrival)) * 38px));
  }

  .story-ready[data-motion="on"] .day-photo > img {
    translate: 0 calc((var(--story-travel) - .5) * -42px);
    scale: 1.1;
  }

  .story-ready[data-motion="on"] .day-section .phone-wrap {
    translate: 0 calc((var(--story-travel) - .5) * -58px);
  }

  .story-ready[data-motion="on"] .universe .cosmos-panel {
    transform: translateY(calc((1 - var(--story-arrival)) * 38px));
  }

  .story-ready[data-motion="on"] .films-section .film-art {
    clip-path: inset(0 0 calc((1 - var(--story-arrival)) * 19%) 0 round calc((1 - var(--story-arrival)) * 20px));
  }

  .story-ready[data-motion="on"] .promise-photo {
    transform: translateY(calc((var(--story-travel) - .5) * -105px)) scale(calc(1.16 + (1 - var(--story-arrival)) * .07));
  }

  .story-ready[data-motion="on"] .launch-orbit {
    rotate: calc(var(--story-travel) * 43deg);
    scale: calc(.8 + var(--story-arrival) * .2);
  }
}

@media (max-width: 800px) {
  .family-lens { inset: 10px; }
  .family-photo.scene-selected .family-scene,
  .family-photo.scene-selected .family-scene-phone { display: none; }
  .family-photo.scene-selected .image-caption { opacity: 1; }
  .family-audiences .audience-row[data-active="true"] .family-mobile-preview {
    display: block;
    position: relative;
    width: 100%;
    min-height: 212px;
    margin: 4px 0 12px;
    overflow: hidden;
    border-radius: 8px;
    background: #3a2c32;
  }
  .family-mobile-preview .family-scene-phone { bottom: 9%; width: clamp(64px, 20%, 104px); padding: 4px; border-radius: 13px; }
  .family-mobile-preview .family-scene-phone img { border-radius: 9px; }
  .family-mobile-preview .family-scene-still { animation: family-cut .65s var(--ease) both; }
  .family-mobile-preview .family-scene-phone { animation: family-phone-in .72s .06s var(--ease) both; }
}

.family-brand-signature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 4vw, 60px);
  margin: clamp(22px, 5vw, 64px) 0 0;
  padding: clamp(15px, 3.5vw, 30px);
  border: 1px solid #73523a;
  border-radius: 5px;
  background: radial-gradient(ellipse at 50% 80%, #4a2532, #1e121c 75%);
}

.family-brand-signature img { display: block; width: min(56vw, 305px); height: auto; }
.family-brand-signature::before,
.family-brand-signature::after {
  content: '';
  height: 1px;
  background: linear-gradient(90deg, transparent, #c89b5b9c);
}
.family-brand-signature::after { transform: scaleX(-1); }