/* ====================================================
   oneBot Brand Guide — Premium Newspaper Flipbook
   ==================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Sora', sans-serif;
  background: #FFFFFF;
  color: #111827;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ====================================================
   LOADING SCREEN — 3 orbit rings + dots
   ==================================================== */
.loading-screen {
  position: fixed; inset: 0; z-index: 2000;
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}

.loading-content {
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}

.loading-orbit-wrapper {
  position: relative; width: 200px; height: 200px;
  display: flex; align-items: center; justify-content: center;
  perspective: 600px;
}

/* 3D tilted orbit rings (ellipses) */
.orbit-ring {
  position: absolute; border-radius: 50%;
  border: 2px solid transparent;
}

.orbit-ring--1 {
  inset: 0;
  border-top-color: #1A56DB;
  border-right-color: rgba(26, 86, 219, 0.25);
  transform: rotateX(65deg) rotateY(10deg);
  animation: spin3d-1 2.4s linear infinite;
}

.orbit-ring--2 {
  inset: 8px;
  border-bottom-color: rgba(59, 130, 246, 0.6);
  border-left-color: rgba(59, 130, 246, 0.15);
  border-width: 1.5px;
  transform: rotateX(50deg) rotateY(-35deg);
  animation: spin3d-2 3s linear infinite;
}

.orbit-ring--3 {
  inset: 16px;
  border-top-color: rgba(96, 165, 250, 0.4);
  border-right-color: rgba(96, 165, 250, 0.1);
  border-width: 1px;
  transform: rotateX(75deg) rotateY(25deg);
  animation: spin3d-3 3.8s linear infinite;
}

@keyframes spin3d-1 {
  0% { transform: rotateX(65deg) rotateY(10deg) rotateZ(0deg); }
  100% { transform: rotateX(65deg) rotateY(10deg) rotateZ(360deg); }
}
@keyframes spin3d-2 {
  0% { transform: rotateX(50deg) rotateY(-35deg) rotateZ(0deg); }
  100% { transform: rotateX(50deg) rotateY(-35deg) rotateZ(-360deg); }
}
@keyframes spin3d-3 {
  0% { transform: rotateX(75deg) rotateY(25deg) rotateZ(0deg); }
  100% { transform: rotateX(75deg) rotateY(25deg) rotateZ(360deg); }
}

/* Orbit dots */
.orbit-dot {
  position: absolute; border-radius: 50%;
  top: 50%; left: 50%;
}

.orbit-dot--1 {
  width: 5px; height: 5px;
  background: #1A56DB;
  box-shadow: 0 0 8px rgba(26, 86, 219, 0.6);
  animation: odot1 2.4s linear infinite;
}

.orbit-dot--2 {
  width: 4px; height: 4px;
  background: rgba(59, 130, 246, 0.8);
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.4);
  animation: odot2 3s linear infinite;
}

.orbit-dot--3 {
  width: 3px; height: 3px;
  background: rgba(96, 165, 250, 0.7);
  box-shadow: 0 0 5px rgba(96, 165, 250, 0.3);
  animation: odot3 3.8s linear infinite;
}

.orbit-dot--4 {
  width: 3px; height: 3px;
  background: rgba(26, 86, 219, 0.5);
  animation: odot4 2s ease-in-out infinite;
}

@keyframes odot1 {
  0% { transform: rotate(0deg) translateX(96px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(96px) rotate(-360deg); }
}
@keyframes odot2 {
  0% { transform: rotate(0deg) translateX(86px) rotate(0deg); }
  100% { transform: rotate(-360deg) translateX(86px) rotate(360deg); }
}
@keyframes odot3 {
  0% { transform: rotate(0deg) translateX(76px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(76px) rotate(-360deg); }
}
@keyframes odot4 {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.6); }
}

.loading-logo { animation: logo-breathe 2.8s ease-in-out infinite; }
@keyframes logo-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.loading-logo-img { width: 52px; height: 52px; object-fit: contain; }

