/* Havens årshjul — marketing site (feature 061). Layout lives inline in
   index.html as in the Claude Design source; this file holds the fonts,
   page basics, keyframes, interactive states and reduced-motion rules. */

@font-face { font-family: 'Geist'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/geist-400.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/geist-500.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/geist-600.woff2') format('woff2'); }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/geist-700.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/geist-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/geist-mono-500.woff2') format('woff2'); }

html { scroll-behavior: smooth; }
body { margin: 0; background: #F4F1E6; overflow-x: hidden; }
a { color: #3D5630; }
a:hover { color: #1F2C18; }
:focus-visible { outline: 3px solid #4F6E3F; outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: 16px; top: -60px; padding: 10px 16px; border-radius: 999px; background: #1F2C18; color: #F4F1E6; text-decoration: none; z-index: 10; }
.skip-link:focus { top: 12px; color: #F4F1E6; }

/* Month chips under the wheel demo */
.chip { width: 48px; height: 44px; border-radius: 999px; border: 1px solid #D4CDB3; background: #FFFFFF; color: #1F2C18; font-family: 'Geist', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; cursor: pointer; transition: background .3s, color .3s; }
.chip[aria-pressed="true"] { background: #1F2C18; border-color: #1F2C18; color: #F4F1E6; }

.text-button { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: none; background: transparent; font-family: 'Geist', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Wheel: month labels and dots counter-rotate so they stay upright. */
.wheel-rot, .wheel-label, .wheel-dot { transform-box: view-box; transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.wheel-center { animation: gwFade .5s .45s ease both; }
.todo { animation: gwIn .55s cubic-bezier(.2, .7, .2, 1) both; }

@keyframes gwIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes gwFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gwFocus { from { opacity: 0; transform: scale(1.18); } to { opacity: 1; transform: none; } }
@keyframes gwFlash { 0% { opacity: 0; } 15% { opacity: .95; } 100% { opacity: 0; } }
@keyframes gwSweep { from { top: 0; } to { top: calc(100% - 3px); } }
@keyframes gwPop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
@keyframes gwPulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.45); opacity: 0; } }
@keyframes gwSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes gwBar { from { width: 0; } to { width: 92%; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gw-motion, .gw-motion * { transition: none !important; animation: none !important; }
}