/*! Reality Fracture Banner v1.0.0 */

/* Layout: one stage row where the headline is split around the card fan
   ("Reality" | cards | "Fracture"), with a foot row for the subtitle and button.
   Below 900px it stacks: headline, cards, foot. */
.rfb {
  --rfb-void: #140f36;
  --rfb-dusk: #2a1d63;
  --rfb-cyan: #8ff1ff;
  --rfb-rose: #ff9be3;
  --rfb-gold: #f5d68e;
  --rfb-glass: #eef1ff;
  --rfb-display: "Gloock", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --rfb-text: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;

  --rfb-card: clamp(140px, 15.5vw, 300px);
  --rfb-spread: .84;
  /* wide enough for the tilted outer cards plus a little air before the words */
  --rfb-cluster: calc(var(--rfb-card) * (1.3 + 2 * var(--rfb-spread)) + 16px);
  --rfb-tear: calc(var(--rfb-cluster) / 2 + 2vw);
  --open: 1;
  --mx: 0;
  --my: 0;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
  height: clamp(520px, 42.5vw, 820px);
  margin-block: 0;
  background: var(--rfb-void);
  color: var(--rfb-glass);
  font-family: var(--rfb-text);
  -webkit-font-smoothing: antialiased;
}
.rfb *, .rfb *::before, .rfb *::after { box-sizing: border-box; }

.rfb.rfb--full {
  width: var(--rfb-vw, 100vw);
  max-width: none;
  margin-left: calc(50% - var(--rfb-vw, 100vw) / 2);
  margin-right: calc(50% - var(--rfb-vw, 100vw) / 2);
}

/* ---------- backdrop layers ---------- */
.rfb .rfb__bg,
.rfb .rfb__half {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.rfb .rfb__bg {
  inset: -4%;
  z-index: 0;
  transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -9px), 0);
  transition: opacity 1.2s ease;
}
.rfb .rfb__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 62% 72% at 50% 50%, transparent 35%, rgb(20 15 54 / .62) 100%);
}

.rfb .rfb__half {
  z-index: 1;
  will-change: transform;
}
.rfb .rfb__half::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(20 15 54 / .05) 0%, rgb(20 15 54 / .2) 45%, rgb(20 15 54 / .62) 100%),
    radial-gradient(ellipse 50% 60% at 50% 46%, rgb(20 15 54 / 0) 40%, rgb(20 15 54 / .35) 100%);
}
.rfb .rfb__half--l {
  transform: translate3d(calc(var(--open) * var(--rfb-tear) * -1), 0, 0);
  clip-path: polygon(0% 0%, 50.4% -3%, 48.7% 12%, 51.3% 24%, 48.9% 37%, 51.6% 50%, 48.6% 63%, 51.1% 77%, 49.2% 90%, 50.3% 103%, 0% 100%);
}
.rfb .rfb__half--r {
  transform: translate3d(calc(var(--open) * var(--rfb-tear)), 0, 0);
  clip-path: polygon(50.4% -3%, 48.7% 12%, 51.3% 24%, 48.9% 37%, 51.6% 50%, 48.6% 63%, 51.1% 77%, 49.2% 90%, 50.3% 103%, 100% 100%, 100% 0%);
}
.rfb--rift .rfb__bg {
  inset: -32%;
  transform: none;
  animation: rfb-spin 180s linear infinite;
}
/* the void's white core would wash out the cards; keep it as a glow at the rim */
.rfb--rift .rfb__bg::after {
  background: radial-gradient(circle at 50% 50%, rgb(20 15 54 / .5) 0%, rgb(20 15 54 / .3) 30%, rgb(20 15 54 / .55) 75%);
}

.rfb .rfb__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.rfb .rfb__fx--back { z-index: 2; }
.rfb .rfb__fx--front { z-index: 6; }

/* ---------- content ---------- */
.rfb .rfb__inner {
  position: relative;
  z-index: 4;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "stage" "foot";
  padding-block: clamp(20px, 3vw, 52px) clamp(24px, 3vw, 48px);
  padding-left: max(16px, 4vw, env(safe-area-inset-left, 0px));
  padding-right: max(16px, 4vw, env(safe-area-inset-right, 0px));
}

