/**
 * Fonts
 */

/* Custom emoji font-family to standardize appearance across platforms */
@font-face {
  font-family: "color-emoji";
  src: local("Apple Color Emoji"),
  local("Twemoji Mozilla"),
  local("Segoe UI Emoji"),
  local("Segoe UI Symbol"),
  local("Noto Color Emoji"),
  local("EmojiOne Color"),
  local("Android Emoji");
}

/**
 * Reset
 */

body,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
p,
pre,
dl,
dd,
ol,
ul,
figure,
img,
hr,
fieldset,
legend {
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  /* The scene art is sized off viewport HEIGHT (auto 100vh backgrounds,
     86.43vh pill anchoring), so on narrow/tall windows horizontal excess is
     expected by design — clip it at the root so it can never become a
     sideways scroll (iOS Safari requires the clip on html, not just body).
     `clip` avoids creating a scroll container; `hidden` is the fallback. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif, color-emoji;
}

a, a:hover, a:focus, a:active, a:visited {
  text-decoration: none;
  color: inherit;
}

button, input {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
}

input:focus {
  outline:0;
}

/**
 * Landing page
 */

body {
  position: relative;
  background: #000;
}

/**
 * Scenes (videos)
 */

.clear__scene {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* dvh tracks the mobile browser's dynamic toolbar so the hero doesn't jump
     as the URL bar collapses; vh stays first as the fallback. */
  height: 100vh;
  height: 100dvh;

  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;

  color: #fff;
}

.clear__video {
  position: absolute;
  top: 37.6%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 200ms ease-in-out;
  cursor: pointer;
}

/* Hide video while still loading it, its final size will be set once loaded */
/* This fixes some issues on Safari iOS */
.clear__video video {
  width: 0px;
  height: 0px;

  /* Do not go higher! This must be the minimum radius possible so that the \
    video doesnt go past the iPhone actual bezel  */
  border-radius: 15px;
}

.clear__frame {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
}

/* Museum of Themes pill — hero scene 1 top-right (designer spec,
   Figma node 20896:177002). z-index 1: sibling video/frame layers are
   all z-index auto, and the video's transform makes a stacking context,
   so 1 is enough to paint and receive clicks above both. */
.clear__museum-link {
  position: absolute;
  top: 20px;
  /* Anchor to the centered scene art, not the viewport: the tile/frame images
     are 2560x1481 (aspect 1.72857) rendered at auto 100vh and centered, so the
     art's right edge sits at 50% + 86.43vh. Pin the pill 20px inside that edge;
     min() clamps to the viewport's own 20px inset on narrow windows where the
     art overflows (previous behavior). translateX(-100%) right-aligns the pill
     to that x — hover must re-state it (transforms don't compose across rules). */
  right: auto;
  /* Two declarations per the dvh fallback pattern: an unsupported dvh inside
     min() invalidates the whole declaration, so old browsers keep the vh one.
     The anchor must use the same unit as the scene height (dvh below) or the
     pill drifts from the art edge while the mobile URL bar collapses. */
  left: min(calc(50% + 86.43vh - 20px), calc(100% - 20px));
  left: min(calc(50% + 86.43dvh - 20px), calc(100% - 20px));
  transform: translateX(-100%);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* The clamp branch of left leaves ~20px of layout width; without nowrap,
     shrink-to-fit collapses the pill to min-content and the label stacks
     three lines (transforms are paint-only and can't rescue layout width). */
  white-space: nowrap;
  padding: 6px 14px 6px 8px;
  background: #fff;
  border-radius: 999px;
  filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.15));
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: #31271e;
  text-decoration: none;
  transition: transform 200ms ease, filter 200ms ease;
}

/* All states declared: the global reset (a, a:hover, a:focus, a:active,
   a:visited { color: inherit }) is specificity (0,1,1), which beats a bare
   class — a visited link would inherit the scene's white and vanish on the
   white pill. */
.clear__museum-link:hover,
.clear__museum-link:focus,
.clear__museum-link:active,
.clear__museum-link:visited {
  color: #31271e;
}

.clear__museum-link:hover {
  transform: translateX(-100%) translateY(-1px);
  filter: drop-shadow(0px 5px 4px rgba(0, 0, 0, 0.2));
}

