/* The photographed Facebook logo remains unchanged. Masks only reveal its pixels. */
html.intro-pending,
html.intro-running {
  background: #000;
  overflow: hidden;
}

html:is(.intro-pending, .intro-running):not(.intro-revealing) body > :not(#brand-intro) {
  visibility: hidden;
}

#brand-intro {
  --intro-gold: #e4c789;
  --intro-teal: #5eb7ae;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  background: #000;
  color: #f4e9cf;
  opacity: 1;
  visibility: visible;
  font-family: Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
}

#brand-intro *,
#brand-intro *::before,
#brand-intro *::after {
  box-sizing: border-box;
}

#brand-intro::before {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 42%, rgb(28 67 65 / 15%), transparent 40%);
  opacity: 0;
}

#brand-intro.is-playing::before {
  animation: intro-atmosphere 4.2s ease both;
}

.brand-intro__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 1040px);
  gap: clamp(14px, 3vh, 30px);
  text-align: center;
}

.brand-intro__index {
  margin: 0;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 9px;
  line-height: 1.5;
  letter-spacing: .32em;
  color: #bba77b;
  opacity: 0;
}

.is-playing .brand-intro__index {
  animation: intro-index .6s .15s ease both;
}

.brand-intro__lens {
  position: relative;
  flex: 0 0 auto;
  width: min(48vh, 370px, 76vw);
  aspect-ratio: 1;
  isolation: isolate;
}

.brand-intro__lens::before {
  content: '';
  position: absolute;
  inset: 5.5% 5.5% 9.5%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(40 105 103 / 13%), transparent 65%);
  opacity: 0;
}

.is-playing .brand-intro__lens::before {
  animation: intro-glass 3.3s .1s ease both;
}

.brand-intro__lens img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.brand-intro__lens-ring {
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 48% 48% at 50% 48%, transparent 0 88%, #000 91% 100%, transparent 100%);
  mask-image: radial-gradient(ellipse 48% 48% at 50% 48%, transparent 0 88%, #000 91% 100%, transparent 100%);
}

.is-playing .brand-intro__lens-ring {
  animation: intro-lens-wake 1.6s .1s cubic-bezier(.16, 1, .3, 1) both;
}

.brand-intro__island {
  opacity: 0;
  /* Geometric clipping also paints reliably on the first uncached image. */
  clip-path: inset(0 0 100% 0);
}

.is-playing .brand-intro__island {
  animation: intro-island-reveal 2.15s .8s cubic-bezier(.22, .65, .25, 1) both;
}

.brand-intro__orbit,
.brand-intro__focus,
.brand-intro__reticle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}

.brand-intro__orbit {
  inset: 3.5% 5.5% 7.5%;
  border: 1px solid rgb(228 199 137 / 13%);
  border-left-color: rgb(228 199 137 / 83%);
  border-bottom-color: transparent;
}

.brand-intro__orbit::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff0c5;
  box-shadow: 0 0 12px #e4c789;
}

.is-playing .brand-intro__orbit {
  animation: intro-orbit 3.4s .15s cubic-bezier(.2, .65, .15, 1) both;
}

.brand-intro__focus {
  inset: 13.5% 15.5% 17.5%;
  border: 1px solid rgb(116 173 167 / 21%);
  border-top-color: rgb(228 199 137 / 58%);
  border-right-color: transparent;
  box-shadow: inset 0 0 20px rgb(70 170 160 / 3%);
}

.is-playing .brand-intro__focus {
  animation: intro-focus 2.3s .3s cubic-bezier(.22, 1, .36, 1) both;
}

.brand-intro__reticle {
  inset: 36% 38% 40%;
  border: 1px solid rgb(235 209 153 / 60%);
}

.brand-intro__reticle::before,
.brand-intro__reticle::after {
  content: '';
  position: absolute;
  inset: 38% -20%;
  border-top: 1px solid rgb(235 209 153 / 50%);
}

.brand-intro__reticle::after {
  transform: rotate(90deg);
}

.is-playing .brand-intro__reticle {
  animation: intro-reticle 1.7s .35s cubic-bezier(.22, 1, .36, 1) both;
}

.brand-intro__scan {
  position: absolute;
  top: 8%;
  left: 29%;
  width: 43%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f2dcac 50%, transparent);
  box-shadow: 0 0 15px rgb(233 207 143 / 42%);
  opacity: 0;
}

.is-playing .brand-intro__scan {
  animation: intro-scan 2.1s .85s cubic-bezier(.22, .65, .25, 1) both;
}

