/* Forma Sites placeholder. Tokens and components mirror formadigital.io (aamaasdev: src/index.css). */

@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  --background: 40 20% 98%;
  --foreground: 0 0% 9%;
  --card: 0 0% 100%;
  --primary: 217 82% 50%;
  --primary-foreground: 0 0% 100%;
  --muted-foreground: 0 0% 38%;
  --border: 40 8% 87%;
  --input: 40 8% 82%;
  --ink-soft: 0 0% 9% / 0.35;
  --brand-from: 160 84% 39%;
  --brand-to: 217 91% 60%;
  --display: "Instrument Serif", Georgia, serif;
  --sans: "Inter Variable", Inter, system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--sans);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: hsl(var(--primary) / 0.15);
}

:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 3px;
}

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

.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.brand-gradient {
  background-image: linear-gradient(135deg, hsl(var(--brand-from)), hsl(var(--brand-to)));
}

.topbar {
  height: 3px;
  width: 100%;
}

/* Logo */
.header {
  display: flex;
  align-items: center;
  height: 4rem;
}
.logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.logo-mark {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
}
.logo-mark svg {
  width: 62%;
  height: 62%;
}
.logo-mark path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.logo-text {
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1;
}
em {
  font-style: italic;
}

/* Hero */
.hero {
  flex: 1;
  display: grid;
  align-items: center;
  gap: 3.5rem;
  padding-top: 4rem;
  padding-bottom: 5rem;
}
@media (min-width: 1024px) {
  .title {
    font-size: clamp(4rem, 6.4vw, 6rem);
  }
  .hero {
    grid-template-columns: 1fr 1fr;
    padding-top: 5rem;
    padding-bottom: 7rem;
  }
  .hero-sketch {
    padding-left: 1.5rem;
  }
}

.eyebrow {
  margin: 0 0 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: hsl(var(--primary));
}

.title {
  display: flex;
  align-items: center;
  gap: 0.25em;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 12vw, 6rem);
  white-space: nowrap;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.logo-mark-lg {
  width: 0.82em;
  height: 0.82em;
  border-radius: 0.16em;
  margin-right: 0.08em;
}