.clear__museum-link img {
  display: block;
  width: 20px;
  height: 20px;
}

.clear__museum-link span {
  color: #31271e;
}

@media screen and (max-width: 640px) {
  .clear__museum-link {
    top: 14px;
    left: min(calc(50% + 86.43vh - 14px), calc(100% - 14px));
    left: min(calc(50% + 86.43dvh - 14px), calc(100% - 14px));
    /* keep an effective ~40px tap target even as the pill shrinks */
    padding: 8px 12px 8px 8px;
    font-size: 13px;
  }
}

/**
 * Hero (scene 1) — store CTAs + scroll cue (Figma node 12938:41340)
 */

/* Smooth-scroll for the scroll cue's #more anchor; motion-sensitive users
   opt out below. */
html {
  scroll-behavior: smooth;
}

/* Single flow-column holding the copy, store badges, and scroll cue. It lives
   in the scene's normal flow and is TOP-anchored a fixed height-relative amount
   below the phone (margin-top ~68dvh; the phone/video bottom sits at ~65%). The
   top anchor is deterministic: the headline always clears the phone regardless
   of how many lines the subtitle wraps to (it wraps to 4 on real iOS Safari).
   The stack then flows DOWNWARD as one unit, so copy, badges, and arrow can
   never overlap each other. It is position:static on purpose — a static box is
   not a containing block, so the absolutely-positioned badges keep anchoring to
   .clear__scene--01 (beside the phone), not to this fold. */
.clear__hero-fold {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  /* Height-relative so it tracks the height-scaled phone art; dvh twin tracks
     the mobile URL bar. */
  margin-top: 68vh;
  margin-top: 68dvh;
}

/* Two store badges anchored to the right of the phone. Like
   .clear__museum-link, the horizontal offset is expressed in vh/dvh so the
   buttons track the phone as the scene art (height-scaled) grows and shrinks.
   z-index 1 paints them above the video/frame layers (both z-index auto). */
.clear__hero-cta {
  position: absolute;
  top: 56%;
  left: calc(50% + 17vh);
  left: calc(50% + 17dvh);
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.clear__hero-cta-button {
  display: block;
  filter: drop-shadow(0px 4px 2px rgba(0, 0, 0, 0.15));
  transition: transform 200ms ease, filter 200ms ease;
}

.clear__hero-cta-button:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0px 5px 4px rgba(0, 0, 0, 0.2));
}

.clear__hero-cta-button:active {
  transform: translateY(0);
}

.clear__hero-cta-button img {
  display: block;
  width: 120px;
  height: 40px;
}

/* Scroll cue — circled down arrow, nested directly under the copy (Figma), the
   last item in .clear__hero-fold. Centred by the fold's align-items, so it
   needs no transform of its own; the bob animates the Y axis only (a
   translateX here would shove a flow-centred item sideways). Disabled under
   prefers-reduced-motion. */
.clear__scroll-cue {
  z-index: 1;
  display: flex;
  color: #fff;
  opacity: 0.9;
  transition: opacity 200ms ease;
  animation: clear__scroll-bob-y 2s ease-in-out infinite;
}

.clear__scroll-cue:hover {
  opacity: 1;
}

.clear__scroll-cue svg {
  display: block;
  width: 28px;
  height: 28px;
}

.clear__scroll-cue:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 50%;
}

/* Same circled arrow as the hero, anchored to the bottom-centre of scenes 2–5
   (their content is absolute, so there's no flow column to sit in). Explicit
   28px width makes the centering deterministic (don't rely on the flex anchor
   shrink-wrapping the SVG); negative margin centres without a transform, leaving
   the bob's translateY intact. */
.clear__scroll-cue--in-scene {
  position: absolute;
  bottom: 24px;
  left: 50%;
  width: 28px;
  margin-left: -14px; /* half the 28px width */
}

/* .clear__scene-content is top:72%-anchored while this arrow sits at a fixed
   bottom:24px, so the two converge as viewport height shrinks — verified
   collisions on scenes 02-05 up to 800px tall (clear by 850px), which covers
   common laptop heights (1366x768, 1280x800), not just short mobile viewports.
   Hide the in-scene arrows below that threshold rather than reflow the copy. */
