/* ============ CROSS-DOCUMENT VIEW TRANSITIONS: DISABLED ============ */
/* TURNED OFF ON PURPOSE.
   These caused pages to stick on the old screen in in-app browsers
   (Facebook / Telegram webviews), which is where nearly all paid traffic
   lands. Pages still prerender, so navigation is still instant — it just
   swaps cleanly instead of animating.

   To re-enable for testing in a normal Chrome browser, uncomment this:

   @view-transition {
     navigation: auto;
   }

   All the transition styling further down this file stays in place but
   lies dormant while the opt-in above is commented out. */

:root {
  --orange: #FF8C00;
  --bg: #0b0c0e;
  --text: #f2f2f0;
  --muted: #9a9ba3;
  --muted-2: #65666e;
}

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

html, body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* AD PLACEHOLDER SPACE (visual only, no ad script) */
.ad-slot-top {
  width: 100%;
  min-height: 65px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #0e0f12;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.ad-slot-bottom {
  margin: 16px auto 24px;
  width: calc(100% - 32px);
  max-width: 340px;
  min-height: 280px;
  background: #0e0f12;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ad-label {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* PAGE HEADER */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
}

.hamburger span {
  height: 2px;
  background: var(--muted);
  border-radius: 1px;
}

.logo {
  font-size: 16px;
  font-weight: 800;
}

.logo .now { color: var(--orange); }
.logo .playing { color: var(--text); }

.favorite {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--orange);
}

.favorite svg {
  width: 12px;
  height: 12px;
  stroke: var(--orange);
}

/* TEASER */
.teaser {
  text-align: center;
  padding: 0 16px 10px;
}

.teaser-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--orange);
  margin-bottom: 3px;
}

.teaser-sub {
  font-size: 11px;
  color: rgba(255,140,0,0.65);
}

/* FRAME (background image or video) */
.frame {
  position: relative;
  border-top: 3px solid var(--orange);
  border-bottom: 3px solid var(--orange);
  background: #000;
  min-height: 370px;
  overflow: hidden;
}

.frame img,
.frame video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  view-transition-name: video-image;
}

.video-dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(6,7,9,0.20) 0%, rgba(6,7,9,0.38) 35%, rgba(6,7,9,0.65) 75%);
}

.stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.wrap {
  width: 100%;
  max-width: 340px;
}

.modal {
  width: 100%;
  background: rgba(10,11,13,0.96);
  border: 3px solid var(--orange);
  border-radius: 16px;
  padding: 16px 18px 14px;
  min-height: 335px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* BADGE ICON */
.badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  position: relative;
  background: #141517;
}

.badge.restricted { border: 2.5px solid #e5342c; }

.badge.restricted::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 44px;
  background: #e5342c;
  transform: rotate(45deg);
}

.badge.plain { border: 2.5px solid var(--orange); }

.badge span {
  font-size: 11px;
  font-weight: 800;
  color: #fff;
}

.badge.plain span { font-size: 16px; }

h1 {
  font-size: 15.5px;
  font-weight: 700;
  margin-bottom: 6px;
}

p.desc {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 6px;
  max-width: 300px;
}

p.desc b { color: var(--text); font-weight: 600; }

.legal-link {
  font-size: 11px;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 9px;
  cursor: pointer;
}

.divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin-bottom: 9px;
}

.verify-visual {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
  display: none;
}

.verify-visual.show { display: block; }

.verify-visual .bar {
  height: 100%;
  width: 0%;
  background: var(--orange);
  border-radius: 2px;
  transition: width 1.1s linear;
}

.gate-btn {
  width: 100%;
  padding: 9px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  border: 2px solid var(--orange);
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 6px;
}

.gate-btn:last-child { margin-bottom: 0; }

/* LOADING STATE (skeleton) */
.loading-state {
  display: none;
  flex-direction: column;
  align-items: center;
}

.loading-state.active { display: flex; }

.skeleton {
  background: #202126;
  border-radius: 6px;
}

