/* A local, native-CSS TikTok entrance. Time and translations stay in app.js/i18n.js. */
.loading-gate {
  --gate-progress: 0;
  --gate-cyan: #25f4ee;
  --gate-red: #fe2c55;
  isolation: isolate;
  overflow: hidden;
  padding: max(40px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right)) max(40px, env(safe-area-inset-bottom)) max(40px, env(safe-area-inset-left));
  background: #090a0c;
  color: #fff;
}
.loading-gate::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse at 74% 46%, #1b1e21 0, transparent 49%);
}
.gate-frame {
  direction: ltr;
  width: min(1040px, 100%);
  height: min(640px, calc(100dvh - 96px));
  min-height: 400px;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  grid-template-rows: 66px 1fr;
  column-gap: 56px;
  align-items: start;
}
.gate-brand { grid-column: 1; grid-row: 1; align-self: start; }
.loading-gate .gate-logo { width: 148px; height: 44px; object-fit: contain; margin: 0; }
.gate-copy { grid-column: 1; grid-row: 2; align-self: center; padding-bottom: 24px; min-width: 0; }
.loading-gate .gate-title {
  direction: inherit;
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.025em;
  color: #f4f4f5;
  text-align: start;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.loading-gate .gate-number {
  direction: ltr;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin: 22px 0 35px;
  font-variant-numeric: tabular-nums lining-nums;
}
.loading-gate .gate-number strong {
  display: block;
  min-width: 1.12em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(108px, 12.5vw, 164px);
  line-height: .92;
  letter-spacing: -.075em;
  font-weight: 700;
  color: #fff;
  text-shadow: -2px 0 0 rgb(37 244 238 / .22), 2px 0 0 rgb(254 44 85 / .2);
}
.loading-gate .gate-number span {
  max-width: 100%;
  color: #a8a9ae;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.gate-progress-wrap { position: relative; width: min(360px, 100%); }
.loading-gate #gateProgress {
  display: block;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #303136;
}
.loading-gate #gateProgress::-webkit-progress-bar { background: #303136; }
.loading-gate #gateProgress::-webkit-progress-value { background: transparent; }
.loading-gate #gateProgress::-moz-progress-bar { background: transparent; }
.gate-progress-edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  transform-origin: left;
  transform: scaleX(var(--gate-progress));
  transition: transform .1s linear;
  background: linear-gradient(90deg, #25f4ee 0, #f4f4f5 34%, #f4f4f5 82%, #fe2c55 100%);
  pointer-events: none;
}
.loading-gate .gate-hint {
  margin: 18px 0 0;
  width: min(360px, 100%);
  max-width: 100%;
  color: #a2a3a9;
  font-size: 13px;
  line-height: 1.6;
  text-align: start;
  overflow-wrap: anywhere;
}
.gate-scene {
  position: relative;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  width: 100%;
  height: 530px;
  perspective: 1000px;
  pointer-events: none;
}
.gate-scene::after {
  position: absolute;
  inset: auto -24px -12px;
  z-index: 4;
  height: 100px;
  content: "";
  background: linear-gradient(transparent, #090a0c);
}
.gate-film { position: absolute; overflow: hidden; border-radius: 18px; background: #161719; border: 1px solid #ffffff20; }
.gate-film img { width: 100%; height: 100%; object-fit: cover; }
.gate-film--front {
  z-index: 3;
  top: 15px;
  left: 50%;
  width: 258px;
  height: 458px;
  transform: translateX(-50%) rotate(-3deg);
  box-shadow: 0 24px 64px #0009, -2px 0 0 #25f4ee55, 2px 0 0 #fe2c5544;
  animation: gate-front-settle 1s cubic-bezier(.22,1,.36,1) both;
}
.gate-film--left {
  z-index: 1;
  top: 76px;
  left: -2px;
  width: 206px;
  height: 367px;
  transform: rotate(-13deg);
  filter: brightness(.58) saturate(.5);
  animation: gate-left-reveal 1.2s cubic-bezier(.22,1,.36,1) both;
}
.gate-film--right {
  z-index: 2;
  top: 62px;
  right: -6px;
  width: 207px;
  height: 368px;
  transform: rotate(11deg);
  filter: brightness(.6) saturate(.55);
  animation: gate-right-reveal 1.2s cubic-bezier(.22,1,.36,1) both;
}
.loading-gate.count-tick #countdown { animation: gate-count-tick .27s cubic-bezier(.2,.7,.2,1); }
@keyframes gate-count-tick { from { transform: translateY(7px); opacity: .58; } to { transform: translateY(0); opacity: 1; } }
@keyframes gate-front-settle { from { opacity: 0; transform: translateX(-50%) translateY(22px) rotate(0deg) scale(.96); } to { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-3deg) scale(1); } }
@keyframes gate-left-reveal { from { opacity: 0; transform: translateX(34px) rotate(-6deg); } to { opacity: 1; transform: translateX(0) rotate(-13deg); } }
@keyframes gate-right-reveal { from { opacity: 0; transform: translateX(-34px) rotate(5deg); } to { opacity: 1; transform: translateX(0) rotate(11deg); } }
.entry-ready .main-content { animation: gate-feed-enter .4s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes gate-feed-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
[dir="rtl"] .gate-copy { direction: rtl; }
[dir="rtl"] .loading-gate .gate-title, [dir="rtl"] .loading-gate .gate-hint { direction: rtl; text-align: right; }
[dir="rtl"] .loading-gate .gate-number { direction: rtl; }
[dir="rtl"] .gate-progress-wrap { margin-inline-start: 0; margin-inline-end: auto; }
@media (max-width: 900px) {
  .loading-gate { padding: max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); }
  .gate-frame { width: min(440px, 100%); height: auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; }
  .gate-brand { align-self: center; }
  .loading-gate .gate-logo { width: 124px; height: 36px; }
  .gate-scene { width: 290px; max-width: 100%; height: 282px; margin: 26px auto 18px; }
  .gate-film { border-radius: 12px; }
  .gate-film--front { width: 151px; height: 268px; top: 0; }
  .gate-film--left { width: 119px; height: 211px; top: 30px; left: 3px; }
  .gate-film--right { width: 119px; height: 211px; top: 25px; right: 0; }
  .gate-scene::after { height: 56px; bottom: -7px; }
  .gate-copy { width: 100%; padding: 0; }
  .loading-gate .gate-title { font-size: 21px; text-align: center; line-height: 1.4; }
  .loading-gate .gate-number { justify-content: center; gap: 10px; margin: 18px 0 25px; }
  .loading-gate .gate-number strong { font-size: 100px; }
  .loading-gate .gate-number span { font-size: 14px; }
  .gate-progress-wrap { width: 100%; }
  .loading-gate .gate-hint { width: 100%; text-align: center; margin-top: 15px; font-size: 12px; }
  [dir="rtl"] .loading-gate .gate-title, [dir="rtl"] .loading-gate .gate-hint { text-align: center; }
}
@media (max-width: 900px) and (max-height: 740px) {
  .loading-gate { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .gate-scene { width: 250px; height: 222px; margin-top: 22px; margin-bottom: 14px; }
  .gate-film--front { width: 121px; height: 216px; }
  .gate-film--left { width: 100px; height: 178px; top: 22px; left: 5px; }
  .gate-film--right { width: 100px; height: 178px; top: 18px; right: 2px; }
  .loading-gate .gate-title { font-size: 19px; }
  .loading-gate .gate-number { margin: 14px 0 22px; }
  .loading-gate .gate-number strong { font-size: 86px; }
}
@media (max-width: 900px) and (max-height: 580px) {
  .gate-scene { display: none; }
  .gate-brand { margin-bottom: 30px; }
}
@media (min-width: 901px) and (max-height: 690px) {
  .gate-frame { height: min(510px, calc(100dvh - 80px)); }
  .gate-scene { transform: scale(.8); transform-origin: center; }
  .loading-gate .gate-number strong { font-size: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .loading-gate *, .loading-gate *::before, .loading-gate *::after { animation: none !important; transition: none !important; }
  .entry-ready .main-content { animation: none; }
}