@media (max-height: 850px) {
  .clear__scroll-cue--in-scene {
    display: none;
  }
}

@keyframes clear__scroll-bob-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .clear__scroll-cue {
    animation: none;
  }
}

/* Narrow OR short screens: the beside-the-phone badge layout needs both
   horizontal room (wide) and vertical room (tall). Narrow phones (≤640w) and
   short/landscape viewports (≤600h, which don't match the width query) both
   lack one, so in either case the badges rejoin the flow-column
   (position:static) between the copy and the arrow — one top-anchored stack
   that cannot self-overlap. */
@media screen and (max-width: 640px), screen and (max-height: 600px) {
  .clear__hero-fold {
    gap: 12px;
  }

  .clear__scene--01 .clear__scene-content p {
    font-size: 20px;
    line-height: 24px;
    /* Cap to the viewport with a gutter: the root clips horizontal overflow,
       so an over-wide line would truncate rather than scroll. */
    max-width: min(320px, calc(100vw - 32px));
  }

  .clear__hero-cta {
    position: static;
    transform: none;
    flex-direction: row;
    gap: 10px;
  }
}

/* Short viewports (SE portrait, small windows) — keep the ~68dvh top anchor
   (so the headline still clears the phone) but shrink the type and gaps so the
   taller 4-line stack fits below it. Keyed on max-height (not width) so short
   windows are covered; landscape (which drops the subtitle below) is handled
   further down. */
@media (max-height: 680px) {
  .clear__hero-fold {
    gap: 8px;
  }

  .clear__scene--01 .clear__scene-content h1 {
    font-size: 34px;
    line-height: 33px;
  }

  .clear__scene--01 .clear__scene-content p {
    font-size: 19px;
    line-height: 23px;
  }
}

/* Very short (landscape phones, tiny windows) — drop the non-essential arrow
   so the copy + badges still fit above the fold. */
@media (max-height: 500px) {
  .clear__scroll-cue {
    display: none;
  }
}

/* Landscape phones (~375–430px tall): the height-scaled phone leaves almost no
   room below it, so keep only the headline + store badges (the CTA) and drop
   the secondary subtitle, letting the stack clear the phone instead of sitting
   over it. */
@media (max-height: 430px) {
  .clear__scene--01 .clear__scene-content p {
    display: none;
  }
}

.clear__scene--01 .clear__frame {
  background-image: url("./../images/scene-frame-01.png");
}

.clear__scene--02 .clear__frame {
  background-image: url("./../images/scene-frame-02.png");
}

.clear__scene--03 .clear__frame {
  background-image: url("./../images/scene-frame-03.png");
}

.clear__scene--04 .clear__frame {
  background-image: url("./../images/scene-frame-04.png");
}

.clear__scene--05 .clear__frame {
  background-image: url("./../images/scene-frame-05.png");
}

.clear__scene--06 .clear__frame {
  background-image: url("./../images/scene-frame-06.png");
  height: 100vh;
  height: 100dvh;
}

/* Scene 6 is 114.3dvh tall but its bezel (.clear__frame) is 100dvh, top-anchored.
   The shared top:37.6% resolves against the taller scene (37.6% × 114.3 ≈ 42.98dvh)
   while the bezel screen sits at 37.6dvh — a ~5.4dvh drop. Pin the video to the
   frame's own 100dvh box — 37.6dvh == 37.6% of the frame — so it tracks the bezel,
   matching scenes 1–5. vh first as the dvh fallback (same layers, so consistent). */
.clear__scene--06 .clear__video {
  top: 37.6vh;
  top: 37.6dvh;
}


/**
 * Scenes (content)
 */

.clear__scene-content {
  position: absolute;
  top: 72%;
  display: flex;
  flex-direction: column;
  text-align: left;
}

.clear__scene-content h1,
.clear__scene-content h2 {
  max-width: 455px;
  font-weight: 600;
}

.clear__scene-content h1 {
  font-size: 42px;
  line-height: 40px;
}

.clear__scene-content h2 {
  font-size: 36px;
  line-height: 34px;
}

