/* EKETĖ // home. Ice, the plunge, then clean black. */

.menu .logo {
  --logo-c: var(--bone);
}

/* ---------- hero: the ice ---------- */

.hero {
  --edge: clamp(56px, 8vw, 104px);
  position: relative;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  height: var(--vh-lock, 100svh);
  min-height: 560px;
  overflow: hidden;
  color: var(--paper-ink);
  cursor: crosshair;
}

.hero__ice {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 50% 52%, rgba(255, 255, 255, 0.7), transparent 70%),
    repeating-linear-gradient(112deg, transparent 0 41px, rgba(40, 60, 70, 0.045) 41px 42px, transparent 42px 97px),
    repeating-linear-gradient(23deg, transparent 0 67px, rgba(40, 60, 70, 0.04) 67px 68px, transparent 68px 151px),
    linear-gradient(180deg, #f2f0eb 0%, #e8e6e0 60%, #dedcd5 100%);
}

/* the logo drifts up a little slower than the page and fades, so it
   feels like sinking under it: a scroll-driven animation (below), run by
   the browser off the main thread; home.js only covers older browsers */
.hero__center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: calc(var(--edge) * -0.6);
  will-change: transform, opacity;
}

.hero__mark {
  width: min(480px, 82vw, 58vh);
  width: min(480px, 82vw, calc(var(--vh-lock, 100svh) * 0.58));
  margin: 0;
  line-height: 0;
}

.hero__mark .mark {
  display: block;
}

.hero__sub {
  margin-top: var(--s-5);
  color: var(--paper-muted);
}

