/* ==================================================================================================
   File: style.css
   Description: Main glass-space stylesheet for the I AM SOL.AI Phantom CMS theme.
   Author: LoTeK (Stephan Kühn)
   Mail: info@lotek-zone.com
   Web: https://lotek-zone.com/
   GitHub: https://github.com/LoTeK-Zone
   Repository: https://github.com/LoTeK-Zone/phantom-cms
   Version: 0.5.2
   Last Updated: 2026-05-23
   License: MIT
   ================================================================================================== */

@import url("fonts.css");
:root {
   --ci-font-main: "Geist", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   --ci-font-mono: "Geist Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
   --ci-bg-deep: #030812;
   --ci-glass-bg: #dff7ff14;
   --ci-glass-bg-soft: #dff7ff10;
   --ci-glass-bg-strong: #dff7ff20;
   --ci-glass-border: #b8f3ff38;
   --ci-glass-border-soft: #b8f3ff26;
   --ci-glass-border-hover: #7df3ff78;
   --ci-text-main: #eaf7ff;
   --ci-text-soft: #b9d6e6;
   --ci-text-muted: #7894a6;
   --ci-text-dim: #526a7c;
   --ci-cyan: #5eeeff;
   --ci-cyan-soft: #9af7ff;
   --ci-cyan-glow: #5eeeff88;
   --ci-cyan-glow-soft: #5eeeff44;
   --ci-violet-glow: #9b7cff66;
   --layout-width: min(880px, calc(100vw - 40px));
   --layout-width-mobile: calc(100vw - 24px);
   --radius-plate: 28px;
   --radius-pill: 999px;
   --page-background-image: url("../img/background.jpg");
   --page-background-soft-cyan-glow: #5eeeff14;
   --page-background-dark-top: #00000012;
   --page-background-dark-bottom: #00000088;
   --page-background-vignette-side: #0000003a;
   --page-background-vignette-center: #00000000;
   --page-background-dim-layer: #0000001f;
   --background-blur-header-glass: 8px;
   --background-blur-content-plate: 6px;
   --background-blur-small-card: 6px;
   --background-blur-footer-glass: 8px;
   --text-main: var(--ci-text-main);
   --text-soft: var(--ci-text-soft);
   --text-muted: var(--ci-text-muted);
   --text-title: #eaf7ffef;
   --text-cyan-hover: var(--ci-cyan-soft);
   --content-glass-fill-top: var(--ci-glass-bg);
   --content-glass-fill-bottom: #dff7ff08;
   --content-glass-border: var(--ci-glass-border);
   --content-glass-highlight: #ffffff24;
   --content-glass-sheen: #ffffff18;
   --content-glass-cyan-sheen: #5eeeff20;
   --small-card-fill: #dff7ff0e;
   --small-card-border: #b8f3ff26;
   --shadow-black-soft: #00000055;
   --shadow-black-strong: #00000066;
   --ci-focus-ring: 0 0 0 2px #5eeeff66, 0 0 22px #5eeeff44;
}

* {
   box-sizing: border-box;
}

html,
body {
   margin: 0;
   min-height: 100%;
   color: var(--text-main);
   font-family: var(--ci-font-main);
   font-weight: 400;
   letter-spacing: 0.005em;
   background: var(--ci-bg-deep);
   overflow-x: hidden;
}

body {
   min-height: 100vh;
   background-image:
      radial-gradient(circle at 48% 45%, var(--page-background-soft-cyan-glow), transparent 43%),
      linear-gradient(180deg, var(--page-background-dark-top), var(--page-background-dark-bottom)),
      var(--page-background-image);
   background-position: center center;
   background-size: cover;
   background-attachment: fixed;
}

body::after {
   content: "";
   position: fixed;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background:
      linear-gradient(90deg, var(--page-background-vignette-side), var(--page-background-vignette-center) 28%, var(--page-background-vignette-center) 72%, var(--page-background-vignette-side)),
      var(--page-background-dim-layer);
}

a {
   color: var(--ci-cyan-soft);
   text-decoration: none;
}

