/* =============================================================================
   FONTS
   Each Oswald weight is registered separately so you can use them via
   var(--font-*) tokens without loading a variable font.
   ============================================================================= */

@font-face {
  font-family: 'Oswald-ExtraLight';
  src: url('../assets/fonts/Oswald/Oswald-ExtraLight.ttf') format('truetype');
}

@font-face {
  font-family: 'Oswald-Light';
  src: url('../assets/fonts/Oswald/Oswald-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'Oswald-Regular';
  src: url('../assets/fonts/Oswald/Oswald-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Oswald-Medium';
  src: url('../assets/fonts/Oswald/Oswald-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'Oswald-SemiBold';
  src: url('../assets/fonts/Oswald/Oswald-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'Oswald-Bold';
  src: url('../assets/fonts/Oswald/Oswald-Bold.ttf') format('truetype');
}


/* =============================================================================
   DESIGN TOKENS
   All colours and fonts live here. Two themes are declared:
   - Night (dark) is the default — black page, white finder window.
   - Day (light) activates automatically when the OS is in light mode —
     light grey page, dark finder window.
   To add a new colour, add a variable here instead of hardcoding it below.
   ============================================================================= */

:root {
  /* --- Font families --- */
  --font-extralight: 'Oswald-ExtraLight', sans-serif;
  --font-light: 'Oswald-Light', sans-serif;
  --font-regular: 'Oswald-Regular', sans-serif;
  --font-medium: 'Oswald-Medium', sans-serif;
  --font-semibold: 'Oswald-SemiBold', sans-serif;
  --font-bold: 'Oswald-Bold', sans-serif;

  /* --- Night (dark) colours --- */
  --page-bg: #000000;
  /* full-page background            */
  --finder-bg: #d0d7de;
  /* finder window background        */
  --finder-border: rgba(255, 255, 255, 0.12);
  /* subtle border around window */
  --finder-shadow: 0 24px 80px rgba(0, 0, 0, 0.8);
  /* drop shadow           */
  --titlebar-from: #ebebeb;
  /* title bar gradient top          */
  --titlebar-to: #d5d5d5;
  /* title bar gradient bottom       */
  --titlebar-border: #b0b0b0;
  /* line under the title bar        */
  --titlebar-label: #3a3a3a;
  /* text/icon colour on title bar   */
  --content-color: #1a1a1a;
  /* body text inside the finder     */
}

/* Day (light) mode — overrides only the colour tokens above */
@media (prefers-color-scheme: light) {
  :root {
    --page-bg: #f0f0f0;
    --finder-bg: #1c1c1e;
    --finder-border: rgba(0, 0, 0, 0.18);
    --finder-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
    --titlebar-from: #3a3a3c;
    --titlebar-to: #2c2c2e;
    --titlebar-border: #1a1a1c;
    --titlebar-label: #e5e5e7;
    --content-color: #e5e5e7;
  }
}


/* =============================================================================
   RESET & BASE
   Minimal reset so every element starts from the same baseline.
   Mobile-first: all base styles target phones. Wider screens are layered on
   top using min-width media queries further down.
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  /* padding/border included in element width */
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  /* dvh = dynamic viewport height (handles mobile browser chrome) */
  font-family: var(--font-semibold);
  background: var(--page-bg);
  user-select: none;
  /* prevent accidental text selection on interactive UI */
  display: flex;
  flex-direction: column;
  /* stacks banner → finder-wrapper vertically */
}


/* =============================================================================
   HOME
   The full-viewport hero section at the top of the page.
   Left empty for now — content (name, tagline, etc.) will go here later.
   Its height is exactly one viewport tall so the finder title bar
   just peeks above the bottom edge at initial scroll position.
   ============================================================================= */

.home {
  width: 100%;
  height: 100dvh;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 15vw;
  position: relative;
  color: var(--finder-bg);
}

.home-greeting {
  display: inline-block;
  font-family: var(--font-regular);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 16px;
}

.home-name {
  font-family: var(--font-bold);
  font-size: clamp(2.8rem, 8vw, 6rem);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--finder-bg);
}

.home-tagline {
  font-family: var(--font-light);
  font-size: clamp(1.4rem, 4vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  opacity: 0.6;
  color: var(--finder-bg);
}

/* Word-wheel — the rotating slot within .home-tagline */
.word-wheel {
  display: inline-block;
  perspective: 600px;     /* gives children their 3-D depth */
  white-space: nowrap;
  vertical-align: baseline;
  opacity: 1;             /* wheel itself is always opaque; tagline sets its own opacity */
}

/* Each character lives in its own span so they can stagger */
.word-wheel-letter {
  display: inline-block;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.30s ease;
  transform-origin: 50% 60%;  /* rotate around the cap-height midpoint */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Exit: wheel rolls upward — top of letter spins away from viewer */
.ww-exit {
  transform: rotateX(-90deg) translateZ(4px);
  opacity: 0;
}

/* Enter starting state: letter arrives from below */
.ww-enter {
  transform: rotateX(90deg) translateZ(4px);
  opacity: 0;
}

.home-description {
  font-family: var(--font-extralight);
  font-size: clamp(0.85rem, 1.8vw, 1.05rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
  opacity: 0.4;
  margin: 0;
  max-width: 52ch;
  color: var(--finder-bg);
}

/* Scroll hint — anchored to the bottom centre */
.home-scroll-hint {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.3;
}

.home-scroll-line {
  display: block;
  width: 1px;
  height: 48px;
  background: var(--finder-bg);
  animation: scroll-pulse 2s ease-in-out infinite;
}

.home-scroll-label {
  font-family: var(--font-regular);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--finder-bg);
}

@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(1);   opacity: 1; }
  50%       { transform: scaleY(0.4); opacity: 0.4; }
}


/* =============================================================================
   FINDER WRAPPER
   Centres the finder window horizontally and pulls it up by exactly the
   title bar height (44px) so only the title bar is visible on first load.

   SCROLL ANIMATION (CSS scroll-driven):
   As the user scrolls, the side padding collapses from 15vw → 0,
   making the window grow to fill the full screen width.
   The animation is tied to the page scroll (scroll(root)) and completes
   exactly when the title bar reaches the top of the viewport.

   Fallback: browsers without scroll-driven animation support (Firefox)
   will see the 15vw padding as a static state.
   ============================================================================= */

.finder-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  /* Static fallback padding for browsers without scroll-driven animations */
  padding: 0 15vw;

  /* Pull the wrapper up so only the 44px title bar peeks into the banner */
  margin-top: -44px;

  /* Scroll-driven: side padding collapses as the user scrolls down */
  animation: finder-expand linear both;
  animation-timeline: scroll(root);
  /* Range: starts at 0 scroll, completes when title bar hits the top (100dvh - 44px) */
  animation-range: 0dvh calc(100dvh - 44px);
}

/* Padding goes from 15vw (narrow/card) to 0 (edge-to-edge) */
@keyframes finder-expand {
  from {
    padding-inline: 15vw;
  }

  to {
    padding-inline: 0;
  }
}


/* =============================================================================
   FINDER WINDOW  (.about)
   The macOS-style window card. It stretches to fill the wrapper's available
   width so the wrapper's padding is what controls how wide it appears.

   SCROLL ANIMATION:
   The drop shadow fades out over the same scroll range as the wrapper,
   so the card looks more "embedded" as it becomes full-screen.
   ============================================================================= */

.finder {
  width: 100%;
  /* fills wrapper (wrapper padding = side gap) */
  background: var(--finder-bg);
  border: 1px solid var(--finder-border);
  border-radius: 12px 12px 0 0;
  /* rounded top corners, square bottom */
  /*
    No overflow: hidden — that would clip the fixed-width content and make it
    unreadable on narrow screens. Corner-clipping is handled by .finder-title-bar.
    Content scrolling is handled by .finder-content.
  */
  display: flex;
  flex-direction: column;

  /* Scroll-driven: shadow fades as window expands to full screen */
  animation: finder-shadow linear both;
  animation-timeline: scroll(root);
  animation-range: 0dvh calc(100dvh - 44px);
}

/* Shadow present when the window is a floating card; gone at full screen */
@keyframes finder-shadow {
  from {
    box-shadow: var(--finder-shadow);
  }

  to {
    box-shadow: none;
  }
}


/* =============================================================================
   TITLE BAR
   The chrome strip at the top of the finder window, styled after macOS Finder.
   Contains traffic lights (left) and the tab navigation (centre).
   ============================================================================= */

.finder-title-bar {
  width: 100%;
  height: 44px;
  /* macOS-style two-stop gradient gives a subtle 3D feel */
  background: linear-gradient(180deg, var(--titlebar-from) 0%, var(--titlebar-to) 100%);
  border-bottom: 1px solid var(--titlebar-border);
  border-radius: 12px 12px 0 0;
  /* clips its own gradient to the window corners */
  overflow: hidden;
  /* enforces the corner clip on the gradient */
  display: flex;
  align-items: center;
  /* vertically centres the traffic lights */
  position: relative;
  /* needed so .finder-tabs can use position: absolute */
  padding: 0 12px;
  flex-shrink: 0;
  /* title bar never collapses */
}


/* =============================================================================
   TRAFFIC LIGHTS
   The three macOS window-control dots: close (red), minimise (yellow),
   maximise (green). Purely decorative for now.
   ============================================================================= */

.traffic-lights {
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
  /* sits above the title bar gradient */
}

/* Base dot — all three share size and shape */
.traffic-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

/* Each dot gets its macOS colour + a slightly darker border for depth */
.traffic-light.close {
  background: #ff5f57;
  border: 0.5px solid #e0443e;
}

.traffic-light.minimize {
  background: #ffbd2e;
  border: 0.5px solid #dfa026;
}

.traffic-light.maximize {
  background: #28c840;
  border: 0.5px solid #1eab35;
}

/* Hover: saturate slightly to feel interactive */
.traffic-light.close:hover {
  background: #ff3b30;
}

.traffic-light.minimize:hover {
  background: #ffcc00;
}

.traffic-light.maximize:hover {
  background: #34c759;
}


/* =============================================================================
   TAB NAVIGATION  (.finder-tabs / .finder-tab)
   Browser-style tabs centred in the title bar.

   The key trick: tabs sit at the bottom of the title bar (bottom: 0).
   The active tab uses the same background colour as the finder content and
   sets margin-bottom: -1px so it visually "bleeds through" the title bar's
   bottom border — making it look connected to the content below, exactly
   like a browser tab.
   ============================================================================= */

.finder-tabs {
  position: absolute;
  /* taken out of flow so traffic lights stay at left */
  bottom: 0;
  /* tabs anchor to the bottom of the title bar */
  left: 50%;
  transform: translateX(-50%);
  /* true horizontal centre */
  display: flex;
  align-items: flex-end;
  /* all tabs sit on the same baseline */
  gap: 3px;
  padding: 0 4px;
  user-select: none;
  white-space: nowrap;
}

/* Base tab — mobile: tighter padding */
.finder-tab {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  /* mobile: compact */
  height: 30px;
  font-size: 11px;
  /* mobile: smaller text */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
  font-weight: 500;
  color: var(--titlebar-label);
  text-decoration: none;
  border-radius: 6px 6px 0 0;
  /* rounded top, flat bottom */
  border: 1px solid transparent;
  /* invisible border; becomes visible on active */
  border-bottom: none;
  /* no bottom border — open toward content */
  background: rgba(0, 0, 0, 0.05);
  transition: background 0.15s, color 0.15s;
}

/* Wider screens: give tabs more breathing room */
@media (min-width: 480px) {
  .finder-tab {
    padding: 0 16px;
    font-size: 12px;
  }
}

/* Hover on inactive tabs: slightly darker tint */
.finder-tab:hover:not(.active) {
  background: rgba(0, 0, 0, 0.1);
}

/*
  Active tab:
  - Background matches finder content so it looks "open"
  - Border becomes visible (left, top, right — no bottom)
  - margin-bottom: -1px covers the title bar's bottom border line,
    visually merging the tab with the content area below
*/
.finder-tab.active {
  background: var(--finder-bg);
  border-color: var(--titlebar-border);
  color: var(--content-color);
  font-weight: 600;
  margin-bottom: -1px;
  position: relative;
  z-index: 2;
  /* sits above the border line it needs to cover */
}

/* Day mode: title bar is dark, so tints flip to white-based */
@media (prefers-color-scheme: light) {
  .finder-tab {
    background: rgba(255, 255, 255, 0.06);
  }

  .finder-tab:hover:not(.active) {
    background: rgba(255, 255, 255, 0.12);
  }
}


/* =============================================================================
   FINDER CONTENT
   The scrollable body of the finder window.

   Width is pinned to the finder's minimum width so content never reflows
   as the scroll-driven animation expands the finder from 70vw → 100vw:
     minimum finder width  = 100vw − 2 × 15vw  = 70vw
     content area          = 70vw − 2 × padding
   On wider viewports the column is allowed to grow a little more.
   ============================================================================= */

.finder-content {
  /* Fixed to the content area at minimum finder width — no reflow during animation */
  width: calc(70vw - 32px);
  /* 70vw finder − 2×16px padding */
  max-width: 380px;
  /* mobile cap — keeps lines comfortably short */
  margin-inline: auto;
  padding: 20px 16px;
  color: var(--content-color);
  font-size: 13px;
  line-height: 1.5;
  overflow-x: hidden;
}

/* Wider screens: more room, slightly larger text */
@media (min-width: 600px) {
  .finder-content {
    width: calc(70vw - 40px);
    /* 70vw finder − 2×20px padding */
    max-width: 720px;
    padding: 24px 20px;
    font-size: 15px;
    line-height: 1.6;
  }
}

/*
  zero-md is a web component that renders Markdown files inline.
  Treated as a block element here; shadow DOM background is overridden via
  a <template><style> inside <zero-md> in the HTML (zero-md v3 requirement).
*/
zero-md {
  display: block;
  background: var(--finder-bg);
  color: var(--content-color);
}