.sk-badge { width: 38px; height: 38px; border-radius: 50%; margin-bottom: 10px; }
.sk-line { height: 11px; }
.sk-title { width: 72%; height: 14px; margin-bottom: 8px; }
.sk-desc1 { width: 92%; margin-bottom: 5px; }
.sk-desc2 { width: 84%; margin-bottom: 5px; }
.sk-desc3 { width: 60%; margin-bottom: 9px; }
.sk-link { width: 44%; height: 10px; margin-bottom: 9px; }
.sk-divider { width: 100%; height: 1px; background: rgba(255,255,255,0.08); margin-bottom: 9px; }
.sk-btn { width: 100%; height: 44px; border-radius: 10px; margin-bottom: 6px; }

.loading-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-2);
}

.loading-tag .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulseDot 1.2s ease-in-out infinite;
}

@keyframes pulseDot {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/* REVEAL LOADING OVERLAY (video-playing page only) */
.reveal-loading {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-size: cover;
  background-position: center;
  align-items: center;
  justify-content: center;
}

.reveal-loading.hide { display: none; }

.reveal-loading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6,7,9,0.55);
}

.reveal-spinner {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid rgba(255,140,0,0.25);
  border-top-color: var(--orange);
  animation: spin 0.7s linear infinite;
  z-index: 1;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* VIDEO META (title block, video-playing page only) */
.video-meta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.video-meta-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), #a35800);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #0b0c0e;
  flex-shrink: 0;
}

.video-meta-body { flex: 1; min-width: 0; }

.video-meta-title {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 4px;
}

.video-meta-sub { font-size: 12px; color: var(--muted); }

.video-meta-dots {
  font-size: 18px;
  color: var(--muted);
  line-height: 1;
  padding: 2px 4px;
  flex-shrink: 0;
}

/* CONTENT ARTICLE (high-CPC keyword section) */
.content-article {
  padding: 8px 20px 32px;
  max-width: 600px;
  margin: 0 auto;
}

.content-article h2 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text);
}

.content-article p {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 12px;
}

.topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.topic-tags span {
  font-size: 10.5px;
  color: var(--muted);
  background: #16171b;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 4px 10px;
  border-radius: 20px;
}

.version-tag {
  position: fixed;
  bottom: 4px;
  right: 6px;
  font-size: 10px;
  color: #3a3a3a;
  z-index: 99;
}

/* ============ SMOOTH PAGE-TO-PAGE TRANSITIONS ============ */
/* Names these elements so supporting browsers morph them in place
   between pages instead of a hard cross-document jump — makes it feel
   like the popup card is updating, not like a new page loading. */
.page-header { view-transition-name: page-header; }
.teaser { view-transition-name: teaser; }
.frame { view-transition-name: video-frame; }
.video-meta { view-transition-name: video-meta-block; }

/* The background/header/ads stay visually frozen — quick, near-invisible
   crossfade since their content is identical page to page. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.12s;
}

/* The video frame (border/background) and the image inside it are the
   exact same on every page. We want them to look completely still — but
   they must still run a real animation, otherwise the browser never knows
   the transition finished and the old frame stays frozen on screen forever.
   So instead of removing the animation, we run one that simply holds them
   fully visible and then ends cleanly. */
@keyframes vtHold {
  from { opacity: 1; }
  to   { opacity: 1; }
}

::view-transition-old(video-frame),
::view-transition-new(video-frame),
::view-transition-old(video-image),
::view-transition-new(video-image) {
  animation: vtHold 0.12s linear both;
  mix-blend-mode: normal;
}

/* The popup card itself gets its own distinct "pop in" animation,
   separate from the rest of the page — this is what sells the illusion
   that it's a popup updating, not a page loading. */
.modal { view-transition-name: popup-modal; }

::view-transition-old(popup-modal) {
  animation: modalPopOut 0.12s cubic-bezier(.4,0,1,1) both;
}

::view-transition-new(popup-modal) {
  animation: modalPopIn 0.16s cubic-bezier(.2,0,.2,1) both;
}

@keyframes modalPopOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.96); }
}

@keyframes modalPopIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}