/* The studio intro of the Day 1 demo (2026-10-13). Loaded LAST, after lead-final.css.
   gate -> Brainy Ferrets Corporation (silhouette emblem, contour light) -> Freddyverse Studio, by Max Komar, presents
   -> the Fairy Teller film -> clouds roll in -> "This is Freddyville." -> the clouds part onto the title screen.
   Sizes are in design points: --u is 1/1600 of the Windows stage and one iPhone point (1/844) on iphone.html. */

@font-face { font-family: "FV Nunito"; font-weight: 200 1000; font-style: normal; font-display: block;
  src: url("../fonts/nunito-latin-xrxv3i6li0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "FV Nunito"; font-weight: 200 1000; font-style: normal; font-display: block;
  src: url("../fonts/nunito-latin-ext-xrxv3i6li0.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
    U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ------------------------------------------------------------------------------------------------ the night stage */
.studio-splash.fv-intro {
  --fv-cream: #fff8ec; --fv-gold: #ffc53d; --fv-gold-l: #ffe3a3; --fv-lav: #c4b5fd; --fv-plum: #5b2a86; --fv-ink: #2a1245;
  display: block; cursor: default; isolation: isolate; transform: none; transition: none;
  font-family: "FV Nunito", "Nunito", system-ui, sans-serif; color: var(--fv-cream);
  background:
    radial-gradient(ellipse 46% 58% at 50% 40%, rgba(96, 46, 142, .30), transparent 64%),
    radial-gradient(ellipse 120% 95% at 50% 42%, #190e2a 0%, #0b0614 56%, #040209 100%);
  -webkit-font-smoothing: antialiased;
}
.studio-splash.fv-intro::before { display: none; }
.studio-splash.fv-intro::after {          /* a soft vignette over the night (the film and the clouds stay clean) */
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 85% 80% at 50% 46%, transparent 55%, rgba(2, 1, 5, .55) 100%);
}
.studio-splash.fv-intro[data-intro-state="gate"],
.studio-splash.fv-intro[data-intro-state="loading"] { cursor: pointer; }
.studio-splash.fv-intro:focus-visible { outline: none; }
.studio-splash.fv-intro:focus-visible .fv-hint { color: var(--fv-gold-l); }
.studio-splash.fv-intro.is-leaving { opacity: 1; transform: none; }

/* one design plane, centred: 1600 x 900 on Windows, 844 x 390 points on the iPhone */
.fv-plane { position: absolute; z-index: 2; left: 50%; top: 50%; width: calc(var(--u) * 1600); height: calc(var(--u) * 900);
  translate: -50% -50%; pointer-events: none; }
.f-ios .fv-plane { width: calc(var(--u) * 844); height: calc(var(--u) * 390); }

/* the dust: tiny gold and violet motes drifting in the dark */
.fv-dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; }
.fv-mote { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0, var(--c) 18%, transparent 70%); opacity: 0; will-change: transform, opacity; }

/* ------------------------------------------------------------------------------------------------ slide 1: the logo */
.fv-logo { position: absolute; inset: 0; z-index: 2; }
.fv-intro .studio-emblem.fv-emblem { position: absolute; left: 50%; top: calc(var(--u) * 84); width: calc(var(--u) * 560);
  height: calc(var(--u) * 560); aspect-ratio: auto; margin: 0; translate: -50% 0; animation: none; }
.f-ios .fv-intro .studio-emblem.fv-emblem { top: calc(var(--u) * 12); width: calc(var(--u) * 272); height: calc(var(--u) * 272); }
.fv-intro #studioSilhouettes { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; filter: none; }
.fv-intro .fv-emblem-fallback { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.fv-intro .fv-emblem-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fv-intro .fv-emblem-fallback .fb-disc { position: absolute; left: 11.7%; top: 11.7%; width: 76.6%; height: 76.6%; border-radius: 50%;
  background: radial-gradient(circle at 44% 36%, rgba(115, 70, 104, .85), rgba(70, 36, 112, .8) 55%, rgba(40, 18, 70, .75) 100%);
  box-shadow: 0 0 0 calc(var(--u) * 1.6) rgba(255, 222, 160, .9), 0 0 calc(var(--u) * 26) rgba(196, 140, 255, .45); }

.fv-wordmark { position: absolute; left: 0; right: 0; top: calc(var(--u) * 608); display: flex; flex-direction: column;
  align-items: center; text-align: center; }
.f-ios .fv-wordmark { top: calc(var(--u) * 281); }
.fv-wm-main { display: block; font: 1000 calc(var(--u) * 56)/1 "FV Nunito", sans-serif; letter-spacing: .14em; margin-right: -.14em;
  text-transform: uppercase; white-space: nowrap; font-kerning: none; }
.f-ios .fv-wm-main { font-size: calc(var(--u) * 27); }
.fv-wm-sub { position: relative; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 22);
  margin-top: calc(var(--u) * 16); font: 800 calc(var(--u) * 19)/1 "FV Nunito", sans-serif; letter-spacing: .62em;
  text-transform: uppercase; color: rgba(255, 244, 222, .8); white-space: nowrap; opacity: 0; }
.f-ios .fv-wm-sub { margin-top: calc(var(--u) * 8); font-size: max(12px, calc(var(--u) * 12)); gap: calc(var(--u) * 11); }
.fv-wm-sub > span { margin-right: -.62em; }
@property --fv-line { syntax: "<number>"; inherits: true; initial-value: 0; }
.fv-wm-sub::before, .fv-wm-sub::after { content: ""; display: block; width: calc(var(--u) * 74); height: max(1px, calc(var(--u) * 1.5));
  background: linear-gradient(90deg, transparent, rgba(255, 213, 128, .85)); transform-origin: right center; transform: scaleX(var(--fv-line)); }
.fv-wm-sub::after { background: linear-gradient(270deg, transparent, rgba(255, 213, 128, .85)); transform-origin: left center; }
.f-ios .fv-wm-sub::before, .f-ios .fv-wm-sub::after { width: calc(var(--u) * 34); }

/* letters: a solid back layer for the glow, the metal fill in front (::before), a travelling shine (::after) */
.fv-ch { position: relative; display: inline-block; white-space: pre; opacity: 0; will-change: transform, opacity; }
/* text-shadow is inherited: the front layers must drop it, or the glow is painted OVER their clipped gradient */
.fv-ch::before, .fv-ch::after { content: attr(data-ch); position: absolute; left: 0; top: 0; white-space: pre; pointer-events: none; text-shadow: none; }
.fv-wm-main .fv-ch { color: rgba(255, 196, 92, .22); text-shadow: 0 0 calc(var(--u) * 18) rgba(255, 186, 74, .35), 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(10, 4, 20, .8); }
.fv-wm-main .fv-ch::before, .fv-studio-name .fv-ch::before {
  background: linear-gradient(180deg, #fffbf2 0%, #fff1cf 40%, #ffd88a 72%, #e9a440 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.fv-ch::after { background: linear-gradient(100deg, transparent 0 38%, rgba(255, 255, 255, .95) 50%, transparent 62% 100%) no-repeat;
  background-size: 320% 100%; background-position: 130% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.fv-ch.is-shining::after { animation: fv-shine .62s cubic-bezier(.45, .05, .4, 1) both; }
@keyframes fv-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.fv-ch.sp { width: .32em; }

/* ------------------------------------------------------------------------------------------------ slide 2: the studio */
.fv-studio { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-bottom: calc(var(--u) * 20); text-align: center; }
.f-ios .fv-studio { padding-bottom: calc(var(--u) * 8); }
.fv-studio-name { position: relative; font: 1000 calc(var(--u) * 92)/1.04 "FV Nunito", sans-serif; letter-spacing: .005em; white-space: nowrap;
  font-kerning: none; }
.f-ios .fv-studio-name { font-size: calc(var(--u) * 46); }
.fv-studio-name .fv-ch { color: rgba(255, 190, 90, .2); text-shadow: 0 0 calc(var(--u) * 30) rgba(255, 186, 74, .30), 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(8, 3, 16, .85); }
.fv-by { margin-top: calc(var(--u) * 20); font: 700 calc(var(--u) * 31)/1 "FV Nunito", sans-serif; letter-spacing: .085em;
  color: rgba(255, 246, 228, .82); opacity: 0; white-space: nowrap; }
.f-ios .fv-by { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 16); }
.fv-by b { font-weight: 900; color: rgba(255, 238, 205, .95); }
/* owner 2026-10-14: "прибери by Max Komar": the studio card reads Freddyverse Studio, then presents */
.fv-by { display: none !important; }
.fv-presents { margin-top: calc(var(--u) * 74); font: 600 calc(var(--u) * 27)/1 "FV Nunito", sans-serif; letter-spacing: .36em; margin-right: -.36em;
  color: rgba(226, 210, 255, .8); opacity: 0; white-space: nowrap; }
.fv-presents > span { display: inline-block; transform: skewX(-9deg); }
.f-ios .fv-presents { margin-top: calc(var(--u) * 30); font-size: max(13px, calc(var(--u) * 14)); }
.fv-glint { position: absolute; left: 0; top: 0; width: calc(var(--u) * 46); height: calc(var(--u) * 46); margin: calc(var(--u) * -23) 0 0 calc(var(--u) * -23);
  opacity: 0; pointer-events: none; filter: drop-shadow(0 0 calc(var(--u) * 8) rgba(255, 220, 140, .9)); }
.f-ios .fv-glint { width: calc(var(--u) * 24); height: calc(var(--u) * 24); margin: calc(var(--u) * -12) 0 0 calc(var(--u) * -12); }
.fv-glint::before, .fv-glint::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 8%; translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(ellipse, #fff 0 30%, rgba(255, 226, 150, .9) 45%, transparent 72%); }
.fv-glint::after { width: 8%; height: 100%; }

/* ------------------------------------------------------------------------------------------------ the hint and the wait pulse */
.fv-hint { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * 118); z-index: 6; margin: 0; text-align: center;
  font: 800 calc(var(--u) * 17)/1 "FV Nunito", sans-serif; letter-spacing: .34em; text-indent: .34em; text-transform: uppercase;
  color: rgba(255, 246, 230, .84); text-shadow: 0 0 calc(var(--u) * 14) rgba(196, 150, 255, .35); opacity: 0; pointer-events: none; }
.f-ios .fv-hint { bottom: calc(var(--u) * 52); font-size: max(12px, calc(var(--u) * 12)); }
.fv-hint.is-on { animation: fv-hint-in 1.2s .5s cubic-bezier(.22, 1, .36, 1) both, fv-breathe 3.4s 1.7s ease-in-out infinite; }
@keyframes fv-hint-in { from { opacity: 0; } to { opacity: .62; } }
@keyframes fv-breathe { 0%, 100% { opacity: .62; } 50% { opacity: .95; } }
.fv-wait { position: absolute; left: 50%; bottom: calc(var(--u) * 58); z-index: 8; width: calc(var(--u) * 18); height: calc(var(--u) * 18);
  margin-left: calc(var(--u) * -9); opacity: 0; pointer-events: none; }
.f-ios .fv-wait { bottom: calc(var(--u) * 30); width: calc(var(--u) * 12); height: calc(var(--u) * 12); margin-left: calc(var(--u) * -6); }
.fv-wait::before, .fv-wait::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 14%; translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(ellipse, #fff 0 25%, rgba(255, 212, 120, .95) 45%, transparent 75%); }
.fv-wait::after { width: 14%; height: 100%; }
.fv-wait.is-pulsing { animation: fv-wait .5s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes fv-wait { 0% { opacity: 0; transform: scale(.3) rotate(0deg); } 35% { opacity: 1; transform: scale(1.15) rotate(30deg); }
  100% { opacity: 0; transform: scale(.6) rotate(60deg); } }

/* ------------------------------------------------------------------------------------------------ the film and the clouds */
.fv-film { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; object-fit: cover; background: #05030a; opacity: 0;
  pointer-events: none; }
.fv-clouds { position: absolute; inset: 0; z-index: 7; width: 100%; height: 100%; pointer-events: none; display: block; }
.fv-clouds-fallback { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0;
  background: center / cover no-repeat url("../../story/intro/clouds-fill.webp"); }
.fv-holder { position: absolute; inset: 0; z-index: 141; pointer-events: none; }
.fv-holder > .fv-film { opacity: 0 !important; }

/* ------------------------------------------------------------------------------------------------ the title screen */
.title-screen.fv-title { animation: none; }
.title-screen.fv-title .fv-clouds, .title-screen.fv-title .fv-clouds-fallback { z-index: 1; }
.title-screen.fv-title .title-art { scale: var(--fv-arrive, 1); }
.title-screen.fv-title .title-logo { z-index: 3; top: calc(var(--u) * 28); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
.f-ios .title-screen.fv-title .title-logo { top: calc(var(--u) * 10); }
.fv-welcome { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 16); margin: 0 0 calc(var(--u) * 2);
  font: 900 calc(var(--u) * 30)/1 "FV Nunito", sans-serif; letter-spacing: .34em; text-transform: uppercase; color: #fff8ec; white-space: nowrap;
  -webkit-text-stroke: calc(var(--u) * 1.2) rgba(74, 31, 92, .55); paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * 2.5) 0 rgba(74, 31, 92, .85), 0 0 calc(var(--u) * 10) rgba(52, 18, 72, .85),
    0 0 calc(var(--u) * 26) rgba(52, 18, 72, .55), 0 calc(var(--u) * 6) calc(var(--u) * 20) rgba(45, 16, 64, .5); }
.fv-welcome > span { margin-right: -.34em; }
.f-ios .fv-welcome { gap: calc(var(--u) * 8); font-size: max(12px, calc(var(--u) * 14)); }
.fv-welcome::before, .fv-welcome::after { content: ""; width: calc(var(--u) * 54); height: calc(var(--u) * 3); border-radius: 99px;
  background: linear-gradient(90deg, transparent, #ffd36e); box-shadow: 0 0 calc(var(--u) * 8) rgba(255, 200, 90, .6); }
.fv-welcome::after { background: linear-gradient(270deg, transparent, #ffd36e); }
.f-ios .fv-welcome::before, .f-ios .fv-welcome::after { width: calc(var(--u) * 26); height: calc(var(--u) * 1.6); }

.title-screen.fv-title .title-logo h1 { position: relative; margin: 0; font: 1000 calc(var(--u) * 150)/1.02 "FV Nunito", sans-serif;
  letter-spacing: -.012em; color: transparent; text-shadow: none; white-space: nowrap; font-kerning: none; padding: 0 .06em .14em; }
.f-ios .title-screen.fv-title .title-logo h1 { font-size: calc(var(--u) * 68); }
/* each letter: plum back layer with an outline and a stacked extrusion, cream-to-gold front, a gloss, a glint */
.fv-title .fv-l { position: relative; display: inline-block; white-space: pre; color: #5e2c6c; opacity: 0;
  -webkit-text-stroke: .1em #3b1650; paint-order: stroke fill; transform-origin: 50% 88%; will-change: transform, opacity;
  text-shadow: 0 .014em 0 #6f3a7c, 0 .028em 0 #683574, 0 .042em 0 #61306d, 0 .056em 0 #592b66, 0 .07em 0 #51265e, 0 .084em 0 #492157,
    0 .1em .02em #3f1b4f, 0 .17em .14em rgba(32, 10, 46, .55), 0 .26em .4em rgba(32, 10, 46, .35); }
.fv-title .fv-l::before, .fv-title .fv-l::after { content: attr(data-ch); position: absolute; left: 0; top: 0; white-space: pre;
  -webkit-text-stroke: 0; text-shadow: none; pointer-events: none; }
.fv-title .fv-l::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0 9%, rgba(255, 255, 255, .92) 15%, rgba(255, 255, 255, .28) 33%, rgba(255, 255, 255, 0) 41%),
    linear-gradient(180deg, #fffdf6 0%, #fff3d2 34%, #ffd98c 66%, #f6ae45 88%, #e8962f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.fv-title .fv-l::after { background: linear-gradient(104deg, transparent 0 40%, rgba(255, 255, 255, .9) 50%, transparent 60% 100%) no-repeat;
  background-size: 340% 100%; background-position: 135% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.fv-title .fv-l.is-shining::after { animation: fv-shine .7s cubic-bezier(.45, .05, .4, 1) both; }
.title-screen.fv-title .title-logo > i { display: none;  /* the extruded title carries itself; the old underline only cut across the clock tower */
  width: calc(var(--u) * 360); height: calc(var(--u) * 3.5); margin: calc(var(--u) * -6) auto 0;
  transform: scaleX(0); background: linear-gradient(90deg, transparent, #ffe7a6 22% 78%, transparent);
  box-shadow: 0 0 calc(var(--u) * 12) rgba(255, 205, 110, .55), 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(60, 25, 80, .45); }
.f-ios .title-screen.fv-title .title-logo > i { width: calc(var(--u) * 200); height: calc(var(--u) * 2.2); margin-top: 0; }
.title-screen.fv-title .title-actions.fv-hold { opacity: 0; }
.fv-catch { position: absolute; inset: 0; z-index: 30; background: transparent; }
/* on the iPhone page the two buttons keep their look but get iPhone sizes (44 pt and more, text 12 pt and more) */
.f-ios .title-screen.fv-title .title-actions { bottom: calc(var(--u) * 30); gap: calc(var(--u) * 14); }
.f-ios .title-screen.fv-title .title-button { min-width: calc(var(--u) * 196); min-height: calc(var(--u) * 48); padding: calc(var(--u) * 8) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 17); font-size: calc(var(--u) * 17); }
.f-ios .title-screen.fv-title .title-button.grown::after { right: calc(var(--u) * 10); bottom: calc(var(--u) * -9); padding: calc(var(--u) * 2) calc(var(--u) * 8);
  font-size: calc(var(--u) * 12); }
.f-ios .title-screen.fv-title .soon-note { bottom: calc(100% + var(--u) * 10); width: calc(var(--u) * 420); padding: calc(var(--u) * 6) calc(var(--u) * 12);
  border-radius: calc(var(--u) * 12); font-size: calc(var(--u) * 13); }
.title-screen.fv-title .fv-welcome.fv-hold { opacity: 0; }

/* ------------------------------------------------------------------------------------------------ reduced motion: fades only */
@media (prefers-reduced-motion: reduce) {
  .fv-hint.is-on { animation: none; opacity: .8; }
  .fv-ch.is-shining::after, .fv-title .fv-l.is-shining::after { animation: none; }
}

/* the lead, 2026-10-13 (owner: "This is Freddyville" came in with a jolt): the title's layers are made and painted
   while the clouds still cover them, not on the first frame of the parting. The painting is promoted to its own layer
   from the start, and the letters are a hair above zero opacity (invisible under the cloud) so they are rasterised
   early; their animations still start from 0. */
.title-screen.fv-title .title-art { will-change: scale; }
.fv-title .fv-l { opacity: .002; }

/* the film inside the title screen (built under the film, js/intro.js prebuildTitle): above the painting, below the
   cloud layer and the title, and fully shown */
.title-screen.fv-title .fv-film.fv-film-in-title { z-index: 0; opacity: 1; }
/* "Welcome to" and the two buttons are painted while the film still plays (a hair above zero, invisible under the
   film and the clouds; the catcher in front takes every tap until they are shown), so their first frame on screen
   costs nothing */
.title-screen.fv-title .title-actions.fv-hold, .title-screen.fv-title .fv-welcome.fv-hold { opacity: .002; }