/*
Theme Name: Divi Child
Template: Divi
TEST
*/

/* Basisposition für das Bild-Wrapping auf der Hauptseite */
#AnaraResidenzFrame .et_pb_image_wrap{
    position:relative;               /* falls noch nicht gesetzt */
}

/* Wrapper um das drehende SVG */
.shining-outer{
    position:absolute;
    top:79%; left:50%;  /* top:79% Korrektur, damit des mit der Anara Sonne übereinstimmt */
    width:60%; height:60%;
    transform:translate(-50%,-50%) scale(1) translateY(50%);
    opacity:0;
    pointer-events:none;
    z-index:0;
    transition:transform 4s linear, opacity 1.5s ease-in-out 0.5s;
}

/* beide Rotatoren sollen sich exakt überlagern  (pure Rotation – berührt die Übersetzungen der .shining-outer nicht) */
.shining-rotator{
    position:absolute;     /* NEU – überlagert statt untereinander  */
    top:0; left:0;
    width:100%; height:100%;
    /* die konkrete Animation-Dauer wird inline gesetzt */
}

@keyframes spin-cw  {from{transform:rotate(0deg);}   to{transform:rotate(360deg);} }
@keyframes spin-ccw {from{transform:rotate(0deg);}   to{transform:rotate(-360deg);} }






/* 1) Grundschutz: keine horizontale Scrolleiste/Bewegung */
html, body {
  overflow-x: hidden;
  overscroll-behavior-x: none; /* stoppt horizontales Overscroll ins Viewport */
  touch-action: pan-y pinch-zoom; /* blockt horizontales Panning, Zoom erlaubt */
}














.et_pb_flip_box .et_pb_flip_box_icon {
    font-family: 'anara-font' !important;
}

.showanaraicon {
	  color: #70002c;
}

.FooterMenu, .FooterMenu a {
    color: whitesmoke!important;
}

.et_pb_team_member_image {
    max-width: 100%;
    margin-right: 0px;
}

.hyphen, .menu-item {
    word-break: break-word;
    hyphens: auto;
}

/*
h1, h2, h3, h4 {
    word-break: normal;
    hyphens: none;
}
*/






/* alle Frame-Ziele nach vorn holen */
#Intention1,
#Intention2,
#Intention3,
#Intention4 {
    position: relative;   /* erzeugt Stacking-Context   */
    z-index: 9000;        /* höher als das Canvas (1000)*/
}





/*GATE == Magenta Lichtschein == Persönlichkeitsberatung und Prana */
/*SUN  == Copper Lichtschein  == Feng Shiu und Neutrakon */

/* ---------------------------------------------------
   ::before   FIXE PSEUDO-ELEMENTE
   ---------------------------------------------------*/
.gatebooster::before            { background:url('/wp-content/uploads/2025/03/StarShining.svg'); }
.sunbooster::before             { background:url('/wp-content/uploads/2025/03/SunShining.svg');  }

/* ---------------------------------------------------
   ::after   ROTIERENDE PSEUDO-ELEMENTE
   ---------------------------------------------------*/
.gatebooster::after            { background:url('/wp-content/uploads/2025/03/GateShining1.svg'); }
.sunbooster::after             { background:url('/wp-content/uploads/2025/03/GateShining2.svg');  }

/* Grund­einstellungen, gelten für ::before UND ::after  */
.gatebooster::before,
.gatebooster::after,
.sunbooster::before,
.sunbooster::after {
    content:"";
    position:absolute;
    top:-22%;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    height:130%;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0;                              /* erst bei Hover sichtbar */
    transition:opacity .9s ease-in-out;
    z-index: -1; /* Hover-Bild kommt hinter das normale Hintergrundbild */
    pointer-events:none;
}

