/* Hero phone sequence. Plays inside the same window as the cartoon. The cartoon file is not changed. */
.hero-photo.hero-video { position: relative; }
.hero-bling {
  --gold: #e8b84a;
  --gold-hi: #ffe9a8;
  --gold-lo: #b8861b;
  --warm: #fff4dc;
  --glow: rgb(232 184 74 / .24);
  position: absolute;
  inset: 0;
  z-index: 4;
  container-type: size;
  perspective: 1100px;
  display: grid;
  place-items: center;
  background: #07111f;
  color: #fff;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s ease, background-color .7s ease;
}
.hero-bling.is-on { opacity: 1; visibility: visible; }
.hero-bling.is-words { background: #050505; }

.bling-glow,
.bling-flare {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bling-glow {
  inset: -10%;
  background:
    radial-gradient(52% 62% at 50% 50%, rgb(20 48 76 / .95), transparent 72%),
    radial-gradient(30% 40% at 88% 10%, rgb(232 184 74 / .128), transparent 70%),
    radial-gradient(28% 36% at 8% 92%, rgb(232 184 74 / .08), transparent 70%);
  transition: opacity .6s ease;
}
.hero-bling.is-words .bling-glow { opacity: 0; }
.bling-streaks { display: none; }
.bling-id { display: none; }

.bling-flare { z-index: 3; opacity: 0; }
.hero-bling.v-flash.is-words .bling-flare {
  background: #fff1dc;
  animation: bling-flash .8s ease-out both;
}
.hero-bling.v-flare.is-words .bling-flare {
  background: radial-gradient(closest-side at 50% 50%, rgb(250 232 196 / .72), rgb(226 196 140 / .24) 58%, transparent 100%);
  animation: bling-gold-pulse 1.2s ease-out both;
}

/* Words: warm white lead line, bigger metallic gold second line, soft gold glow, on deep navy */
.bling-words {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  align-content: center;
  justify-items: center;
  margin: 0;
  padding: 0 2cqw;
  text-align: center;
  font-family: Cinzel, "Times New Roman", serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.22;
  opacity: 0;
  pointer-events: none;
  transition: opacity .48s cubic-bezier(.4, 0, .2, 1);
}
.bling-words .w {
  display: block;
  width: max-content;
  white-space: nowrap;
  letter-spacing: 0.04em;
}
.hero-bling.is-words .bling-words { opacity: 1; transition-delay: .12s; }
.hero-bling.is-words .bling-words .w { animation: bling-word-in .52s cubic-bezier(.22, 1, .36, 1) both; }
.hero-bling.is-words .bling-words .g-b { animation-delay: .1s; }
.hero-bling.is-words .bling-words .w-rule { animation: bling-rule-in .5s cubic-bezier(.4, 0, .2, 1) .16s both; }

.bling-words .g-a {
  color: #fbf1dd;
  text-shadow: 0 2px 0 rgb(0 0 0 / .6), 0 0 16px rgb(236 208 150 / .24);
}
.bling-words .g-b,
.bling-words .g-w {
  background:
    linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .76) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat,
    linear-gradient(180deg, #fffaf0 0%, #f6e7c9 20%, #e7cf98 42%, #fbf0d6 54%, #d2b16d 78%, #efdcae 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #3a2d12) drop-shadow(0 0 14px rgb(236 208 150 / .36));
}
.hero-bling.is-words .bling-words .g-b {
  animation: bling-word-in .52s cubic-bezier(.22, 1, .36, 1) .1s both, bling-gold-shine .95s ease-in-out .45s 1 both;
}
.hero-bling.is-words .bling-words .g-w {
  animation: bling-word-in .52s cubic-bezier(.22, 1, .36, 1) both, bling-gold-shine .95s ease-in-out .4s 1 both;
}
.bling-words .w-rule {
  height: max(4px, .9cqw);
  background:
    linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .72) 50%, transparent 62%) 160% 0 / 260% 100% no-repeat,
    linear-gradient(90deg, #b99a5c, #e7cf98, #fffaf0, #e7cf98, #b99a5c);
  box-shadow: 0 0 14px rgb(236 208 150 / .4);
  transform-origin: left center;
  white-space: normal;
}
.hero-bling.is-words .bling-words .w-rule {
  animation: bling-rule-in .42s cubic-bezier(.4, 0, .2, 1) .25s both, bling-gold-shine .95s ease-in-out .6s 1 both;
}

/* soft gold light behind the words, and a few gold sparkles */
.hero-bling::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(55% 52% at 50% 50%, rgb(236 208 150 / .12), transparent 72%);
  opacity: 0;
  transition: opacity .6s ease;
}
.hero-bling.is-words::after { opacity: 1; }
.bling-sparkles { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.bling-sparkles i {
  position: absolute;
  width: var(--s, 14px);
  height: var(--s, 14px);
  background: radial-gradient(circle, #fff 0%, #f7e7ce 35%, rgb(236 208 150 / 0) 70%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0;
  transform: scale(.2);
}
.hero-bling.is-words .bling-sparkles i { animation: bling-twinkle .75s ease-out var(--d, 0s) both; }

/* iPhone: titanium frame, black glass bezel, side buttons, Dynamic Island, glare, floor reflection */
.bling-phone {
  --pw: var(--phone-w, 150px);
  --ph: var(--phone-h, 320px);
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: var(--pw);
  height: var(--ph);
  box-sizing: border-box;
  padding: calc(var(--pw) * .024);
  border-radius: calc(var(--pw) * .185);
  background:
    linear-gradient(100deg, rgb(255 255 255 / .44) 0%, transparent 9%, transparent 88%, rgb(255 255 255 / .28) 100%),
    linear-gradient(165deg, #f4f1ea 0%, #b9b4aa 14%, #66625b 34%, #d9d5cb 52%, #77736b 74%, #e9e5db 100%);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / .75) inset,
    0 0 0 calc(var(--pw) * .012) rgb(30 30 32 / .9) inset,
    0 0 0 1px rgb(0 0 0 / .65),
    0 24px 48px rgb(0 0 0 / .55),
    0 0 44px var(--glow);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.4);
  transform-origin: center center;
  -webkit-box-reflect: below 3px linear-gradient(transparent 76%, rgb(255 255 255 / .24));
  transition:
    width .95s cubic-bezier(.45, 0, .2, 1),
    height .95s cubic-bezier(.45, 0, .2, 1),
    top .95s cubic-bezier(.45, 0, .2, 1),
    padding .95s ease,
    border-radius .95s ease,
    opacity .3s ease,
    transform .45s cubic-bezier(.4, 0, .2, 1),
    filter .3s ease;
}
.bling-phone::before,
.bling-phone::after {
  content: "";
  position: absolute;
  width: calc(var(--pw) * .02);
  min-width: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #6d6a63, #d9d5cb 55%, #8c887f);
}
.bling-phone::before {
  left: calc(var(--pw) * -.016);
  top: 15%;
  height: 4.2%;
  box-shadow:
    0 calc(var(--ph) * .075) 0 0 #a39f96,
    0 calc(var(--ph) * .075 + 17px) 0 0 #a39f96;
}
.bling-phone::after {
  right: calc(var(--pw) * -.016);
  top: 26%;
  height: 11%;
}

.hero-bling.is-arrive .bling-phone {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: bling-fly .78s cubic-bezier(.16, 1, .3, 1) both;
}
.hero-bling.is-full .bling-phone {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Zoomed: portrait phone nearly fills the window. Thin top and side margins keep the bezel and Dynamic Island in view. */
.hero-bling.is-zoom .bling-phone,
.hero-bling.is-scroll .bling-phone,
.hero-bling.is-back .bling-phone,
.hero-bling.is-words .bling-phone {
  --pw: var(--zoom-w, 560px);
  --ph: var(--zoom-h, 1200px);
  top: var(--zoom-top, 600px);
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: 50% 0;
  -webkit-box-reflect: none;
}
.hero-bling.is-back .bling-phone {
  transform: translate(-50%, -50%) scale(.96);
  filter: brightness(1.096);
  transition:
    width .95s cubic-bezier(.45, 0, .2, 1),
    height .95s cubic-bezier(.45, 0, .2, 1),
    top .95s cubic-bezier(.45, 0, .2, 1),
    padding .95s ease,
    border-radius .95s ease,
    opacity .45s ease,
    transform .7s cubic-bezier(.4, 0, .2, 1),
    filter .7s ease;
}
.hero-bling.is-words .bling-phone {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.97);
  filter: blur(1.5px);
  transition:
    width .95s cubic-bezier(.45, 0, .2, 1),
    height .95s cubic-bezier(.45, 0, .2, 1),
    top .95s cubic-bezier(.45, 0, .2, 1),
    opacity .7s cubic-bezier(.4, 0, .2, 1),
    transform .75s cubic-bezier(.4, 0, .2, 1),
    filter .7s ease;
}
@keyframes bling-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) translateZ(-560px) rotateY(-32deg) scale(.5); filter: blur(5px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) translateZ(0) rotateY(0) scale(1); filter: blur(0); }
}

