/* ============================================================
   Cograde — Frutiger Aero (Contemporary Revival)
   Design tokens + glass/gloss components + ambient effects.
   Layout/utility classes come from Tailwind (see config.js).
   ============================================================ */

:root {
  /* Color */
  --canvas:        #E6F5FF;   /* page base (sky) */
  --surface:       #FFFFFF;   /* solid card surface */
  --ink:           #0A2A36;   /* primary text (deep teal-navy) */
  --slate:         #42636F;   /* secondary text */
  --aqua:          #0E96D6;   /* primary brand aqua */
  --aqua-deep:     #0A6E9E;   /* darker aqua (text/hover on light) */
  --leaf:          #36A94E;   /* secondary nature green */
  --leaf-deep:     #2A8C40;
  --abyss:         #06303D;   /* dark glossy media-panel surface */
  --line:          rgba(10, 70, 96, 0.14);

  /* Typography */
  --font-display: "Outfit", "Source Sans 3", system-ui, sans-serif;
  --font-body:    "Source Sans 3", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Shape */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;

  /* Motion */
  --dur-fast: 200ms;
  --dur-base: 360ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Spacing base = 8px */
  --space: 8px;
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

html, body { background-color: var(--canvas); }

body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  min-height: 100vh;
}

/* ---- Ambient Frutiger Aero sky + nature gradient ---- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(120, 214, 255, 0.55), transparent 60%),
    radial-gradient(900px 520px at 8% 6%, rgba(176, 240, 255, 0.5), transparent 55%),
    radial-gradient(1200px 700px at 50% 118%, rgba(108, 214, 138, 0.45), transparent 60%),
    linear-gradient(180deg, #CFEEFF 0%, #E4F7FF 34%, #EAFBF1 72%, #D8F2E1 100%);
  background-attachment: fixed;
}

/* Soft bokeh light orbs floating over the sky */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 22%, rgba(255, 255, 255, 0.55) 0 6px, transparent 7px),
    radial-gradient(circle at 82% 30%, rgba(255, 255, 255, 0.45) 0 10px, transparent 12px),
    radial-gradient(circle at 68% 70%, rgba(255, 255, 255, 0.4) 0 5px, transparent 7px),
    radial-gradient(circle at 30% 82%, rgba(255, 255, 255, 0.5) 0 8px, transparent 10px),
    radial-gradient(circle at 92% 86%, rgba(255, 255, 255, 0.4) 0 4px, transparent 6px);
  filter: blur(1px);
  opacity: 0.8;
}

::selection { background: rgba(14, 150, 214, 0.25); color: var(--ink); }

/* ============================================================
   GLASS + GLOSS — the core Frutiger Aero surface treatment
   ============================================================ */

/* Frosted white glass panel with specular top highlight */
.glass {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 18px 40px -22px rgba(8, 70, 110, 0.45),
    0 2px 10px -4px rgba(8, 70, 110, 0.18);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* Glossy specular sheen across the top third (the Aqua look) */
.gloss::before {
  content: "";
  position: absolute;
  left: 1px; right: 1px; top: 1px;
  height: 42%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.05));
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 60%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 60%, transparent 100%);
  pointer-events: none;
}

/* Dark glossy "media-center" panel for code / eval surfaces */
.glass-dark {
  position: relative;
  background: linear-gradient(180deg, rgba(8, 52, 66, 0.94), rgba(4, 34, 44, 0.96));
  border: 1px solid rgba(120, 220, 255, 0.22);
  box-shadow:
    0 1px 0 rgba(160, 230, 255, 0.18) inset,
    0 24px 50px -24px rgba(4, 30, 44, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #DCF4FF;
}
.glass-dark.gloss::before {
  background: linear-gradient(180deg, rgba(150, 225, 255, 0.18), transparent);
}

/* Hover lift for interactive cards */
.lift { transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); }
.lift:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 30px 55px -24px rgba(8, 70, 110, 0.5),
    0 0 0 1px rgba(14, 150, 214, 0.25);
}

/* ============================================================
   BUTTONS — glossy aqua pill (skeuomorphic Aqua), glass ghost
   ============================================================ */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
  overflow: hidden;
  transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  isolation: isolate;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: default; }

.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #2FB3EF 0%, #109BD9 48%, #0A77AC 100%);
  border: 1px solid rgba(8, 90, 130, 0.6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 10px 22px -10px rgba(11, 121, 174, 0.8);
  text-shadow: 0 1px 1px rgba(4, 50, 74, 0.45);
}
.btn-primary::before {
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 2px;
  height: 45%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: -1;
}
.btn-primary:hover { filter: brightness(1.07) saturate(1.05); }