.rfb .rfb__title {
  grid-area: stage;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(.3em + var(--open) * (var(--rfb-cluster) - .3em));
  margin: 0;
  padding: 0;
  border: 0;
  font: 400 clamp(2.4rem, 5.2vw, 6.5rem)/1 var(--rfb-display);
  letter-spacing: -.012em;
  text-transform: none;
  color: var(--rfb-glass);
  filter: drop-shadow(0 4px 24px rgb(10 6 36 / .9)) drop-shadow(0 0 2px rgb(10 6 36 / .7));
}
.rfb .rfb__word {
  flex: 1 1 0;
  min-width: 0;
  padding-block: .1em;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* the letters nearest the break pick up its light */
.rfb .rfb__word--l {
  text-align: right;
  background-image: linear-gradient(90deg, var(--rfb-glass) 55%, #c9f3ff 82%, var(--rfb-cyan) 100%);
  --from-w: 24%;
}
.rfb .rfb__word--r {
  text-align: left;
  background-image: linear-gradient(90deg, var(--rfb-rose) 0%, #ffd9f3 18%, var(--rfb-glass) 45%);
  --from-w: -24%;
}

.rfb .rfb__cards {
  grid-area: stage;
  place-self: center;
  position: relative;
  width: var(--rfb-cluster);
  height: calc(var(--rfb-card) * 1.3967 * 1.14);
  transform: translate3d(calc(var(--mx) * 7px), calc(var(--my) * 5px), 0);
}
.rfb .rfb__cards::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 135%;
  height: 125%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgb(143 241 255 / .26), rgb(255 155 227 / .12) 55%, transparent 78%);
  z-index: -1;
  pointer-events: none;
}

.rfb .rfb__card {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: var(--rfb-card);
  aspect-ratio: 600 / 838;
  margin: calc(var(--rfb-card) * -.6983) 0 0 calc(var(--rfb-card) / -2);
  border-radius: 4.6% / 3.3%;
  transform: translate(var(--x, 0px), var(--y, 0%)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  z-index: var(--z, 1);
  text-decoration: none;
  outline: none;
}
.rfb .rfb__card--l { --x: calc(var(--rfb-card) * var(--rfb-spread) * -1); --y: 6%; --r: -9deg; --s: .9; --from-x: calc(var(--rfb-card) * var(--rfb-spread)); --d: 140ms; }
.rfb .rfb__card--c { --y: -3%; --z: 2; --from-x: 0px; --d: 0ms; }
.rfb .rfb__card--r { --x: calc(var(--rfb-card) * var(--rfb-spread)); --y: 6%; --r: 9deg; --s: .9; --from-x: calc(var(--rfb-card) * var(--rfb-spread) * -1); --d: 220ms; }
.rfb .rfb__card:focus-visible { outline: 2px solid var(--rfb-cyan); outline-offset: 6px; }
.rfb a.rfb__card:hover { z-index: 3; }

.rfb .rfb__card-in,
.rfb .rfb__card-tilt {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.rfb .rfb__card-tilt {
  position: relative;
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}
.rfb .rfb__card-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4.6% / 3.3%;
  background: linear-gradient(112deg, transparent 32%, rgb(190 245 255 / .42) 45%, rgb(255 190 240 / .34) 52%, transparent 64%);
  background-size: 260% 100%;
  background-position: var(--sheen, 130%) 0;
  mix-blend-mode: screen;
  transition: background-position .5s ease;
  pointer-events: none;
}
.rfb .rfb__card img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: contain;
  border-radius: 4.6% / 3.3%;
  box-shadow: none;
  filter: drop-shadow(0 22px 26px rgb(6 3 26 / .62)) drop-shadow(0 0 1px rgb(238 241 255 / .5));
}

.rfb .rfb__foot {
  grid-area: foot;
  justify-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
}
.rfb .rfb__sub {
  margin: 0;
  font: 500 clamp(1rem, 1.15vw, 1.15rem)/1.4 var(--rfb-text);
  letter-spacing: .01em;
  color: rgb(238 241 255 / .86);
  text-shadow: 0 1px 14px rgb(10 6 36 / .95);
  text-align: center;
}
.rfb .rfb__cta {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .85em 1.9em;
  border: 0;
  background: none;
  font: 600 1rem/1.1 var(--rfb-text);
  letter-spacing: .005em;
  color: var(--rfb-void);
  text-decoration: none;
  white-space: nowrap;
}
.rfb .rfb__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  background: linear-gradient(100deg, var(--rfb-cyan), var(--rfb-glass) 45%, var(--rfb-rose));
  background-size: 220% 100%;
  background-position: 0 0;
  transition: background-position .5s ease, filter .3s ease;
}
.rfb .rfb__cta:hover::before { background-position: 100% 0; filter: brightness(1.06); }
.rfb .rfb__cta:hover,
.rfb .rfb__cta:focus { color: var(--rfb-void); text-decoration: none; }
.rfb .rfb__cta:focus-visible { outline: 2px solid var(--rfb-glass); outline-offset: 5px; }