a:hover,
a:focus-visible {
   color: var(--ci-cyan);
   text-shadow: 0 0 12px var(--ci-cyan-glow-soft);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
   outline: none;
   box-shadow: var(--ci-focus-ring);
}

.fixed-top-layer,
.fixed-bottom-layer {
   position: fixed;
   left: 0;
   width: 100%;
   z-index: 20;
   display: flex;
   justify-content: center;
   pointer-events: none;
   padding: 0 20px;
}

.fixed-top-layer {
   top: 20px;
}

.fixed-bottom-layer {
   bottom: 20px;
}

.glass-frame {
   width: var(--layout-width);
   pointer-events: auto;
   box-shadow:
      0 22px 70px var(--shadow-black-soft),
      inset 0 1px 0 #ffffff22,
      inset 0 -1px 0 rgb(0 0 0 / 26%);
}

.site-header-glass {
   min-height: 62px;
   border-radius: var(--radius-pill);
   border: 1px solid var(--ci-glass-border-soft);
   background: linear-gradient(180deg, var(--ci-glass-bg), #dff7ff08);
   backdrop-filter: blur(var(--background-blur-header-glass)) saturate(128%);
   -webkit-backdrop-filter: blur(var(--background-blur-header-glass)) saturate(128%);
   display: grid;
   grid-template-columns: minmax(170px, 1fr) auto minmax(110px, 1fr);
   align-items: center;
   gap: 18px;
   padding: 0 16px 0 22px;
}

.brand-link {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   color: rgb(235 252 255 / 86%);
   text-decoration: none;
   text-transform: uppercase;
   font-family: var(--ci-font-mono);
   letter-spacing: 0.105em;
   font-size: 0.735rem;
   white-space: nowrap;
   transition: color 240ms ease, text-shadow 300ms ease;
}

.brand-link:hover,
.brand-link:focus-visible {
   color: var(--text-cyan-hover);
   text-shadow: 0 0 14px rgb(105 225 255 / 36%);
   outline: none;
}

.brand-logo {
   width: 50px;
   height: 50px;
   flex: 0 0 50px;
   display: block;
   border-radius: 50%;
   object-fit: cover;
   border: 1px solid rgb(155 238 255 / 42%);
   background: rgb(255 255 255 / 3.2%);
   box-shadow:
      0 0 22px rgb(80 220 255 / 22%),
      inset 0 0 18px rgb(255 255 255 / 6%);
}

.right-meta {
   justify-self: end;
   font-family: var(--ci-font-mono);
   color: var(--ci-text-muted);
   font-size: 0.72rem;
   letter-spacing: 0.115em;
   text-transform: uppercase;
   white-space: nowrap;
}

.mobile-menu-state {
   position: absolute;
   width: 1px;
   height: 1px;
   opacity: 0;
   pointer-events: none;
}

.mobile-menu-button {
   display: none;
}

.mobile-menu-icon {
   width: 20px;
   display: grid;
   gap: 4px;
}

.mobile-menu-icon span {
   height: 2px;
   border-radius: 999px;
   background: currentColor;
   box-shadow: 0 0 10px var(--ci-cyan-glow-soft);
}

.mobile-menu-text {
   font-family: var(--ci-font-main);
}

.site-main {
   position: relative;
   z-index: 2;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 132px 20px 116px;
}

.content-stack {
   width: var(--layout-width);
   display: grid;
   gap: 18px;
}

.glass-content-plate,
.article-card,
.overview-card {
   position: relative;
   overflow: hidden;
   border: 1px solid var(--content-glass-border);
   background: linear-gradient(180deg, var(--content-glass-fill-top), var(--content-glass-fill-bottom));
   border-radius: var(--radius-plate);
   box-shadow:
      0 30px 86px var(--shadow-black-strong),
      inset 0 1px 0 var(--content-glass-highlight),
      inset 0 -1px 0 rgb(0 0 0 / 26%);
   backdrop-filter: blur(var(--background-blur-content-plate)) saturate(145%);
   -webkit-backdrop-filter: blur(var(--background-blur-content-plate)) saturate(145%);
   transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.glass-content-plate:hover,
.article-card:hover,
.overview-card:hover {
   background: linear-gradient(180deg, var(--ci-glass-bg-strong), #dff7ff0a);
   border-color: var(--ci-glass-border-hover);
   box-shadow:
      0 32px 92px var(--shadow-black-strong),
      0 0 24px var(--ci-cyan-glow),
      inset 0 1px 0 #ffffff30,
      inset 0 -1px 0 #00000042;
}

.glass-content-plate::before,
.article-card::before,
.overview-card::before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   background:
      radial-gradient(circle at 50% 0%, var(--content-glass-cyan-sheen), transparent 38%),
      linear-gradient(115deg, var(--content-glass-sheen), transparent 16%, transparent 74%, rgb(255 255 255 / 4.5%));
}

.plate-inner,
.article-card-inner,
.overview-card-inner {
   position: relative;
   z-index: 1;
}

.intro-plate,
.page-plate,
.article-plate,
.list-plate {
   padding: clamp(34px, 5vw, 62px);
}

.intro-plate {
   text-align: center;
}

.micro-label,
.article-meta,
.card-meta {
   margin: 0 0 16px;
   font-family: var(--ci-font-mono);
   color: var(--ci-cyan-soft);
   font-size: 0.72rem;
   text-transform: uppercase;
   letter-spacing: 0.200em;
}

h1,
.page-content h1 {
   margin: 0;
   color: var(--text-title);
   font-weight: 500;
   font-size: clamp(2.15rem, 5vw, 4.35rem);
   line-height: 1.0;
   letter-spacing: 0.010em;
   text-shadow:
      0 0 18px var(--ci-cyan-glow-soft),
      0 0 34px var(--ci-violet-glow),
      0 1px 24px #00000055;
}

.page-content h2,
.page-content h3,
.article-card h2,
.overview-card h2 {
   margin: 1.6em 0 0.45em;
   color: var(--ci-text-main);
   font-weight: 500;
   text-shadow: 0 0 12px var(--ci-cyan-glow-soft);
}

.page-content h2:first-child,
.page-content h3:first-child {
   margin-top: 0;
}

.page-content p,
.lead-text,
.article-card p,
.overview-card p {
   color: var(--ci-text-soft);
   line-height: 1.72;
}

.lead-text {
   max-width: 44rem;
   margin: 22px auto 0;
   font-size: clamp(1rem, 1.45vw, 1.14rem);
}

.page-content > :first-child {
   margin-top: 0;
}

.page-content > :last-child {
   margin-bottom: 0;
}

.principle-grid,
.article-grid,
.overview-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 14px;
}

.small-glass-card,
.article-card,
.overview-card {
   padding: 18px 18px 17px;
   border-radius: 21px;
}

.small-glass-card {
   border: 1px solid var(--small-card-border);
   background: var(--small-card-fill);
   backdrop-filter: blur(var(--background-blur-small-card)) saturate(118%);
   -webkit-backdrop-filter: blur(var(--background-blur-small-card)) saturate(118%);
   box-shadow:
      inset 0 1px 0 #ffffff22,
      0 18px 44px #0000004f;
   transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.small-glass-card:hover {
   transform: translateY(-1px);
   background: var(--ci-glass-bg-strong);
   border-color: var(--ci-glass-border-hover);
   box-shadow:
      0 20px 70px #00000066,
      0 0 18px #5eeeff55,
      inset 0 1px 0 #ffffff33;
}

.small-glass-card h2,
.article-card h2,
.overview-card h2 {
   margin: 0 0 7px;
   font-size: 0.98rem;
}

.small-glass-card p,
.article-card p,
.overview-card p {
   margin: 0;
   color: var(--ci-text-muted);
   line-height: 1.55;
   font-size: 0.86rem;
}

.article-card a,
.overview-card a {
   color: inherit;
   display: block;
}

.article-card:hover,
.overview-card:hover {
   transform: translateY(-1px);
}

.site-footer-glass {
   min-height: 48px;
   border-radius: var(--radius-pill);
   border: 1px solid #b8f3ff26;
   background: linear-gradient(180deg, #dff7ff12, #dff7ff07);
   backdrop-filter: blur(var(--background-blur-footer-glass)) saturate(128%);
   -webkit-backdrop-filter: blur(var(--background-blur-footer-glass)) saturate(128%);
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 18px;
   align-items: center;
   padding: 0 18px;
   font-family: var(--ci-font-mono);
   font-size: 0.76rem;
   letter-spacing: 0.030em;
   color: var(--text-muted);
}

.footer-links {
   display: flex;
   align-items: center;
   gap: 8px;
}

.footer-link {
   position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 29px;
   padding: 0 11px;
   border-radius: var(--radius-pill);
   color: var(--ci-text-soft);
   text-decoration: none;
   font-family: var(--ci-font-main);
   font-size: 0.76rem;
   font-weight: 500;
   background: #dff7ff0d;
   border: 1px solid #b8f3ff22;
}

.footer-link::after {
   content: "";
   position: absolute;
   left: 50%;
   bottom: 4px;
   width: 0;
   height: 1px;
   transform: translateX(-50%);
   background: linear-gradient(90deg, transparent, var(--ci-cyan), transparent);
   transition: width 320ms ease 70ms;
}

.footer-link:hover::after,
.footer-link:focus-visible::after {
   width: calc(100% - 22px);
}

@media (max-width: 760px) {
   body {
      background-attachment: scroll;
   }

   .fixed-top-layer {
      top: 12px;
      padding: 0 12px;
   }

   .fixed-bottom-layer {
      bottom: 12px;
      padding: 0 12px;
   }

   .glass-frame,
   .content-stack {
      width: var(--layout-width-mobile);
   }

   .site-header-glass {
      position: relative;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: auto auto;
      justify-content: stretch;
      align-items: center;
      min-height: 0;
      gap: 0px 8px;
      padding: 12px 12px;
      border-radius: 24px;
   }

   .brand-link {
      grid-row: 1;
      grid-column: 1;
      justify-content: flex-start;
      min-width: 0;
      max-width: calc(50vw - 66px);
      gap: 9px;
      letter-spacing: 0.080em;
      overflow: hidden;
   }

   .brand-logo {
      width: 42px;
      height: 42px;
      flex-basis: 42px;
   }

   .brand-link span {
      overflow: hidden;
      text-overflow: ellipsis;
   }

   .mobile-menu-button {
      position: absolute;
      top: 12px;
      left: 50%;
      z-index: 3;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 42px;
      padding: 0 16px;
      border-radius: var(--radius-pill);
      transform: translateX(-50%);
      color: var(--ci-text-soft);
      background: #dff7ff12;
      border: 1px solid #b8f3ff2e;
      cursor: pointer;
      font-weight: 600;
      letter-spacing: 0.020em;
      backdrop-filter: blur(var(--background-blur-header-glass)) saturate(128%);
      -webkit-backdrop-filter: blur(var(--background-blur-header-glass)) saturate(128%);
      transition:
         color 220ms ease,
         background 240ms ease,
         border-color 240ms ease,
         box-shadow 260ms ease;
   }

   .mobile-menu-button:hover,
   .mobile-menu-button:focus-visible,
   .mobile-menu-state:checked + .mobile-menu-button {
      color: var(--ci-cyan-soft);
      background: #dff7ff20;
      border-color: var(--ci-glass-border-hover);
      box-shadow: 0 0 22px var(--ci-cyan-glow-soft);
   }

   .right-meta {
      grid-row: 1;
      grid-column: 2;
      justify-self: end;
      max-width: calc(50vw - 74px);
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 0.62rem;
      letter-spacing: 0.075em;
   }

   .site-main {
      align-items: flex-start;
      padding: 214px 12px 120px;
   }

   .intro-plate,
   .page-plate,
   .article-plate,
   .list-plate {
      padding: 30px 20px;
      border-radius: 24px;
   }

   .principle-grid,
   .article-grid,
   .overview-grid {
      grid-template-columns: 1fr;
   }

   .site-footer-glass {
      grid-template-columns: 1fr;
      gap: 2px;
      justify-items: center;
      min-height: 70px;
      text-align: center;
      border-radius: 22px;
   }

   .footer-links {
      flex-wrap: wrap;
      justify-content: center;
   }
}

@media (max-width: 420px) {
   .right-meta {
      display: none;
   }
}