.clear__scene-content p {
  max-width: 320px;
  margin-top: 12px;
  font-size: 23px;
  font-weight: 300;
  line-height: 26px;
}

.clear__scene--01 {
  /* 2560x1481. Hero is the LCP element: WebP + JPEG only (no AVIF) so the
     preload in <head> always matches what this rule selects. */
  background-image: url("./../images/scene-tile-01.jpg");
  background-image: image-set(
    url("./../images/scene-tile-01.webp") type("image/webp"),
    url("./../images/scene-tile-01.jpg")  type("image/jpeg"));
}

/* Hero copy: centred (Figma), an in-flow item of .clear__hero-fold. position:
   relative (not static) so it paints ABOVE the absolutely-positioned phone
   frame — otherwise the phone art covers the headline where they meet. It is
   NOT a containing block for the badges (they're a sibling, not a child). */
.clear__scene--01 .clear__scene-content {
  position: relative;
  /* Cancel the inherited top:72% from the base .clear__scene-content — under
     position:relative that would offset the copy down ~72% of the fold height. */
  top: auto;
  z-index: 1;
  text-align: center;
  align-items: center;
  max-width: min(315px, calc(100vw - 32px));
}

.clear__scene--02 {
  /* 2560x1481 */
  background-image: url("./../images/scene-tile-02.jpg");
  background-image: image-set(
    url("./../images/scene-tile-02.avif") type("image/avif"),
    url("./../images/scene-tile-02.webp") type("image/webp"),
    url("./../images/scene-tile-02.jpg")  type("image/jpeg"));
}

.clear__scene--03 {
  /* 2560x1481 */
  background-image: url("./../images/scene-tile-03.jpg");
  background-image: image-set(
    url("./../images/scene-tile-03.avif") type("image/avif"),
    url("./../images/scene-tile-03.webp") type("image/webp"),
    url("./../images/scene-tile-03.jpg")  type("image/jpeg"));
}

.js .clear__scene--03:not(.bg-loaded) { background-image: none; }

.clear__scene--04 {
  /* 2560x1481 */
  background-image: url("./../images/scene-tile-04.jpg");
  background-image: image-set(
    url("./../images/scene-tile-04.avif") type("image/avif"),
    url("./../images/scene-tile-04.webp") type("image/webp"),
    url("./../images/scene-tile-04.jpg")  type("image/jpeg"));
}

.js .clear__scene--04:not(.bg-loaded) { background-image: none; }

.clear__scene--05 {
  /* 2560x1481 */
  background-image: url("./../images/scene-tile-05.jpg");
  background-image: image-set(
    url("./../images/scene-tile-05.avif") type("image/avif"),
    url("./../images/scene-tile-05.webp") type("image/webp"),
    url("./../images/scene-tile-05.jpg")  type("image/jpeg"));
}

.js .clear__scene--05:not(.bg-loaded) { background-image: none; }

.clear__scene--05 .clear__scene-content h2 {
  max-width: 330px;
}

.clear__scene--06 {
  /* 2560x1693 */
  background-image: url("./../images/scene-tile-06.jpg");
  background-image: image-set(
    url("./../images/scene-tile-06.avif") type("image/avif"),
    url("./../images/scene-tile-06.webp") type("image/webp"),
    url("./../images/scene-tile-06.jpg")  type("image/jpeg"));
  background-size: auto 114.3vh;
  background-size: auto 114.3dvh;
  background-position: center top, center bottom;
  height: 114.3vh;
  height: 114.3dvh;
}

.js .clear__scene--06:not(.bg-loaded) { background-image: none; }

.clear__scene--06 .clear__scene-content {
  top: 64%;
}

.clear__scene--end, .clear__scene--pro {
  /* 2560x700 */
  background-image: url("./../images/scene-tile-end.jpg");
  background-image: image-set(
    url("./../images/scene-tile-end.avif") type("image/avif"),
    url("./../images/scene-tile-end.webp") type("image/webp"),
    url("./../images/scene-tile-end.jpg")  type("image/jpeg"));
  height: 47.2vh;
  height: 47.2dvh;
}

