/* ===== Base ============================================================ */
:root{
  --hero-image: url('https://adrian-leonard-mociulschi.github.io/assets/og/og-cover-adi-futura-1200x630.png');
  --hero-tint-a: rgba(5, 20, 45, .66);
  --hero-tint-b: rgba(5, 20, 45, .35);
  --surface-bg: #f6f7fb;
  --text-color: #111827;
  --link: #1e6bb8;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }

body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text-color);
  background: var(--surface-bg);
  line-height: 1.6;
}

img{ max-width:100%; display:block; }

/* ===== Header: HERO (homepage) ======================================== */
/* Premium animated banner with cinematic gradient and adjusted padding. */
.page-header--hero {
  background: linear-gradient(270deg, #0f2027, #203a43, #2c5364, #1b3c59, #0f2027);
  background-size: 1000% 1000%;
  animation: cinematicFlow 30s ease infinite;
  color: #e0f7fa;
  text-align: center;
  padding: clamp(36px, 8vw, 72px) 1rem clamp(48px, 10vw, 96px);
  box-shadow: inset 0 0 120px rgba(0, 255, 255, 0.08);
}

@keyframes cinematicFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== Nav ============================================================= */

/* Containerul principal al navigației */
.site-nav {
  margin: 18px 0 0; /* Spațiu deasupra navigației */
}

/* Lista de linkuri din meniu */
.site-nav .menu-list {
  list-style: none; /* Elimină bullet-urile implicite */
  padding: 0; /* Elimină padding-ul implicit */
  margin: 0; /* Elimină margin-ul implicit */
  display: flex; /* Folosește flexbox pentru aliniere orizontală */
  gap: 1.1rem; /* Spațiu între elementele meniului */
  align-items: center; /* Aliniază vertical elementele în centru */
  justify-content: center; /* Centrează meniul pe orizontală */
  flex-wrap: nowrap; /* Nu permite trecerea pe rândul următor */
  white-space: nowrap; /* Menține toate elementele pe un singur rând */
  overflow-x: auto; /* Activează scroll orizontal pe ecrane mici */
  -webkit-overflow-scrolling: touch; /* Scroll lin pe iOS */
  -ms-overflow-style: none; /* Ascunde scrollbar în Internet Explorer */
  scrollbar-width: none; /* Ascunde scrollbar în Firefox */
}

/* Stil pentru fiecare link din meniu */
.site-nav .menu-link {
  position: relative; /* Permite pseudo-elemente poziționate */
  display: inline-block; /* Afișează linkurile ca blocuri inline */
  color: #fff; /* Culoarea textului */
  text-decoration: none; /* Elimină sublinierea implicită */
  font-weight: 500; /* Grosimea fontului */
  letter-spacing: .02em; /* Spațiere ușoară între litere */
  background-image: linear-gradient(currentColor, currentColor); /* Linie sub text la hover */
  background-position: 0 100%; /* Poziționează linia sub text */
  background-repeat: no-repeat; /* Nu repetă linia */
  background-size: 0% 1px; /* Dimensiunea inițială a liniei (invizibilă) */
  padding: 2px 1px; /* Spațiu intern pentru click confortabil */
  border-radius: 4px; /* Colțuri rotunjite subtile */
  transition: color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1), background-size .25s ease; /* Animații fluide */
}

/* Efect la hover și focus */
.site-nav .menu-link:hover,
.site-nav .menu-link:focus-visible {
  color: #fff; /* Menține culoarea albă */
  transform: translateY(-1.5px); /* Ridică ușor linkul pentru efect vizual */
  background-size: 100% 1px; /* Afișează linia complet sub text */
  outline: none; /* Elimină conturul implicit */
}

/* Ajustări responsive pentru ecrane mici */
@media (max-width: 600px) {
  .site-nav .menu-list {
    gap: 0.6rem; /* Spațiu mai mic între linkuri */
    padding: 0 8px; /* Mic buffer stânga/dreapta */
    justify-content: center; /* Menține centrat */
  }
  .site-nav .menu-link {
    font-size: 0.85rem; /* Font puțin mai mic */
    padding: 2px 0; /* Elimină padding lateral */
  }
}

