/* ============================================================
   INVERSA layout + components — Lata Panoura portfolio
   Built on css/tokens.css. No shadows, single lime accent,
   radius ≤ 3.6px, body text ≥ 18px, left-aligned copy.
   ============================================================ */

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */

body {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  text-align: left;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* Container: page-width wrapper */
#nav,
#hero,
main section,
#footer-columns {
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Sections separated by whitespace only — no dividers */
main section + section {
  margin-top: clamp(86px, 10vw, 104px);
}

/* First section needs its gap from the (pinned) hero too */
main section:first-child {
  margin-top: clamp(86px, 10vw, 104px);
}

/* ------------------------------------------------------------
   1. Top nav — fixed, transparent
   ------------------------------------------------------------ */

#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-21);
  max-width: none;
  margin: 0;
  padding-top: var(--spacing-21);
  padding-bottom: var(--spacing-21);
  background: transparent;
}

.nav-brand {
  font-family: var(--font-display);
  font-size: var(--text-caption);
  color: var(--color-bone-vellum);
  letter-spacing: 0.5px;
}

.menu-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-bone-vellum);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  padding: var(--spacing-5) var(--spacing-7);
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.menu-button:hover {
  background: rgba(244, 243, 232, 0.06);
  opacity: 0.85;
}

.menu-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-lime-surveyor);
}

.nav-links {
  position: absolute;
  top: 100%;
  right: 24px;
  min-width: 220px;
  padding: var(--spacing-21);
  background: var(--color-obsidian-loam);
  border: 1px solid var(--color-iron-filings);
  border-radius: var(--radius);
}

.nav-links li + li {
  margin-top: var(--spacing-14);
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-bone-vellum);
  transition: opacity 0.15s ease;
}

.nav-links a:hover {
  opacity: 0.7;
}

/* ------------------------------------------------------------
   2. Hero — pinned, full-viewport section (scroll = rotor input)
   ------------------------------------------------------------ */

/* Hero is a 100vh self-contained screen: the windmill lives inside
   .hero-sticky and leaves the viewport exactly when the hero does —
   it never slides out of the hero independently. Page scroll is normal. */
#hero {
  height: 100vh;
  position: relative;
  /* reset container padding — hero is full-bleed */
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  overflow: hidden;
  /* full-bleed: escape the container padding */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 86px;
}

html, body {
  overflow-x: clip;
}

/* Dark-green field for the windmill variant — replaces the overlay */
.hero-sticky.has-windmill::after {
  background: transparent;
}

/* Sections scroll OVER the pinned windmill (which lives in .hero-sticky) */
#hero,
main,
footer {
  position: relative;
  z-index: 1;
}

/* Turbine inside the sticky hero scene: bottom-right, scaled down.
   Lives in .hero-sticky (sticky, 100vh) so it stays pinned to the
   viewport while the hero is on screen, then leaves with the hero. */
.hero-sticky .windmill-svg {
  position: absolute;
  right: 3vw;
  bottom: 0;
  width: min(62vh, 52vw);
  height: auto;
  aspect-ratio: 600 / 900;
}

/* Dark-green field for the windmill variant: pinned with the scene */
.hero-sticky.has-windmill {
  background: linear-gradient(180deg, #0d1a12 0%, #13140e 100%);
}

/* Full-bleed cloud sky: spans the entire hero viewport, behind the
   turbine (DOM order — clouds are appended before the windmill).
   Clouds share one 1920x900 viewBox with xMidYMid slice, so they
   cover any screen width. Never intercepts clicks. */
.cloud-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Drifting clouds: each .wm-cloud loops from off the left edge to
   past the right edge of the full 1920-unit viewBox. Individual
   clouds get their duration/delay inline from main.js — the keyframe
   here only defines the shared trajectory. Respect reduced-motion. */
.wm-cloud {
  animation-name: wm-cloud-drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}

@keyframes wm-cloud-drift {
  from { transform: translateX(-260px); }
  to   { transform: translateX(2180px); }
}

@media (prefers-reduced-motion: reduce) {
  .wm-cloud {
    animation: none;
  }
}

/* Emission-factor source citation, pinned to the base of the hero —
   map-legend style: small mono line in drift ash, no interaction. */
.hero-data-source {
  position: absolute;
  left: 24px;
  bottom: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--color-drift-ash);
  opacity: 0.85;
  z-index: 2;
  pointer-events: none;
  max-width: 42vw;
}

/* Windmill variant: page scroll is fully unlocked — no cockpit rules.
   The rotor is driven by live wind data, not by scrolling. */

/* Twin live readouts next to the turbine: CO₂ avoided (main value)
   and estimated power, side by side, wind speed as the shared
   secondary line underneath. */
.rotor-speed {
  position: absolute;
  right: calc(min(62vh, 52vw) + 3vw);
  bottom: 24vh;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.8px;
  color: var(--color-lime-surveyor);
  text-align: right;
  z-index: 2;
  user-select: none;
  max-width: 40vw;
}

