/* ==================================================================
   ADAM by KitchenSpot — brand stylesheet (plain CSS, no build step)
   Tailwind utilities come from the CDN; this file holds the brand
   tokens and the effects Tailwind classes can't express.
   ================================================================== */

/* ------------------------------------------------------------------
   Brand tokens (RGB triplets so Tailwind opacity modifiers work)
   ------------------------------------------------------------------ */
:root {
  --canvas: 246 245 241;     /* drafting-paper white */
  --surface: 255 255 255;
  --sunken: 236 235 229;
  --ink: 11 22 32;
  --muted: 78 90 102;
  --line: 214 212 204;
  --accent: 9 80 139;        /* #09508B */
  --on-accent: 255 255 255;
  --header-h: 4.5rem;
  color-scheme: light;
}
.dark {
  --canvas: 7 14 22;
  --surface: 13 24 36;
  --sunken: 4 10 17;
  --ink: 236 240 244;
  --muted: 150 164 178;
  --line: 36 50 66;
  --accent: 115 165 210;     /* brand-300: keeps text-accent AA on dark */
  --on-accent: 3 20 38;
  color-scheme: dark;
}

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; }
body { font-feature-settings: 'ss01', 'cv11'; text-rendering: optimizeLegibility; }
::selection { background: #09508B; color: #fff; }
:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ------------------------------------------------------------------
   Surfaces & type effects
   ------------------------------------------------------------------ */
.grid-lines-light {
  background-image:
    linear-gradient(to right, rgb(255 255 255 / .08) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(255 255 255 / .08) 1px, transparent 1px);
  background-size: 40px 40px;
}
.scrim-b { background: linear-gradient(to top, rgb(2 20 38 / .92) 0%, rgb(2 20 38 / .55) 45%, rgb(2 20 38 / 0) 75%); }
.text-balance { text-wrap: balance; }
.text-outline { color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / .55); }

/* ------------------------------------------------------------------
   Reveal on scroll (JS adds .is-in; without JS everything is visible)
   ------------------------------------------------------------------ */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.1,1), transform .8s cubic-bezier(.2,.7,.1,1); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------
   Line-draw icons (Why ADAM cards)
   ------------------------------------------------------------------ */

.icon-draw path, .icon-draw circle, .icon-draw rect, .icon-draw polyline, .icon-draw line { stroke-dasharray: 120; stroke-dashoffset: 0; }
.group:hover .icon-draw path, .group:hover .icon-draw circle, .group:hover .icon-draw rect, .group:hover .icon-draw polyline, .group:hover .icon-draw line,
.group:focus-within .icon-draw path, .group:focus-within .icon-draw circle, .group:focus-within .icon-draw rect, .group:focus-within .icon-draw polyline, .group:focus-within .icon-draw line {
  animation: redraw 1.1s cubic-bezier(.2,.7,.1,1);
}

/* ------------------------------------------------------------------
   Process carousel
   ------------------------------------------------------------------ */
.step-bar > span { transform-origin: left; transform: scaleX(0); }
.step-tab[aria-selected='true'] .step-bar > span { transform: scaleX(1); }
.is-playing .step-tab[aria-selected='true'] .step-bar > span { animation: progress var(--dur, 7000ms) linear forwards; }
.is-paused .step-tab[aria-selected='true'] .step-bar > span { animation-play-state: paused; }
.step-panel-img.is-active img { animation: kenburns 7s ease-out forwards; }
.js [role='tabpanel']:not([hidden]) .anim-in { animation: fadeUp .7s cubic-bezier(.2,.7,.1,1) both; animation-delay: var(--d, 0ms); }

/* ------------------------------------------------------------------
   Horizontal scroller (projects)
   ------------------------------------------------------------------ */
.scroller { scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }

/* ------------------------------------------------------------------
   Keyframes
   ------------------------------------------------------------------ */
@keyframes redraw { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ------------------------------------------------------------------
   Hero backdrop: fine boxed grid that fades out, with a blue glow
   ------------------------------------------------------------------ */
.hero-grid {
  background-image:
    linear-gradient(to right, rgb(var(--line) / .35) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--line) / .35) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 20%, #000 20%, transparent 78%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 20%, #000 20%, transparent 78%);
}
/* soft grey-blue haze framing the top edge */
.hero-haze {
  left: 50%; top: -14rem; width: min(110rem, 140vw); height: 30rem;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(var(--ink) / .09), transparent);
  filter: blur(40px);
}
/* the brand glow */
.hero-glow {
  left: 50%; top: -7rem; width: min(56rem, 110vw); height: 26rem;
  transform: translateX(-50%);
  border-radius: 9999px;
  background: radial-gradient(closest-side, rgb(59 125 184 / .5), rgb(115 165 210 / .3) 55%, transparent);
  filter: blur(44px);
}
.dark .hero-grid { opacity: .5; }
.dark .hero-haze { background: radial-gradient(closest-side, rgb(255 255 255 / .04), transparent); }
.dark .hero-glow { background: radial-gradient(closest-side, rgb(59 125 184 / .45), rgb(9 80 139 / .25) 55%, transparent); }

/* ------------------------------------------------------------------
   Stage 02 blueprint: lines draw in when the slide is shown
   ------------------------------------------------------------------ */
.bp-draw .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
[role='tabpanel']:not([hidden]) .bp-draw .ln { animation: bp-draw 1.8s cubic-bezier(.2,.7,.1,1) forwards; animation-delay: var(--d, 0ms); }
[role='tabpanel']:not([hidden]) .bp-draw .bp-fade { animation: bp-fade .8s ease 1.4s both; }
@keyframes bp-draw { to { stroke-dashoffset: 0; } }
@keyframes bp-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bp-draw .ln { stroke-dashoffset: 0; }
}

/* ------------------------------------------------------------------
   Floating chat (Edward)
   ------------------------------------------------------------------ */
.chat-ping { animation: chat-ping 2.6s cubic-bezier(0,0,.2,1) infinite; }
#chat-widget.is-open .chat-ping { animation: none; opacity: 0; }
.chat-panel:not([hidden]), .chat-nudge:not([hidden]) { animation: chat-in .35s cubic-bezier(.2,.7,.1,1) both; transform-origin: bottom right; }
@keyframes chat-ping { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.45); opacity: 0; } }
@keyframes chat-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .chat-ping { display: none; } }

/* ------------------------------------------------------------------
   Product catalog: floating cover + viewer
   ------------------------------------------------------------------ */
.catalog-book { animation: catalog-float 6s ease-in-out infinite; perspective: 1200px; }
.catalog-cover { transform: rotate(-3deg); transition: transform .5s cubic-bezier(.2,.7,.1,1); }
.catalog-pages { transition: transform .5s cubic-bezier(.2,.7,.1,1); }
.catalog-book:hover .catalog-cover, .catalog-book:focus-visible .catalog-cover { transform: rotate(0deg) translateY(-6px); }
.catalog-book:focus-visible { outline: none; }
.catalog-book:focus-visible .catalog-cover { outline: 3px solid rgb(var(--accent)); outline-offset: 4px; }
@keyframes catalog-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.catalog-viewer[open] { animation: chat-in .3s cubic-bezier(.2,.7,.1,1) both; transform-origin: center; }
body.catalog-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .catalog-book { animation: none; } }