/* token · owner P3 · the $VEYL coin (CSS 3D, real reeded edge) flips as you scroll: 6 decimals on Solana, 9 on Veil Layer.
   Static (no JS, reduced motion): both faces side by side, flat. Motion: one 3D coin; pinned stage at desktop sizes. */
#token { padding: var(--sec) 0; overflow-x: clip; }
#token .token__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); }
#token .token__stage > * { grid-column: 1 / -1; min-width: 0; }
#token .token__title { font-size: clamp(40px, 5.6vw, 92px); }
#token .token__line { margin-top: clamp(20px, 2.2vw, 30px); font-size: clamp(17px, 1.3vw, 19px); max-width: 24em; }

/* homes */
#token .home { margin-top: clamp(40px, 6vw, 72px); }
#token .home__k { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#token .home__d { font-family: var(--font); font-stretch: 125%; font-weight: 600; font-size: 15px; letter-spacing: 0; color: #000; }
#token .home--veil .home__d { color: var(--v); }
#token .home h3 { margin-top: 12px; padding-top: 14px; border-top: 2px solid #000; font-size: clamp(22px, 2vw, 28px); }
#token .home--veil h3 { border-top-color: var(--v); }
#token .home p:not(.home__k) { margin-top: 10px; max-width: 22em; }
#token .home .home__unit { margin-top: 14px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
#token .home__unit b { color: var(--v); font-weight: 600; }

/* the coin. --d diameter, --t thickness; faces scale with --fd */
#token .coin { --d: min(80vw, 400px); --t: calc(var(--d) * .088); position: relative; margin: clamp(48px, 7vw, 88px) auto 0; }
#token .coin__body { display: flex; justify-content: center; gap: clamp(12px, 3vw, 28px); }
#token .coin__face { --fd: calc((var(--d) - 16px) / 2); position: relative; flex: none; width: var(--fd); height: var(--fd); border-radius: 50%; overflow: hidden; }
#token .coin__face--a { color: #000; background: radial-gradient(circle, rgba(0, 0, 0, 0) 75.6%, rgba(0, 0, 0, 0.08) 76.2%, rgba(0, 0, 0, 0.03) 99%), linear-gradient(140deg, #f8f8f8 0%, #dcdcdc 26%, #b9b9b9 50%, #dedede 72%, #c4c4c4 100%); box-shadow: inset 0 0 0 calc(var(--fd) * .014) #000, inset 0 0 0 calc(var(--fd) * .034) rgba(255, 255, 255, 0.45); }
#token .coin__face--b { color: var(--v); background: radial-gradient(circle, rgba(255, 255, 255, 0) 75.6%, rgba(255, 255, 255, 0.05) 76.2%, rgba(255, 255, 255, 0.015) 99%), linear-gradient(140deg, #2c2c2c 0%, #101010 34%, #000 56%, #161616 80%, #050505 100%); box-shadow: inset 0 0 0 calc(var(--fd) * .014) var(--v), inset 0 0 0 calc(var(--fd) * .034) rgba(255, 255, 255, 0.05); }
#token .coin__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
#token .coin__ring text { font-family: var(--mono); font-size: 10.5px; font-weight: 500; fill: #111; }
#token .coin__face--b .coin__ring text { fill: var(--v-dk); }
#token .coin__line { fill: none; stroke: rgba(0, 0, 0, 0.4); stroke-width: .8; }
#token .coin__face--b .coin__line { stroke: rgba(162, 107, 255, 0.45); }
#token .coin__mark { position: absolute; left: 50%; top: 21.5%; width: calc(var(--fd) * .092); height: auto; transform: translateX(-50%); }
#token .coin__face--b .coin__mark { fill: var(--v); }
#token .coin__n { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-54%); text-align: center; font-stretch: 125%; font-weight: 600; font-size: calc(var(--fd) * .46); line-height: 1; letter-spacing: -0.04em; }
#token .coin__face--b .coin__n { background: linear-gradient(170deg, #9a5cff 0%, #6600ff 55%, #4b00bd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
#token .coin__w { position: absolute; left: 0; right: 0; top: 69%; text-align: center; font-size: calc(var(--fd) * .046); font-weight: 600; font-stretch: 112%; letter-spacing: .02em; }
#token .coin__face--b .coin__w { color: var(--v-dk); }
#token .coin__sheen { position: absolute; inset: -20%; pointer-events: none; background: linear-gradient(104deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 64%); opacity: 0; }
#token .coin__face--b .coin__sheen { background: linear-gradient(104deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.11) 50%, rgba(255, 255, 255, 0) 60%); }
#token .coin__edge, #token .coin__shadow { display: none; }