/* ---------- the intro ----------
   is-armed: set by script before the intro, hides what the intro reveals.
   is-live:  the reveal moment; each style's keyframes take it from there. */
.rfb.is-armed .rfb__card-in,
.rfb.is-armed .rfb__word,
.rfb.is-armed .rfb__foot { opacity: 0; }
.rfb--rift.is-armed .rfb__word { opacity: 1; }
.rfb--shatter.is-armed .rfb__bg { opacity: 0; }
.rfb--burst.is-armed .rfb__bg { opacity: .3; }

/* if banner.js never runs, show everything after a beat rather than stay hidden */
.rfb.is-armed:not(.is-js) .rfb__card-in,
.rfb.is-armed:not(.is-js) .rfb__word,
.rfb.is-armed:not(.is-js) .rfb__foot,
.rfb.is-armed:not(.is-js) .rfb__bg { animation: rfb-failsafe .5s ease 4s forwards; }
@keyframes rfb-failsafe { to { opacity: 1; } }

.rfb.is-live .rfb__foot { animation: rfb-rise .9s cubic-bezier(.16, 1, .3, 1) .65s both; }
.rfb--shatter.is-live .rfb__card-in { animation: rfb-punch 1.15s cubic-bezier(.16, 1, .3, 1) var(--d) both; }
.rfb--shatter.is-live .rfb__word { animation: rfb-part 1.3s cubic-bezier(.16, 1, .3, 1) .2s both; }
.rfb--rift.is-live .rfb__card-in { animation: rfb-emerge 1.4s cubic-bezier(.16, 1, .3, 1) calc(var(--d) * 1.6 + .1s) both; }
.rfb--burst.is-live .rfb__card-in { animation: rfb-pop .95s cubic-bezier(.2, .9, .25, 1.15) var(--d) both; }
.rfb--burst.is-live .rfb__word { animation: rfb-part 1.1s cubic-bezier(.16, 1, .3, 1) .3s both; }
.rfb--burst .rfb__bg { animation: rfb-breathe 24s ease-in-out infinite alternate; }

@keyframes rfb-punch {
  0%   { opacity: 0; transform: translateX(var(--from-x)) scale(.42); filter: blur(12px) brightness(2.6); }
  30%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes rfb-emerge {
  0%   { opacity: 0; transform: translateX(var(--from-x)) translateY(38%) scale(.66); filter: blur(10px) brightness(2.2); }
  35%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes rfb-pop {
  0%   { opacity: 0; transform: translateX(var(--from-x)) scale(.12); filter: brightness(3); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes rfb-part {
  from { opacity: 0; transform: translateX(var(--from-w)); }
  to   { opacity: 1; transform: none; }
}
@keyframes rfb-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rfb-spin { to { rotate: 360deg; } }
@keyframes rfb-breathe { from { scale: 1.02; } to { scale: 1.1; } }

/* ---------- stacked layout ---------- */
@media (max-width: 899px) {
  .rfb {
    --rfb-card: clamp(108px, 31vw, 210px);
    --rfb-spread: .74;
    --rfb-cluster: calc(var(--rfb-card) * 2.48 + 12px);
    --rfb-tear: calc(var(--rfb-cluster) / 2 + 3vw);
    height: auto;
  }
  .rfb .rfb__inner {
    min-height: 580px;
    grid-template-rows: auto auto auto;
    grid-template-areas: "title" "cards" "foot";
    align-content: center;
    row-gap: clamp(20px, 5vw, 32px);
    padding-block: 44px 48px;
  }
  .rfb .rfb__title {
    grid-area: title;
    flex-wrap: wrap;
    gap: 0 .28em;
    font-size: clamp(2.2rem, 10vw, 3.8rem);
  }
  .rfb .rfb__word { flex: 0 0 auto; }
  .rfb .rfb__cards { grid-area: cards; }
  .rfb .rfb__foot { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .rfb .rfb__card-tilt { transform: none; transition: none; }
  .rfb .rfb__bg { animation: none !important; transition: none; }
}