/*
Theme Name: 	Heroine cab theme
Theme URI: 		https://www.heroine-cab.com/
Description: 	This is a custom child theme made for Heroine cab.
Author: 		Web Weasel
Author URI: 	https://www.webweasel.fr
Template:     	ollie
Version: 		1.0.50
License:      	All rights reserved
Tags:         	blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, rtl-language-support, style-variations, template-editing, theme-options, translation-ready, wide-blocks
Text Domain: 	ollie-child
*/

ul.wp-block-list.is-style-flower li {
    margin: 0;
    padding: 0rem 0 1rem 2.5rem;
    list-style: none;
    background-image: url(./img/flower_optim.webp);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 2rem;
    min-height: 2rem;
}
ul.wp-block-list.is-style-none {
    list-style: none;
}

.wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container-open {
    padding: .4em;
}

/* Complianz */
.cmplz-cookiebanner {
	padding: 1rem !important;
	font-size: .8rem;
}

.cmplz-cookiebanner .cmplz-message p {
	margin: 0;
}

.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	font-size: .8rem !important;
	font-weight: 500 !important;
    line-height: inherit !important;
    padding-top: .6em !important;
    padding-right: 1em !important;
    padding-bottom: .6em !important;
    padding-left: 1em !important;
}

.cmplz-cookiebanner .cmplz-title {
	font-family: var(--wp--preset--font-family--gloria-hallelujah);
    font-style: normal;
	font-size: 1.2rem !important;
    font-weight: 400 !important;
}

/* =========================
   Container global
   ========================= */
#curtains {
  position: fixed;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  pointer-events: none;
  z-index: 9999;
}

/* =========================
   Rideaux
   ========================= */
.curtain {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transition: transform 1.8s ease-in-out;
  will-change: transform;
  overflow: visible;
}

.curtain-left  { left: 0;  transform: translateX(0); }
.curtain-right { right: 0; transform: translateX(0); }

/* =========================
   Tissu avec plis
   ========================= */
.curtain .fabric {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right,
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.05) 25%,
      rgba(255,255,255,0.07) 50%,
      rgba(0,0,0,0.1) 75%,
      rgba(0,0,0,0.3)
    ),
    repeating-linear-gradient(to right,
      rgba(0,0,0,0.18) 0px,
      rgba(0,0,0,0.12) 12px,
      rgba(255,255,255,0.08) 24px,
      rgba(0,0,0,0.10) 36px
    );
  background-color: var(--wp--preset--color--primary);
  background-blend-mode: multiply;
  box-shadow: inset 0 0 50px rgba(0,0,0,0.25);
}

.curtain-left .fabric,
.curtain-right .fabric {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* =========================
   Corde horizontale
   ========================= */
.curtain .tie {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 12px;
  transform: translateY(-50%);
  z-index: 2;
  background: repeating-linear-gradient(
    45deg, #3b3b3b 0px, #3b3b3b 5px, #2a2a2a 5px, #2a2a2a 10px
  );
  border-radius: 6px;
  box-shadow: inset 0 0 4px rgba(255,255,255,0.15),
              0 2px 5px rgba(0,0,0,0.45);
}

/* =========================
   Bout de corde
   ========================= */
.curtain .tie-end {
  position: absolute;
  top: calc(50% - 6px);
  width: 12px;
  height: 55px;
  z-index: 3;
  background: repeating-linear-gradient(
    45deg, #3b3b3b 0px, #3b3b3b 5px, #2a2a2a 5px, #2a2a2a 10px
  );
  border-radius: 6px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  transform-origin: top center;
  animation: sway 2.2s ease-in-out infinite paused;
  animation-play-state: running;
}

.curtain-left  .tie-end { right: 0; }
.curtain-right .tie-end { left: 0; }

/* Effilochage */
.curtain .tie-end::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 50%;
  width: 2px;
  height: 16px;
  transform: translateX(-50%);
  background: #2a2a2a;
  box-shadow:
    -6px 0 #3b3b3b,
    -3px 0 #2a2a2a,
     3px 0 #2a2a2a,
     6px 0 #3b3b3b;
  opacity: 0.95;
}

/* =========================
   Animations
   ========================= */

/* Balancement */
@keyframes sway {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(2deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-2deg); }
  100% { transform: rotate(0deg); }
}

/* Effilochage */
@keyframes fray {
  0% { transform: translateY(0); }
  50% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

/* Pincement tissu gauche */
@keyframes pinchLeft {
  0%   { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
  100% { clip-path: polygon(0% 0%, 100% 0%, 94% 47%, 94% 53%, 100% 100%, 0% 100%); }
}

/* Pincement tissu droit */
@keyframes pinchRight {
  0%   { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); }
  100% { clip-path: polygon(100% 0%, 0% 0%, 6% 47%, 6% 53%, 0% 100%, 100% 100%); }
}

/* Déplacement du bout de corde gauche */
@keyframes tieEndLeftMove {
  0%   { right: 0; }
	100% { right: 6%; }
}

/* Déplacement du bout de corde droit */
@keyframes tieEndRightMove {
  0%   { left: 0; }
  100% { left: 6%; }
}

/* Ouverture */
@keyframes openLeft  { to { transform: translateX(-100%); } }
@keyframes openRight { to { transform: translateX(100%); } }

/* =========================
   Déclenchement
   ========================= */
body.loaded .curtain-left {
  animation: pinchLeft 1.2s ease-in-out forwards,
             openLeft 2s ease-in-out 1.2s forwards;
}
body.loaded .curtain-right {
  animation: pinchRight 1.2s ease-in-out forwards,
             openRight 2s ease-in-out 1.2s forwards;
}

body.loaded .curtain-left .tie-end {
  animation: tieEndLeftMove 1.2s ease-in-out forwards,
             sway 2.8s ease-in-out infinite paused 1.2s;
}
body.loaded .curtain-right .tie-end {
  animation: tieEndRightMove 1.2s ease-in-out forwards,
             sway 2.8s ease-in-out infinite paused 1.2s;
}

body.loaded .curtain .tie-end::after {
  animation: fray 0.6s ease-in-out 0.6s 1;
}

/* =========================
   Accessibilité
   ========================= */
@media (prefers-reduced-motion: reduce) {
  #curtains { display: none; }
  .curtain, .fabric { animation: none; transition: none; }
}