/*
Theme Name: Pulse Teema
Description: Pulse Teema 2025
Author: Lycka Reklam AB & Web-kehitys Miikka Asukas
Theme URI: https://lyckareklam.fi/
Author URI: https://miikka-asukas.fi
Version: 1.0
-----------------------------------------------------------------------------*/

*, *::before, *::after {

	box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, p, ul, ol, li, figure, header, section, figcaption, footer, blockquote {

	margin: 0;
	padding: 0;
}

ul, ol {

	list-style: none;
}

b, strong {

	font-weight: 900;
}

html {

  --dark: #2D2D2C;
  --light: #F9F4EB;
  --orange: #EB6140;
  --blue: #ABDBE7;
	--font: "forma-djr-display", -apple-system, BlinkMacSystemFont,  sans-serif;
  --content-width: 98rem;
  --content-padding: clamp(1rem, 4vw, 3.5rem);
}

html, body {

	scroll-behavior: smooth;
	height: 100%;
	width: 100%;
}

body {

	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	text-rendering: optimizeSpeed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1;
	font-size: 16px;
	background: var(--light);
	color: var(--dark);
  font-family: var(--font);
  font-weight: 300;
  font-style: normal;
}

h1, h2, h3, h4, h5 {

  font-style: normal;
  font-weight: 900;
}

::selection {

  background: var(--orange);
  color: var(--light);
}

img::selection {

  background: rgba(255, 255, 255, 0.5);
}

::-moz-selection {

	background: rgba(36, 48, 58, 0.95);
	color: #fff;
}

img {

	display: block;
	max-width: 100%;
}

a {

	color: inherit;
	text-decoration: none;
}

svg {

  display: block;
}

.sr_only {

  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Button */

button, a.button {

  --size: clamp(1rem, 4vw, 1.25rem);
	-webkit-font-smoothing: inherit;
	-moz-osx-font-smoothing: inherit;
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: inline-block;
  margin: 0;
  width: auto;
	overflow: visible;
	outline: none;
	font-family: inherit;
  text-transform: uppercase;
	cursor: pointer;
	user-select: none;
  border: none;
	background: transparent;
  text-align: center;
  transition: none;
}

a.button {

  --color: var(--orange);
  --width: clamp(150px, 12vw, 200px);
  position: relative;
  width: var(--width);
	height: calc(var(--width) / 2);
}

a.button:after {

  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
	width: calc(var(--width) / 2);
  border-radius: 50%;
  border: calc(var(--width) * 0.1) solid var(--color);
}

a.button:before {

  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 4px;
  width: calc(80% + 8px);
  background: var(--color);
  transform-origin: left center;
  transform: translateY(-50%);
}

a.button figure {

  position: absolute;
  top: 50%;
  right: 20%;
  width: calc(var(--width) * 0.14);
  height: calc(var(--width) * 0.14);
  border: 4px solid var(--color);
  border-bottom: 0;
  border-left: 0;
  transform-origin: center;
  transform: translateY(-50%) translateX(25%) scaleY(0.75) rotate(45deg);
  margin: 0;
  padding: 0;
}

button::-moz-focus-inner {

  border: 0;
  padding: 0;
}

button.loading {

	pointer-events: none;
	color: transparent;
}

/* Loader */

.loader, .loading:after {

  border: 0.3rem solid var(--light);
  border-top: 0.3rem solid var(--gold);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: spin 1s linear infinite;
	transition: none;
}

.loading:after {

	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -1rem 0 0 -1rem;
}

@keyframes spin {

  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media screen and (pointer: fine) {

  a.button:hover:before {

    animation: button_line_hover 0.4s ease 0s 1 forwards;
  }

  a.button:hover figure {

    opacity: 0;
    animation: button_arrow_hover 0.3s ease 0.2s 1 forwards;
  }

	a[href^="tel:"]:hover, a[href^="mailto:"]:not(.button):hover {

		text-decoration: underline;
	}
}

@keyframes button_line_hover {

  0% {

    opacity: 0;
    transform: translateY(-50%) scaleX(0);
  }

  100% {

    opacity: 1;
    transform: translateY(-50%) scaleX(1);
  }
}

@keyframes button_arrow_hover {

  0% {

    opacity: 0;
    right: 30%;
  }

  100% {

    opacity: 1;
    right: 20%;
  }
}

/* Menu */

.menu {

	--color: var(--light);
	--color-open: var(--orange);
	--width: 3rem;
	--height: calc(var(--width) * 0.7);
	--border: calc(var(--height) * 0.2);
  display: none;
	min-width: var(--width);
  width: var(--width);
  height: var(--height);
  background: linear-gradient(var(--color) 0, var(--color) 100%);
  background-size: 100% var(--border);
  background-position: center center;
  background-repeat: no-repeat;
  transition: background .1s .1s;
	margin-left: auto;
  border: none;
  padding: 0;
}

.menu:before,
.menu:after {

  content: "";
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  width: 100%;
  height: var(--border);
  background: var(--color);
  transition: .2s all ease;
  transform-origin: center center;
  will-change: transform, color, top;
}

.menu:before {

  top: 0;
}

.menu:after {

	bottom: 0;
}

.menu[aria-expanded="true"] {

	background-size: 100% 0;
	transition: none;
}

.menu[aria-expanded="true"]:before,
.menu[aria-expanded="true"]:after {

	top: 50%;
	bottom: auto;
	transform: translate(-50%, -50%) rotate(45deg);
	background: var(--color-open);
	transition: .2s all ease-out;
}

.menu[aria-expanded="true"]:before {

	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Header */

.header {

  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
  min-height: -moz-available;
  min-height: -webkit-fill-available;
  background-color: var(--orange);
  color: var(--light);
}

@-moz-document url-prefix() {

 	.header {

		height: 100%;
	}
}

.header .fixed {

  display: flex;
  flex-flow: column nowrap;
  position: fixed;
  width: 100%;
  min-height: 100vh;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.header .top {

	position: relative;
  padding: 2.25rem var(--content-padding);
	z-index: 2;
}

.header .top_inner {

  position: relative;
  display: flex;
  justify-content: space-between;
  height: 5.375rem;
  max-width: 102.5rem;
  margin: 0 auto;
}

.header .top_inner:before {

  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg,  rgba(0,0,0,0) calc(50% - 1px), var(--light) calc(50%),  rgba(0,0,0,0) calc(50% + 1px));
  pointer-events: none;
}

.header .top.orange .top_inner:before {

  background: linear-gradient(180deg,  rgba(0,0,0,0) calc(50% - 1px), var(--orange) calc(50%),  rgba(0,0,0,0) calc(50% + 1px));
}

.header .logo {

  align-self: stretch;
  height: 100%;
  width: auto;
}

.header .logo svg {

  height: 100%;
  width: auto;
}

.header svg path {

  fill: var(--light);
}

.header .top.orange svg path {

  fill: var(--orange);
}

.header .top.orange .menu {

	--color: var(--orange);
	--color-open: var(--orange);
}

.header .inner {

  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--content-padding);
	overflow: hidden;
}

.header .inner .box {

	width: 100%;
	max-width: var(--content-width);
}

.header.anim .inner .box {

	display: flex;
	justify-content: center;
	aspect-ratio: 16 / 9;
	pointer-events: none;
}

.header .inner svg {

  width: 75vw;
  max-width: 64rem;
	overflow: visible;
}

.header .inner.orange svg path {

  fill: var(--orange);
}

.header .nav {

  display: flex;
  align-items: flex-end;
  height: 50%;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  gap: 1rem;
  font-weight: 600;
}

.header .top.orange .nav {

  color: var(--orange);
}

.header .nav a[aria-current="page"] {

  color: var(--light);
	background: var(--orange);
}

.header .nav a {

  display: block;
  padding: 0.5rem;
}

.header h1 {

	font-size: clamp(2.25rem, 9vw, 5rem);
  line-height: 1.1;
}

.header .inner.orange h1 {

  color: var(--orange);
}

@media screen and (pointer: fine) {

  .header:not(.bg) .nav a:hover {

    background: var(--light);
    color: var(--orange);
  }

  .header.bg .nav a:Hover {

    color: var(--light);
		background: var(--orange);
  }
}

@media screen and (max-width: 64rem) {

  .header .menu {

    display: block;
  }

  .header .nav {

    flex-flow: column nowrap;
    align-items: center;
    position: absolute;
    top: calc(100% + 1rem);
    left: calc(var(--content-padding) * -1);
    width: calc(100% + var(--content-padding) * 2);
    height: auto;
    background: var(--orange);
    padding: 2rem;
    font-size: clamp(1rem, 6vw, 1.5rem);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top center;
    visibility: hidden;
  }

  .header .top.orange .nav {

    color: var(--light);
  }

  .header .nav a[aria-current="page"] {

    text-decoration: underline;
  }

  .header .nav li {

    opacity: 0;
    transform: translateY(-20px);
  }

  .header .menu[aria-expanded="true"] + .nav {

    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
    transition: 0.3s ease all;
  }

  .header .menu[aria-expanded="true"] + .nav li {

    opacity: 1;
    transform: translateY(0);
    transition: 0.3s 0.1s ease all;
  }

	.header.anim .inner .box {

		transform: translateY(-5rem);
	}

	.header .inner {

		text-align: center;
	}	
}

@media screen and (max-width: 30rem) {

  .header .top_inner {

    height: 4rem;
  }

  .header .top .menu {

  	--width: 2.25rem;
  }
}

/* Content */

main {

  position: relative;
  z-index: 2;
  background: var(--light);
}

.content {

	position: relative;
  padding: 3.5rem var(--content-padding);
}

.content.bg {

  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed, local, scroll;
  background-repeat: no-repeat;
  background-image: var(--bg);
}

.content.bg .fixed_bg {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: var(--bg);
	z-index: -1;
}

.content.orange {

  background: var(--orange);
  color: var(--light);
}

.content.dark {

  background: var(--dark);
  color: var(--light);
}

.content.blue {

  background: var(--blue);
  color: var(--light);
}

.content .inner {

	width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
}

.content .text h2 {

  font-size: clamp(1.75rem, 9vw, 5rem);
  line-height: 1.1;
  padding-bottom: clamp(2rem, 6vw, 3rem);
  color: var(--orange);
}

.content.orange .text h2,
.content.dark .text h2,
.content.blue .text h2 {

  color: var(--light);
}

.content.orange a.button,
.content.dark a.button,
.content.blue a.button {

  --color: var(--light);
}

.content .text p {

  --size: clamp(1rem, 4vw, 1.25rem);
  font-size: var(--size);
  letter-spacing: calc(var(--size) * 0.001 * 80);
  line-height: 1.666;
}

.content .text p + p {

  margin-top: 2.25rem;
}

.content .text p + a.button {

  margin-top: 2.25rem;
}

.content .text .text_wrapper {

  display: flex;
  justify-content: flex-end;
  padding-right: 9%;
}

.content .text .text_inner {

  max-width: 60rem;
}

.content .elem + .elem {

  margin-top: 3.5rem;
}

@media screen and (max-width: 74rem) {

	.content .text p {

		font-weight: 500;
	}
}

@media screen and (max-width: 20rem) {

	.content .text h2	{

		word-break: break-all;
	}
}

/* Text Lift */

.content:has(.text.lift) {

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.content .text.lift h2 {

	line-height: 1.1;
}

.content .text.lift:not(:has(a.button)) h2 {

  padding: 0;
}

.content .text.lift h2 + a.button {

  margin-top: 2.2
}

@media screen and (max-width: 64rem) {

  .content .text {

    text-align: center;
  }

  .content .text .text_wrapper {

    padding-right: 0;
  }
}

/* Contacts */

.contacts {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: clamp(3rem, 6vw, 9rem);
  padding: 0 1rem;
}

.contacts .contact {

  --size: clamp(1rem, 2vw, 1.25rem);
  font-size: var(--size);
  letter-spacing: calc(var(--size) * 0.001 * 80);
  line-height: 1.666;
}

.contacts .contact figure {

  background-color: #fff;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
  aspect-ratio: 1 / 1;
}

.contacts .contact h3 {

  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--orange);
  line-height: 1.1;
  margin: 1rem 0;
}

.contacts .contact a {

  display: block;
}

.contacts .contact p {

  margin-top: 2rem;
}

@media screen and (max-width: 74rem) {

	.contacts .contact {

		font-weight: 500;
	}
}


@media screen and (max-width: 64rem) {

  .contacts {

		text-align: center;
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 40rem) {

  .contacts {

    grid-template-columns: 1fr;
  }
}

/* Animation */

.animation {

}

.animation video {

	display: block;
	width: 100%;
	height: auto;
}

/* Footer */

.footer {

  position: relative;
  padding: 3.5rem var(--content-padding);
  background: var(--orange);
  color: var(--light);
  z-index: 2;
}

.footer .inner {

  max-width: var(--content-width);
  margin: 0 auto;
  text-align: center;
}

.footer a {

  display: block;
  font-size: clamp(1rem, 6vw, 3rem);
  font-weight: 900;
}

.footer a + a {

  margin-top: 1rem;
}

.footer .some {

  display: inline-flex;
  align-items: stretch;
  justify-content: space-between;
  width: 7rem;
  margin-top: 3.5rem;
}

.footer .some a {

  margin: 0;
}

.footer .some svg {

  height: 2.25rem;
  width: auto;
}

.footer .some svg path {

  fill: var(--light);
}

.footer p {

  font-weight: 900;
  font-size: clamp(1rem, 6vw, 1.5rem);
  margin-top: 6rem;
}

/* Animaatiot */

@media screen and (prefers-reduced-motion: no-preference) {

  .header.anim .top svg,
  .header.anim .nav,
  .header .inner h1,
	.content .text h2,
	.content .contacts .contact {

    opacity: 0;
  }

  .header.anim .top_inner:before {

    opacity: 0;
    transform: scaleX(0);
    animation: line_in 0.4s ease 0.2s 1 forwards;
    transform-origin: center left;
  }

  .header.anim .nav {

    animation: fade_in 0.4s ease 0.4s 1 forwards;
  }

  .header.anim .top svg {

    animation: logo_in 0.4s ease 0.5s 1 forwards;
  }

  .header .inner h1 {

    animation: header_in 0.6s ease 0s 1 forwards;
  }

	.content.show .text h2 {

		animation: title_in 0.6s ease 0s 1 forwards;
	}

	.content.show .contacts .contact {

		animation: box_in 0.8s ease 0s 1 forwards;
		animation-delay: calc(var(--i) * 200ms);
	}
}

@media screen and (prefers-reduced-motion: no-preference) and (max-width: 64rem) {

	.content.show .text h2 {

		animation: title_in_2 0.6s ease 0s 1 forwards;
	}
}

@keyframes line_in {

  50% {

    opacity: 1;
  }

  100% {

    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes fade_in {

  to {

    opacity: 1;
  }
}

@keyframes logo_in {

  from {

    opacity: 0;
    transform: translateX(-20%);
  }

  to {

    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes header_in {

  from {

    opacity: 0;
    transform: translateY(20%);
  }

  to {

    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes title_in {

  from {

    opacity: 0;
    transform: translateX(-10%);
  }

  to {

    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes title_in_2 {

  from {

    opacity: 0;
    transform: translateY(20%);
  }

  to {

    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes box_in {

  from {

    opacity: 0;
    transform: translateY(4%);
  }

  to {

    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo Animation */

.animlogo {

	--step: 41.666ms;
	--delay: 600ms;
}

.animlogo > path:nth-of-type(4) {

	transform-origin: top center;
	animation: p_1 calc(4 * var(--step)) linear var(--delay) 1 forwards;
	opacity: 0;
}

.animlogo .p_2 {

	transform-origin: top center;
	animation: p_2_1 calc(6 * var(--step)) linear calc(var(--delay) + 3 * var(--step)) 1 forwards;
	opacity: 0;
}

.animlogo .p_2 path {

	transform-box: fill-box;
	transform-origin: bottom center;
	transform: rotate(-180deg);
	animation: p_2_2 calc(5 * var(--step)) linear calc(var(--delay) + 6 * var(--step)) forwards;
}

.animlogo > path:nth-of-type(8) {

	transform-box: fill-box;
	animation: p_3 calc(8 * var(--step)) linear calc(var(--delay) + 10 * var(--step)) 1 forwards;
	opacity: 0;
}

.animlogo > path:nth-of-type(7) {

	transform-box: fill-box;
	transform-origin: top center;
	animation: p_4 calc(8 * var(--step)) linear calc(var(--delay) + 18 * var(--step)) 1 forwards;
	opacity: 0;
}

.animlogo > path:nth-of-type(1) {

	opacity: 0;
	transform-origin: top center;
	animation: p_5 calc(6 * var(--step)) linear calc(var(--delay) + 24 * var(--step)) 1 forwards;
}

.animlogo > path:nth-of-type(6) {

	transform-origin: top center;
	animation: p_7 calc(6 * var(--step)) linear calc(var(--delay) + 42 * var(--step)) 1 forwards;
	opacity: 0;
}

.animlogo path:nth-of-type(3) {

	transform-box: fill-box;
	transform-origin: top center;
	animation: p_6 calc(10 * var(--step)) linear calc(var(--delay) + 32 * var(--step)) 1 forwards;
	opacity: 0;
}

.animlogo path:nth-of-type(10) {

	transform-box: fill-box;
	transform-origin: top right;
	animation: p_8 calc(8 * var(--step)) linear calc(var(--delay) + 49 * var(--step)) 1 forwards;
	opacity: 0;
}

.animlogo path:nth-of-type(9) {

	transform-origin: top center;
	animation: p_9 calc(6 * var(--step)) linear calc(var(--delay) + 57 * var(--step)) 1 forwards;
	opacity: 0;
}

.animlogo > path:nth-of-type(5) {

	transform-origin: top center;
	animation: p_1 calc(4 * var(--step)) linear calc(var(--delay) + 61 * var(--step)) 1 forwards;
	opacity: 0;
}

.animlogo > path:nth-of-type(2) {

	transform-origin: top center;
	animation: p_10 calc(4 * var(--step)) linear calc(var(--delay) + 65 * var(--step)) 1 forwards;
	opacity: 0;
}

.animlogo path:nth-of-type(11) {

	transform-origin: top center;
	animation: p_11 calc(6 * var(--step)) linear calc(var(--delay) + 68 * var(--step)) 1 forwards;
	opacity: 0;
}

@keyframes p_1 {

	from {

		transform: translateY(100%);
		opacity: 1;
	}

	to {

		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes p_2_1 {

	from {

		transform: translateX(-50%);
		opacity: 1;
	}
	to {

		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes p_2_2 {

	0% {

		transform: rotate(-180deg);
	}

	100% {

		transform: rotate(0deg);
	}
}

@keyframes p_3 {

	0% {

		transform: translateY(-400%) rotate(90deg);
		opacity: 1;
	}

	62.5% {

		transform: translateY(0) rotate(90deg);
		opacity: 1;
	}

	100% {

		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
}

@keyframes p_4 {

	0% {

		transform: translateY(400%) rotate(-270deg);
		opacity: 1;
	}

	50% {

		transform: translateY(0) rotate(-270deg);
		opacity: 1;
	}

	100% {

		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
}

@keyframes p_5 {

	from {

		transform: translateY(-100%);
		opacity: 1;
	}

	to {

		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes p_6 {

	0% {

		transform: translateX(400%) rotate(-270deg);
		opacity: 1;
	}

	40% {

		transform: translateX(0) rotate(-270deg);
		opacity: 1;
	}

	100% {

		transform: translateX(0) rotate(0deg);
		opacity: 1;
	}
}

@keyframes p_7 {

	from {

		transform: translateY(-100%);
		opacity: 1;
	}

	to {

		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes p_8 {

	0% {

		transform: translateY(400%) rotate(-90deg);
		opacity: 1;
	}

	50% {

		transform: translateY(0) rotate(-90deg);
		opacity: 1;
	}

	100% {

		transform: translateY(0) rotate(0deg);
		opacity: 1;
	}
}

@keyframes p_9 {

	from {

		transform: translateX(100%);
		opacity: 1;
	}
	to {

		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes p_10 {

	from {

		transform: translateY(-100%);
		opacity: 1;
	}
	to {

		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes p_11 {

	from {

		transform: translateX(-200%);
		opacity: 0;
	}
	to {

		transform: translateX(0);
		opacity: 1;
	}
}