.hero__cta {
  position: absolute;
  left: 50%;
  bottom: calc(var(--edge) + var(--s-3));
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  transform: translateX(-50%);
  font: 700 12px/1 var(--f-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.hero__arrow {
  width: 14px;
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: nudge 1.8s ease-in-out infinite;
}

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@supports (animation-timeline: scroll()) {
  .hero__center {
    animation: hero-sink linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px var(--vh-lock, 100svh);
  }

  /* the button has done its job once you move */
  .hero__cta {
    animation: cta-out linear both;
    animation-timeline: scroll(root block);
    animation-range: 0px calc(var(--vh-lock, 100svh) * 0.18);
  }
}

@keyframes hero-sink {
  80% { opacity: 0; }
  to { transform: translate3d(0, calc(var(--vh-lock, 100svh) * 0.32), 0); opacity: 0; }
}

@keyframes cta-out {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__center,
  .hero__cta {
    animation: none;
  }
}

/* where the ice breaks off into the black water below */
.hero__edge {
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 3;
  width: 100%;
  height: var(--edge);
  overflow: visible;
  pointer-events: none;
}

.hero__water-edge {
  fill: var(--ink);
}

.hero__cracks path {
  fill: none;
  stroke: var(--paper-ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.6s var(--ease-out) forwards;
  animation-delay: var(--d, 0.5s);
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

/* a crack you make by tapping the ice */
.tapcrack {
  position: absolute;
  z-index: 1;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  pointer-events: none;
  overflow: visible;
  animation: fade-out 1.4s 0.8s forwards;
}

.tapcrack path {
  fill: none;
  stroke: var(--paper-ink);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 0.3s var(--ease-out) forwards;
}

@keyframes fade-out {
  to { opacity: 0; }
}

/* off screen, the logo's loops rest (home.js toggles .is-asleep) */
.mark.is-asleep *,
.mark.is-asleep *::before,
.mark.is-asleep *::after {
  animation-play-state: paused;
}

/* phones: the 146 edge cracks just appear; drawing them in under the ink
   filter repaints the whole edge every frame for two seconds */
@media (hover: none) {
  .hero__cracks path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* ---------- the fish dives (home.js toggles .is-dived / .is-back) ---------- */

/* everything of the fish below the water line is hidden, so it goes *into* the hole */
.hero .mark__clip {
  position: absolute;
  inset: 0;
  clip-path: inset(-25% -25% 37% -25%);
}

.mark.is-dived .mark__fish {
  animation: dive 0.78s forwards;
}

.mark.is-dived .mark__smoke {
  animation: fade-away 0.2s ease-out forwards;
}

.mark.is-dived .mark__drop {
  animation: drops-out 0.6s var(--ease-out) 0.42s forwards;
}

.mark.is-dived .mark__ripple {
  animation: ripple-out 1s var(--ease-out) 0.46s forwards;
}

.mark.is-dived .mark__ripple + .mark__ripple {
  animation-delay: 0.62s;
}

.mark.is-back .mark__fish {
  animation: resurface 0.7s var(--ease-out) both;
}

.mark.is-back .mark__smoke {
  animation: fade-back 0.4s ease-out 0.4s both;
}

.mark.is-back .mark__drop {
  animation: drops-in 0.5s var(--ease-out) 0.15s both;
}

/* a little spring up, then gravity takes it nose first into the water */
@keyframes dive {
  0% { transform: none; animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  22% { transform: translateY(-3%) rotate(-4deg); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
  92% { opacity: 1; }
  100% { transform: translate(1%, 62%) rotate(-24deg); opacity: 0; }
}

@keyframes resurface {
  from { transform: translate(1%, 62%) rotate(-24deg); opacity: 0; }
  12% { opacity: 1; }
  to { transform: none; opacity: 1; }
}

@keyframes fade-away {
  to { opacity: 0; }
}

@keyframes fade-back {
  from { opacity: 0; }
}

@keyframes drops-out {
  0% { transform: none; opacity: 1; }
  45% { transform: translate(var(--dx, 0), -110%) scale(1.15); opacity: 1; }
  100% { transform: translate(var(--dx, 0), -40%) scale(0.5); opacity: 0; }
}

@keyframes drops-in {
  from { transform: translateY(60%) scale(0.5); opacity: 0; }
}

/* rings spreading on the dark water where the fish went in */
.mark__ripple {
  position: absolute;
  left: 22.424%;
  top: 58.429%;
  width: 58.182%;
  height: 9.714%;
  border: 2px solid rgba(242, 238, 230, 0.85);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

@keyframes ripple-out {
  0% { transform: scale(0.15); opacity: 0.95; }
  100% { transform: scale(0.95); opacity: 0; }
}

/* ---------- section head ---------- */

/* one heading rhythm for every section: kicker, 24px, hand title, 48px,
   content. The hand font's tall capitals and descenders reach past a
   tight line box, so its line-height stays at 1.12 to keep them inside. */
.sec-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  margin-bottom: var(--s-7);
}

.sec-head--flush {
  margin-bottom: 0;
}

.sec-head .hand {
  margin: 0;
  line-height: 1.12;
}

.sec-title {
  font-size: clamp(56px, 8vw, 116px);
  letter-spacing: 0.05em;
}

/* ---------- menu jumps ----------
   The nav is fixed (about 80px tall), so every section jump stops with its
   heading 112px from the top: clear of the nav, same gap everywhere.
   The release already has that much padding on wide screens; on narrow
   ones it gets the difference. */
#singlai,
#koncertai,
#apie,
#merch {
  scroll-margin-top: 112px;
}

#muzika {
  scroll-margin-top: max(0px, calc(112px - clamp(72px, 10vw, 140px)));
}

/* ---------- latest single ---------- */

.release {
  padding: clamp(72px, 10vw, 140px) 0 var(--section);
}

.release__grid {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}

@media (min-width: 900px) {
  .release__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(48px, 7vw, 112px);
  }
}

.release__cover {
  margin: 0;
  aspect-ratio: 1;
  background: #111;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.9);
  transform: rotate(-1.2deg);
  transition: transform 0.5s var(--ease-out);
}

@media (hover: hover) {
  .release__cover:hover {
    transform: rotate(0deg) scale(1.01);
  }
}

.release__cover img {
  width: 100%;
  height: 100%;
}

/* sized so "NEBEREIKIA" (~4.6em) always fits its column */
.release__title {
  margin: var(--s-5) 0 var(--s-6);
  font-size: clamp(56px, 17vw, 140px);
}

@media (min-width: 900px) {
  .release__title {
    font-size: clamp(64px, 9.4vw, 124px);
  }
}

.release__title span:nth-child(1) {
  transform: skewY(-2deg);
}

.release__title span:nth-child(3) {
  transform: rotate(-1.2deg) scaleX(1.03);
  transform-origin: left;
}

.release__lede {
  margin: 0 0 var(--s-6);
  font-size: 17px;
  color: rgba(242, 238, 230, 0.82);
}

/* on phones the main action spans the column, easy to hit with a thumb */
@media (max-width: 600px) {
  .release__listen .btn {
    width: 100%;
    min-height: 52px;
  }
}

.release__credits {
  max-width: 52ch;
  margin: var(--s-7) 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.release__credits a,
.gig__what a {
  padding: 15px 0;
}

.release__credits a {
  color: var(--bone);
  text-decoration: none;
  transition: color 0.15s ease;
}

@media (hover: hover) {
  .release__credits a:hover {
    color: var(--yellow);
  }
}

/* ---------- singles ---------- */

.disco {
  position: relative;
  padding: 0 0 var(--section);
}

.disco__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.disco__row {
  display: grid;
  grid-template-columns: 40px 72px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

@media (hover: hover) {
  .disco__row:hover,
  .disco__row:focus-visible {
    background: rgba(242, 238, 230, 0.04);
  }
}

.disco__n {
  font: 600 12px/1 var(--f-sans);
  letter-spacing: 0.12em;
  color: var(--muted);
}

.disco__thumb {
  width: 72px;
  height: 72px;
  transition: transform 0.35s var(--ease-out);
}

@media (hover: hover) {
  .disco__row:hover .disco__thumb {
    transform: rotate(-3deg) scale(1.05);
  }
}

.disco__text {
  display: contents;
}

.disco__title {
  font-family: var(--f-hand);
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1;
  letter-spacing: 0.04em;
  transition: transform 0.35s var(--ease-out);
}

@media (hover: hover) {
  .disco__row:hover .disco__title {
    transform: translateX(8px);
  }
}

.disco__meta {
  font: 600 11px/1.3 var(--f-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .disco__row:hover .disco__meta {
    color: rgba(242, 238, 230, 0.8);
  }
}

.disco__go {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font: 700 11px/1 var(--f-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.disco__go i {
  display: inline-block;
  font-style: normal;
  transition: transform 0.3s var(--ease-out);
}

/* the arrow dives in */
@media (hover: hover) {
  .disco__row:hover .disco__go i {
    transform: rotate(45deg);
  }
}

.disco__float {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 30;
  width: 240px;
  height: 240px;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9);
  transition: opacity 0.15s ease;
}

.disco__float.is-on {
  opacity: 1;
}

@media (hover: none), (pointer: coarse) {
  .disco__float {
    display: none;
  }
}

@media (max-width: 760px) {
  .disco__row {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-2);
  }

  .disco__n {
    display: none;
  }

  .disco__thumb {
    width: 64px;
    height: 64px;
  }

  .disco__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .disco__meta {
    white-space: normal;
  }

  .disco__go {
    font-size: 0;
    gap: 0;
  }

  .disco__go i {
    font-size: 18px;
  }
}

/* ---------- gigs ---------- */

.gigs {
  padding: 0 0 var(--section);
}

.sec-head + .gigs__label {
  margin-top: 0;
}

.gigs__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--s-7) 0 var(--s-4);
  color: var(--bone);
}

.rec {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: rec 2s ease-in-out infinite;
}

@keyframes rec {
  50% { opacity: 0.25; }
}

.gigs__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.gig {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(0, 230px) auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--line);
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .gig:hover {
    background: rgba(242, 238, 230, 0.04);
  }
}

.gigs__list--past .gig {
  color: rgba(242, 238, 230, 0.6);
}

@media (hover: hover) {
  .gigs__list--past .gig:hover {
    color: var(--bone);
  }
}

.gig__date b {
  display: block;
  font: 800 clamp(36px, 4.4vw, 58px)/0.9 var(--f-sans);
  font-stretch: 62%;
  letter-spacing: 0.01em;
}

.gig__date small {
  display: block;
  margin-top: 6px;
  font: 600 11px/1 var(--f-sans);
  letter-spacing: 0.16em;
  color: var(--muted);
}

.gig--tba .gig__date b {
  color: var(--yellow);
  text-shadow: 0 0 18px rgba(255, 232, 31, 0.3);
}

.gig__what strong {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.gig__what > span {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--muted);
}

.gig__what a {
  color: var(--bone);
  text-decoration: none;
}

.gig__where {
  font: 600 11px/1.4 var(--f-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .gig {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: var(--s-2) var(--s-4);
    align-items: start;
  }

  .gig__date {
    grid-row: span 3;
  }

  .gig__where,
  .gig__act {
    grid-column: 2;
  }

  .gig__act {
    margin-top: var(--s-2);
  }
}

/* ---------- about ---------- */

.about {
  padding: 0 0 var(--section);
}

.about__grid {
  display: grid;
  gap: var(--s-6);
}

@media (min-width: 960px) {
  .about__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: clamp(56px, 8vw, 128px);
    align-items: end;
  }
}

.about__title {
  font-size: clamp(48px, 6vw, 88px);
}

.about__lede {
  margin: 0 0 var(--s-4);
  font-size: 19px;
  line-height: 1.5;
}

.about__body p:not(.about__lede) {
  margin: 0;
  color: rgba(242, 238, 230, 0.7);
}

/* ---------- merch: text and the notify field on the ice ---------- */

.teaser {
  padding: clamp(96px, 11vw, 150px) 0 clamp(72px, 9vw, 120px);
}

.teaser__inner {
  display: grid;
  gap: var(--s-6);
  align-items: end;
}

@media (min-width: 900px) {
  .teaser__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--s-8);
  }
}

.teaser__title {
  font-size: clamp(46px, 6.4vw, 92px);
}

.teaser__body > p {
  max-width: 46ch;
  margin: 0 0 var(--s-5);
  font-size: 17px;
  color: rgba(18, 17, 16, 0.8);
}