/* ===== Main / Content card ============================================ */
.main-content{ padding: min(3.5vw, 28px) 1rem 48px; }

.content-card{
  max-width: 980px; margin: -42px auto 0; background:#fff; border-radius:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06), 0 2px 10px rgba(0,0,0,.035);
  padding: clamp(18px, 2.8vw, 28px);
}

.content-card h1,
.content-card h2,
.content-card h3{ letter-spacing:.2px; }

.content-card a{
  color: var(--link); text-decoration: none; border-bottom: 1px solid rgba(30,107,184,.35);
}
.content-card a:hover{ border-bottom-color: rgba(30,107,184,.9); }

/* ===== Footer ========================================================== */
.site-footer{ text-align:center; padding: 24px 12px; color:#555; }

/* ===== Dark mode (base) =============================================== */
@media (prefers-color-scheme: dark){
  body{ background:#0b1220; color:#e6edf3; }
  .content-card{ background:#0f172a; color:#e6edf3; box-shadow: 0 14px 30px rgba(0,0,0,.45); }
  .content-card a{ color:#7cc3ff; border-bottom-color: rgba(124,195,255,.45); }
  .site-footer{ color:#cbd5e1; }
  .site-footer-credits{ border-top-color:#334155; }
}

/* ===== Translucent "liquid glass" card ================================ */
/* Add this block to the end of the file to override the previous rules. */
.content-card{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 1px 0 rgba(255,255,255,.18) inset;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

/* Animated layer with fluid spots (blobs). */
.content-card::before{
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(120px 120px at 10% 20%, rgba(30,107,184,.28), transparent 60%),
    radial-gradient(160px 140px at 90% 10%, rgba(30,107,184,.18), transparent 65%),
    radial-gradient(180px 180px at 70% 90%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(140px 180px at 20% 80%, rgba(255,255,255,.15), transparent 60%);
  filter: blur(20px) saturate(120%);
  opacity: .9;
  animation: liquidMove 18s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Fine glass reflection on card. */
.content-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,0) 30%, rgba(255,255,255,.14) 60%, rgba(255,255,255,0) 100%);
  mix-blend-mode: soft-light;
  opacity: .6;
  pointer-events: none;
}

@keyframes liquidMove{
  0%   { transform: translate3d(-2%, -2%, 0) rotate(0deg)   scale(1); }
  50%  { transform: translate3d( 2%,  1%, 0) rotate(8deg)   scale(1.02); }
  100% { transform: translate3d(-1%,  3%, 0) rotate(-6deg)  scale(1.01); }
}

/* Dark mode: glass on a dark background. */
@media (prefers-color-scheme: dark){
  .content-card{
    background: rgba(15,23,42,.55);
    border-color: rgba(148,163,184,.18);
    box-shadow: 0 14px 30px rgba(0,0,0,.45);
  }
  .content-card::before{ filter: blur(22px) saturate(140%); opacity: .85; }
}

/* Fallback option in case the browser does not support the backdrop-filter. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .content-card{ background: rgba(255,255,255,.92); }
}

/* ===== Cayman-style GREEN surface background (full page) ============== */
/* Rewrite "surface-bg" for an elegant mix of greens (Cayman tone). */
:root{
  /* green palette (Cayman-like) */
  --cayman-g1: #159957; /* verde Cayman */
  --cayman-g2: #10b981; /* emerald */
  --cayman-g3: #16a34a; /* green */
  --cayman-g4: #a7f3d0; /* mint tint */

  /* surface: green radial spots + very light vertical gradient */
  --surface-bg:
    radial-gradient(1200px 800px at 14% 10%, color-mix(in oklab, var(--cayman-g1) 12%, transparent), transparent 62%),
    radial-gradient( 900px 700px at 86%  8%, color-mix(in oklab, var(--cayman-g2) 10%, transparent), transparent 60%),
    radial-gradient( 820px 760px at 72% 90%, color-mix(in oklab, var(--cayman-g3)  8%, transparent), transparent 58%),
    radial-gradient( 760px 720px at 20% 86%, color-mix(in oklab, var(--cayman-g4) 12%, transparent), transparent 55%),
    linear-gradient(180deg, #f6fff9 0%, #f2fff7 40%, #f4fff9 100%);
}

/* fine watermark for texture (optional) */
body{
  background: var(--surface-bg),
              repeating-linear-gradient(135deg, rgba(16,40,32,.018) 0 2px, transparent 2px 6px);
}

/* Dark mode: dark green and subtle. */
@media (prefers-color-scheme: dark){
  :root{
    --surface-bg:
      radial-gradient(1200px 800px at 14% 10%, color-mix(in oklab, var(--cayman-g1) 14%, transparent), transparent 62%),
      radial-gradient( 900px 700px at 86%  8%, color-mix(in oklab, var(--cayman-g2) 12%, transparent), transparent 60%),
      radial-gradient( 820px 760px at 72% 90%, color-mix(in oklab, var(--cayman-g3) 10%, transparent), transparent 58%),
      radial-gradient( 760px 720px at 20% 86%, color-mix(in oklab, var(--cayman-g4) 10%, transparent), transparent 55%),
      linear-gradient(180deg, #071a12 0%, #0a1f17 40%, #0b1f16 100%);
  }
  body{
    background: var(--surface-bg),
                repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 6px);
  }
}

/* In the event that color-mix() is not supported, this is the fallback option. */
@supports not (color-mix(in oklab, black 10%, white)){
  :root{
    --surface-bg:
      radial-gradient(1200px 800px at 14% 10%, rgba(21,153,87,.10), transparent 62%),
      radial-gradient( 900px 700px at 86%  8%, rgba(16,185,129,.08), transparent 60%),
      radial-gradient( 820px 760px at 72% 90%, rgba(22,163,74,.06), transparent 58%),
      radial-gradient( 760px 720px at 20% 86%, rgba(167,243,208,.08), transparent 55%),
      linear-gradient(180deg, #f6fff9 0%, #f2fff7 40%, #f4fff9 100%);
  }
}

/* ===== Liquid Glass Go-To-Top ========================================= */
:root{ --go-size: 48px; --go-accent: #10b981; --go-shadow: 0 12px 32px rgba(0,0,0,.18); }
html{ scroll-behavior: smooth; }

.go-top{
  position: fixed;
  right: clamp(12px, 2.5vw, 20px);
  bottom: calc(clamp(12px, 2.5vw, 20px));
  width: var(--go-size);
  height: var(--go-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  text-decoration: none;
  color: var(--go-accent);
  opacity: 0;
  transform: translateY(10px) scale(.96);
  transition: opacity .28s ease, transform .28s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease;
  pointer-events: none;
  z-index: 9999;
}

.go-top.visible{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }

/* Skin liquid glass */
.go-top--liquid{
  position: fixed;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  box-shadow: var(--go-shadow);
}

.go-top--liquid::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(80% 80% at 70% 75%, rgba(16,185,129,.22), transparent 60%),
    radial-gradient(60% 60% at 65% 25%, rgba(16,185,129,.14), transparent 60%);
  filter: blur(8px) saturate(120%);
  pointer-events: none;
  border-radius: inherit;
}

.go-top--liquid svg{ width: 22px; height: 22px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.22)); }

.go-top--liquid:hover,
.go-top--liquid:focus-visible{
  border-color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.22);
  box-shadow: 0 16px 36px rgba(0,0,0,.22);
  outline: none;
}

.go-top--liquid:active{ transform: translateY(1px) scale(.98); }

/* Dark mode for go-top */
@media (prefers-color-scheme: dark){
  .go-top--liquid{
    border-color: rgba(148,163,184,.35);
    background: rgba(15,23,42,.45);
    box-shadow: 0 14px 30px rgba(0,0,0,.45);
    color: rgba(200,255,230,.92);
  }
  .go-top--liquid::before{
    background:
      radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,.22), transparent 55%),
      radial-gradient(80% 80% at 70% 75%, rgba(16,185,129,.22), transparent 60%),
      radial-gradient(60% 60% at 65% 25%, rgba(16,185,129,.18), transparent 60%);
  }
}

/* In the event that backdrop-filter support is unavailable, this is the fallback option. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .go-top--liquid{ background: rgba(255,255,255,.92); }
}

/* Reduced motion for the button. */
@media (prefers-reduced-motion: reduce){
  .go-top{ transition:none; }
}

/* ===== The active link in the menu has been fixed. =============================== */
/* Mark both "active" and "aria-current="page". */
.site-nav .menu-link.active,
.site-nav .menu-link[aria-current="page"]{
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
}

/* Responsiveness maintains proportions on small screens */
@media (max-width: 600px) {
  .site-footer-credits {
    font-size: 0.85em;
    padding-top: 8px;
    margin-top: 15px;
  }
}

/* === Imagini aliniate cu paragrafe (justify) === */
/* 1) Toate elementele respectă paddingul containerului */
.content-card, .content-card * { box-sizing: border-box; }

/* 2) Paragrafele rămân justify, fără efect pe img */
.content-card p {
  text-align: left; /* sau start pentru suport modern */
}

/* 3) Imagini pe toată lățimea containerului textului */
.content-card img,
.content-card a > img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;               /* fără offset față de marginile textului */
}

/* 4) Dacă folosești <figure>, elimină marginea implicită */
.content-card figure { margin: 0; }
.content-card figure > img { display: block; width: 100%; height: auto; }
.content-card figcaption { text-align: justify; margin-top: .5rem; }

/* Colțuri rotunjite pentru imaginile din <figure><picture><img> */
.content-card figure {
  margin: 0;
  border-radius: 8px;     /* colțuri rotunjite la nivel de container */
  overflow: hidden;       /* taie conținutul ca să nu „iasă” colțurile */
}

/* Asigură-te că media-ul respectă forma rotunjită (compatibilitate) */
.content-card figure picture,
.content-card figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;     /* fallback pentru browsere mai capricioase */
}


.project-name {
  font-family: 'Great Vibes', cursive;
}

body {
  margin: 0; /* remove white space */
}

/* === Footer seal — DESKTOP =============================================== */
.footer-seal {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

/* SVG */
.seal-svg {
  width: 82%;
  height: auto;
  animation: rotateSeal 24s linear infinite;
  filter: drop-shadow(0 6px 18px rgba(0,255,255,.35));
}

.seal-text {
  font-size: 16px;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  fill: #e0f7fa;
  text-transform: uppercase;
  letter-spacing: 2px;
  filter: drop-shadow(0 0 8px rgba(16,185,129,.9));
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Animations */
@keyframes pulseGlow {
  0%,100% { filter: drop-shadow(0 0 8px rgba(16,185,129,.9)); }
  50%     { filter: drop-shadow(0 0 14px rgba(30,107,184,1)); }
}
@keyframes rotateSeal {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* === Wrapper glass — responsive ========================================== */
.seal-glass {
  width: clamp(140px, 36vw, 200px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  background: radial-gradient(50% 50% at 50% 50%, rgba(15,23,42,.45), rgba(15,23,42,.25) 70%, rgba(15,23,42,0) 100%);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* === Mobile: remove the large blur, keep only the circle ==================== */
@media (max-width: 640px) {
  .footer-seal {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: transparent !important;
  }
  .seal-svg {
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.18));
  }
  .seal-text {
    fill: #e6f3ff;
    filter: none;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
  }
}