/* dna-config-dollar.css
 * Currency-specific styles for Digital Dollar D$
 * Part of the MLO.art ordinal inscription architecture (L1a child)
 */

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #2c2c29;  /* C #2 */
}

#bill {
  position: fixed;
  box-sizing: border-box;
  transform-origin: top left;
  background: #fff7e0;
  color: inherit;
  font-family: 'Arimo', sans-serif;
  /* C #3 */
  --bvh: 1vh; /* C #4 */
  --bvw: 1vw; /* C #5 */
}

/* C #6 */
#bgHoneycomb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* C #7 */
#topBar {
  position: absolute;
  top: calc(5 * var(--bvh));
  bottom: calc(5 * var(--bvh));
  left: calc(5 * var(--bvh));
  right: calc(5 * var(--bvh));
  border-radius: calc(2.5 * var(--bvh)) 0 calc(2.5 * var(--bvh)) 0;
  border-left: calc(0.1875 * var(--bvh)) solid #302f2f;
  border-right: calc(0.1875 * var(--bvh)) solid #302f2f;
  background: linear-gradient(
    to bottom,
    #2c2c29 0,
    #2c2c29 calc(7 * var(--bvh)),
    transparent calc(7 * var(--bvh)),
    transparent calc(100% - 7 * var(--bvh)),
    #2c2c29 calc(100% - 7 * var(--bvh)),
    #2c2c29 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* C #8 */
#topBar::before {
  content: '';
  position: absolute;
  top: calc(7 * var(--bvh) + 0.2 * var(--bvh));
  bottom: calc(7 * var(--bvh) + 0.2 * var(--bvh));
  left: calc(0.2 * var(--bvh));
  right: calc(0.2 * var(--bvh));
  border: calc(0.1875 * var(--bvh)) solid #302f2f;
  pointer-events: none;
}

/* C #9 */
#topBar::after {
  content: '';
  position: absolute;
  top: calc(7 * var(--bvh) + 1.575 * var(--bvh));
  bottom: calc(7 * var(--bvh) + 1.575 * var(--bvh));
  left: calc(1.575 * var(--bvh));
  right: calc(1.575 * var(--bvh));
  border: calc(0.15 * var(--bvh)) solid #302f2f;
  outline: calc(0.15 * var(--bvh)) solid #302f2f;
  outline-offset: calc(0.15 * var(--bvh));
  pointer-events: none;
}

/* C #10 */
@keyframes scrollRight { to { background-position:   calc(240 * var(--bvh)) 0; } }
@keyframes scrollLeft  { to { background-position:  calc(-240 * var(--bvh)) 0; } }
@keyframes scrollDown  { to { background-position: 0  calc(240 * var(--bvh)); } }
@keyframes scrollUp    { to { background-position: 0 calc(-240 * var(--bvh)); } }

/* C #11 */
@keyframes fA {
  0%, 100% { transform: scaleY(1) scaleX(1) rotate(0deg); }
  25%  { transform: scaleY(1.06) scaleX(0.95) rotate(-1.5deg); }
  50%  { transform: scaleY(0.92) scaleX(1.04) rotate(1deg); }
  75%  { transform: scaleY(1.04) scaleX(0.97) rotate(-0.8deg); }
}
@keyframes fB {
  0%, 100% { transform: scaleY(0.95) scaleX(1.02) rotate(0.8deg); }
  33%  { transform: scaleY(1.08) scaleX(0.93) rotate(-1.2deg); }
  66%  { transform: scaleY(0.90) scaleX(1.05) rotate(1.5deg); }
}
@keyframes fC {
  0%, 100% { transform: scaleY(1) scaleX(1) rotate(0.5deg); }
  20%  { transform: scaleY(1.10) scaleX(0.91) rotate(-2deg); }
  40%  { transform: scaleY(0.89) scaleX(1.07) rotate(0.8deg); }
  60%  { transform: scaleY(1.05) scaleX(0.94) rotate(-0.6deg); }
  80%  { transform: scaleY(0.93) scaleX(1.03) rotate(1.5deg); }
}
.ft { fill: #2c2c29; stroke: #fff7e0; stroke-linejoin: round;
      transform-box: fill-box; transform-origin: bottom center; }

