detail page port

styles/_functions.scss

@@ -60,6 +60,14 @@ $mobile-height: get('viewports.mobile.height');
     display: grid;
 }
 
+@mixin hover {
+    @include desktop {
+        &:hover {
+            @content;
+        }
+    }
+}
+
 @mixin reduced-motion {
     @media (prefers-reduced-motion: reduce) {
         @content;
@@ -170,18 +178,66 @@ $mobile-height: get('viewports.mobile.height');
     }
 }
 
-@mixin stagger-animate($stagger: 100, $num-children: 10, $base-delay: 0) {
-    @for $i from 0 through $num-children {
-        &:nth-child(#{$i + 1}) {
-            transition-delay: #{$stagger * $i + $base-delay}ms;
+@mixin text-flip($duration: 400, $easing: linear) {
+    .text {
+        position: relative;
+        display: block;
+        overflow: hidden;
+
+        span {
+            display: inline-block;
+        }
+        span:last-child {
+            position: absolute;
+            inset: 0;
+            transform: translateY(105%);
+        }
+    }
+
+    @include desktop {
+        &:hover,
+        &.active {
+            .text {
+                span:first-child {
+                    animation: button-flip-out $duration $easing forwards;
+                }
+                span:last-child {
+                    animation: button-flip-in $duration $easing forwards;
+                }
+            }
+        }
+    }
+
+    @keyframes button-flip-in {
+        from {
+            transform: translateY(105%);
+        }
+        to {
+            transform: none;
+        }
+    }
+    @keyframes button-flip-out {
+        from {
+            transform: none;
+        }
+        to {
+            transform: translateY(-105%);
         }
     }
 }
 
-@mixin hover {
-    @include desktop {
-        &:hover {
-            @content;
-        }
+@mixin scorecard-dot {
+    &::before {
+        content: '';
+        display: block;
+        width: 46%;
+        aspect-ratio: 1;
+        background: var(--theme-bg);
+        border-radius: 50%;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) scale(0);
+        transition: transform var(--td) var(--te);
     }
 }