.gatebooster::after,
.sunbooster::after{
    z-index:-2;                             /* -2 liegt unter ::before  */
    top:-1%;
    width:70%;
    height:70%;
    animation-duration:90s;                 /* 90 s pro Umdrehung    */
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

/* Hover-Effekt – beide Lichtscheine einblenden */
.gatebooster:hover::before,
.gatebooster:hover::after,
.sunbooster:hover::before,
.sunbooster:hover::after { opacity:1; }

/* ---------------------------------------------------
   zwei Keyframes – vorwärts & rückwärts
   ---------------------------------------------------*/
@keyframes gatespin-cw  { from{transform:translateX(-50%) rotate(0deg);}
                      to  {transform:translateX(-50%) rotate(360deg);} }

@keyframes gatespin-ccw { from{transform:translateX(-50%) rotate(0deg);}
                      to  {transform:translateX(-50%) rotate(-360deg);} }

/* Klassen, die die Richtung festlegen
   (werden per JS einmal zufällig verteilt – siehe unten) */
.gatespin-cw::after  { animation-name: gatespin-cw;  }
.gatespin-ccw::after { animation-name: gatespin-ccw; }

/* Rest per JS*/









/*Tor vergrößerer*/
.gatebooster, .sunbooster {
    background-size: 100% !important;
    background-position: center;
    transition: background-size 1s ease-in-out;
}
.gatebooster:hover, .sunbooster:hover {
    background-size: 105% !important;
}




@keyframes lightFlash {
    0% {
        box-shadow: 0px 0px 0px 0 rgba(255, 216, 0, 0.0); /* Kein Leuchten */
    }
    50% {
        box-shadow: 0px 0px 200px 910% rgba(255, 217, 0, 0.9); /* Helles Leuchten */
    }
    100% {
        box-shadow: 0px 0px 0px 0 rgba(255, 218, 0, 0.0); /* Zurücksetzen */
    }
}

#imageSun {
    transition: none; /* Entfernt alle Übergänge, die die Animation stören könnten */
}

#imageSun::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0px 0px 0px 0 rgba(255, 215, 0, 0.0); /* Initial kein Lichtreflex */
    animation: lightFlash 1s ease-in-out 1; /* Einmalige Animation */
    pointer-events: none; /* Verhindert, dass es mit dem Bild interagiert */
}


.glitter-effect::after {
    content: "";
    position: absolute;
    top: 95%;
    left: -30%;
    width: 30%;
    height: 5px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    filter: blur(3px);
    animation: glitter-move 2s linear infinite;
}

@keyframes glitter-move {
    0% {
        left: -30%;
    }
    100% {
        left: 130%;
    }
}

























/****************************************************************************
 ********************   HAUPT SEITE   ***************************************
 * war als Custom CSS in #fountainContainer
 **************************************************************************** /


/* CSS Document */
/* fountainBackImage zunächst komplett ausgeblendet */
#fountainBackImageDiv {
    opacity: 0;
    pointer-events: none;
    margin-left: auto;
    margin-right: auto;
    max-height: 6000px;
}

/* Die imgBox, die dynamisch kippt und relativ zum Hintergrundbild zentriert wird
   Sie beinhaltet #imgLogo und #imgAqua mit .out-faded / .in-faded
   #imgBox hat .image-container
*/
.fountain-section #imgBox {
    max-width: 100%;
    height: auto;
    position: absolute;
    top: -12%; /* 27% */
    /* left: 15.5%;*/
    /* width: 80%;*/ /* 49%*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    pointer-events: none;

    transform: scale(0.7); /* Startgröße: 70 % */
    /*transition: transform 1s ease-in-out;*/ /* Sanfte Übergangsdauer 1 Sekunde */
    /*transform-origin: center center;*/ /* Optional: Skalierung vom Mittelpunkt aus */
}

/* #imgBox hat .image-container */
.image-container {
	position: relative;
	width: 600px;
	transition: transform 2s ease-in-out;
	transform-style: preserve-3d;
	transform-origin: center bottom;
}
.image-container img {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity 2s ease-in-out;
	backface-visibility: hidden;
}
#imgAqua, #imgLogo {
	position: absolute;
	top: 0;
	left: 0;
}
#imgLogo {
	transition: opacity 2s ease-in-out;
}
.tilt {
	transform: rotateX(81deg);
}
.out-faded {
	opacity: 0;
}
.in-faded {
	opacity: 1;
}
.half-faded {
	opacity: .5;
}


#btnToggleSound {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  font-size: 26px;
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

#btnToggleSound:hover {
  background: rgba(0,0,0,0.7);
}


/* #TeamA Bilder wechseln */
/* Container vorbereiten */
#TeamA .et_pb_team_member_image{
  position: relative;
}
/* Das überblendete (zweite) Bild liegt oben drüber */
#TeamA .et_pb_team_member_image img.nsw-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;            /* behält das Seitenverhältnis bei */
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;    /* Klicks gehen durch */
}
/* sichtbar = eingeblendet */
#TeamA .et_pb_team_member_image img.nsw-overlay.visible {
  opacity: 1;
}

/* #TeamB Bilder wechseln */
/* Container vorbereiten */
#TeamB .et_pb_team_member_image{
  position: relative;
}
/* Das überblendete (zweite) Bild liegt oben drüber */
#TeamB .et_pb_team_member_image img.nsw-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;            /* behält das Seitenverhältnis bei */
  opacity: 0;
  transition: opacity 1s ease-in-out;
  pointer-events: none;    /* Klicks gehen durch */
}
/* sichtbar = eingeblendet */
#TeamB .et_pb_team_member_image img.nsw-overlay.visible {
  opacity: 1;
}