.loading-text { font-size: 14px; font-weight: 400; color: #6B7280; letter-spacing: 0.04em; }
.loading-dots::after { content: ''; animation: dots 1.5s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* ====================================================
   FOLD / UNFOLD — BIGGER
   ==================================================== */
.fold-container {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #FAFAFB 0%, #F3F4F6 100%);
}
.fold-container.hidden { opacity: 0; pointer-events: none; }
.fold-container.visible { opacity: 1; pointer-events: auto; }

.fold-perspective {
  perspective: 1800px;
  position: relative;
  /* BIGGER fold: use more viewport */
  width: min(70vh * 0.707, 85vw);
  height: min(70vh, 85vw / 0.707);
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.18));
}

.fold-top, .fold-bottom {
  position: absolute; left: 0; width: 100%;
  height: 50%; overflow: hidden;
}
.fold-top { top: 0; border-radius: 4px 4px 0 0; z-index: 2; }
.fold-bottom {
  top: 50%; border-radius: 0 0 4px 4px;
  transform-origin: center top;
  transform: rotateX(-180deg);
  backface-visibility: hidden; z-index: 1;
}

.fold-top img, .fold-bottom img {
  position: absolute; left: 0; width: 100%; height: 200%;
  object-fit: cover; user-select: none; pointer-events: none;
}
.fold-top img { top: 0; }
.fold-bottom img { top: -100%; }

.fold-shadow {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(70vh * 0.707, 85vw);
  height: 4px;
  background: rgba(0,0,0,0.15); filter: blur(6px);
  opacity: 1; z-index: 3; pointer-events: none;
}

/* ====================================================
   FLIPBOOK
   ==================================================== */
.flipbook-container {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
.flipbook-container.hidden { opacity: 0; pointer-events: none; }
.flipbook-container.visible { opacity: 1; pointer-events: auto; }

.flipbook-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(26,86,219,0.03) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 85%, rgba(59,130,246,0.02) 0%, transparent 50%),
    linear-gradient(180deg, #FAFAFB 0%, #F3F4F6 100%);
}

.book {
  filter: drop-shadow(0 10px 36px rgba(0,0,0,0.14))
          drop-shadow(0 3px 10px rgba(0,0,0,0.05));
}

.page { background: #fff; overflow: hidden; }
.page img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; }

/* ---- Center spine line ---- */
.book-spine {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 1px; height: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.08) 15%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.08) 85%, transparent 100%);
  pointer-events: none; z-index: 550;
  transition: height 0.4s ease;
}

.book-spine.visible {
  height: calc(var(--book-height, 700px) - 8px);
}

/* Shadow glow on spine for realism */
.book-spine::before {
  content: '';
  position: absolute; left: -3px; top: 0;
  width: 7px; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.025) 40%, rgba(0,0,0,0.04) 50%, rgba(0,0,0,0.025) 60%, transparent 100%);
}

/* ---- Page peek hint (bottom-right) ---- */
.page-peek {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 600; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  color: #1A56DB;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.03em;
  padding: 8px 14px 8px 10px;
  background: rgba(26,86,219,0.06);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  border: 1px solid rgba(26,86,219,0.1);
  animation: peek-bounce 2s ease-in-out infinite;
  pointer-events: none;
}
.page-peek.hidden { display: none; }

.peek-text { font-family: 'Sora', sans-serif; }

@keyframes peek-bounce {
  0%, 100% { opacity: 0.6; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); }
}

/* ---- Nav buttons ---- */
.nav-btn {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 600;
  width: 46px; height: 46px; border: none; border-radius: 50%;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #374151; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
}
.nav-btn:hover {
  background: rgba(255,255,255,0.95); color: #1A56DB;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transform: translateY(-50%) scale(1.1);
}
.nav-btn:active { transform: translateY(-50%) scale(0.93); }
.nav-btn--left { left: 18px; }
.nav-btn--right { right: 52px; }

/* ---- Side page navigator ---- */
.page-nav {
  position: fixed; right: 14px; top: 50%;
  transform: translateY(-50%);
  z-index: 600;
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
}

.page-nav-track {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 8px 6px;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.03);
}

.page-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #D1D5DB;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none; padding: 0;
}

