/* AmericanSites: a living portfolio orbit, with a Thanksgiving turkey. */
html { scrollbar-gutter: stable; }
html:has(.entry-gate[open]) { overflow: hidden; scrollbar-gutter: auto; }
body.entry-locked { overflow: hidden; }
.entry-gate {
  --entry-x: 0px;
  --entry-y: 0px;
  --portal-size: min(62vh, 72vw, 620px);
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  color: #f6f8fc;
  background: #03060d;
  font-family: var(--body);
  overscroll-behavior: contain;
  transition: none;
}
.entry-gate:not([open]) { display: none; }
.entry-gate[open] { display: block; }
.entry-gate::backdrop { background: #03060d; }
.entry-gate::before { display: none; }
.entrance-atmosphere, .entrance-scene, .entrance-shade, .entrance-transition { position: absolute; inset: 0; pointer-events: none; }
.entrance-atmosphere { background: radial-gradient(ellipse at 33% 46%, #172746 0, transparent 43%), radial-gradient(ellipse at 72% 52%, #492619 0, transparent 44%), radial-gradient(ellipse at 50% 65%, #121e34 0, transparent 56%), #03060d; }
.entrance-atmosphere::after { content: ""; position: absolute; inset: 0; opacity: .3; background-image: radial-gradient(#eac39a .7px, transparent .7px); background-size: 81px 67px; mask-image: radial-gradient(ellipse at center, transparent 12%, #000 92%); }
.entrance-scene { z-index: 1; }
.entrance-scene canvas { display: block; width: 100%; height: 100%; }
.entrance-cursor-light { position: absolute; z-index: 2; left: var(--pointer-x, 50%); top: var(--pointer-y, 50%); width: 310px; height: 310px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #4c91fa13, transparent 68%); pointer-events: none; }
.entrance-shade { z-index: 2; background: linear-gradient(0deg, #03060dcc 0, transparent 16%, transparent 84%, #03060d80); }
.entrance-topbar { position: absolute; z-index: 8; top: max(22px, env(safe-area-inset-top)); left: clamp(22px, 4.5vw, 78px); right: clamp(22px, 4.5vw, 78px); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.entrance-brand { display: flex; align-items: center; gap: 10px; }
.entrance-brand img { width: 37px; height: 37px; border-radius: 50%; object-fit: contain; }
.entrance-brand > span { font: 750 17px var(--heading); letter-spacing: -.03em; }
.entrance-brand > span > span { color: #83adff; }
.entrance-brand small { margin-left: 3px; font-size: 10px; color: #bdc9db; }
.entrance-actions { display: flex; align-items: center; gap: 14px; }
.entrance-partner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 13px;
  border: 1px solid #d7a47559;
  border-radius: 8px;
  background: #d7a4750d;
  color: #f4d6ba;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.entrance-partner:hover { color: #fff3e4; border-color: #d7a475a8; background: #d7a47521; }
.entrance-skip { flex: none; min-height: 44px; padding: 8px 0 8px 14px; border: 0; background: none; color: #b9c6da; cursor: pointer; font-size: 11px; }
.entrance-skip span { margin-left: 10px; }
.entrance-skip:hover { color: #fff; }
.entry-gate :is(button, a):focus-visible, .entrance-replay:focus-visible { outline: 2px solid #c0d8ff; outline-offset: 5px; }
.entrance-playground { position: absolute; z-index: 3; left: 50%; top: 50%; width: var(--portal-size); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%, -50%); cursor: grab; touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.entrance-playground:focus-visible { outline-color: #8ab9ff66 !important; outline-offset: 0 !important; }
.entry-gate.is-dragging .entrance-playground { cursor: grabbing; }
.entrance-wave { position: absolute; inset: 3%; border: 1px solid #a7ceff; border-radius: 50%; opacity: 0; box-shadow: 0 0 35px #2b80f433, inset 0 0 25px #4b8fed22; pointer-events: none; }
.entry-gate.is-pulsing .entrance-wave { animation: entrance-interactive-pulse 1.1s cubic-bezier(.16,.8,.3,1) both; }
.entrance-core { position: absolute; z-index: 4; left: 50%; top: 37%; width: clamp(110px, 10vw, 148px); transform: perspective(650px) translate(calc(-50% + var(--entry-x)), calc(-50% + var(--entry-y))) rotateX(var(--portal-rx, 0deg)) rotateY(var(--portal-ry, 0deg)); pointer-events: none; transition: opacity .3s, transform 1s cubic-bezier(.16,1,.3,1); }
.entry-gate.is-dragging .entrance-core { transition: opacity .3s; }
.entrance-emblem { position: relative; padding: 9px; border: 1px solid #94b9ee12; border-radius: 50%; background: radial-gradient(circle, #091329d9 0, #03060dc7 69%); box-shadow: 0 0 65px #3578ef2b; animation: entrance-emblem-arrive 1.2s cubic-bezier(.16,1,.3,1) both; }
.entrance-emblem::after { content: ""; position: absolute; inset: -9px; border: 1px solid #8eafdc14; border-radius: 50%; }
.entry-gate.is-charged .entrance-emblem { box-shadow: 0 0 85px #3578ef60; }
.entry-gate.is-pulsing .entrance-emblem { box-shadow: 0 0 75px #7db3ff80; }
.entrance-emblem img { display: block; width: 100%; height: auto; border-radius: 50%; filter: drop-shadow(0 0 16px #3585ed33); }
.entrance-core__caption { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); white-space: nowrap; color: #9bb3d4; font: 8px var(--body); letter-spacing: .17em; }
.entrance-project-orbit { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.entrance-orbit-card { --orbit-angle: -6deg; position: absolute; left: 32%; top: 23%; width: clamp(146px, 14vw, 198px); padding: 0; overflow: hidden; border: 1px solid #9cb8df6b; border-radius: 9px; background: linear-gradient(135deg, #1b2a41eb, #0b1423f2); box-shadow: 0 20px 58px #0009, 0 0 32px #3678dd20, inset 0 1px #ffffff12; color: #f1f6ff; pointer-events: auto; cursor: pointer; transform: translate(-50%, -50%) rotate(var(--orbit-angle)); animation: entrance-project-arrive .9s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--orbit-index) * 85ms); transition: border-color .25s, box-shadow .25s; text-align: left; -webkit-tap-highlight-color: transparent; }
.entrance-orbit-card:nth-child(2) { --orbit-angle: 6deg; left: 68%; top: 23%; }
.entrance-orbit-card:nth-child(3) { --orbit-angle: -5deg; left: 76%; top: 61%; }
.entrance-orbit-card:nth-child(4) { --orbit-angle: 3deg; left: 50%; top: 82%; }
.entrance-orbit-card:nth-child(5) { --orbit-angle: 5deg; left: 24%; top: 61%; }
.entrance-orbit-card:hover, .entrance-orbit-card:focus-visible { z-index: 2; border-color: #c9e2ff; box-shadow: 0 22px 65px #000b, 0 0 38px #3678dd70, inset 0 1px #ffffff26; }
.entrance-orbit-card__chrome { display: block; padding: 5px 8px 4px; color: #9eb7db; font-size: 6px; line-height: 1; letter-spacing: 2px; background: linear-gradient(90deg, #26364d, #17263c); }
.entrance-orbit-card img { display: block; width: 100%; height: clamp(75px, 7.6vw, 108px); object-fit: cover; object-position: top; background: #0b1628; }
.entrance-orbit-card__caption { display: grid; gap: 4px; padding: 9px 10px 10px; border-top: 1px solid #9ab4d41a; }
.entrance-orbit-card__caption strong { display: block; font-size: clamp(10px, .8vw, 12px); font-weight: 600; line-height: 1.25; text-wrap: balance; }
.entrance-orbit-card__caption small { display: flex; align-items: center; gap: 5px; font-size: 8px; color: #adcae9; line-height: 1.3; }
.entrance-orbit-card__caption small::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: #8ebbb2; box-shadow: 0 0 7px #67b19a55; }
.entrance-guide { position: absolute; z-index: 7; left: 50%; top: 50%; display: flex; flex-direction: column; align-items: center; width: 164px; min-height: 44px; padding: 0 8px 7px; border: 0; color: #f5f8ff; background: transparent; transform: translate(-50%, -12%); cursor: pointer; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.entrance-guide::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 34%; width: 174px; height: 174px; border-radius: 50%; background: radial-gradient(circle, #e8a96732, #d57a350d 48%, transparent 70%); transform: translate(-50%, -50%); transition: background .3s; }
.entrance-guide__figure { display: block; width: 122px; height: auto; filter: drop-shadow(-3px 4px 11px #7f9bd13b) drop-shadow(6px 3px 13px #e9914859); animation: entrance-guide-float 4.3s ease-in-out infinite; transform-origin: center 65%; transition: filter .3s; }
.entrance-guide__shadow { display: block; width: 57px; height: 9px; margin: 1px auto 11px; border-radius: 50%; background: #e7af7633; box-shadow: 0 0 12px 4px #c77d411f; filter: blur(3px); animation: entrance-guide-shadow 4.3s ease-in-out infinite; }
.entrance-guide__label { display: inline-flex; align-items: center; gap: 9px; font: 600 17px/1.25 var(--heading); letter-spacing: -.02em; text-shadow: 0 2px 14px #000; }
.entrance-guide__label > span { color: #e9a976; font: 400 17px/1 var(--body); transition: transform .25s; }
.entrance-guide__hint { display: block; margin-top: 7px; color: #eac39a; font-size: 10px; line-height: 1.4; letter-spacing: .09em; }
.entrance-guide:hover .entrance-guide__figure, .entrance-guide:focus-visible .entrance-guide__figure { animation: entrance-guide-invite .9s ease-in-out infinite alternate; filter: drop-shadow(-5px 5px 17px #7e9cda66) drop-shadow(7px 3px 15px #fb9c538c); }
.entrance-guide:hover .entrance-guide__label > span { transform: translate(2px, -2px); }
.entrance-guide:hover .entrance-guide__hint, .entrance-guide:focus-visible .entrance-guide__hint { color: #f2bd91; }
.entry-gate .entrance-guide:focus-visible { outline-color: #f0ba83; border-radius: 12px; }
.entrance-guide:focus-visible .entrance-guide__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.entrance-guide:active .entrance-guide__figure { transform: translateY(-3px) scale(.94); }
.entrance-bottom { position: absolute; z-index: 6; bottom: max(22px, env(safe-area-inset-bottom)); left: 22px; right: 22px; display: flex; justify-content: center; align-items: center; pointer-events: none; }
.entrance-bottom p { margin: 0; color: #8e9eb9; font-size: 10px; font-weight: 400; line-height: 1.5; letter-spacing: .035em; text-align: center; }
.entrance-bottom .entrance-interaction > span { color: #afbdd2; }
.entrance-coordinate { display: none; }
.entrance-transition { z-index: 10; opacity: 0; background: radial-gradient(ellipse at 50% 50%, #aacdff66, #18356820 46%, transparent 74%); }
.entrance-fallback { position: absolute; z-index: 0; top: 50%; left: 50%; width: var(--portal-size); aspect-ratio: 1; transform: perspective(650px) translate(-50%, -50%) rotateX(var(--portal-rx, 0deg)) rotateY(var(--portal-ry, 0deg)); opacity: .8; transition: opacity .8s, transform .7s; }
.entrance-fallback span { position: absolute; inset: 0; border: 1px solid #438bff99; border-radius: 50%; box-shadow: 0 0 35px #3d80ed33, inset 0 0 40px #2a76fa13; transform: rotate(-25deg) scaleY(.8); }
.entrance-fallback span:nth-child(2) { inset: 10%; border-color: #da965099; transform: rotate(40deg) scaleY(.78); }
.entrance-fallback span:nth-child(3) { inset: 20%; border-color: #d3d9e177; transform: rotate(-45deg) scaleY(.8); }
.entry-gate.has-scene .entrance-fallback { opacity: 0; }
.entry-gate.is-entering .entrance-topbar, .entry-gate.is-entering .entrance-bottom { opacity: 0; transition: opacity .3s ease, filter .45s; filter: blur(5px); }
.entry-gate.is-entering .entrance-core { opacity: 0; transform: translate(-50%, -50%) scale(1.6); transition: opacity .3s, transform .7s; }
.entry-gate.is-entering .entrance-playground { pointer-events: none; opacity: 0; }
.entry-gate.is-entering .entrance-project-orbit { opacity: 0; transition: opacity .3s; }
.entry-gate.is-entering .entrance-orbit-card { pointer-events: none; }
.entry-gate.is-entering .entrance-guide { pointer-events: none; animation: entrance-guide-depart .65s cubic-bezier(.3,.1,.7,1) both; }
.entry-gate.is-entering .entrance-transition { animation: entrance-flash .85s ease-in-out both; }
body.entrance-arrived main { animation: entrance-page-arrive .7s cubic-bezier(.16,1,.3,1) both; }
.entrance-replay { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 1px; padding: 0; border: 0; background: none; color: #9fafc6; cursor: pointer; font-size: 11px; }
.entrance-replay:hover { color: #fff; }
@keyframes entrance-emblem-arrive { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: scale(1); } }
@keyframes entrance-flash { 0% { opacity: 0; } 58% { opacity: 1; } 100% { opacity: .25; } }
@keyframes entrance-page-arrive { from { opacity: .35; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes entrance-interactive-pulse { 0% { opacity: .75; transform: scale(.65); } 85% { opacity: .2; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes entrance-project-arrive { from { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%) rotate(var(--orbit-angle)) scale(1); } }
@keyframes entrance-guide-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes entrance-guide-shadow { 0%, 100% { transform: scaleX(1); opacity: .75; } 50% { transform: scaleX(.72); opacity: .4; } }
@keyframes entrance-guide-invite { from { transform: translateY(-7px) rotate(-5deg); } to { transform: translateY(-13px) rotate(5deg); } }
@keyframes entrance-guide-depart { 0% { opacity: 1; transform: translate(-50%, -12%) scale(1); } 35% { opacity: 1; transform: translate(-50%, -28%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -65%) scale(.15); } }
@media (max-width: 900px) and (min-width: 701px) {
  .entrance-orbit-card { left: 28%; }
  .entrance-orbit-card:nth-child(2) { left: 72%; }
  .entrance-orbit-card:nth-child(3) { left: 80%; }
  .entrance-orbit-card:nth-child(5) { left: 20%; }
}
@media (max-width: 700px) {
  .entry-gate { --portal-size: min(62vh, 84vw); }
  .entrance-topbar { top: max(14px, env(safe-area-inset-top)); left: 19px; right: 19px; }
  .entrance-brand { gap: 7px; }
  .entrance-brand img { width: 31px; height: 31px; }
  .entrance-brand > span { font-size: 15px; }
  .entrance-brand small { font-size: 9px; }
  .entrance-skip { font-size: 10px; }
  .entrance-skip span { margin-left: 5px; }
  .entrance-core { top: 37%; width: clamp(88px, 24vw, 123px); }
  .entrance-emblem { padding: 7px; }
  .entrance-core__caption { top: calc(100% + 11px); font-size: 7px; letter-spacing: .1em; }
  .entrance-orbit-card { --orbit-angle: -6deg; width: clamp(98px, 28vw, 136px); left: 24%; top: 23%; border-radius: 7px; }
  .entrance-orbit-card:nth-child(2) { --orbit-angle: 6deg; left: 76%; top: 23%; }
  .entrance-orbit-card:nth-child(3) { --orbit-angle: -5deg; left: 79%; top: 61%; }
  .entrance-orbit-card:nth-child(4) { --orbit-angle: 3deg; left: 50%; top: 82%; }
  .entrance-orbit-card:nth-child(5) { --orbit-angle: 5deg; left: 21%; top: 61%; }
  .entrance-orbit-card__chrome { padding: 4px 6px 3px; font-size: 5px; }
  .entrance-orbit-card img { height: clamp(52px, 16vw, 76px); }
  .entrance-orbit-card__caption { gap: 4px; padding: 6px 7px 7px; }
  .entrance-orbit-card__caption strong { font-size: 10px; line-height: 1.2; }
  .entrance-orbit-card__caption small { font-size: 7px; }
  .entrance-guide { width: 142px; }
  .entrance-guide__figure { width: clamp(82px, 24vw, 118px); }
  .entrance-guide__shadow { width: 45px; height: 7px; margin-bottom: 9px; }
  .entrance-guide__label { font-size: 15px; }
  .entrance-guide__label > span { font-size: 15px; }
  .entrance-guide__hint { margin-top: 6px; font-size: 8px; letter-spacing: .06em; }
  .entrance-bottom { left: 15px; right: 15px; bottom: max(18px, env(safe-area-inset-bottom)); }
  .entrance-bottom p { max-width: 270px; font-size: 9px; letter-spacing: .01em; }
}
@media (max-height: 650px) and (max-width: 700px) and (orientation: portrait) {
  .entrance-topbar { top: max(9px, env(safe-area-inset-top)); left: 15px; right: 15px; }
  .entrance-brand img { width: 28px; height: 28px; }
  .entrance-brand > span { font-size: 14px; }
  .entrance-core { width: 86px; }
  .entrance-core__caption { display: none; }
  .entrance-orbit-card { width: clamp(98px, 28vw, 114px); }
  .entrance-orbit-card img { height: 50px; }
  .entrance-orbit-card__caption { padding: 5px 6px 6px; gap: 3px; }
  .entrance-orbit-card__caption strong { font-size: 9px; }
  .entrance-orbit-card__caption small { font-size: 7px; }
  .entrance-guide__figure { width: 80px; }
  .entrance-guide { top: 48%; }
  .entrance-guide__shadow { margin-top: 0; margin-bottom: 7px; }
  .entrance-guide__label { font-size: 14px; }
  .entrance-guide__hint { margin-top: 5px; font-size: 8px; }
  .entrance-bottom { bottom: max(13px, env(safe-area-inset-bottom)); }
  .entrance-bottom p { font-size: 8px; }
}
@media (max-width: 420px) and (orientation: portrait) {
  .entrance-topbar { gap: 8px; }
  .entrance-actions { gap: 6px; }
  .entrance-partner { padding-inline: 8px; font-size: 10px; }
  .entrance-skip { min-width: 44px; padding-left: 4px; }
  .entrance-actions > :is(a, button) > span { display: none; }
  .entrance-guide { width: 100px; padding-inline: 0; }
  .entrance-orbit-card:nth-child(3) { left: 82%; }
  .entrance-orbit-card:nth-child(5) { left: 18%; }
}
@media (max-width: 350px) and (orientation: portrait) {
  .entrance-orbit-card:nth-child(3) { left: 83%; }
  .entrance-orbit-card:nth-child(5) { left: 17%; }
}
@media (min-width: 701px) and (min-height: 701px) and (max-height: 800px) {
  .entrance-core { top: 35%; }
  .entrance-guide { top: 45%; }
}
@media (max-height: 700px) and (orientation: landscape) {
  .entry-gate { --portal-size: min(76vh, 52vw); }
  .entrance-topbar { top: max(8px, env(safe-area-inset-top)); left: 20px; right: 20px; }
  .entrance-brand img { width: 28px; height: 28px; }
  .entrance-brand > span { font-size: 14px; }
  .entrance-brand small { display: none; }
  .entrance-core { top: 30%; width: 74px; }
  .entrance-core__caption { display: none; }
  .entrance-guide { top: 44%; width: 100px; padding-inline: 0; }
  .entrance-guide__figure { width: clamp(58px, 15vh, 90px); }
  .entrance-guide__shadow { height: 5px; margin-bottom: 6px; }
  .entrance-guide__label { font-size: 13px; }
  .entrance-guide__hint { font-size: 7px; margin-top: 4px; }
  .entrance-orbit-card { width: clamp(108px, 17vw, 155px); left: 24%; top: 29%; }
  .entrance-orbit-card:nth-child(2) { left: 76%; top: 29%; }
  .entrance-orbit-card:nth-child(3) { left: 82%; top: 71%; }
  .entrance-orbit-card:nth-child(4) { left: 50%; top: 83%; }
  .entrance-orbit-card:nth-child(5) { left: 18%; top: 71%; }
  .entrance-orbit-card__chrome { padding: 3px 6px; font-size: 5px; }
  .entrance-orbit-card img { height: clamp(32px, 10vh, 50px); }
  .entrance-orbit-card__caption { gap: 2px; padding: 4px 6px 5px; }
  .entrance-orbit-card__caption strong { font-size: 9px; }
  .entrance-orbit-card__caption small { font-size: 7px; }
  .entrance-bottom { bottom: max(7px, env(safe-area-inset-bottom)); }
  .entrance-bottom p { font-size: 8px; }
}
@media (pointer: coarse) { .entrance-cursor-light { display: none; } }
.entry-gate.is-reduced-motion .entrance-cursor-light { display: none; }
.entry-gate.is-reduced-motion *, .entry-gate.is-reduced-motion.is-pulsing .entrance-wave { animation: none !important; transition: none !important; }
.entry-gate.is-reduced-motion.is-pulsing .entrance-wave { opacity: .35; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .entry-gate *, body.entrance-arrived main { animation: none !important; transition: none !important; }
}