/* 3D coin (token.js builds the edge) */
html.motion #token .coin { width: var(--d); height: var(--d); perspective: calc(var(--d) * 3.4); perspective-origin: 50% 40%; }
html.motion #token .coin__body { display: block; position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
html.motion #token .coin__face { --fd: var(--d); position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
html.motion #token .coin__face--a { transform: translateZ(calc(var(--t) / 2)); }
html.motion #token .coin__face--b { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
html.motion #token .coin__edge { display: block; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
html.motion #token .coin__edge i { position: absolute; left: calc(var(--d) * -.0262 - .5px); top: calc(var(--t) / -2); width: calc(var(--d) * .0524 + 1px); height: var(--t); transform: rotateZ(var(--a)) translateY(calc(var(--d) / -2 + 1px)) rotateX(90deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
html.motion #token .coin__shadow { display: block; position: absolute; left: 6%; right: 6%; top: calc(100% + var(--d) * .07); height: calc(var(--d) * .12); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.12) 55%, rgba(0, 0, 0, 0)); pointer-events: none; }
html.motion #token .coin__sheen { opacity: 1; will-change: transform; }
html.motion #token .coin__shadow { will-change: transform, opacity; }
/* idle float: a compositor animation on a wrapper (token.js only writes .coin__body while something moves), paused off screen */
html.motion #token .coin__float { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; animation: token-float 8s cubic-bezier(.45, 0, .55, 1) infinite; }
html.motion #token .coin__pool { position: absolute; inset: 0; pointer-events: none; transform-origin: 50% calc(100% + var(--d) * .13); will-change: transform, opacity; animation: token-pool 8s cubic-bezier(.45, 0, .55, 1) infinite; }
html.motion #token .coin:not([data-live]) .coin__float, html.motion #token .coin:not([data-live]) .coin__pool { animation-play-state: paused; }
@keyframes token-float { 0%, 100% { transform: translate3d(0, 1%, 0) rotateY(-3.5deg); } 50% { transform: translate3d(0, -1%, 0) rotateY(3.5deg); } }
@keyframes token-pool { 0%, 100% { transform: scaleX(1.02); opacity: 1; } 50% { transform: scaleX(.95); opacity: .8; } }
@media (hover: hover) and (pointer: fine) { html.motion #token .coin { cursor: grab; } html.motion #token .coin:active { cursor: grabbing; } }

/* tablet: homes side by side under the coin */
@media (min-width: 600px) {
  #token .home--sol { grid-column: 1 / span 6; }
  #token .home--veil { grid-column: 7 / span 6; }
}
@media (max-width: 1023px) { #token .coin { grid-row: 2; } }
@media (min-width: 600px) and (max-width: 1023px) { #token .home { grid-row: 3; } }

/* desktop: one pinned screen. head on top, Solana | coin | Veil Layer */
@media (min-width: 1024px) {
  #token .token__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end; }
  #token .token__title { grid-column: 1 / span 8; font-size: clamp(40px, 4.7vw, 80px); text-wrap: wrap; max-width: 10.5em; }
  #token .token__line { grid-column: 9 / span 4; margin-top: 0; padding-bottom: .4em; }
  #token .home { grid-row: 2; align-self: center; margin-top: 0; }
  #token .home--sol { grid-column: 1 / span 3; }
  #token .home--veil { grid-column: 10 / span 3; }
  #token .coin { grid-row: 2; grid-column: 4 / span 6; --d: min(31vw, calc(100vh - 410px), 470px); justify-self: center; align-self: center; margin: clamp(48px, 6vw, 80px) 0; }
  html.motion #token { padding-top: 0; }
  html.motion #token .token__stage { min-height: 100vh; grid-template-rows: auto 1fr; align-content: center; padding: calc(var(--nav) + 12px) 0 clamp(28px, 4vh, 56px); }
  html.motion #token .coin { margin: clamp(28px, 5vh, 64px) 0 clamp(36px, 7vh, 88px); }
  html.motion #token .home { will-change: opacity; }
}

/* contract address */
#token .ca { margin-top: clamp(64px, 8vw, 120px); padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, 0.2); display: grid; gap: 6px 24px; align-items: center; }
#token .ca__k { font-size: 14px; color: var(--muted); }
#token .ca__v { font-stretch: 118%; font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); }
#token .ca__note { font-size: 14px; color: var(--muted); max-width: 26em; }
#token .ca .btn { justify-self: start; margin-top: 16px; }
@media (min-width: 900px) {
  #token .ca { grid-template-columns: 3fr 5fr auto; }
  #token .ca__k { grid-column: 1; grid-row: 1; }
  #token .ca__v { grid-column: 1; grid-row: 2; }
  #token .ca__note { grid-column: 2; grid-row: 1 / span 2; }
  #token .ca .btn { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; }
}
@media (min-width: 1024px) { html.motion #token .ca { margin-top: clamp(24px, 3vw, 48px); } }
@media (min-width: 1024px) { html:not(.motion) #token .coin { --d: min(44vw, 600px); } }