.page-dot:hover { background: #9CA3AF; transform: scale(1.3); }
.page-dot.active {
  background: #1A56DB;
  box-shadow: 0 0 6px rgba(26,86,219,0.4);
  transform: scale(1.2);
}

.page-nav-label {
  font-size: 10px; font-weight: 500; color: #9CA3AF;
  letter-spacing: 0.06em; white-space: nowrap;
  font-family: 'Sora', sans-serif;
}

/* ---- Language switcher ---- */
.lang-switcher {
  position: fixed; top: 20px; right: 20px; z-index: 700;
  display: flex; gap: 6px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 10px; padding: 5px 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
}
.lang-btn {
  border: none; background: transparent;
  font-family: 'Sora', sans-serif;
  font-size: 12px; font-weight: 600;
  color: #9CA3AF; cursor: pointer;
  padding: 6px 14px; border-radius: 7px;
  transition: all 0.2s ease; letter-spacing: 0.04em;
}
.lang-btn.active {
  background: #1A56DB; color: #fff;
  box-shadow: 0 2px 8px rgba(26,86,219,0.3);
}
.lang-btn:not(.active):hover { color: #374151; background: rgba(0,0,0,0.04); }

/* ---- Download bar (top-left) ---- */
.download-bar {
  position: fixed; top: 20px; left: 20px; z-index: 700;
  display: flex; gap: 6px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 10px; padding: 5px 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.03);
}

.download-btn {
  display: flex; align-items: center; gap: 5px;
  border: none; background: transparent;
  font-family: 'Sora', sans-serif;
  font-size: 11px; font-weight: 600;
  color: #6B7280; cursor: pointer;
  padding: 6px 12px; border-radius: 7px;
  transition: all 0.2s ease;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.download-btn:hover {
  color: #1A56DB;
  background: rgba(26,86,219,0.06);
}

.download-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.download-btn:hover svg {
  transform: translateY(1px);
}

/* ---- Back to website (desktop) ---- */
.back-website {
  position: fixed; top: 20px; left: 170px; z-index: 700;
  display: flex; align-items: center; gap: 6px;
  font-family: 'Sora', sans-serif;
  font-size: 11px; font-weight: 500;
  color: #9CA3AF; text-decoration: none;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.04);
  transition: all 0.2s ease;
  letter-spacing: 0.03em;
}
.back-website:hover { color: #1A56DB; background: rgba(255,255,255,0.8); }
.back-website svg { transition: transform 0.2s ease; }
.back-website:hover svg { transform: translate(1px, -1px); }

/* ---- Hamburger (mobile only) ---- */
.hamburger {
  position: fixed; top: 14px; right: 14px; z-index: 800;
  width: 38px; height: 38px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 10px; cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; padding: 0;
}

.hamburger-line {
  display: block; width: 16px; height: 1.5px;
  background: #374151; border-radius: 1px;
  transition: all 0.25s ease;
}

.hamburger.open .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(3px, 4px); }
.hamburger.open .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.open .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(3px, -4px); }

/* ---- Mobile dropdown menu ---- */
.mobile-menu {
  position: fixed; top: 58px; right: 14px; z-index: 790;
  opacity: 0; transform: translateY(-8px) scale(0.95);
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
}

.mobile-menu.open {
  opacity: 1; transform: translateY(0) scale(1);
  pointer-events: auto;
}

.mobile-menu-inner {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04);
  min-width: 180px;
}

.mobile-menu-section { display: flex; flex-direction: column; gap: 6px; }

.mobile-menu-label {
  font-size: 9px; font-weight: 600; color: #9CA3AF;
  letter-spacing: 0.1em; text-transform: uppercase;
}

.mobile-menu-row { display: flex; gap: 6px; }

.mobile-lang {
  flex: 1; text-align: center;
  padding: 7px 0; border-radius: 7px;
  font-size: 12px;
}

.mobile-menu-divider {
  height: 1px; background: rgba(0,0,0,0.06);
  margin: 10px 0;
}