#framePatTop, #framePatBottom {
  position: absolute;
  left: calc(0.375 * var(--bvh));
  right: calc(0.375 * var(--bvh));
  height: calc(1.2 * var(--bvh));
  background: repeating-linear-gradient(
    to right,
    #302f2f 0,          #302f2f calc(0.1 * var(--bvh)),
    transparent calc(0.1 * var(--bvh)), transparent calc(0.2 * var(--bvh)),
    #302f2f calc(0.2 * var(--bvh)),     #302f2f calc(0.3 * var(--bvh)),
    transparent calc(0.3 * var(--bvh)),  transparent calc(0.8 * var(--bvh))
  );
  pointer-events: none;
}
#framePatTop    { top:    calc(7 * var(--bvh) + 0.375 * var(--bvh)); animation: scrollRight 600s linear infinite; }
#framePatBottom { bottom: calc(7 * var(--bvh) + 0.375 * var(--bvh)); animation: scrollLeft  600s linear infinite;
  right: auto; width: 50%;
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
          mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

#framePatLeft, #framePatRight {
  position: absolute;
  width: calc(1.2 * var(--bvh));
  top:    calc(7 * var(--bvh) + 0.375 * var(--bvh));
  bottom: calc(7 * var(--bvh) + 0.375 * var(--bvh));
  background: repeating-linear-gradient(
    to bottom,
    #302f2f 0,          #302f2f calc(0.1 * var(--bvh)),
    transparent calc(0.1 * var(--bvh)), transparent calc(0.2 * var(--bvh)),
    #302f2f calc(0.2 * var(--bvh)),     #302f2f calc(0.3 * var(--bvh)),
    transparent calc(0.3 * var(--bvh)),  transparent calc(0.8 * var(--bvh))
  );
  pointer-events: none;
}
#framePatLeft  { left:  calc(0.375 * var(--bvh)); animation: scrollUp 600s linear infinite; }
#framePatRight { right: calc(0.375 * var(--bvh)); animation: scrollDown 600s linear infinite; }

/* C #12 */
#guillocheTop, #guillocheBottom {
  position: absolute;
  left: calc(5 * var(--bvh));
  right: calc(5 * var(--bvh));
  height: calc(7 * var(--bvh));
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

#guillocheTop {
  top: calc(5 * var(--bvh));
  border-radius: calc(2.5 * var(--bvh)) calc(2.5 * var(--bvh)) 0 0;
}

#guillocheBottom {
  bottom: calc(5 * var(--bvh));
  border-radius: 0 0 calc(2.5 * var(--bvh)) calc(2.5 * var(--bvh));
}

#guillocheTop svg, #guillocheBottom svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* C #13 */
#bottomTextSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

/* C #14 */
#titleTextSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

/* C #15 */
#topBarTextSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

/* C #16 */
#topCounterSvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