.rotor-speed .rotor-speed-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 4.5vw, 29px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.rotor-speed .rotor-speed-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1.4px;
  color: var(--color-drift-ash);
  text-transform: uppercase;
}

.rotor-speed .rotor-speed-unit {
  display: block;
  color: var(--color-drift-ash);
  white-space: nowrap;
}

/* Row holding the two readout blocks side by side */
.rotor-speed .rotor-speed-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 29px;
}

/* One readout block: value on top, label under it, unit last */
.rotor-speed .readout-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* Main metric emphasis: CO₂ avoided is the headline number */
.rotor-speed .readout-block:first-child .rotor-speed-value {
  color: var(--color-lime-surveyor);
}

.rotor-speed .readout-block + .readout-block .rotor-speed-value {
  color: var(--color-bone-vellum);
}

/* Wind speed as the secondary line under the power readout */
.rotor-speed .rotor-speed-secondary {
  display: block;
  color: var(--color-drift-ash);
  font-size: 13px;
  white-space: nowrap;
}

/* Floating ENTER button — bottom right, escapes the hero pin */
.hero-enter {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  background: var(--color-lime-surveyor);
  color: var(--color-obsidian-loam);
  border: 0;
  border-radius: var(--radius);
  padding: var(--spacing-14) var(--spacing-18);
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.hero-enter:hover {
  opacity: 0.85;
}

.hero-enter.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* Return variant: ghost style, sits above the ENTER position */
.hero-enter.hero-return {
  background: transparent;
  color: var(--color-bone-vellum);
  border: 1px solid var(--color-iron-filings);
  bottom: 24px;
}

/* Background image layer — scales with scroll progress */
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
  transform: scale(1.08);
}

/* Dark overlay keeps text readable and mutes map labels */
.hero-sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(19, 20, 14, 0.55);
  pointer-events: none;
}

.hero-sticky.has-image .hero-bg { opacity: 1; }

/* Hero content sits above the overlay */
#hero-name,
#hero-roles,
#hero-cta {
  position: relative;
  z-index: 2;
}

#hero-name {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-bone-vellum);
}

#hero-roles {
  margin-top: var(--spacing-21);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-drift-ash);
}

#hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-14);
  margin-top: var(--spacing-29);
}

.cta-primary,
.cta-secondary {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: 1.2;
  border-radius: var(--radius);
  padding: var(--spacing-14) var(--spacing-18);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.cta-primary {
  background: var(--color-lime-surveyor);
  color: var(--color-obsidian-loam);
}

.cta-primary:hover {
  opacity: 0.85;
}

.cta-secondary {
  background: transparent;
  border: 1px solid var(--color-iron-filings);
  color: var(--color-bone-vellum);
}

.cta-secondary:hover {
  background: rgba(244, 243, 232, 0.06);
}

/* ------------------------------------------------------------
   3. Section headings
   ------------------------------------------------------------ */

main h2 {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-bone-vellum);
  margin-bottom: var(--spacing-29);
}

/* ------------------------------------------------------------
   4. Log entries — experience / education / projects
   ------------------------------------------------------------ */

.log-entry + .log-entry {
  margin-top: var(--spacing-59);
}

.log-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-14);
}

.log-role {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-subheading);
  color: var(--color-bone-vellum);
}

.log-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: var(--spacing-14);
}

.log-tag {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-bone-vellum);
  background: transparent;
  border: 1px solid var(--color-lime-surveyor);
  border-radius: var(--radius);
  padding: var(--spacing-5) var(--spacing-7);
}

.log-body {
  margin-top: var(--spacing-21);
}

.log-body li {
  position: relative;
  padding-left: 21px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-bone-vellum);
}

.log-body li + li {
  margin-top: var(--spacing-14);
}

.log-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-lime-surveyor);
}

/* Plain lists (non key-project) get neutral markers */
.log-body.log-body-plain li::before {
  background: var(--color-drift-ash);
}

/* Company line inside a log entry */
.log-company {
  font-family: var(--font-display);
  font-size: var(--text-body);
  color: var(--color-drift-ash);
}

/* Key-projects block inside an experience entry */
.key-projects {
  margin-top: var(--spacing-21);
}

.key-projects-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-drift-ash);
  margin-bottom: var(--spacing-14);
}

/* Plain one-line project text */
.log-text {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-bone-vellum);
}

/* Awards list (rendered as .log-body ul — no extra rule needed) */

/* ------------------------------------------------------------
   4b. Experience timeline — tabs expanding into cards on hover
   ------------------------------------------------------------ */

#experience-list {
  position: relative;
  padding-left: 29px;
}

/* Vertical rail */
#experience-list::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--color-iron-filings);
}

/* Node dot per entry */
.timeline-item {
  position: relative;
  padding-bottom: var(--spacing-29);
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-obsidian-loam);
  border: 1px solid var(--color-lime-surveyor);
  transition: background 0.2s ease;
}

