/* Photos keeps the shared product design (/product/styles.css) and only swaps the accent
   for the pink of its app icon. */
:root { --accent: #D6336C; --accent-bright: #F0508A; }
@media (prefers-color-scheme: dark) {
  :root { --accent: #FF7FA3; --accent-bright: #FF8FB0; }
}

/* Screens are <picture> so the light or dark screenshot follows the visitor's colour scheme. */
.phone picture { display: block; }

/* The shared story scene is written for three steps; Photos has four (grid year/month/day, insights). */
.motion .story[data-steps="4"] { height: 460vh; }
.motion .story[data-active="3"] .step:nth-child(4) { opacity: 1; transform: none; transition-delay: 150ms; }
.motion .story[data-active="3"] .screen:nth-child(4) { transform: none; }
.motion .story[data-active="3"] .screen:nth-child(-n+3) { transform: translateX(-115%) rotate(-14deg); opacity: 0; }
.motion .story[data-active="3"] .story-dots span:nth-child(4) { background: var(--accent); transform: scale(1.4); }