/*
 * psy.css: what the landing needs on top of css/landing.css (the source's compiled sheet, left as it is).
 * Three kinds of rule live here: styles the source kept in component <style> blocks, utilities the compiled sheet
 * does not contain because the source never used them, and the states the page script drives.
 */

/* ---- from the source's HeroBanner <style> block ---- */
.banner-section { min-height: 100svh; }
.banner-content { padding-top: 3rem; padding-bottom: 7.5rem; }
@media (min-width: 768px) {
  .banner-content { padding-top: 1rem; padding-bottom: 5rem; }
}
@keyframes texttype-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ---- utilities missing from the compiled sheet ---- */
.hover\:text-black:hover { color: #000; }
@media (min-width: 768px) { .md\:size-5 { width: 1.25rem; height: 1.25rem; } }
@media (min-width: 1024px) { .lg\:text-\[24px\] { font-size: 24px; } }

/* ---- wordmark ---- */
.psy-word {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.psy-word-sm { font-size: 18px; }
.psy-word-lg { font-size: 22px; }
@media (min-width: 768px) { .psy-word-lg { font-size: 34px; } }

/* ---- header: the source swaps these two in script, here a breakpoint does it ---- */
.psy-desktop-nav { display: none; }
.psy-burger { display: inline-flex; align-items: center; justify-content: center; color: #fff; }
@media (min-width: 768px) {
  .psy-desktop-nav { display: flex; }
  .psy-burger { display: none; }
}
header[data-hidden='true'] { transform: none; }
@media (min-width: 768px) {
  header[data-hidden='true'] { transform: translateY(-100%); }
  header[data-top='false'] { background-color: #0d1614; }
}

/* dropdown panels: closed ones are [hidden]; open ones fade and lift in like the source's animate-in */
[data-dd-panel] { position: absolute; top: 100%; margin-top: 6px; z-index: 60; }
[data-dd-panel][data-state='open'] { animation: psy-dd-in 0.18s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
@keyframes psy-dd-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ---- mobile drawer ---- */
.psy-drawer {
  top: 0; right: 0; bottom: 0;
  width: 75%;
  max-width: 24rem;
  padding: 0 0.5rem 1.5rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}
.psy-drawer[data-state='open'] { transform: none; }
.psy-drawer-veil { opacity: 0; transition: opacity 0.25s ease; }
.psy-drawer-veil[data-state='open'] { opacity: 1; }
.psy-drawer-close { display: inline-flex; width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; }
[data-acc-btn][aria-expanded='true'] svg { transform: rotate(90deg); }
@media (min-width: 768px) { .psy-drawer, .psy-drawer-veil { display: none !important; } }
html.psy-locked, html.psy-locked body { overflow: hidden; }

/* ---- reveal on scroll (the source's ScrollReveal: 40px rise, 0.6s, -80px margin) ---- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- hero entrance ---- */
.js [data-hero-content] { opacity: 0; transform: translateY(30px); transition: opacity 1.2s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1); }
.js [data-hero-rise] { opacity: 0; transform: translateY(var(--rise, 80px)); transition: opacity 1s cubic-bezier(0.25, 0.1, 0.25, 1), transform 1s cubic-bezier(0.25, 0.1, 0.25, 1); transition-delay: var(--d, 0s); }
.js .is-ready[data-hero-content], .js .is-ready [data-hero-rise] { opacity: 1; transform: none; }
.psy-char { display: inline-block; will-change: transform; opacity: 0; transform: translateY(24px); transition: opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); transition-delay: var(--d, 0s); }
.is-ready .psy-char { opacity: 1; transform: none; }
.psy-caret { display: inline-block; margin-left: 0.05em; animation: texttype-blink 1s steps(1) infinite; }
[data-hero-video] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; transition: opacity 0.2s linear; }
[data-hero-still] { transition: opacity 0.4s ease; }
[data-hero-video][data-playing='true'] [data-hero-still] { opacity: 0; }

/* ---- stats: the tilt in (desktop), the curve wipe, the bars ---- */
@media (min-width: 768px) {
  .js [data-tilt] { perspective: 700px; }
  .js [data-tilt] > section { transform-origin: bottom center; transform-style: preserve-3d; will-change: transform; transform: translateZ(-400px) rotateX(-19deg); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
  .js [data-tilt].is-in > section { transform: none; }
}
.js [data-chart-reveal] { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(0.25, 0.1, 0.25, 1) 0.4s; }
.js [data-chart-reveal].is-in { clip-path: inset(0 0% 0 0); }
.js [data-bar] { transform: scaleY(0); transform-origin: 50% 100%; transition: transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1); transition-delay: var(--d, 0s); }
.js .is-in [data-bar], .js [data-bar].is-in { transform: none; }
[data-stat] { display: inline-block; font-variant-numeric: tabular-nums; }

/* logo wall: two rows of four while the list is short, the source's stepped six-wide wall once it is long */
[data-logo-wall] .psy-wall-static { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 0.5rem; padding-top: 0.5rem; }
[data-logo-wall] .psy-wall-cell { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
[data-logo-wall] .psy-wall-cell img { width: 2.75rem; height: 2.75rem; border-radius: 9999px; object-fit: cover; }
[data-logo-wall] .psy-wall-cell span { font-family: Inter, sans-serif; font-size: 11px; line-height: 1; color: #1d3431; opacity: 0.7; letter-spacing: 0.02em; }
@media (min-width: 768px) {
  [data-logo-wall] .psy-wall-static { gap: 1.75rem 0.5rem; padding-top: 1rem; }
  [data-logo-wall] .psy-wall-cell img { width: 3.5rem; height: 3.5rem; }
  [data-logo-wall] .psy-wall-cell span { font-size: 12px; }
}
[data-logo-wall] .psy-wall-track { transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); }
[data-logo-wall] .psy-wall-track[data-snap] { transition: none; }
[data-logo-wall] [data-wall-row] { transition: opacity 0.5s ease-out; }

/* ---- infrastructure: sticky stage on desktop, swipe carousel on mobile ---- */
.psy-infra-desktop { display: none; }
@media (min-width: 768px) {
  .psy-infra-desktop { display: block; }
  .psy-infra-mobile { display: none; }
}
[data-infra-m-view] { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
[data-infra-m-view]::-webkit-scrollbar { display: none; }
[data-infra-m-track] > * { scroll-snap-align: center; }
[data-infra-m-title], [data-infra-m-desc] { transition: opacity 0.25s ease; }

/* live marks on the stock cards */
[data-mark] { color: rgba(255, 249, 230, 0.7); font-variant-numeric: tabular-nums; }

/* ---- less motion ---- */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-hero-content], .js [data-hero-rise], .psy-char, .js [data-tilt] > section, .js [data-chart-reveal], .js [data-bar] {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
  .psy-caret { animation: none; }
}

/* ---- contrast: the source sets white on its gold fills (1.65:1). Near-black reads at 11:1 ---- */
.bg-brand-5, .bg-brand-5.text-white, .bg-brand-5 .text-white, .bg-brand-5 span { color: #0d1614 !important; }
.bg-brand-5 { outline: 1px solid rgba(13, 22, 20, 0.18); outline-offset: -1px; }
a.bg-brand-5:focus-visible, header a:focus-visible, header button:focus-visible, footer a:focus-visible {
  outline: 2px solid #f7e197 !important; outline-offset: 2px !important;
}
/* copy that sits on the hero video: a soft dark halo keeps it readable over the brightest frames */
.banner-content p { text-shadow: 0 1px 2px rgba(9, 17, 15, 0.85), 0 0 18px rgba(9, 17, 15, 0.6); color: rgba(255, 255, 255, 0.86); }
.banner-title { text-shadow: 0 2px 6px rgba(9, 17, 15, 0.7), 0 0 28px rgba(9, 17, 15, 0.45); }
/* light sections: the muted green body copy moves from 70% to full strength on a darker tone */
.product-card p.opacity-70 { opacity: 1; color: #3d5a53; }

/* ---- the coin: buy link and Copy CA ---- */
.psy-coin-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
@media (min-width: 768px) { .psy-coin-row { justify-content: center; } .psy-coin-row-foot { justify-content: flex-start; } }
.psy-coin-row-foot { margin-top: 0; }
.psy-coin-buy, .psy-coin-ca { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1; border: 1px solid rgba(231, 199, 92, 0.65); color: #e7c75c; background: rgba(13, 22, 20, 0.72); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.psy-coin-buy:hover, .psy-coin-ca:hover { background: #e7c75c; color: #0d1614; }
.psy-coin-ca { border-color: rgba(255, 255, 255, 0.35); color: #fff; }