.brand-intro__title {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0 .05em .15em;
  white-space: nowrap;
  font-family: Didot, 'Bodoni MT', 'Times New Roman', serif;
  font-size: clamp(18px, 5.2vw, 64px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .025em;
}

.brand-intro__letter {
  position: relative;
  display: inline-block;
  color: #e4c789;
  background: linear-gradient(115deg, #7b5729 0%, #d5ad60 20%, #fff0c8 35%, #b78b40 49%, #fff1be 65%, #d1a24e 81%, #8a632b 100%);
  background-size: 230% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transform: translateY(9px);
  filter: blur(3px);
}

.is-playing .brand-intro__letter {
  animation: intro-letter .52s calc(1.3s + var(--letter-index) * .075s) cubic-bezier(.16, 1, .3, 1) both;
}

.brand-intro__baseline {
  width: min(52vw, 260px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #caaa68, transparent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}

.is-playing .brand-intro__baseline {
  animation: intro-baseline 2.5s 1.15s cubic-bezier(.22, 1, .36, 1) both;
}

.brand-intro__signature {
  margin: 0;
  color: #c0b295;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: clamp(8px, 1.5vw, 10px);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .3em;
  opacity: 0;
}

.is-playing .brand-intro__signature {
  animation: intro-index .7s 2.9s ease both;
}

.brand-intro__skip {
  position: absolute;
  z-index: 2;
  top: max(20px, env(safe-area-inset-top));
  right: max(22px, env(safe-area-inset-right));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid #5b513b;
  border-radius: 0;
  background: rgb(0 0 0 / 85%);
  color: #dfd0ad;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}

.brand-intro__skip:hover {
  border-color: #d4b876;
  color: #fff0c5;
}

.brand-intro__skip:focus-visible {
  outline: 2px solid #f1d48d;
  outline-offset: 4px;
}

.brand-intro__skip span {
  margin-left: 14px;
  font-size: 14px;
}

#brand-intro.is-revealing {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--intro-exit-duration, 650ms) cubic-bezier(.3, .05, .2, 1);
}

#brand-intro.is-revealing .brand-intro__content {
  transform: scale(1.065) translateY(-6px);
  filter: blur(3px);
  transition: transform var(--intro-exit-duration, 650ms) cubic-bezier(.25, .1, .25, 1), filter var(--intro-exit-duration, 650ms) ease;
}

#brand-intro.is-revealing .brand-intro__skip {
  opacity: 0;
}

@keyframes intro-atmosphere {
  0% { opacity: 0; transform: scale(.9); }
  30%, 85% { opacity: 1; }
  100% { opacity: .5; transform: scale(1.1); }
}

@keyframes intro-index {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes intro-glass {
  0% { opacity: 0; transform: scale(.8); }
  35% { opacity: 1; }
  100% { opacity: .6; transform: scale(1); }
}

@keyframes intro-lens-wake {
  0% { opacity: 0; transform: scale(.94); }
  42% { opacity: .8; }
  72% { opacity: .45; }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes intro-island-reveal {
  0% { opacity: .3; clip-path: inset(0 0 100% 0); }
  25% { opacity: .85; }
  100% { opacity: 1; clip-path: inset(0); }
}

@keyframes intro-orbit {
  0% { opacity: 0; transform: rotate(-110deg) scale(.96); }
  12%, 55% { opacity: .9; }
  100% { opacity: 0; transform: rotate(240deg) scale(1); }
}

@keyframes intro-focus {
  0% { opacity: 0; transform: rotate(75deg) scale(.74); }
  25% { opacity: .8; }
  100% { opacity: 0; transform: rotate(-120deg) scale(1); }
}

@keyframes intro-reticle {
  0% { opacity: 0; transform: scale(1.5) rotate(35deg); }
  25%, 55% { opacity: .75; }
  100% { opacity: 0; transform: scale(.55) rotate(0); }
}

@keyframes intro-scan {
  0% { opacity: 0; top: 11%; }
  12%, 78% { opacity: .6; }
  100% { opacity: 0; top: 87%; }
}

@keyframes intro-letter {
  0% { opacity: 0; transform: translateY(9px); filter: blur(3px); background-position: 100% 50%; }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); background-position: 0% 50%; }
}

@keyframes intro-baseline {
  0% { opacity: 0; transform: scaleX(0); }
  25% { opacity: .6; }
  100% { opacity: .65; transform: scaleX(1); }
}

@media (max-height: 620px) {
  .brand-intro__content { gap: 12px; padding-top: 20px; }
  .brand-intro__lens { width: min(44vh, 280px, 65vw); }
  .brand-intro__title { font-size: clamp(18px, 4vw, 42px); }
  .brand-intro__index { font-size: 8px; }
}

@media (max-width: 480px) {
  .brand-intro__skip { top: max(14px, env(safe-area-inset-top)); right: 14px; font-size: 9px; }
  .brand-intro__index { font-size: 8px; letter-spacing: .2em; }
  .brand-intro__signature { letter-spacing: .2em; }
}

@media (prefers-reduced-motion: reduce) {
  #brand-intro *, #brand-intro::before { animation: none !important; transition: none !important; }
  #brand-intro { transition: opacity 100ms linear !important; }
  .brand-intro__island { opacity: 1; clip-path: inset(0); }
  .brand-intro__letter, .brand-intro__index, .brand-intro__signature { opacity: 1; transform: none; filter: none; }
}