/* =====================================================================
   Animoitu logo, lasimainen yläpalkki ja «Ylös»-painike (lib/ulkoasu.js, js/ulkoasu.js)
   ===================================================================== */

/* ---------- Logo: kerrokset päällekkäin, sama kuvasuhde kuin alkuperäisessä ---------- */
.mc-logo {
  aspect-ratio: 1400 / 940;
  width: auto;
  display: inline-block;
  position: relative;
  overflow: visible;
  vertical-align: middle;
}

.mc-logo.footer-image { height: auto; }

.mc-logo__osa {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

/* Pyörivien osien keskipisteet (scripts/logo-kerrokset.mjs → kerrokset.json) */
.mc-logo__pyora-etu { transform-origin: 42.75% 49.41%; }
.mc-logo__pyora-taka { transform-origin: 82.54% 48.67%; }
.mc-logo__tahti-1 { transform-origin: 29.3% 5.3%; }
.mc-logo__tahti-2 { transform-origin: 69.3% 5.3%; }
.mc-logo__tahti-3 { transform-origin: 84.6% 25.3%; }
.mc-logo__tahti-4 { transform-origin: 13.4% 30.9%; }
.mc-logo__viiva { transform-origin: 4% 58%; }

/* Kultainen kiilto: logon muotoon rajattu valojuova */
.mc-logo__kiilto {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, #fff0 38%, #fff6d1 50%, #fff0 62%) no-repeat;
  background-size: 300% 100%;
  background-position: 160% 0;
  mix-blend-mode: screen;
  -webkit-mask: url("/images/Logo-p-500.webp") center / 100% 100% no-repeat;
  mask: url("/images/Logo-p-500.webp") center / 100% 100% no-repeat;
  animation: mc-kiilto 9s ease-in-out 2.4s infinite;
}

@keyframes mc-kiilto {
  0% { background-position: 160% 0; }
  14%, 100% { background-position: -60% 0; }
}

/* Tähdet tuikkivat hiljaa */
.mc-logo__tahti-1, .mc-logo__tahti-2, .mc-logo__tahti-3, .mc-logo__tahti-4 {
  animation: mc-tuike 3.6s ease-in-out infinite;
}
.mc-logo__tahti-2 { animation-delay: -1.2s; }
.mc-logo__tahti-3 { animation-delay: -2.1s; }
.mc-logo__tahti-4 { animation-delay: -.6s; }

@keyframes mc-tuike {
  0%, 100% { scale: 1; opacity: 1; }
  50% { scale: .72; opacity: .55; }
}

/* Hiiri logon päällä: pyörät pyörähtävät */
@media (hover: hover) {
  a:hover > .mc-logo:not(.mc-logo--aja) .mc-logo__pyora-etu { animation: mc-pyori-etu .9s cubic-bezier(.3, .7, .3, 1); }
  a:hover > .mc-logo:not(.mc-logo--aja) .mc-logo__pyora-taka { animation: mc-pyori-taka .9s cubic-bezier(.3, .7, .3, 1); }
}

@keyframes mc-pyori-etu { from { transform: scaleX(.953) rotate(0deg) scaleX(1.049); } to { transform: scaleX(.953) rotate(-360deg) scaleX(1.049); } }
@keyframes mc-pyori-taka { from { transform: scaleX(.808) rotate(0deg) scaleX(1.237); } to { transform: scaleX(.808) rotate(-360deg) scaleX(1.237); } }

/* ---------- Logo kootaan osista (n. 2 s): valikon logo ensimmäisellä käynnillä,
   iso logo (.mc-logo--iso) kun se tulee näkyviin (js/ulkoasu.js lisää .mc-logo--aja) ---------- */
/* Järjestys: 1) auto ajaa sisään pyörät pyörien, teksti nousee  2) kaari piirtyy = «pesty»
   3) tähdet syttyvät yksi kerrallaan vasemmalta oikealle = «luksus». */
.mc-logo-intro .navbar .mc-logo:not(.mc-logo--iso) .mc-logo__auto, .mc-logo--aja .mc-logo__auto { animation: mc-ajaa 1.15s cubic-bezier(.2, .75, .15, 1) .15s both; }
.mc-logo-intro .navbar .mc-logo:not(.mc-logo--iso) .mc-logo__pyora-etu, .mc-logo--aja .mc-logo__pyora-etu { animation: mc-ajaa 1.15s cubic-bezier(.2, .75, .15, 1) .15s both, mc-vieri-etu 1.15s cubic-bezier(.2, .75, .15, 1) .15s both; }
.mc-logo-intro .navbar .mc-logo:not(.mc-logo--iso) .mc-logo__pyora-taka, .mc-logo--aja .mc-logo__pyora-taka { animation: mc-ajaa 1.15s cubic-bezier(.2, .75, .15, 1) .15s both, mc-vieri-taka 1.15s cubic-bezier(.2, .75, .15, 1) .15s both; }
.mc-logo-intro .navbar .mc-logo:not(.mc-logo--iso) .mc-logo__teksti, .mc-logo--aja .mc-logo__teksti { animation: mc-nouse .7s cubic-bezier(.2, .8, .2, 1) .75s both; }
.mc-logo-intro .navbar .mc-logo:not(.mc-logo--iso) .mc-logo__viiva, .mc-logo--aja .mc-logo__viiva { animation: mc-viiva .7s cubic-bezier(.3, .8, .2, 1) .95s both; }
.mc-logo-intro .navbar .mc-logo:not(.mc-logo--iso) .mc-logo__detailing, .mc-logo--aja .mc-logo__detailing { animation: mc-avaa .7s cubic-bezier(.2, .8, .2, 1) 1.05s both; }
.mc-logo-intro .navbar .mc-logo:not(.mc-logo--iso) .mc-logo__kaari, .mc-logo--aja .mc-logo__kaari { animation: mc-piirra .9s cubic-bezier(.55, 0, .25, 1) 1.4s both; }
.mc-logo-intro .navbar .mc-logo:not(.mc-logo--iso) .mc-logo__tahti-4, .mc-logo--aja .mc-logo__tahti-4 { animation: mc-tahti .5s cubic-bezier(.3, 1.6, .5, 1) 2.35s both, mc-tuike 3.6s ease-in-out 3.6s infinite; }
.mc-logo-intro .navbar .mc-logo:not(.mc-logo--iso) .mc-logo__tahti-1, .mc-logo--aja .mc-logo__tahti-1 { animation: mc-tahti .5s cubic-bezier(.3, 1.6, .5, 1) 2.65s both, mc-tuike 3.6s ease-in-out 3.9s infinite; }
.mc-logo-intro .navbar .mc-logo:not(.mc-logo--iso) .mc-logo__tahti-2, .mc-logo--aja .mc-logo__tahti-2 { animation: mc-tahti .5s cubic-bezier(.3, 1.6, .5, 1) 2.95s both, mc-tuike 3.6s ease-in-out 4.2s infinite; }
.mc-logo-intro .navbar .mc-logo:not(.mc-logo--iso) .mc-logo__tahti-3, .mc-logo--aja .mc-logo__tahti-3 { animation: mc-tahti .5s cubic-bezier(.3, 1.6, .5, 1) 3.25s both, mc-tuike 3.6s ease-in-out 4.5s infinite; }
.mc-logo-intro .navbar .mc-logo:not(.mc-logo--iso) .mc-logo__kiilto, .mc-logo--aja .mc-logo__kiilto { animation: mc-kiilto 9s ease-in-out 3.8s infinite; }

/* Iso logo odottaa näkyviin tuloa (vain kun JS on käytössä ja liike sallittu) */
@media (prefers-reduced-motion: no-preference) {
  html.w-mod-js .mc-logo--iso:not(.mc-logo--aja) .mc-logo__osa { opacity: 0; }
}

@keyframes mc-piirra { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Logon auto katsoo vasemmalle: se ajaa sisään oikealta, keula edellä */
@keyframes mc-ajaa { from { translate: 38% 0; opacity: 0; } 30% { opacity: 1; } to { translate: 0 0; opacity: 1; } }
/* Vasemmalle vierivä pyörä pyörii vastapäivään */
/* Pyörät ovat perspektiivin vuoksi soikeita (etu 164×172, taka 118×146 px): pelkkä rotate kääntäisi soikion
   kyljelleen ja pyörä näyttäisi irtoavan. Venytetään ympyräksi, pyöritetään ja puristetaan takaisin. */
@keyframes mc-vieri-etu { from { transform: scaleX(.953) rotate(540deg) scaleX(1.049); } to { transform: scaleX(.953) rotate(0deg) scaleX(1.049); } }
@keyframes mc-vieri-taka { from { transform: scaleX(.808) rotate(540deg) scaleX(1.237); } to { transform: scaleX(.808) rotate(0deg) scaleX(1.237); } }
@keyframes mc-viiva { from { scale: 0 1; opacity: 0; } to { scale: 1 1; opacity: 1; } }
@keyframes mc-tahti { from { scale: 0; rotate: -90deg; opacity: 0; } to { scale: 1; rotate: 0deg; opacity: 1; } }
@keyframes mc-nouse { from { translate: 0 12%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes mc-avaa { from { clip-path: inset(0 50% 0 50%); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .mc-logo *, .mc-logo-intro .mc-logo *, .mc-logo--aja * { animation: none !important; }
}

/* ---------- Palvelusivujen sivupalkki: valikko + brändikortti isolla logolla, pysyy näkyvissä ---------- */
.mc-sivupalkki {
  align-self: start;
  position: sticky;
  top: 110px;
}

.mc-sivupalkki .other-services {
  margin-bottom: 28px;
}

.mc-sivukortti {
  text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--primary) 12%, transparent) 0%, color-mix(in srgb, var(--primary) 0%, transparent) 60%), #1b1b1b;
  border: 1px solid #ffffff1f;
  border-radius: 16px;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 22px 24px;
  display: flex;
  box-shadow: 0 24px 60px -30px #000;
}

.mc-sivukortti .mc-logo--iso {
  width: 100%;
  max-width: 260px;
  height: auto;
  margin-bottom: 6px;
}

.mc-sivukortti__otsikko {
  color: #fff;
  margin: 0;
  font-family: Cabinetgrotesk, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

.mc-sivukortti__teksti {
  color: #ffffffb3;
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.5;
}

.mc-sivukortti__nappi {
  width: 100%;
  margin: 0;
}

.mc-sivukortti__puh {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.mc-sivukortti__puh:hover {
  color: var(--primary);
}

.mc-sivukortti__ajat {
  color: #ffffff80;
  margin: -6px 0 0;
  font-size: 13px;
}

@media screen and (max-width: 991px) {
  .mc-sivupalkki { position: static; }
}

@media screen and (max-width: 767px) {
  .mc-sivukortti { display: none; }
}

/* ---------- Yläpalkki: läpinäkyvä yläkuvan päällä, lasimainen kun sivua vieritetään ---------- */
.navbar {
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}

.navbar .brand-image {
  transition: height .35s ease;
}

html.mc-vieritetty .navbar {
  background-color: #0e0e0ebd;
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  padding-top: 8px;
  padding-bottom: 8px;
  box-shadow: 0 1px 0 #ffffff12, 0 12px 32px -14px #000000d9;
}

html.mc-vieritetty .navbar .brand-image {
  height: 56px;
}

/* Selaimet ilman backdrop-filteriä: tumma tausta, ettei teksti sekoitu */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.mc-vieritetty .navbar { background-color: #0e0e0ef2; }
}

/* ---------- «Ylös»-painike: edistymisrengas + nuoli ---------- */
.mc-ylos {
  z-index: 998;
  color: var(--primary);
  cursor: pointer;
  background-color: #141414cc;
  border: 0;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  display: flex;
  position: fixed;
  /* Oikealla, WhatsApp-painikkeen yläpuolella (sama keskilinja) */
  bottom: var(--mc-ylos-b, 100px);
  right: var(--mc-ylos-r, 31px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px -10px #000000e6, inset 0 0 0 1px #ffffff14;
  opacity: 0;
  visibility: hidden;
  translate: 0 16px;
  scale: .85;
  transition: opacity .3s ease, translate .35s cubic-bezier(.2, .8, .2, 1), scale .35s cubic-bezier(.2, .8, .2, 1), visibility .3s, background-color .25s, color .25s;
}

.mc-ylos.nakyy {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  scale: 1;
}

.mc-ylos__rengas {
  position: absolute;
  inset: 0;
  rotate: -90deg;
}

.mc-ylos .mc-ylos__rata { stroke: #ffffff1f; }
.mc-ylos .mc-ylos__edistys { stroke: currentColor; transition: stroke-dashoffset .1s linear; }

.mc-ylos__nuoli {
  width: 20px;
  height: 20px;
  position: relative;
  transition: translate .25s ease;
}

.mc-ylos:hover {
  color: #111;
  background-color: var(--primary);
}

.mc-ylos:hover .mc-ylos__nuoli { translate: 0 -2px; }
.mc-ylos:hover .mc-ylos__rata { stroke: #0000; }
.mc-ylos:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

@media screen and (max-width: 767px) {
  .mc-ylos {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar, .mc-ylos { transition: none; }
}

/* ===== Varjot ja syvyys (sivuston laajuiset varjot) ===== */
/* Vain neutraalit mustat varjot + teemaväri (var(--primary)) color-mixillä → toimii kaikilla teemoilla.
   HUOM: elementteihin, joita Webflow IX2 animoi (data-w-id / inline transform), EI lisätä transformia —
   niille vain box-shadow, muuten vieritysanimaatiot rikkoutuvat. */
:root {
  --mc-varjo: 0 16px 40px -8px rgb(0 0 0 / .65), 0 4px 12px rgb(0 0 0 / .35), 0 0 0 1px rgb(255 255 255 / .04), inset 0 1px 0 rgb(255 255 255 / .05);
  --mc-varjo-nosto: 0 26px 56px -10px rgb(0 0 0 / .75), 0 6px 14px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .06),
    0 0 0 1px color-mix(in srgb, var(--primary) 30%, transparent),
    0 0 36px -8px color-mix(in srgb, var(--primary) 28%, transparent);
  --mc-varjo-kuva: 0 18px 44px -12px rgb(0 0 0 / .7), 0 4px 12px rgb(0 0 0 / .35);
  --mc-varjo-nappi: 0 6px 18px -6px color-mix(in srgb, var(--primary) 35%, transparent), 0 2px 6px rgb(0 0 0 / .35);
  --mc-varjo-nappi-hover: 0 10px 26px -6px color-mix(in srgb, var(--primary) 55%, transparent), 0 3px 8px rgb(0 0 0 / .4);
}

/* ---------- Kortit, joissa ei IX2-animaatiota: varjo + pehmeä nosto hiirellä ---------- */
.card.social-media-card,
.mc-paketit .mc-paketti {
  box-shadow: var(--mc-varjo);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease, color .3s ease;
}

.card.social-media-card:hover,
.card.social-media-card:focus-visible,
.mc-paketit .mc-paketti:hover {
  transform: translateY(-4px);
  box-shadow: var(--mc-varjo-nosto);
}

/* Suositeltu paketti: teemavärinen reunus säilyy */
.mc-paketit .mc-paketti.featured-pricing {
  box-shadow: 0 0 0 1px var(--primary), var(--mc-varjo), 0 20px 60px -30px color-mix(in srgb, var(--primary) 40%, transparent);
}

.mc-paketit .mc-paketti.featured-pricing:hover {
  box-shadow: 0 0 0 1px var(--primary), 0 22px 48px rgb(0 0 0 / .55), 0 0 44px -8px color-mix(in srgb, var(--primary) 40%, transparent);
}

/* ---------- Staattiset kortit: vain varjo ---------- */
.team-circles .team-card,
.mc-info-card,
.mc-varaus {
  box-shadow: var(--mc-varjo);
}

.mc-sivukortti {
  box-shadow: 0 24px 60px -30px #000, var(--mc-varjo);
}

/* Ajanvarauksen pakettivalinnat: varjo, valittu säilyttää sisäreunuksen */
.mc-varaus .mc-v-paketti, .mc-varaus .mc-v-muu {
  box-shadow: 0 4px 14px rgb(0 0 0 / .3);
  transition: border-color .15s, background-color .15s, box-shadow .3s ease;
}

.mc-varaus .mc-v-paketti:hover, .mc-varaus .mc-v-muu:hover {
  box-shadow: 0 10px 26px rgb(0 0 0 / .45), 0 0 24px -8px color-mix(in srgb, var(--primary) 30%, transparent);
}

.mc-varaus .mc-v-paketti.valittu, .mc-varaus .mc-v-muu.valittu {
  box-shadow: inset 0 0 0 1px var(--v-yellow), 0 10px 26px rgb(0 0 0 / .45), 0 0 28px -8px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* ---------- Palvelukortit (/palvelut, etusivu): IX2 animoi näitä → EI transformia, vain varjo ---------- */
.detailpesu, .autonhakupalvelut, .vahaukset, .pinnoitukset, .myllytykset, .service-wrapper {
  box-shadow: var(--mc-varjo);
  transition: box-shadow .3s ease;
}

.detailpesu:hover, .autonhakupalvelut:hover, .vahaukset:hover,
.pinnoitukset:hover, .myllytykset:hover, .service-wrapper:hover {
  box-shadow: var(--mc-varjo-nosto);
}

/* ---------- Sisältökuvat (pyöristetyt valokuvat esim. /yritys) ---------- */
.image-cover.height-550,
.image-full-block {
  box-shadow: var(--mc-varjo-kuva);
}

/* ---------- Päänapit: hillitty teemavärinen hehku (vain box-shadow, ei transformia) ---------- */
.w-button[class*="kaikki-paketit"],
.primary-button,
.primary-button-copy,
.secondary-button-copy,
.secondary-button-copy-copy-copy,
.mc-v-jatka:not(:disabled) {
  box-shadow: var(--mc-varjo-nappi);
}

.w-button[class*="kaikki-paketit"]:hover,
.primary-button:hover,
.primary-button-copy:hover,
.secondary-button-copy:hover,
.secondary-button-copy-copy-copy:hover,
.mc-v-jatka:not(:disabled):hover {
  box-shadow: var(--mc-varjo-nappi-hover);
}

/* ---------- Korjaukset (animaatiotarkistus) ---------- */
/* Alatunnisteen linkit eivät mahdu riville 768–991 px → vaakavieritys. Rivitetään. */
@media screen and (max-width: 991px) {
  .footer-links-wrapper {
    flex-wrap: wrap;
    row-gap: 12px;
  }
}

/* /yrityksille (2. lomakelohko): otsikko on siirretty left:-399px ja kappale top:-204px/left:-135px
   (vain leveälle desktopille sovitettu) → alle 1280 px otsikko jäi ruudun ulkopuolelle ja kappale leikkautui.
   IX2:n loppuasennot ovat translateX(-42px) ja translateX(-27px) → kompensoidaan left-arvoilla (transformiin ei kosketa). */
@media screen and (max-width: 1279px) {
  .centered-heading.margin-bottom-32px {
    text-align: left;
    top: 0;
    left: 42px;
  }

  .hero-split .margin-bottom-24px-2-copy { left: 27px; }
}

@media screen and (max-width: 991px) {
  .hero-split .margin-bottom-24px-2-copy { top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .card.social-media-card, .mc-paketit .mc-paketti, .mc-varaus .mc-v-paketti, .mc-varaus .mc-v-muu,
  .detailpesu, .autonhakupalvelut, .vahaukset, .pinnoitukset, .myllytykset, .service-wrapper {
    transition: none;
  }

  .card.social-media-card:hover,
  .card.social-media-card:focus-visible,
  .mc-paketit .mc-paketti:hover {
    transform: none;
  }
}