/* ==========================================================================
   DealArena marketing — Resources / "The Archive" (/resources)
   Ported from the Descript design handoff (Resources v2). Everything is
   namespaced under .p-resources so nothing leaks into the shared shell.
   Keyframes keep their v2- prefix from the design (names are global).
   ========================================================================== */

.p-resources {
  position: relative;
  font-family: var(--sans, 'Inter', system-ui, sans-serif);
  color: #0d100e;
  background: #f5f4ef;
  min-height: 100vh;
}
.p-resources ::selection { background: #ef5920; color: #201009; }
.p-resources [hidden] { display: none !important; }

/* ---- keyframes (v2- prefixed, page-specific) ---- */
@keyframes v2-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes v2-scan { 0% { transform: translateY(-40px); } 100% { transform: translateY(200px); } }
@keyframes v2-flick { 0% { opacity: .4; filter: brightness(1.4); } 12% { opacity: .85; } 22% { opacity: .5; } 36% { opacity: 1; } 52% { opacity: .7; } 100% { opacity: 1; filter: none; } }
@keyframes v2-eq { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }
@keyframes v2-ring { 0% { transform: scale(.7); opacity: .7; } 80% { opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes v2-dash { to { stroke-dashoffset: -14; } }
@keyframes v2-flash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes v2-lockpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes v2-bob { 0%, 100% { transform: scaleX(-1) translateY(3px) rotate(-4deg); } 50% { transform: scaleX(-1) translateY(-4px) rotate(5deg); } }
@keyframes v2-halo { 0% { transform: scale(.72); opacity: .55; } 70% { opacity: 0; } 100% { transform: scale(2.25); opacity: 0; } }
@keyframes v2-spark { 0% { transform: translateY(9px) scale(.4); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-17px) scale(1); opacity: 0; } }

.p-resources .v2-bob { animation: v2-bob 1.15s ease-in-out infinite; }
.p-resources .v2-card:hover .v2-bob { animation-duration: .6s; }
.p-resources .v2-halo { animation: v2-halo 2.2s ease-out infinite; }
.p-resources .v2-spark { animation: v2-spark 2.4s ease-in-out infinite; }
.p-resources .v2-lockpulse { animation: v2-lockpulse 2s ease-in-out infinite; }
.p-resources .v2-card:hover .v2-lockpulse { animation-duration: 1.1s; }
.p-resources .v2-bar { transform-box: fill-box; transform-origin: center bottom; animation: v2-eq 1.05s ease-in-out infinite; }
.p-resources .v2-ring { animation: v2-ring 2s ease-out infinite; }
.p-resources .v2-flow { stroke-dasharray: 5 9; animation: v2-dash 1s linear infinite; }
.p-resources .v2-caret-block { animation: v2-blink 1.1s step-end infinite; }

/* ---- card chrome ---- */
.p-resources .v2-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(46,31,77,.05) 0 1px, transparent 1px 3px);
  pointer-events: none; mix-blend-mode: multiply;
}
.p-resources .v2-scanbar {
  position: absolute; left: 0; right: 0; top: 0; height: 34px;
  background: linear-gradient(180deg, transparent, rgba(239,89,32,.18), transparent);
  pointer-events: none; opacity: 0; transition: opacity .3s;
}
.p-resources .v2-card:hover .v2-scanbar { opacity: 1; animation: v2-scan 1.6s linear infinite; }