.btn-leaf {
  color: #fff;
  background: linear-gradient(180deg, #5FD06E 0%, #3CAE50 48%, #2C8C3F 100%);
  border: 1px solid rgba(28, 110, 50, 0.6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 10px 22px -10px rgba(44, 140, 63, 0.8);
  text-shadow: 0 1px 1px rgba(20, 60, 30, 0.45);
}
.btn-leaf::before {
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 2px;
  height: 45%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
  pointer-events: none;
  z-index: -1;
}
.btn-leaf:hover { filter: brightness(1.06) saturate(1.05); }

.btn-ghost {
  color: var(--aqua-deep);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 20px -12px rgba(8, 70, 110, 0.4);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { filter: brightness(1.02); box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 10px 24px -12px rgba(8,70,110,0.5); }

/* ============================================================
   TEXT TREATMENTS
   ============================================================ */
.text-aqua-grad {
  background: linear-gradient(120deg, #0E96D6 0%, #14B59A 55%, #36A94E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.text-shine {
  background: linear-gradient(180deg, #0A2A36 0%, #245A6E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ============================================================
   PILL CHIPS / BADGES
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 14px -10px rgba(8, 70, 110, 0.4);
  color: var(--aqua-deep);
  font-weight: 600;
}

/* Icon "lozenge" — glossy rounded tile */
.lozenge {
  position: relative;
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 8px 18px -10px rgba(8, 70, 110, 0.45);
  overflow: hidden;
}
.lozenge::before {
  content: "";
  position: absolute;
  inset: 1px 1px 55% 1px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), transparent);
  pointer-events: none;
}
.lozenge-aqua { background: linear-gradient(180deg, #45BEF0, #0E8FCC); color: #fff; }
.lozenge-leaf { background: linear-gradient(180deg, #62CE70, #2F9C45); color: #fff; }
.lozenge-mint { background: linear-gradient(180deg, #38D6C0, #109B8C); color: #fff; }

/* ============================================================
   FORM CONTROLS (light glass)
   ============================================================ */
.field {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.85);
  padding: 0.7rem 0.9rem;
  font-size: 0.9rem;
  color: var(--ink);
  outline: none;
  box-shadow: 0 1px 2px rgba(8, 70, 110, 0.06) inset;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field::placeholder { color: #8AA3AD; }
.field:focus {
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(14, 150, 214, 0.18);
  background: #fff;
}

/* Language toggle pills */
.lang-pill {
  display: inline-block;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  padding: 0.4rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--slate);
  transition: all var(--dur-fast) var(--ease);
}
.lang-pill:hover { color: var(--ink); border-color: rgba(14, 150, 214, 0.4); }
.peer:checked + .lang-pill {
  border-color: var(--aqua);
  background: linear-gradient(180deg, rgba(69, 190, 240, 0.22), rgba(14, 150, 214, 0.14));
  color: var(--aqua-deep);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

/* Navbar — glass pill that intensifies on scroll */
.nav-glass {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.45));
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 30px -18px rgba(8, 70, 110, 0.35);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  transition: background var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease);
}
.nav-scrolled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.7));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 16px 36px -18px rgba(8, 70, 110, 0.5);
}

/* Resume drop zone active state */
.drop-active {
  border-color: var(--aqua) !important;
  background: rgba(14, 150, 214, 0.08) !important;
}

/* ============================================================
   DECORATIVE — bubbles, floats
   ============================================================ */
.bubble {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1) 42%, transparent 60%),
    radial-gradient(circle at 70% 75%, rgba(120, 210, 255, 0.35), transparent 60%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 24px -10px rgba(8, 90, 130, 0.4);
  pointer-events: none;
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  pointer-events: none;
  z-index: -1;
}
.orb-aqua { background: radial-gradient(closest-side, rgba(86, 200, 255, 0.55), transparent 70%); }
.orb-leaf { background: radial-gradient(closest-side, rgba(96, 210, 130, 0.5), transparent 70%); }
.orb-mint { background: radial-gradient(closest-side, rgba(64, 220, 200, 0.45), transparent 70%); }

/* ============================================================
   MOTION
   ============================================================ */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes drift  { 0%,100% { transform: translateY(0) translateX(0); } 50% { transform: translateY(-18px) translateX(8px); } }
@keyframes blink  { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.anim-floaty { animation: floaty 6s ease-in-out infinite; }
.anim-drift  { animation: drift 9s ease-in-out infinite; }
.anim-blink  { animation: blink 1.1s step-end infinite; }
.marquee-track { animation: scroll-x 38s linear infinite; }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   SCROLLBAR (aqua, soft)
   ============================================================ */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7FD2F4, #0E96D6);
  border-radius: 999px;
  border: 3px solid #E6F5FF;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #5FC3EC, #0B79AE); }

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline: 3px solid rgba(14, 150, 214, 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}