.sun-home {
  --paper: var(--ck-eclipse);
  --ink: var(--ck-beige);
  --focus: var(--ck-sun-gold);
  --rule: #f8dc9833;
  color-scheme: dark;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", var(--ck-type);
}
.sun-wrap { overflow: clip; }
.sun-filters { position: absolute; pointer-events: none; }
.sun-hero {
  --disc: min(56vw, 76svh, 42rem);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  background: radial-gradient(ellipse at 50% 48%, #7f4b24 0, #48291c 34%, #211612 65%, transparent 87%);
}
.eclipse {
  position: absolute;
  display: grid;
  place-items: center;
  inset: 0;
  pointer-events: none;
  mask-image: linear-gradient(black 87%, transparent 100%);
}
.eclipse-disc {
  position: absolute;
  width: var(--disc);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid #ffebbf;
  background: radial-gradient(circle at 50% 65%, #120d0a, #0a0807 72%);
  box-shadow: 0 0 12px #ffe9b8, 0 0 32px #f8c783bc, 0 0 92px #c9813d88;
}
.eclipse-disc::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 6%, #efac65 16%, #fff5d6 25%, transparent 41%);
  mask-image: radial-gradient(closest-side, transparent calc(100% - 8px), black calc(100% - 4px), transparent 100%);
  opacity: .5;
  animation: rim-sweep 4.8s cubic-bezier(.22,.65,.28,1) both;
}
.eclipse-rays {
  width: calc(var(--disc) * 2.16);
  max-width: none;
  position: absolute;
  transform-origin: center;
  animation: corona-arrival 4.8s cubic-bezier(.22,.65,.32,1) both;
}
@keyframes corona-arrival {
  from { transform: scale(.83) rotate(-22deg); opacity: .23; }
  55% { opacity: .95; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes rim-sweep {
  from { rotate: -165deg; opacity: .18; }
  38% { opacity: 1; }
  to { rotate: 0deg; opacity: .5; }
}
.solar-mark {
  position: relative;
  width: calc(var(--disc) * .64);
  height: auto;
  animation: wordmark-arrival 1.25s .2s cubic-bezier(.2,.72,.28,1) both;
}
@keyframes wordmark-arrival {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
.sun-nav {
  position: absolute;
  inset: clamp(.5rem, 2vw, 1rem) clamp(.75rem, 2.4vw, 2.5rem) auto;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}
.sun-nav-links {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  align-items: center;
  gap: clamp(.55rem, 2.1vw, 1.75rem);
}
.sun-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ck-beige);
  text-decoration: none;
  font-size: clamp(.75rem, 1.15vw, .93rem);
  white-space: nowrap;
}
.sun-nav-logo img { width: clamp(4rem, 8vw, 6.25rem); height: auto; }
.sun-nav .sun-nav-contact {
  padding-inline: clamp(.65rem, 1.35vw, 1rem);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #f8dc9812;
  backdrop-filter: blur(12px);
}
.sun-nav a:hover { color: var(--ck-sun-gold); }
.sun-nav-links a:not(.sun-nav-contact):hover { text-decoration: underline; text-underline-offset: .28em; }
.sun-nav .sun-nav-contact:hover {
  background: #f8dc9825;
  border-color: #f8dc9877;
}

.sun-section { width: min(100% - 3rem, 72rem); margin-inline: auto; }

/* Our Work */
.sun-work { padding-bottom: clamp(5rem, 11vw, 9rem); }
.work-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2rem;
  margin-bottom: 1.5rem;
}
.work-header h2 {
  font-size: clamp(2.3rem, 4.8vw, 4.35rem);
  font-weight: 500;
  letter-spacing: -.035em;
}
.work-viewport {
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.work-viewport::-webkit-scrollbar { display: none; }
.work-track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: .25rem 0;
  list-style: none;
}
.sun-brand { flex: none; width: clamp(11rem, 19vw, 17rem); margin-right: clamp(1rem, 2.4vw, 2.25rem); }
.work-track.is-running { animation: work-loop 48s linear infinite; }
.work-track.is-paused,
.work-track:hover,
.work-track:focus-within { animation-play-state: paused; }
@keyframes work-loop { to { transform: translateX(-50%); } }
.work-playback {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  transition: border-color .18s ease;
}
.work-playback:hover { border-color: #f8dc9888; }
.work-playback::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 10px;
  height: 12px;
  border-inline: 3px solid var(--ck-sun-gold);
}
.work-playback.is-paused::before {
  width: 0;
  height: 0;
  translate: 1px 0;
  border-block: 6px solid transparent;
  border-inline: 10px solid var(--ck-sun-gold);
  border-inline-end: 0;
}
.brand-card { display: block; border-radius: 50%; color: inherit; text-decoration: none; }
.work-window {
  --rim-angle: -52deg;
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  border-radius: 50%;
  border: 1px solid #f8dc9842;
  background: radial-gradient(ellipse at 46% 19%, #61402562, transparent 69%), #1c1410;
  transition: border-color .38s ease;
}
.sun-brand:nth-child(even) .work-window { --rim-angle: 98deg; }
.work-window::before, .work-window::after {
  content: '';
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  pointer-events: none;
}
.work-window::before {
  background: conic-gradient(from -50deg, transparent 0 25%, #f8dc98b8 39%, transparent 60%);
  mask-image: radial-gradient(circle, transparent 68.5%, #000 69% 70%, transparent 70.5%);
  transform: rotate(var(--rim-angle)) scale(.91);
  opacity: .65;
  transition: transform .65s cubic-bezier(.2,.75,.28,1), opacity .45s ease;
}
.work-window::after {
  z-index: -1;
  background: radial-gradient(circle at 50% 49%, #a66d3b3b, transparent 66%);
  opacity: .35;
  transform: scale(.73);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,.75,.28,1);
}
a.brand-card:is(:hover, :focus-visible) .work-window { border-color: #f8dc9888; }
a.brand-card:is(:hover, :focus-visible) .work-window::before { transform: rotate(calc(var(--rim-angle) + 58deg)) scale(1.08); opacity: 1; }
a.brand-card:is(:hover, :focus-visible) .work-window::after { transform: scale(1.25); opacity: 1; }
.brand-image { display: grid; place-items: center; width: 63%; height: 54%; }
.brand-image img { width: 100%; height: 100%; object-fit: contain; filter: url(#gold-alpha); }
.sun-brand-arki .brand-image img { filter: url(#gold-arki); }
.sun-brand-kat .brand-image { width: 45%; }
.sun-brand-copi-brain .brand-image { width: 57%; }
.sun-brand-elo .brand-image img { scale: 1.26; translate: 0 -9%; filter: url(#gold-on-light); }
.sun-brand-meettarek .brand-image { width: 41%; }
.sun-brand-calm-bedtime .brand-image { width: 52%; }
.sun-brand-do-for-people .brand-image { width: 48%; }
.sun-brand-do-for-people .brand-image img { scale: 1.16; filter: url(#gold-on-light); }
.sun-brand-calm-bedtime .brand-image img { filter: url(#gold-on-black); }
.sun-brand-sns-emea .brand-image { width: 43%; }
.sun-brand-sns-emea .brand-image img { scale: .87; translate: 0 -3%; }

/* Contact: the sun comes back up */
.sun-contact {
  --disc: min(62vw, 34rem);
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 1.25rem;
  min-height: min(100svh, 56rem);
  padding: clamp(4rem, 9vw, 7rem) 1.5rem calc(var(--disc) * .62);
  text-align: center;
  background: radial-gradient(ellipse 75% 62% at 50% 100%, #7f4b24 0, #48291c 42%, transparent 100%);
}
.sun-contact h2 { font-size: clamp(2.6rem, 6.4vw, 5.5rem); font-weight: 500; letter-spacing: -.04em; }
.contact-button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  max-width: 100%;
  margin-top: .5rem;
  padding-inline: 1.5rem;
  border-radius: 999px;
  background: var(--ck-sun-gold);
  color: #222;
  font-weight: 700;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition: background-color .18s ease;
}
.contact-button:hover { background: #fff5d6; }
.contact-sun {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: calc(var(--disc) * -.5);
  display: grid;
  place-items: center;
  width: var(--disc);
  aspect-ratio: 1;
  translate: -50% 0;
  pointer-events: none;
}
.contact-sun svg { position: absolute; width: 216%; max-width: none; }

/* Footer */
.sun-footer { padding: 1.25rem; border-top: 1px solid var(--rule); text-align: center; }
.sun-footer small { color: var(--ck-muted-on-black); font-size: .8125rem; }

@media (max-width: 620px) {
  .sun-hero { --disc: min(73vw, 68svh, 24rem); }
  .sun-section { width: calc(100% - 2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .eclipse-rays, .eclipse-disc::after, .eclipse, .solar-mark, .work-window { animation: none !important; }
  .work-window, .work-window::before, .work-window::after { transition: none; }
  .work-track.is-running { animation: none; }
  .work-track > [aria-hidden="true"] { display: none; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sun-hero { view-timeline: --copikat-eclipse block; }
    .eclipse {
      animation: eclipse-passage linear both;
      animation-timeline: --copikat-eclipse;
      animation-range: exit 0% exit 82%;
    }
    .work-window {
      animation: window-arrival ease-out both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 33%;
    }
  }
}
@keyframes eclipse-passage {
  from { transform: translateY(0) scale(1); opacity: 1; }
  to { transform: translateY(6%) scale(1.11); opacity: .26; }
}
@keyframes window-arrival {
  from { opacity: .46; scale: .95; }
  to { opacity: 1; scale: 1; }
}