.bling-screen {
  position: relative;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  border: calc(var(--pw, 150px) * .028) solid #040405;
  border-radius: calc(var(--pw, 150px) * .15);
  background: #000;
  container-type: size;
  transition: border-width .95s ease, border-radius .95s ease;
}
.bling-screen::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  height: calc(var(--pw, 150px) * .125);
  background: #000;
}
.bling-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(118deg, rgb(255 255 255 / .112) 0%, rgb(255 255 255 / .032) 22%, transparent 36%, transparent 70%, rgb(255 255 255 / .04) 100%);
}
.hero-photo .hero-bling img.bling-site {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: fill;
  object-position: 0 0;
  margin-top: calc(var(--pw, 150px) * .125);
  transform: translateY(0);
  clip-path: inset(0 0 75% 0);
  opacity: 0;
  transition: opacity .5s ease;
}
.hero-photo .hero-bling img.bling-site-m {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: fill;
  margin-top: calc(var(--pw, 150px) * .125);
  opacity: 1;
  transition: opacity .5s ease;
}
.hero-photo .hero-bling.is-zoom img.bling-site-m,
.hero-photo .hero-bling.is-scroll img.bling-site-m,
.hero-photo .hero-bling.is-back img.bling-site-m,
.hero-photo .hero-bling.is-words img.bling-site-m { opacity: 0; }
.hero-photo .hero-bling.is-zoom img.bling-site,
.hero-photo .hero-bling.is-scroll img.bling-site,
.hero-photo .hero-bling.is-back img.bling-site,
.hero-photo .hero-bling.is-words img.bling-site { opacity: 1; }
.hero-photo .hero-bling.is-scroll img.bling-site,
.hero-photo .hero-bling.is-back img.bling-site,
.hero-photo .hero-bling.is-words img.bling-site {
  clip-path: none;
  transform: translateY(-75%);
}
.hero-photo .hero-bling.is-scroll img.bling-site {
  transition: transform 4.5s cubic-bezier(.25, .1, .75, .9), opacity .5s ease;
}
.bling-island {
  position: absolute;
  z-index: 3;
  top: calc(var(--pw, 150px) * .028);
  left: 50%;
  width: calc(var(--pw, 150px) * .205);
  height: calc(var(--pw, 150px) * .056);
  transform: translateX(-50%);
  border-radius: 99px;
  background: #020202;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .22), 0 0 6px rgb(255 255 255 / .08);
}
.bling-sheen {
  position: absolute;
  inset: 0 -70%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgb(255 255 255 / .128) 48%, transparent 62%);
  mix-blend-mode: screen;
  animation: bling-sheen 2.4s ease-in-out infinite;
}

@keyframes bling-sheen {
  0%, 35% { transform: translateX(-22%); }
  100% { transform: translateX(22%); }
}
@keyframes bling-flash {
  0% { opacity: .72; }
  100% { opacity: 0; }
}
@keyframes bling-gold-pulse {
  0% { opacity: 0; transform: scale(.4); }
  30% { opacity: .76; }
  100% { opacity: .3; transform: scale(1.15); }
}
@keyframes bling-gold-shine {
  from { background-position: 160% 0, 0 0; }
  to { background-position: -60% 0, 0 0; }
}
@keyframes bling-twinkle {
  0% { opacity: 0; transform: scale(.2) rotate(0deg); }
  35% { opacity: .8; transform: scale(1) rotate(25deg); }
  100% { opacity: 0; transform: scale(.35) rotate(60deg); }
}
@keyframes bling-word-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bling-rule-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bling { display: none; }
}
/* A phone still plays the iPhone films first. Reduce Motion must not swap in the cartoon. */
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  .hero-bling { display: grid; }
}