/* ============ CROSS-DOCUMENT VIEW TRANSITIONS: OPT-IN ============ */
/* This CSS rule is what actually turns page-to-page transitions on.
   (The old <meta name="view-transition"> tag was deprecated and does
   nothing.) It must be present on BOTH pages — since every page loads
   this same stylesheet, that's covered.

   >>> KILL SWITCH <<<
   If transitions ever misbehave on real traffic, delete or comment out
   the 3 lines below. Everything else keeps working exactly as before —
   pages still prerender, so navigation stays instant, just without the
   animation. Nothing else needs to change. */
@view-transition {
  navigation: auto;
}

: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); }
}