.mobile-menu-link {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Sora', sans-serif;
  font-size: 13px; font-weight: 500;
  color: #374151; text-decoration: none;
  padding: 8px 4px; border-radius: 8px;
  transition: all 0.15s ease;
}
.mobile-menu-link:hover { color: #1A56DB; background: rgba(26,86,219,0.04); }

/* ---- Visibility helpers ---- */
.desktop-only { display: flex; }
.mobile-only { display: none; }

/* ====================================================
   END SCREEN
   ==================================================== */
.end-screen {
  position: fixed; inset: 0; z-index: 1500;
  background: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
.end-screen.hidden { opacity: 0; pointer-events: none; }
.end-screen.visible { opacity: 1; pointer-events: auto; }

.end-content {
  display: flex; flex-direction: column;
  align-items: center; gap: 28px;
  text-align: center; padding: 24px;
}

.end-orbit-wrapper {
  position: relative; width: 220px; height: 220px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.3);
  perspective: 600px;
}

.end-orbit-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Use elliptic transforms on end SVG circles */
.end-orbit-circle { transition: stroke-dashoffset 1.5s cubic-bezier(0.4,0,0.2,1); }
.end-orbit-1.draw-on { stroke-dashoffset: 0; }
.end-orbit-2.draw-on { stroke-dashoffset: 0; transition-delay: 0.3s; }
.end-orbit-3.draw-on { stroke-dashoffset: 0; transition-delay: 0.6s; }

@keyframes spin { to { transform: rotate(360deg); } }
.end-orbit-svg.rotating { animation: spin 8s linear infinite; }

.end-dot { position: absolute; border-radius: 50%; }
.end-dot--1 {
  width: 5px; height: 5px; background: #1A56DB;
  box-shadow: 0 0 8px rgba(26,86,219,0.5);
  animation: odot1 3s linear infinite; top: 50%; left: 50%;
}
.end-dot--2 {
  width: 4px; height: 4px; background: rgba(59,130,246,0.6);
  box-shadow: 0 0 6px rgba(59,130,246,0.3);
  animation: odot2 4s linear infinite; top: 50%; left: 50%;
}
.end-dot--3 {
  width: 3px; height: 3px; background: rgba(96,165,250,0.5);
  animation: odot3 5s linear infinite; top: 50%; left: 50%;
}

.end-logo-img { width: 68px; height: 68px; object-fit: contain; z-index: 1; }

.end-headline {
  font-family: 'Young Serif', serif;
  font-size: clamp(26px, 5vw, 46px);
  font-weight: 400; color: #111827;
  letter-spacing: 0.01em; line-height: 1.15;
  opacity: 0; transform: translateY(20px);
}

.end-buttons {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0; transform: translateY(16px);
}

.end-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 46px;
  background: #1A56DB; color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 16px; font-weight: 600;
  text-decoration: none; border-radius: 13px; letter-spacing: 0.03em;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 4px 16px rgba(26,86,219,0.3);
}
.end-cta:hover {
  background: #1648B8;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 28px rgba(26,86,219,0.4), 0 0 0 4px rgba(26,86,219,0.08);
}
.end-cta:active { transform: translateY(0) scale(0.97); }
.end-cta.glow { animation: btn-glow 2.5s ease-in-out infinite; }

@keyframes btn-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(26,86,219,0.3); }
  50% { box-shadow: 0 4px 24px rgba(26,86,219,0.45), 0 0 0 8px rgba(26,86,219,0.06); }
}

.end-back {
  border: none; background: transparent;
  font-family: 'Sora', sans-serif;
  font-size: 14px; font-weight: 500;
  color: #6B7280; cursor: pointer;
  padding: 8px 20px; border-radius: 8px;
  transition: all 0.2s ease; letter-spacing: 0.02em;
}
.end-back:hover { color: #1A56DB; background: rgba(26,86,219,0.05); }

.end-redirect {
  font-size: 13px; font-weight: 400; color: #9CA3AF;
  letter-spacing: 0.03em; opacity: 0;
  min-height: 20px; transition: opacity 0.4s ease;
}
.end-redirect.visible { opacity: 1; }

/* ====================================================
   Responsive — Mobile
   ==================================================== */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  .mobile-only { display: flex; }

  .nav-btn { display: none; }
  .page-nav { right: 6px; }
  .page-nav-track { padding: 6px 4px; gap: 3px; }
  .page-dot { width: 5px; height: 5px; }
  .page-nav-label { font-size: 9px; }

  .fold-perspective {
    width: min(92vw, 70vh * 0.707);
    height: min(92vw / 0.707, 70vh);
  }

  .loading-orbit-wrapper { width: 140px; height: 140px; }
  .end-orbit-wrapper { width: 150px; height: 150px; }
  .end-logo-img { width: 52px; height: 52px; }
  .end-cta { padding: 15px 34px; font-size: 15px; }

  .page-peek { bottom: 14px; right: 14px; }
}