/* FanMate front page motion: common layer on top of the untouched production stylesheet (original.css).
   Everything that changes the page sits behind html.fx, which only JS adds, so no-JS and reduced motion get today's page. */

/* The cover hides the page until JS takes over, and gives up by itself if JS never arrives. */
html.opening::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9000;
  animation: fx-giveup 0s linear 5.5s forwards;
}
html.fx-ready::before { display: none; }
@keyframes fx-giveup { to { opacity: 0; visibility: hidden; } }

/* Same values as the inline styles on production, moved here so the prototypes can override them. */
.hero-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 7vw, 5rem);
  letter-spacing: .15em;
  font-weight: 500;
  line-height: 1.1;
}
.hero-sub {
  margin-top: 20px;
  font-size: .8rem;
  letter-spacing: .3em;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
}
.news-footer { margin-top: 40px; text-align: center; }
.talents-footer { margin-top: 60px; text-align: center; }

html.fx { scroll-behavior: auto; }
/* Production's solid bar would cut across the full-screen scenes, so it becomes a soft fade. */
html.fx .nav.scrolled { background: linear-gradient(rgba(0, 0, 0, .78), rgba(0, 0, 0, 0)); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.fx .hero-scene { height: 240svh; }
html.fx .hero { position: sticky; top: 0; height: 100svh; min-height: 0; }
html.fx .hero-light-effect, html.fx .hero-gradient-overlay { display: none; }
html.fx .hero-content { will-change: transform, opacity; }
html.fx .hero-scroll { animation: none; opacity: 1; bottom: clamp(24px, 6svh, 60px); }
html.fx .title-word { animation: none; opacity: 1; background: none; -webkit-text-fill-color: currentcolor; }
html.fx .hero-title { font-size: clamp(2.5rem, 7.4vw, 6rem); }
html.fx .hero-sub { color: rgba(255, 255, 255, .9); }
html.fx .hero-scroll span { color: rgba(255, 255, 255, .78); }
html.fx .nav, html.fx .section-indicator { transition: opacity .9s ease; }
html.opening .nav, html.opening .section-indicator { opacity: 0; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.ch { display: inline-block; will-change: transform, opacity; }
.title-word .ch:last-child { margin-right: -.15em; }
html.fx .title-word.accent .ch {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* About: the words rewrite themselves while the section is held on screen. */
html.fx .about { height: 280svh; padding: 0; }
html.fx .about > .section-content {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  width: 100%;
}
html.fx .about-layout { width: 100%; opacity: 1; transform: none; }
html.fx .about-title {
  font-size: clamp(2.7rem, 6.2vw, 5.6rem);
  line-height: 1.34;
  font-feature-settings: "palt";
  letter-spacing: .02em;
  margin-bottom: clamp(28px, 5svh, 56px);
}
html.fx .about-lead { font-size: clamp(.98rem, 1.25vw, 1.15rem); line-height: 2; color: var(--color-text); }
.w-line { display: inline-block; white-space: nowrap; will-change: transform, opacity; }
.w-old { position: relative; display: inline-block; }
.w-ghost { visibility: hidden; }
.w-a, .w-b { position: absolute; inset: 0; will-change: transform, opacity; }
.w-a { clip-path: polygon(-5% -5%, 105% -5%, 105% 45%, -5% 62%); }
.w-b { clip-path: polygon(-5% 62%, 105% 45%, 105% 105%, -5% 105%); }
.w-strike {
  position: absolute;
  left: -5%;
  top: 53.5%;
  width: 110%;
  height: 2px;
  background: var(--color-accent-light);
  transform-origin: 0 50%;
  transform: rotate(-6.4deg) scaleX(0);
}
.w-new {
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.w-para { display: block; will-change: transform, opacity; }
.w-sc i { display: inline-block; width: 1em; text-align: center; font-style: normal; }
.w-sc.is-done { color: var(--color-accent-light); }

/* Talents come straight after About in all three prototypes. */
html.fx .talents { padding-top: 0; }
html.fx .talents-header, html.fx .talents-grid { display: none; }
html.fx .talents-footer { margin-top: 0; padding: clamp(56px, 10svh, 110px) 0 0; }

.word { display: inline-block; white-space: nowrap; margin-right: .26em; }
.word:last-child { margin-right: 0; }