/* Kotana Hub — the home page look, shared by the other pages (dashboard, class, certificates, portfolio).
   Pine page, ivory type, gold accents, Unbounded headings, ivory cards with soft corners.
   Every colour is a site.css token. Load after site.css. */
:root {
  --night: var(--pine);
  --night-2: var(--forest);
  --glass: color-mix(in oklch, var(--ivory) 7%, transparent);
  --glass-line: color-mix(in oklch, var(--ivory) 14%, transparent);
  --lime: var(--gold);
  --lime-ink: var(--pine);
  --text-hi: var(--ivory);
  --text-lo: var(--pastel-sage);
  --f-display: 'Unbounded', 'Poppins', -apple-system, sans-serif;
  --f-body: var(--font-body);
  --f-mono: var(--font-mono);
  --out: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --r-card: 26px;
}

body.kd { background: var(--night); color: var(--text-hi); position: relative; isolation: isolate; overflow-x: hidden; }
/* the same soft glow and grid as the home hero, fixed behind the page */
/* the fixed layers are as tall as the LARGEST screen (phone browser bar hidden), so no seam appears
   when the bar shrinks while scrolling */
body.kd::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 120vh; height: 100lvh; z-index: -1; pointer-events: none;
  /* plain at the very top (under the phone's status bar, which the browser paints in one flat colour),
     then the glow fades in, and fades out again at the bottom: no hard edges anywhere */
  -webkit-mask-image: linear-gradient(transparent 0, #000 170px, #000 80%, transparent); mask-image: linear-gradient(transparent 0, #000 170px, #000 80%, transparent);
  background: radial-gradient(55% 45% at 85% 12%, color-mix(in oklch, var(--gold) 16%, transparent), transparent 70%),
              radial-gradient(50% 50% at 0% 100%, color-mix(in oklch, var(--forest) 70%, transparent), transparent 70%); }
body.kd::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 120vh; height: 100lvh; z-index: -1; pointer-events: none; opacity: .3;
  background-image: linear-gradient(var(--glass-line) 1px, transparent 1px), linear-gradient(90deg, var(--glass-line) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(transparent 0, #000 170px), radial-gradient(80% 60% at 50% 0%, #000 10%, transparent 75%); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(transparent 0, #000 170px), radial-gradient(80% 60% at 50% 0%, #000 10%, transparent 75%); mask-composite: intersect; }

.kd .eyebrow { font-family: var(--f-mono); color: var(--lime); letter-spacing: .16em; }
.kd h1 { font-family: var(--f-display) !important; font-weight: 800 !important; letter-spacing: -.03em !important; color: var(--text-hi) !important; text-wrap: balance; }

/* buttons: pills, gold on the page, pine inside ivory cards */
.kd .btn { border-radius: 999px; transition: transform .3s var(--spring), box-shadow .3s, filter .2s; }
.kd .btn:active:not([disabled]) { transform: scale(.96); }
.kd .btn--gold, .kd .on-page .btn:not(.btn--outline):not(.btn--sand) { background: var(--lime); color: var(--lime-ink); }
.kd .btn--gold:hover, .kd .on-page .btn:not(.btn--outline):not(.btn--sand):hover { color: var(--lime-ink); box-shadow: 0 14px 30px -14px color-mix(in oklch, var(--gold) 80%, transparent); }
.kd .on-page .btn--outline, .kd .btn--glass { background: var(--glass); color: var(--text-hi); border: 0; box-shadow: inset 0 0 0 1px var(--glass-line); }
.kd .on-page .btn--outline:hover, .kd .btn--glass:hover { color: var(--ivory); background: color-mix(in oklch, var(--ivory) 12%, transparent); }
.kd .on-page .btn--sand { background: var(--sand); color: var(--pine); }

/* ivory cards on the pine page (dense content stays easy to read) */
.kd .card-l { background: var(--ivory); color: var(--pine); border: 0 !important; border-radius: var(--r-card); box-shadow: 0 30px 60px -40px color-mix(in oklch, var(--pine) 100%, transparent); }
.kd .input { border-radius: 14px; }

/* sign-in gate used by Dashboard and Class */
.kd .gate { padding: 34px 26px 30px; border-radius: 30px; background: var(--ivory); color: var(--pine); box-shadow: 0 40px 80px -50px #000; }
.kd .gate h1 { color: var(--pine) !important; font-size: 1.8rem !important; margin: 6px 0 24px !important; }
.kd .gate .eyebrow { color: var(--forest); }
.kd .gate .btn { min-height: 52px; }

/* entrance: cards lift into place and land */
@media (prefers-reduced-motion: no-preference) {
  .kd .lift { animation: kd-lift .8s cubic-bezier(.3, 1.35, .5, 1) both; animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes kd-lift { 0% { opacity: 0; transform: translateY(28px) scaleY(.95); } 60% { opacity: 1; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } }
}

@media print {
  body.kd { background: #fff; color: #000; }
  body.kd::before, body.kd::after { display: none; }
}