/*
Theme Name: Rich27
Theme URI: https://richwp.com/themes/rich27
Author: Felix Krusch
Author URI: https://richwp.com
Description: minimal but sophisticated
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 7.2.24
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rich27
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news, woocommerce, ecommerce
*/

body {overflow-x: hidden !important;}










/* Existing Effects (unchanged) */
[class*="rich-effect-"] {
    opacity: 0;
    transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.rich-effect-animate {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.rich-effect-fade {
    opacity: 0;
}

.rich-effect-animate.rich-effect-fade {
    opacity: 1;
}

.rich-effect-slide-left {
    transform: translateX(-50px);
}

.rich-effect-slide-right {
    transform: translateX(50px);
}

.rich-effect-slide-up {
    transform: translateY(50px);
}

.rich-effect-slide-down {
    transform: translateY(-50px);
}

.rich-effect-animate.rich-effect-slide-left,
.rich-effect-animate.rich-effect-slide-right,
.rich-effect-animate.rich-effect-slide-up,
.rich-effect-animate.rich-effect-slide-down {
    transform: translate(0, 0);
}

.rich-effect-zoom-in {
    transform: scale(0.8);
}

.rich-effect-zoom-out {
    transform: scale(1.2);
}

.rich-effect-animate.rich-effect-zoom-in,
.rich-effect-animate.rich-effect-zoom-out {
    transform: scale(1);
}

/* Scroll Effects */
.rich-effect-scale-scroll {
    transform: scale(1);
    transition: transform 0.3s ease;
}

.rich-effect-fade-scroll {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rich-effect-horizontal-scroll {
    transform: translateX(0);
    transition: transform 0.8s ease; /* Smooth transition */
    opacity: 1; /* Ensure always visible */
}

.rich-effect-horizontal-scroll.rich-effect-horizontal-active {
    transform: translateX(-200px); /* Move left 200px when active */
}

.rich-effect-text-wipe .rich-wipe-char {
    display: inline-block;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: pre; /* Preserve spaces */
}



/* Sticky Scroll Sync */
@media (max-width: 767px), (min-width: 768px) and (orientation: portrait) {
  .rich-sticky-scroll-sync-grid {
    grid-template-columns: 1fr !important;
  }
}
.rich-sticky-scroll-sync-grid > .sticky-placeholder {
  min-height: 100vh;
}
.rich-sticky-scroll-sync-left {
  position: fixed;
  height: 100vh;
  overflow: hidden;
  z-index: 2;
}
.rich-sticky-scroll-sync-left > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.rich-sticky-scroll-sync-left > .active {
  opacity: 1;
}



  
/* Post Format Icons */
  .post_format-post-format-video .wp-block-post-title::before,
  .single-format-video .wp-block-post-title::before,
  .post_format-post-format-gallery .wp-block-post-title::before,
  .single-format-gallery .wp-block-post-title::before,
  .post_format-post-format-audio .wp-block-post-title::before,
  .single-format-audio .wp-block-post-title::before,
  .post_format-post-format-image .wp-block-post-title::before,
  .single-format-image .wp-block-post-title::before,
  .post_format-post-format-aside .wp-block-post-title::before,
  .single-format-aside .wp-block-post-title::before,
  .post_format-post-format-status .wp-block-post-title::before,
  .single-format-status .wp-block-post-title::before,
  .post_format-post-format-link .wp-block-post-title::before,
  .single-format-link .wp-block-post-title::before,
  .post_format-post-format-quote .wp-block-post-title::before,
  .single-format-quote .wp-block-post-title::before,
  .post_format-post-format-chat .wp-block-post-title::before,
  .single-format-chat .wp-block-post-title::before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    margin-right: 0.15em;
    line-height: 1.5; /* prevent extra spacing from line-height */
    transform: translateY(-0.1em);
  
    -webkit-mask: url("assets/images/icon-play-circle.svg") no-repeat center;
            mask: url("assets/images/icon-play-circle.svg") no-repeat center;
    -webkit-mask-size: 80% 80%;
            mask-size: 80% 80%;
    
    background-color: currentColor;
  }
  
  .post_format-post-format-gallery .wp-block-post-title::before,
  .single-format-gallery .wp-block-post-title::before {
    -webkit-mask: url("assets/images/icon-images.svg") no-repeat center;
    mask: url("assets/images/icon-images.svg") no-repeat center;
    -webkit-mask-size: 80% 80%;
            mask-size: 80% 80%;
  }

  .post_format-post-format-audio .wp-block-post-title::before,
  .single-format-audio .wp-block-post-title::before {
    -webkit-mask: url("assets/images/icon-volume-down-fill.svg") no-repeat center;
    mask: url("assets/images/icon-volume-down-fill.svg") no-repeat center;
    -webkit-mask-size: 80% 80%;
            mask-size: 80% 80%;
  }

  .post_format-post-format-image .wp-block-post-title::before,
  .single-format-image .wp-block-post-title::before {
    -webkit-mask: url("assets/images/icon-image.svg") no-repeat center;
    mask: url("assets/images/icon-image.svg") no-repeat center;
    -webkit-mask-size: 80% 80%;
            mask-size: 80% 80%;
  }

  .post_format-post-format-aside .wp-block-post-title::before,
  .single-format-aside .wp-block-post-title::before {
    -webkit-mask: url("assets/images/icon-emoji-smile-upside-down.svg") no-repeat center;
    mask: url("assets/images/icon-emoji-smile-upside-down.svg") no-repeat center;
    -webkit-mask-size: 80% 80%;
            mask-size: 80% 80%;
  }

  .post_format-post-format-status .wp-block-post-title::before,
  .single-format-status .wp-block-post-title::before {
    -webkit-mask: url("assets/images/icon-heart.svg") no-repeat center;
    mask: url("assets/images/icon-heart.svg") no-repeat center;
    -webkit-mask-size: 80% 80%;
            mask-size: 80% 80%;
  }

  .post_format-post-format-link .wp-block-post-title::before,
  .single-format-link .wp-block-post-title::before {
    -webkit-mask: url("assets/images/icon-link-45deg.svg") no-repeat center;
    mask: url("assets/images/icon-link-45deg.svg") no-repeat center;
    -webkit-mask-size: 80% 80%;
            mask-size: 80% 80%;
  }

  .post_format-post-format-quote .wp-block-post-title::before,
  .single-format-quote .wp-block-post-title::before {
    -webkit-mask: url("assets/images/icon-quote.svg") no-repeat center;
    mask: url("assets/images/icon-quote.svg") no-repeat center;
    -webkit-mask-size: 80% 80%;
            mask-size: 80% 80%;
  }

  .post_format-post-format-chat .wp-block-post-title::before,
  .single-format-chat .wp-block-post-title::before {
    -webkit-mask: url("assets/images/icon-chat-quote.svg") no-repeat center;
    mask: url("assets/images/icon-chat-quote.svg") no-repeat center;
    -webkit-mask-size: 80% 80%;
            mask-size: 80% 80%;
  }

  /* RichSlider */
  .richslider {
    overflow-x: hidden !important;
  }


/* Rich Details Block */
.rich-details.wp-block-details summary {
  list-style: none;
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rich-details.wp-block-details summary::-webkit-details-marker,
.rich-details.wp-block-details summary::marker {
  display: none;
}

/* Insert your custom marker using ::after so it appears on the right with the accent color */
.rich-details.wp-block-details summary::after {
  content: "+";
  transition: transform 0.2s ease;
  color: var(--wp--preset--color--accent-1);
  margin-left: 50px;
  display: block;
}

/* Rotate marker when details is open */
.rich-details.wp-block-details[open] summary::after {
  transform: rotate(45deg);
}

.rich-details.wp-block-details > :not(summary) {
  max-width: var(--wp--style--global--content-size);
}







html, body {
  overflow-x: hidden;
}

.page-transition-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  background-color: var(--wp--preset--color--contrast);
  transform: translateY(-100%);
}

.rich-transition {
  animation-duration: 0.7s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

/* FADE */
.fade-out { animation-name: fadeOut; }
.fade-in { animation-name: fadeIn; }

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* SLIDE - exit to right, entry from right */
.slide-out { animation-name: slideOutRight; }
.slide-in { animation-name: slideInRight; }

@keyframes slideOutRight {
  from { transform: translateX(0%); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0%); opacity: 1; }
}

/* SCALE - entrance small to normal, exit normal to small */
.scale-out { animation-name: scaleOut; }
.scale-in { animation-name: scaleIn; }

@keyframes scaleOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.8); opacity: 0; }
}

@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* WIPE */
.wipe-in {
  animation-name: wipeIn;
}

.wipe-out {
  animation-name: wipeOut;
}

@keyframes wipeOut {
  from { transform: translateY(-100%); }
  to { transform: translateY(0%); }
}

@keyframes wipeIn {
  from { transform: translateY(0%); }
  to { transform: translateY(-100%); }
}

.rich-text-blend {
  opacity: 1;
}

.rich-blend-char {
  opacity: 0.3;
}

.rich-skew {transform: matrix(1, -.12, 0, .99, 0, 0);}
.rich-skew-opp {transform: matrix(1, 0.12, 0, 1.01, 0, 0);}

/* Page Template specific */
.post-template-single-hero-image .rich27-title-author-date-box{padding-left:0 !important; padding-right:0 !important;}