/* C #17 */
#libertySvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* C #18 */
#cloud-layer {
  position: absolute;
  top: calc(12 * var(--bvh));            /* C #19 */
  bottom: calc(5 * var(--bvh) + 7 * var(--bvh) + 1.575 * var(--bvh) + 0.45 * var(--bvh)); /* C #20 */
  left: calc(5 * var(--bvh));
  right: calc(5 * var(--bvh) + 1.575 * var(--bvh) + 0.15 * var(--bvh) + 0.15 * var(--bvh) + 0.15 * var(--bvh)); /* C #21 */
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
.cloud {
  position: absolute;
  aspect-ratio: 1.8;
  left: 110%;
  background-color: rgba(44,44,41,0.7);  /* C #22 */
  --g: radial-gradient(50% 50%, #000 98%, #0000) no-repeat;
  -webkit-mask:
    var(--g) 100% 100% / 30% 60%,
    var(--g) 70% 0 / 50% 100%,
    var(--g) 0 100% / 36% 68%,
    var(--g) 27% 18% / 26% 40%,
    linear-gradient(#000 0 0) bottom / 67% 58% no-repeat;
  mask:
    var(--g) 100% 100% / 30% 60%,
    var(--g) 70% 0 / 50% 100%,
    var(--g) 0 100% / 36% 68%,
    var(--g) 27% 18% / 26% 40%,
    linear-gradient(#000 0 0) bottom / 67% 58% no-repeat;
  transform: scaleX(-1);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
/* C #23 */
.cloud-top    { width: calc(15 * var(--bvw)); --baseOp: 0.7; animation-name: cloudDrift; animation-duration: 80s; }
/* C #24 */
.cloud-mid    { width: calc(11 * var(--bvw)); --baseOp: 0.6; animation-name: cloudDrift; animation-duration: 110s; }
/* C #25 */
.cloud-bottom { width: calc(7 * var(--bvw));  --baseOp: 0.5; animation-name: cloudDrift; animation-duration: 150s; }
@keyframes cloudDrift {
  0%   { left: 110%; opacity: 0; }
  15%  { left: 100%; opacity: var(--baseOp); }
  85%  { left: 0%;   opacity: 0; }
  100% { left: -10%; opacity: 0; }
}
/* C #26 */
.t1 { top: 7%; }  .t2 { top: 15%; } .t3 { top: 26%; }
.m1 { top: 40%; } .m2 { top: 50%; } .m3 { top: 60%; }
.b1 { top: 72%; } .b2 { top: 80%; } .b3 { top: 90%; }
/* C #27 */
.dT1 { animation-delay: -10s; } .dT2 { animation-delay: -25s; }
.dT3 { animation-delay: -40s; } .dT4 { animation-delay: -55s; }
.dT5 { animation-delay: -70s; } .dT6 { animation-delay: -5s; }
.dM1 { animation-delay: -15s; } .dM2 { animation-delay: -35s; }
.dM3 { animation-delay: -55s; } .dM4 { animation-delay: -75s; }
.dM5 { animation-delay: -5s; }  .dM6 { animation-delay: -95s; }
.dB1 { animation-delay: -20s; } .dB2 { animation-delay: -45s; }
.dB3 { animation-delay: -70s; } .dB4 { animation-delay: -95s; }
.dB5 { animation-delay: -10s; } .dB6 { animation-delay: -120s; }
/* C #28 */
#serialNumber, #serialNumber2 {
  position: absolute;
  font-family: 'Arimo', sans-serif;
  font-size: calc(3.8 * var(--bvh));
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #337354;
  pointer-events: none;
  z-index: 20;
  text-rendering: geometricPrecision;
  font-synthesis: none;
}
#serialNumber {
  top: calc(16 * var(--bvh));
  /* C #29 */
}
#serialNumber2 {
  /* C #30 */
  right: calc(12.5 * var(--bvw));
}
#reserveMark {
  position: absolute;
  top: calc(22 * var(--bvh));
  /* C #31 */
  font-family: 'Arimo', sans-serif;
  font-size: calc(3.8 * var(--bvh));
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #2c2c29;
  pointer-events: none;
  z-index: 20;
  text-rendering: geometricPrecision;
  font-synthesis: none;
}
#artistMark {
  position: absolute;
  top: calc(15 * var(--bvh));
  right: calc(5.5 * var(--bvw));
  font-size: calc(1.5 * var(--bvh));
  font-weight: 600;
  color: #2c2c29;
  pointer-events: none;
  z-index: 20;
}
#artistMark b {
  font-weight: 700;
}
/* C #32 */
#goldCounterSvg {
  position: absolute;
  display: block;
  bottom: calc(18.5 * var(--bvh));
  right: calc(7.5 * var(--bvw));
  width: calc(15 * var(--bvh));
  height: calc(10 * var(--bvh));
  pointer-events: none;
  z-index: 20;
  overflow: visible;
}
/* C #34 */
#federalSeal, #federalSeal2 {
  position: absolute;
  top: 45%;
  width: calc(25 * var(--bvh));
  height: calc(20 * var(--bvh));
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 15;
}
#leftColumn {
  position: absolute;
  left: calc(5 * var(--bvw));
  top: 0;
  bottom: 0;
  width: calc(27.5 * var(--bvw));
  pointer-events: none;
  z-index: 15;
}
#federalSeal { left: 50%; }
#federalSeal2 { top: calc(45% + 1.5 * var(--bvh)); transform: translate(-50%, -50%); /* C #35 */ }
#federalSeal svg, #federalSeal2 svg {
  width: 100%;
  height: 100%;
}
@keyframes rotateSeal {
  to { transform: rotate(360deg); }
}
#sealText, #sealText2 {
  animation: rotateSeal 60s linear infinite;
  transform-origin: 100px 100px;
}
@keyframes dsOscillate {
  0%, 12.5%  { transform: translate(0, 0); }
  25%, 37.5% { transform: translate(calc(-1.8 * var(--bvh)), 0); }
  50%, 62.5% { transform: translate(0, 0); }
  75%, 87.5% { transform: translate(calc(1.8 * var(--bvh)), 0); }
  100%       { transform: translate(0, 0); }
}
#dsCircle, #dsCircle2 {
  animation: dsOscillate 16s ease-in-out infinite;
}
/* C #36 */
#warning-box {
  position: absolute;
  bottom: calc(17 * var(--bvh));
  left: calc(7.5 * var(--bvw));
  width: calc(20 * var(--bvw));
  height: calc(20 * var(--bvh));
  display: flex;
  align-items: center;
  font-family: 'Tinos', serif;
  font-weight: 700;
  font-size: calc(2.5 * var(--bvh));
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #2c2c29;
  pointer-events: none;
  z-index: 999;
  visibility: hidden;
  white-space: normal;
}
#legalTender {
  position: absolute;
  bottom: calc(39.5 * var(--bvh));
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Arimo', sans-serif;
  font-weight: 600;
  font-size: calc(1 * var(--bvh));
  letter-spacing: 0.1em;
  color: #2c2c29;
  text-align: left;
  pointer-events: none;
  width: calc(25 * var(--bvh));
  z-index: 20;
}
#editionNumber {
  position: absolute;
  bottom: calc(15 * var(--bvh));
  left: calc(5 * var(--bvw));
  font-family: 'Arimo', sans-serif;
  font-weight: 600;
  font-size: calc(1 * var(--bvh));
  letter-spacing: 0.1em;
  color: #2c2c29;
  pointer-events: none;
  z-index: 20;
}
#seriesYear {
  position: absolute;
  bottom: calc(15 * var(--bvh));
  font-family: 'Arimo', sans-serif;
  font-weight: 600;
  font-size: calc(1 * var(--bvh));
  letter-spacing: 0.1em;
  color: #2c2c29;
  pointer-events: none;
  z-index: 20;
  text-rendering: geometricPrecision;
  font-synthesis: none;
}
#eagleMark {
  position: absolute;
  bottom: calc(19 * var(--bvh));
  height: calc(13 * var(--bvh));
  pointer-events: none;
  z-index: 20;
}
#eagleMark svg {
  height: 100%;
  width: auto;
}
#badgeMark {
  position: absolute;
  top: 42%;
  left: calc(25.5 * var(--bvw));
  width: calc(70 * var(--bvw));
  height: calc(50 * var(--bvw));
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0.5;
  z-index: 4;
}
#badgeMark svg {
  width: 100%;
  height: 100%;
}
#cryptoSign {
  position: absolute;
  bottom: calc(21 * var(--bvh));
  /* C #37 */
  font-family: 'Arimo', sans-serif;
  font-weight: 600;
  font-size: calc(1 * var(--bvh));
  letter-spacing: 0.1em;
  color: #2c2c29;
  text-align: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  pointer-events: none;
  z-index: 20;
}
/* C #38 */
#sealCounter {
  position: absolute;
  pointer-events: none;
  opacity: 0.5;
  z-index: 10;
}
#sealCounter svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}