/* Small amount of hand-written CSS that Tailwind utilities do not cover. */

/* Logo: marks are drawn with currentColor (primary) and --accent (secondary). */
[data-logo] { --accent: #f28c28; }
[data-logo] .logo-word {
  font-family: Fraunces, Georgia, serif;
  font-weight: 600; letter-spacing: -0.02em; line-height: 1;
  display: inline-flex; align-items: center;
}
[data-logo] .logo-word svg { height: 0.72em; width: 0.72em; margin: 0.18em -0.02em 0; }

/* Reveal on scroll */
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .flow-ants, .spin-slow { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  [data-draw] { transition: none !important; stroke-dashoffset: 0 !important; }
}

/* Soft frame around photos */
.frame { position: relative; border-radius: 1.5rem; padding: 4px; background: #fff; box-shadow: 0 1px 2px rgba(30,42,68,.06); }
.frame > * { border-radius: calc(1.5rem - 4px); display: block; }

/* Handwritten accents */
.hand { font-family: Caveat, "Segoe Print", cursive; }

/* Accordion marker rotation */
details[open] .chevron { transform: rotate(180deg); }
summary::-webkit-details-marker { display: none; }

/* Dotted connector between steps */
.dotted-line { background-image: radial-gradient(circle, rgba(59,116,214,.55) 1.5px, transparent 1.6px); background-size: 10px 10px; background-repeat: repeat-x; background-position: center; }

/* ---------------------------------------------------------------------------
   New homepage (start.html): monospace labels, line grid, flow diagram, bento cards.
   --------------------------------------------------------------------------- */

/* Section labels: "01 — Vanliga tidstjuvar" */
.eyebrow { font-family: "Geist Mono", ui-monospace, monospace; font-size: .75rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }

/* Line grid that fades out downwards. Put on an absolutely positioned layer, the mask hides the rest. */
.bg-lines {
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 75% at 50% 0%, #000 35%, transparent 100%);
}
.bg-lines-light { background-image: linear-gradient(rgba(30,42,68,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(30,42,68,.06) 1px, transparent 1px); }

/* Dark header. It overlaps the dark first section (negative margin = its own height, so the page
   never jumps). At the top of the page it is tall and see-through, blending into the hero; once
   scrolled (site.js sets data-scrolled on <html>) it shrinks to a frosted bar with a glowing hairline. */
.nav-dark { position: sticky; margin-bottom: -5rem; transition: background-color .15s, border-color .3s, box-shadow .3s, margin .3s; }
.nav-dark > div:first-child { height: 5rem; transition: height .3s; }
.nav-dark + main > section:first-child { padding-top: 5rem; }
html:not([data-scrolled]) .nav-dark { background-color: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Nearly opaque: at 80 % the white sections showed through as a muddy grey. No saturate() here: while
   the background fades in it boosted the hero glow into a light blue flash. */
html[data-scrolled] .nav-dark {
  margin-bottom: -4rem; background-color: rgba(11,17,32,.94); box-shadow: 0 10px 30px -15px rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
html[data-scrolled] .nav-dark > div:first-child { height: 4rem; }
.nav-dark::after {
  content: ""; position: absolute; inset: auto 0 -1px; height: 1px; opacity: 0; transition: opacity .3s;
  background: linear-gradient(90deg, transparent, rgba(102,144,217,.6) 30%, rgba(242,140,40,.7) 70%, transparent);
}
html[data-scrolled] .nav-dark::after { opacity: 1; }
/* The mobile menu floats over the page under the bar. In the flow it pushed the hero down, and at the
   top of the page the light body showed through the see-through header, hiding the logo and button. */
#mobile-menu { position: absolute; left: 0; right: 0; top: 100%; box-shadow: 0 20px 40px -20px rgba(0,0,0,.7); }
html:not([data-scrolled]) #mobile-menu { border-radius: 1rem; margin: 0 .75rem; border: 1px solid rgba(255,255,255,.1); }

/* Desktop links: no box. A short blue-to-orange line (like the hero line) grows in under the
   link on hover and stays under the current page, with a soft glow. */
.nav-links [data-nav] { position: relative; padding: .5rem .9rem; }
.nav-links [data-nav]::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .1rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #6690d9, #f28c28); transform: scaleX(0); transform-origin: left; opacity: .7;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s;
}
.nav-links [data-nav]:hover::after { transform: scaleX(1); }
.nav-dark [data-nav].text-brand-600 { color: #fff; }
.nav-links [data-nav].text-brand-600::after { transform: scaleX(1); opacity: 1; box-shadow: 0 0 10px rgba(242,140,40,.6); }
#mobile-menu [data-nav].text-brand-600 { background: rgba(255,255,255,.06); }

/* Hero line on a phone: the SVG is at least 640px wide there (start.html), and its line, dots and ring
   are drawn 1.5 times as heavy, like the pulse in site.js (kironLineWeight). */
@media (max-width: 639px) {
  svg [data-draw] { stroke-width: 3.75; }
  svg [data-draw] ~ g circle { r: 7; }
  svg [data-draw] ~ circle { stroke-width: 3; }
}

/* Spotlight on cards (position set by site.js). Layered on top of the card's background colour. */
[data-spot] { background-image: radial-gradient(320px circle at var(--mx, -999px) var(--my, -999px), rgba(102,144,217,.14), transparent 60%); }
.spot-dark[data-spot] { background-image: radial-gradient(320px circle at var(--mx, -999px) var(--my, -999px), rgba(146,179,230,.16), transparent 60%); }

/* Systems marquee: the list is duplicated in the markup, so -50% loops seamlessly. */
.marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Before/after toggle */
[data-toggle-group][data-state="idag"] [data-when="efter"],
[data-toggle-group][data-state="efter"] [data-when="idag"] { display: none; }
[data-toggle][aria-pressed="true"] { background: #1e2a44; color: #fff; }

/* Larger touch areas (about 44px) around small controls, without changing how they look. */
[data-toggle], [data-sel-prev], [data-sel-next] { position: relative; }
[data-toggle]::before, [data-sel-prev]::before, [data-sel-next]::before { content: ""; position: absolute; }
[data-toggle]::before { inset: -6px 0; }
[data-sel-prev]::before, [data-sel-next]::before { inset: -8px; }
/* Footer links: a taller row on touch screens so they are easier to hit. */
@media (max-width: 767px) {
  footer ul a { display: inline-block; padding: .5rem 0; }
  footer ul.space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0; }
}

/* Timeline: the fill line follows --p (0–1) from site.js, and a number it has reached is data-done */
.timeline-fill { transform-origin: top; transform: scaleY(var(--p, 0)); transition: transform .15s linear; }

/* VARIANT 9 and 10: a streak of light runs around the detail panel's border (a conic gradient in the border box), and a ring of light circles Kiron. */
@property --beam-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes beam { to { --beam-angle: 360deg; } }
.beam {
  border: 1px solid transparent;
  background: linear-gradient(#111a2e, #111a2e) padding-box,
    conic-gradient(from var(--beam-angle), rgba(255,255,255,.08) 0deg 250deg, #3b74d6 300deg, #f28c28 340deg, rgba(255,255,255,.08) 360deg) border-box;
  animation: beam 6s linear infinite; animation-delay: var(--d, 0s);
}
.beam-ring {
  background: conic-gradient(from var(--beam-angle), transparent 0deg, #3b74d6 120deg, #f28c28 200deg, transparent 260deg);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 67%, transparent 68%); mask: radial-gradient(circle, transparent 64%, #000 65%, #000 67%, transparent 68%);
  animation: beam 4s linear infinite;
}

/* VARIANT 10: where each card sits in the mesh (--l/--r/--t on the card). Only from lg, where the cards are
   absolute; below that they are relative in a grid, and the offsets would push them out of line. */
@media (min-width: 1024px) {
  [data-mesh-card] { left: var(--l, auto); right: var(--r, auto); top: var(--t, auto); }
}
/* VARIANT 10 below lg: no single panel, the four details are cards of their own (start.html), so the
   panel box loses its running-light border. */
@media (max-width: 1023px) {
  [data-mesh] .beam { border: 0; background: none; animation: none; }
}

/* VARIANT 9 and 10: the chosen tab or card gets the same running light as the detail panel. */
.sel-row[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(#162039, #162039) padding-box,
    conic-gradient(from var(--beam-angle), rgba(255,255,255,.1) 0deg 250deg, #3b74d6 300deg, #f28c28 340deg, rgba(255,255,255,.1) 360deg) border-box;
  animation: beam 4s linear infinite;
}

/* The section after the hero: one dark flow, the background deepens without an edge. */
[data-after-hero] { background: linear-gradient(#0b1120, #0f1a31 35%, #0d162a 80%, #0b1120); }
/* The transition from the hero: a glowing hairline along the top edge, blue to orange, fading out at both sides,
   with a slightly lighter wash just below it. */
.edge-glow { height: 1px; background: linear-gradient(90deg, transparent, #6690d9 30%, #f28c28 70%, transparent); filter: drop-shadow(0 0 4px rgba(242,140,40,.6)); }
.edge-glow::after { content: ""; position: absolute; inset: 1px 0 auto; height: 10rem; pointer-events: none;
  background: linear-gradient(rgba(102,144,217,.12), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }

/* Så jobbar vi, "Så hänger det ihop": dashes that flow along a link, and a slowly turning routine loop. */
.flow-ants { stroke-dasharray: 4 6; animation: ants 1.6s linear infinite; }
@keyframes ants { to { stroke-dashoffset: -20; } }
.spin-slow { transform-box: fill-box; transform-origin: center; animation: spin-slow 24s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .sel-row[aria-pressed="true"] { animation: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee-track > [aria-hidden="true"] { display: none; }
  .timeline-fill { transition: none; }
  .beam, .beam-ring { animation: none; }
}

/* Dark form fields (kontakt): keep Chrome's autofill from painting them light yellow/blue. */
.bg-night input:-webkit-autofill, .bg-night textarea:-webkit-autofill {
  -webkit-text-fill-color: #fff; caret-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px #151e33 inset; transition: background-color 9999s;
}

/* Keyboard focus: one clear ring on every link, button and FAQ question, only when navigating with the
   keyboard (:focus-visible). Orange on the dark sections, blue on the light ones (orange on white is
   too faint); each section sets --focus and the nearest one wins. Form fields keep their own ring. */
.bg-white, .bg-zinc-50 { --focus: #2d5fb8; }
.bg-night, .bg-night-800, .nav-dark, [data-after-hero], footer { --focus: #f4a45a; }
:focus-visible { outline: 2px solid var(--focus, #2d5fb8); outline-offset: 3px; }
/* <main> takes focus from the skip link only so the next Tab starts there; it needs no ring. */
main:focus { outline: none; }

/* "Hoppa till innehållet": first in <body>, hidden until it gets keyboard focus. */
.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: 60; transform: translateY(-200%);
  border-radius: .5rem; background: #fff; color: #1e2a44; padding: .6rem 1rem;
  font-size: .875rem; font-weight: 600; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
}
.skip-link:focus { transform: none; --focus: #2d5fb8; }