.js .clear__scene--end:not(.bg-loaded),
.js .clear__scene--pro:not(.bg-loaded) { background-image: none; }


.clear__scene--pro .clear__scene-content {
  top: 5%;
}

.clear__pro-grid {
  position: absolute;
  top: 20%;
}
.clear__pro-grid img {
  max-width: 450px;
  width: 100%;
  top: 10%;
}

.clear__store {
  margin-top: -25px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.clear__store-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clear__store-icon:active {
  margin-top: 1px;
}

.clear__store-icon:active + .clear__store-badges {
  margin-top: 49px;
}

.clear__store-icon-image {
  width: 245px;
  height: 245px;
}

/* Two official store badges (App Store + Google Play) in a row, reusing the
   hero's .clear__hero-cta-button styling (drop-shadow + hover/active lift). */
.clear__store-badges {
  margin-top: 50px;
  display: flex;
  flex-direction: row;
  gap: 11px;
}

.clear__footer {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 30px;
}

.clear__footer-item {
  cursor: default;
  font-size: 17px;

  user-select: none;
  -webkit-user-select: none;
}

.clear__footer-item-label {
  display: inline-block;
  position: relative;
}

.clear__footer-item-label::after {
  content: "";
  display: block;
  width: 100%;
  margin-top: 2px;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.clear__footer-item-label:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/**
 * Media queries
 */

@media screen and (max-width: 640px) {
  .clear__footer {
    gap: 25px;
  }

  .clear__footer-item {
    font-size: 16px;
  }
}

@media screen and (max-width: 480px) {
  .clear__footer {
    gap: 20px;
  }

  .clear__footer-item {
    font-size: 15px;
  }
}

@media screen and (max-width: 350px) {
  .clear__scene-content h1 {
    font-size: 38px;
  }

  .clear__scene-content h2 {
    font-size: 34px;
  }

  .clear__scene-content p {
    max-width: 280px;
    font-size: 20px;
  }

  .clear__scene--05 .clear__scene-content h2 {
    max-width: 280px;
  }

  .clear__footer {
    gap: 15px;
  }

  .clear__footer-item {
    font-size: 14px;
  }
}

@media screen and (max-height: 960px) {
  .clear__store {
    margin-top: 0px;
  }

  .clear__store-icon-image {
    width: 225px;
    height: 225px;
  }

  .clear__store-icon:active + .clear__store-badges {
    margin-top: 29px;
  }

  .clear__store-badges {
    margin-top: 30px;
  }

  .clear__footer-item {
    font-size: 16px;
  }
}

@media screen and (max-height: 768px) {
  .clear__store {
    margin-top: -15px;
  }

  .clear__store-icon-image {
    width: 190px;
    height: 190px;
  }

  .clear__store-icon:active + .clear__store-badges {
    margin-top: 14px;
  }

  .clear__store-badges {
    margin-top: 15px;
  }

  .clear__footer-item {
    font-size: 16px;
  }
}

@media screen and (max-height: 640px) {
  .clear__store-icon-image {
    width: 175px;
    height: 175px;
  }

  .clear__footer-item {
    font-size: 15px;
  }
}

@media screen and (max-height: 560px) {
  .clear__footer-item {
    font-size: 14px;
  }
}

/* Very short / landscape viewports (≤500px tall): the end scene is only ~47dvh,
   too short to fit the full-size app icon AND the badge row above the absolute
   footer (they collide). Drop the decorative icon and keep the functional
   badges — the actual CTA. */
@media screen and (max-height: 500px) {
  .clear__store-icon {
    display: none;
  }

  .clear__store-badges {
    margin-top: 30px;
  }
}

.clear__privacy {
  box-sizing: border-box;
  background: rgb(255,255,255);
  position: absolute;
  max-width: 450px;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  padding: 30px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.clear__privacy h1 {
  margin: 20px;
}

.clear__privacy p {
  margin: 20px;
}

@media screen and (max-width: 640px) {
  .clear__privacy {
    width: 90%;
    padding: 20px;
    background: rgba(255,255,255,0.8);
    top: 0;
    border-radius: 12px;
  }
}

.clear__scene-content p.fineprint {
  font-size: 12px;
  line-height: 15px;
}