.p-resources .v2-card { transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s, box-shadow .2s; }
.p-resources .v2-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239,89,32,.6) !important;
  box-shadow: 0 0 0 1px rgba(239,89,32,.25), 0 24px 46px -26px rgba(239,89,32,.42) !important;
}
.p-resources .v2-card:hover [data-title] { color: #0d100e !important; }
.p-resources .v2-card:hover .v2-pull { transform: translateX(4px); color: #ef5920 !important; }
.p-resources .v2-card:focus-visible {
  outline: none;
  border-color: rgba(239,89,32,.65) !important;
  box-shadow: 0 0 0 2px rgba(239,89,32,.5) !important;
}
.p-resources .v2-playchip:hover { opacity: .6; }
.p-resources .v2-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.p-resources .v2-stamp {
  display: inline-block; font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 8px; font-weight: 700; letter-spacing: .14em; color: #ef5920;
  border: 1.5px solid #ef5920; border-radius: 3px; padding: 1px 5px;
  transform: rotate(-4deg); text-transform: uppercase;
}

/* ---- filter chips ---- */
.p-resources .v2-chip {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 8px 13px; border-radius: 8px; cursor: pointer;
  border: 1px solid #ddd9ce; background: #fff; color: #6b736d;
  transition: all .14s; display: inline-flex; align-items: center; gap: 7px;
}
.p-resources .v2-chip:hover { color: #0d100e; border-color: #c4bfb2; }
.p-resources .v2-chip.active { color: #fff; background: #0d100e; border-color: #0d100e; }
.p-resources .v2-chip .ct { font-size: 9.5px; opacity: .6; }
.p-resources .v2-chip.active .ct { opacity: .7; }

/* ---- command console ---- */
.p-resources .v2-con-input {
  flex: 1; min-width: 0;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 15px; color: #f3e9da; background: transparent;
  border: none; outline: none; caret-color: #ef5920; padding: 0;
}
.p-resources .v2-con-input::placeholder { color: #5f5138; }
.p-resources .v2-suggest {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px; color: #a9967c; background: rgba(239,89,32,.09);
  border: 1px solid #3a2a17; border-radius: 6px; padding: 5px 10px; cursor: pointer;
  transition: color .14s, border-color .14s;
}
.p-resources .v2-suggest:hover { color: #f3e9da; border-color: #ef5920; }

.p-resources .v2-tagbtn {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 9px; letter-spacing: .04em; color: #8a8378;
  background: #f3f1ea; border: 1px solid #e6e3d9; border-radius: 5px; padding: 2px 7px;
}

/* ---- toolbar buttons ---- */
.p-resources .v2-earn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #0c0a07;
  background: linear-gradient(180deg, #ffae3c, #ef5920);
  border: none; border-radius: 7px; padding: 7px 12px; cursor: pointer;
  box-shadow: 0 6px 16px -8px rgba(239,89,32,.5);
  transition: transform .14s;
}
.p-resources .v2-earn:hover { transform: translateY(-1px); }
.p-resources .v2-sort {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 11.5px; font-weight: 600; color: #0d100e; background: #fff;
  border: 1px solid #ddd9ce; border-radius: 7px; padding: 7px 9px;
  cursor: pointer; outline: none;
}
.p-resources .v2-loadmore {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: #0d100e;
  background: #fff; border: 1px solid #d8d6cd; border-radius: 9px;
  padding: 13px 22px; cursor: pointer; box-shadow: 0 1px 3px rgba(13,16,14,.05);
  transition: transform .14s, border-color .14s, color .14s;
}
.p-resources .v2-loadmore:hover { border-color: #ef5920; color: #ef5920; transform: translateY(-1px); }
.p-resources .v2-reset-link {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 12px; color: #4c463d; background: #fff;
  border: 1px solid #d7d2c6; border-radius: 10px;
  min-height: 44px; padding: 0 15px; cursor: pointer;
  transition: color .14s, border-color .14s;
}
.p-resources .v2-reset-link:hover { color: #ef5920; border-color: #ef5920; }

/* ---- weekly drop + closing CTA ---- */
.p-resources .v2-drop-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; margin-top: 16px; padding: 0 26px;
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  /* --on-brand, never #fff on the orange */
  color: #201009; background: #ef5920; border-radius: 11px;
  text-decoration: none; box-shadow: 0 4px 0 #a83a12;
  transition: transform .1s, box-shadow .1s;
}
.p-resources .v2-drop-cta:hover { color: #201009; }
.p-resources .v2-drop-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 #a83a12; }
.p-resources .v2-index-note a { color: #a9781f; text-decoration: none; border-bottom: 1px solid #d9b45a; }
.p-resources .v2-index-note a:hover { color: #ef5920; border-bottom-color: #ef5920; }

/* ---- locked-card seal ----
   The 2026-08-20 design boards the phone, and on the phone a locked entry is
   covered edge to edge by this frosted seal with both exits on it. Desktop
   keeps the thumbnail lock art it already had: the mobile board does not
   speak for desktop, and nothing newer replaces that treatment.
   Only ever visible with RESOURCES_GATE=1 (default off). */
.p-resources .v2-seal { display: none; }

/* ---- clearance game modal buttons ---- */
.p-resources .v2-gamebtn {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 13px; font-weight: 700; color: #0c0a07;
  background: linear-gradient(180deg, #ffae3c, #ef5920);
  border: none; border-radius: 9px; padding: 12px 28px; cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(239,89,32,.6);
}
.p-resources .v2-gamebtn-ghost {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 13px; font-weight: 600; color: #a9967c; background: none;
  border: 1px solid #3a2a17; border-radius: 9px; padding: 11px 20px; cursor: pointer;
}
.p-resources .v2-gameclose {
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 14px; color: #8a7860; background: none; border: none;
  cursor: pointer; line-height: 1;
}

/* ---- responsive ---- */
@media (max-width: 860px) {
  .p-resources .v2-mast { grid-template-columns: 1fr !important; }
  .p-resources .v2-toolbar { flex-direction: column; align-items: stretch !important; }
  /* The earn chip + locked tally + SORT sit in one nowrap row. Stacked, their
     min-content is wider than a phone and the page scrolls sideways -- but only
     with RESOURCES_GATE=1, which is why it survived the first port. */
  .p-resources .v2-toolbar > div { flex-wrap: wrap; min-width: 0; }
}

/* Phone. 560px is the same breakpoint the marketing chrome switches on. */
@media (max-width: 560px) {
  .p-resources .res-wrap { padding: 0 18px !important; }
  .p-resources .v2-mast { padding-top: 24px !important; gap: 20px !important; }
  .p-resources #resGrid { grid-template-columns: 1fr !important; }
  .p-resources .v2-conhint { display: none; }
  .p-resources .v2-drop { padding: 20px 17px !important; }
  .p-resources .v2-drop-cta { display: flex; width: 100%; padding: 0 14px; }
  .p-resources .v2-loadmore { width: 100%; justify-content: center; }
  .p-resources .v2-chip { min-height: 44px; }

  /* the seal, on the surface it was drawn for */
  .p-resources .v2-seal {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 11px; padding: 20px; text-align: center;
    background: rgba(247,245,241,.88);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  }
  .p-resources .v2-seal-mark {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px;
    border: 1px solid #a9781f; background: rgba(169,120,31,.12);
    color: #a9781f; font-size: 16px;
  }
  .p-resources .v2-seal-title { font-size: 14.5px; font-weight: 600; line-height: 1.4; color: #1c1915; }
  .p-resources .v2-seal-copy { font-size: 13px; line-height: 1.5; color: #7b7466; max-width: 250px; }
  .p-resources .v2-seal-acts { display: flex; gap: 8px; }
  .p-resources .v2-seal-btn,
  .p-resources .v2-seal-up {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px;
    border-radius: 10px; cursor: pointer;
    font-family: var(--mono, 'JetBrains Mono', monospace); font-size: 12px;
  }
  .p-resources .v2-seal-btn { border: 1px solid #a9781f; background: #fff; color: #a9781f; }
  .p-resources .v2-seal-up { background: #ef5920; color: #201009; box-shadow: 0 3px 0 #a83a12; }
}

/* Reduced motion: freeze the decorative loops (the JS also skips the
   ember canvas, cursor glow, and title scramble under this preference). */
@media (prefers-reduced-motion: reduce) {
  .p-resources .v2-bob,
  .p-resources .v2-halo,
  .p-resources .v2-spark,
  .p-resources .v2-lockpulse,
  .p-resources .v2-bar,
  .p-resources .v2-ring,
  .p-resources .v2-flow,
  .p-resources .v2-card:hover .v2-scanbar { animation: none; }
}