/* «Sites» skrives bokstav for bokstav. Hele ordet holder av plassen, så ingenting hopper. */
.typed {
  position: relative;
  display: inline-block;
  font-style: italic;
  color: hsl(var(--primary));
}
.typed-space {
  visibility: hidden;
}
.typed-out {
  position: absolute;
  inset: 0;
  white-space: nowrap;
}
.caret {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  margin-left: 1px;
  transform: translateY(0.1em);
  background: currentColor;
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.lead {
  margin: 1.75rem 0 0;
  max-width: 36rem;
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.15;
}
.accent {
  color: hsl(var(--primary));
}
.body {
  margin: 1.25rem 0 0;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: hsl(var(--muted-foreground));
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn-primary:hover {
  background: hsl(var(--foreground));
}
.btn-ghost {
  border: 1px solid hsl(var(--input));
}
.btn-ghost:hover {
  border-color: hsl(var(--foreground));
}
.arrow {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Footer */
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-top: 1px solid hsl(var(--border));
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
.link-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease;
}
.link-underline:hover {
  background-size: 100% 1px;
}

@media (max-width: 640px) {
  .container {
    padding: 0 1rem;
  }
}

/* Strektegning: tegnes når svg-en får .is-drawn. --delay og --dur per strek. */
.draw {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke: hsl(var(--foreground));
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.draw :is(path, line, rect, circle):not(.no-draw) {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur, 1.4s) cubic-bezier(0.65, 0, 0.35, 1) var(--delay, 0s);
}
.draw.is-drawn :is(path, line, rect, circle):not(.no-draw) {
  stroke-dashoffset: 0;
}
.draw .soft {
  stroke: hsl(var(--ink-soft));
}
.draw .fill-in {
  opacity: 0;
  transition: opacity 0.8s ease var(--delay, 0s);
}
.draw.is-drawn .fill-in {
  opacity: 1;
}
.draw .publish {
  fill: hsl(var(--primary) / 0.12);
}
.draw .cursor-shape {
  fill: hsl(var(--background));
}
.draw .no-draw {
  opacity: 0;
}

/* Sløyfe, 9 s: overskriften skrives om, pekeren klikker «Publiser», en hake bekrefter. */
.draw .edit-box,
.draw .headline,
.draw .text-caret,
.draw .cursor,
.draw .ripple,
.draw .publish,
.draw .check,
.draw .check-line {
  transform-box: view-box;
}
.draw .headline {
  stroke: hsl(var(--foreground));
  transform-origin: 66px 112px;
}
.draw .text-caret {
  stroke: hsl(var(--primary));
  stroke-width: 1.5;
}
.draw .ripple {
  stroke: hsl(var(--primary));
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
}
.draw .check,
.draw .check-line {
  stroke: hsl(var(--primary-foreground));
  stroke-width: 2;
}

.is-drawn .edit-box {
  animation: edit-box 9s ease 4.2s infinite;
}
.is-drawn .headline {
  animation: rewrite 9s ease-in-out 4.2s infinite;
}
.is-drawn .text-caret {
  animation: text-caret 9s ease-in-out 4.2s infinite;
}
.is-drawn .cursor {
  animation: cursor-move 9s cubic-bezier(0.65, 0, 0.35, 1) 4.2s infinite;
}
.is-drawn .ripple {
  animation: ripple 9s ease-out 4.2s infinite;
}
.is-drawn .publish {
  animation: publish 9s ease 4.2s infinite;
}
.is-drawn .check,
.is-drawn .check-line {
  animation: published 9s ease 4.2s infinite;
}

@keyframes edit-box {
  0%,
  6%,
  56%,
  100% {
    stroke: hsl(var(--foreground));
    stroke-dasharray: 1;
  }
  10%,
  52% {
    stroke: hsl(var(--primary));
    stroke-dasharray: 0.012 0.008;
  }
}
@keyframes rewrite {
  0%,
  12% {
    transform: scaleX(1);
  }
  24%,
  28% {
    transform: scaleX(0);
  }
  48%,
  100% {
    transform: scaleX(1);
  }
}
@keyframes text-caret {
  0%,
  8% {
    opacity: 0;
    transform: translateX(304px);
  }
  10%,
  12% {
    opacity: 1;
    transform: translateX(304px);
  }
  24%,
  28% {
    opacity: 1;
    transform: translateX(70px);
  }
  48%,
  52% {
    opacity: 1;
    transform: translateX(304px);
  }
  54%,
  100% {
    opacity: 0;
    transform: translateX(304px);
  }
}
@keyframes cursor-move {
  0%,
  54% {
    transform: translate(0, 0);
  }
  66% {
    transform: translate(-26px, 113px);
  }
  69% {
    transform: translate(-26px, 113px) scale(0.92);
  }
  72%,
  84% {
    transform: translate(-26px, 113px);
  }
  98%,
  100% {
    transform: translate(0, 0);
  }
}
@keyframes ripple {
  0%,
  68% {
    opacity: 0;
    transform: scale(0.2);
  }
  70% {
    opacity: 1;
    transform: scale(0.4);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}
@keyframes publish {
  0%,
  68% {
    fill: hsl(var(--primary) / 0.12);
  }
  71%,
  92% {
    fill: hsl(var(--primary));
  }
  97%,
  100% {
    fill: hsl(var(--primary) / 0.12);
  }
}
@keyframes published {
  0%,
  71% {
    opacity: 0;
  }
  74%,
  90% {
    opacity: 1;
  }
  94%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .caret {
    animation: none;
  }
  .draw :is(path, line, rect, circle):not(.no-draw) {
    stroke-dashoffset: 0;
    transition: none;
  }
  .draw .fill-in {
    opacity: 1;
    transition: none;
  }
  .is-drawn :is(.edit-box, .headline, .text-caret, .cursor, .ripple, .publish, .check, .check-line) {
    animation: none;
  }
}