.timeline-item:hover::before,
.timeline-item.open::before {
  background: var(--color-lime-surveyor);
}

/* Collapsed tab: role + company on the left, tags + plus anchored right */
.timeline-tab {
  display: flex;
  align-items: center;
  gap: var(--spacing-18);
  cursor: pointer;
  padding: var(--spacing-5) 0;
}

.timeline-tab-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-7);
}

/* Tags inside the collapsed tab row: pinned next to the plus marker */
.timeline-tab-tags {
  margin-top: 0;
  flex-shrink: 0;
}

.timeline-plus {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--color-lime-surveyor);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.timeline-item:hover .timeline-plus,
.timeline-item.open .timeline-plus {
  transform: rotate(45deg);
}

/* Expandable card body — smooth growth from the tab */
.timeline-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease;
}

.timeline-body-inner {
  overflow: hidden;
  min-height: 0;
}

.timeline-item:hover .timeline-body,
.timeline-item.open .timeline-body {
  grid-template-rows: 1fr;
  opacity: 1;
}

.timeline-body .log-body,
.timeline-body .key-projects {
  margin-top: var(--spacing-21);
}

/* Optional cover image inside the expanded card */
.card-media {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
  border: 1px solid var(--color-iron-filings);
  margin: var(--spacing-21) 0 0;
}

/* Optional "view media" button */
.card-media-btn {
  margin-top: var(--spacing-21);
  align-self: flex-start;
}

/* ------------------------------------------------------------
   5. Skills — tag groups
   ------------------------------------------------------------ */

.skill-group + .skill-group {
  margin-top: var(--spacing-29);
}

.skill-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--color-drift-ash);
  margin-bottom: var(--spacing-14);
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.skill-tag {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-bone-vellum);
  background: transparent;
  border: 1px solid var(--color-lime-surveyor);
  border-radius: var(--radius);
  padding: var(--spacing-5) var(--spacing-7);
  transition: opacity 0.15s ease;
}

.skill-tag:hover {
  opacity: 0.8;
}

/* ------------------------------------------------------------
   6. Footer
   ------------------------------------------------------------ */

#footer {
  margin-top: clamp(86px, 10vw, 104px);
  border-top: 1px solid var(--color-iron-filings);
  padding-top: var(--spacing-86);
  padding-bottom: var(--spacing-59);
}

#footer-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-29);
}

#footer-columns a,
#footer-columns p {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-drift-ash);
}

#footer-columns a {
  transition: opacity 0.15s ease;
}

#footer-columns a:hover {
  opacity: 0.7;
}

#footer-tagline {
  max-width: var(--page-max-width);
  margin: var(--spacing-59) auto 0;
  padding: 0 24px;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-drift-ash);
}

/* Noscript notice */
.noscript-fallback {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: var(--spacing-29) 24px;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--color-drift-ash);
}

/* ------------------------------------------------------------
   Focus visibility
   ------------------------------------------------------------ */

a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--color-lime-surveyor);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ------------------------------------------------------------
   Responsive — single column under 720px
   ------------------------------------------------------------ */

@media (max-width: 720px) {
  #hero-name {
    font-size: 44px;
    letter-spacing: -1.32px;
  }

  main h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .log-role {
    font-size: 24px;
  }

  #footer-columns {
    grid-template-columns: 1fr;
    gap: var(--spacing-21);
  }

  /* Hero stays a single 100vh screen on mobile too —
     the windmill leaves the viewport with the hero, never before */
  #hero {
    height: 100vh;
  }

  /* Phone layout: the turbine moves ABOVE the hero name, centered.
     It no longer shares the bottom band with the title text — the
     name keeps its own space at the bottom. Larger screens keep the
     desktop position (bottom-right beside the title) untouched. */
  .hero-sticky .windmill-svg {
    right: auto;
    left: 50%;
    bottom: auto;
    top: 24vh;
    transform: translateX(-50%);
    width: min(58vw, 44vh);
  }

  /* Timeline tab stacks on small screens: title full-width,
     period tags wrap beneath it */
  .timeline-tab {
    flex-wrap: wrap;
    gap: var(--spacing-14);
  }

  .timeline-tab-main {
    flex: 1 1 100%;
  }

  .timeline-tab-tags {
    flex: 1 1 auto;
  }

  .timeline-tab .timeline-plus {
    margin-left: auto;
  }

  .card-media {
    height: 180px;
  }

  /* Readouts on small screens: shrink + lift above the hero name */
  .rotor-speed {
    right: 18px;
    bottom: auto;
    top: 14vh;
    max-width: 60vw;
    gap: 1px;
  }

  .rotor-speed .rotor-speed-row {
    gap: 14px;
  }

  .rotor-speed .rotor-speed-value {
    font-size: 20px;
  }

  .rotor-speed .rotor-speed-label {
    font-size: 9px;
  }
}