@charset "UTF-8";

/* ブラックフライデーの入場演出。読み込みは course/common/campaign-intro.php。
  色はバナーと同じ黒・白・朱。 */

.bfi {
  --bfi-accent: #ff5a36;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050506;
  color: #fff;
  container-type: size;
  cursor: pointer;
  animation: bfi-fade .5s ease-out both;
  font-feature-settings: "palt";
}
.bfi.is-out { animation: bfi-fade-out .7s ease-in forwards; }

.bfi__stage { position: relative; text-align: center; }

.bfi__line { display: flex; justify-content: center; line-height: .86; }
.bfi__ch {
  display: inline-block;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: min(19cqw, 24cqh);
  letter-spacing: -.02em;
  opacity: 0;
}
.bfi__ch.is-on { animation: bfi-rise .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.bfi__line--2 .bfi__ch { color: var(--bfi-accent); }

/* うしろの朱の灯り */
.bfi__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 45% at 50% 55%, rgba(255, 90, 54, .22), transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.bfi__offer {
  margin-top: min(4cqw, 4cqh);
  opacity: 0;
  white-space: nowrap;
}
.bfi__offer-lbl {
  display: inline-block;
  margin-bottom: .5em;
  padding: .3em 1em;
  border: 1px solid var(--bfi-accent);
  border-radius: 999px;
  background: rgba(255, 90, 54, .14);
  font-size: max(.9rem, min(2cqw, 2.6cqh));
  font-weight: 800;
  letter-spacing: .14em;
  color: #ffb9a8;
}
.bfi__offer-row { display: flex; align-items: baseline; justify-content: center; }
.bfi__offer-pre {
  margin-right: .25em;
  font-size: max(1.3rem, min(4.5cqw, 5.5cqh));
  font-weight: 900;
}
.bfi__offer-num {
  font-size: max(3rem, min(11cqw, 13cqh));
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 40px rgba(255, 90, 54, .55);
}
.bfi__offer-off {
  margin-left: .2em;
  font-size: max(1.3rem, min(4.5cqw, 5.5cqh));
  font-weight: 900;
  color: var(--bfi-accent);
}

.bfi__offer-note {
  margin-top: .9em;
  font-size: max(.8rem, min(1.6cqw, 2.2cqh));
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .7);
}

.bfi__skip {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  font-size: .75rem;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .45);
}

.bfi__glow.is-on { animation: bfi-fade 1.2s ease-out forwards; }
.bfi__offer.is-on { animation: bfi-rise 1s cubic-bezier(.2, .7, .2, 1) forwards; }

@keyframes bfi-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bfi-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes bfi-rise {
  0%   { opacity: 0; filter: blur(14px); transform: translateY(.12em) scale(1.04); }
  100% { opacity: 1; filter: blur(0);    transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bfi__ch.is-on, .bfi__offer.is-on { animation: bfi-fade .4s forwards; }
}